diff --git a/.workbench/Screenshot_5.png b/.workbench/Screenshot_5.png new file mode 100644 index 0000000..25f5b39 Binary files /dev/null and b/.workbench/Screenshot_5.png differ diff --git a/.workbench/Screenshot_6.png b/.workbench/Screenshot_6.png new file mode 100644 index 0000000..4770812 Binary files /dev/null and b/.workbench/Screenshot_6.png differ diff --git a/.workbench/Screenshot_7.png b/.workbench/Screenshot_7.png new file mode 100644 index 0000000..bcf25ad Binary files /dev/null and b/.workbench/Screenshot_7.png differ diff --git a/wwwroot/icons/exclamation.svg b/wwwroot/icons/exclamation.svg new file mode 100644 index 0000000..ce5eada --- /dev/null +++ b/wwwroot/icons/exclamation.svg @@ -0,0 +1,4 @@ + + + + diff --git a/wwwroot/icons/eye.svg b/wwwroot/icons/eye.svg new file mode 100644 index 0000000..7e9da41 --- /dev/null +++ b/wwwroot/icons/eye.svg @@ -0,0 +1,2 @@ + + diff --git a/wwwroot/icons/warning.svg b/wwwroot/icons/warning.svg new file mode 100644 index 0000000..cf7068e --- /dev/null +++ b/wwwroot/icons/warning.svg @@ -0,0 +1,2 @@ + + diff --git a/wwwroot/poc-detail-drawer.html b/wwwroot/poc-detail-drawer.html index 1d8ef28..b7d72fe 100644 --- a/wwwroot/poc-detail-drawer.html +++ b/wwwroot/poc-detail-drawer.html @@ -143,7 +143,7 @@ opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; - z-index: 1000; + z-index: 900; } swp-detail-drawer-overlay.open { @@ -164,7 +164,7 @@ transition: transform 200ms ease; display: flex; flex-direction: column; - z-index: 1001; + z-index: 1000; /* Drawer 1 - top */ } swp-detail-drawer.open { @@ -555,7 +555,7 @@ opacity 200ms ease; display: flex; flex-direction: column; - z-index: 1000; + z-index: 990; /* Drawer 2 - middle */ } swp-journal-panel.open { @@ -652,6 +652,18 @@ background: var(--color-text-secondary); } + /* Tab Content Container */ + swp-journal-tab-content { + display: none; + flex-direction: column; + flex: 1; + overflow: hidden; + } + + swp-journal-tab-content.active { + display: flex; + } + /* Tab Content Header */ swp-journal-tab-header { display: flex; @@ -730,11 +742,16 @@ padding: 4px 10px; font-size: 11px; font-weight: 600; - color: #92400e; - background: color-mix(in srgb, var(--b-color-amber) 20%, var(--b-mix)); + color: var(--b-color-blue); + background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix)); border-radius: 4px; } + swp-journal-entry-type.farveformel { + color: var(--color-teal); + background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix)); + } + swp-journal-entry-date { font-size: 12px; color: var(--color-text-secondary); @@ -761,6 +778,56 @@ border-radius: 12px; } + /* Tag Colors - Journal Panel */ + swp-journal-tag.tag-note, + swp-journal-tag:contains('Fri note') { + background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix)); + border-color: var(--b-color-blue); + color: var(--b-color-blue); + } + swp-journal-tag.tag-sensitiv { + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + border-color: #8b5cf6; + color: #7c3aed; + } + swp-journal-tag.tag-allergi { + background: color-mix(in srgb, var(--b-color-red) 15%, var(--b-mix)); + border-color: var(--b-color-red); + color: var(--b-color-red); + } + swp-journal-tag.tag-praference { + background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix)); + border-color: var(--color-teal); + color: var(--color-teal); + } + swp-journal-tag.tag-anbefaling { + background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix)); + border-color: var(--b-color-amber); + color: #b45309; + } + + /* Farveformel Tags */ + swp-journal-tag.tag-farveformel { + background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix)); + border-color: var(--color-teal); + color: var(--color-teal); + } + swp-journal-tag.tag-kold-tone { + background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix)); + border-color: var(--b-color-blue); + color: var(--b-color-blue); + } + swp-journal-tag.tag-toning { + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + border-color: #8b5cf6; + color: #7c3aed; + } + swp-journal-tag.tag-balayage { + background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix)); + border-color: var(--b-color-amber); + color: #b45309; + } + swp-journal-entry-delete { padding: 4px 6px; font-size: 14px; @@ -781,6 +848,71 @@ font-size: 13px; color: var(--color-text); line-height: 1.5; + white-space: pre-line; + } + + swp-journal-entry-text .mono { + font-family: var(--font-mono); + } + + /* Entry Footer - Dato, Synlighed & Markering */ + swp-journal-entry-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid var(--color-border); + } + + swp-journal-entry-footer swp-journal-entry-date { + font-size: 12px; + color: var(--color-text-secondary); + } + + swp-journal-entry-icons { + display: flex; + align-items: center; + gap: 12px; + } + + swp-journal-entry-visibility, + swp-journal-entry-marking { + display: inline-flex; + align-items: center; + gap: 5px; + font-size: 11px; + color: var(--color-text-secondary); + } + + swp-journal-entry-visibility .entry-icon, + swp-journal-entry-marking .entry-icon { + width: 18px; + height: 18px; + filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%); + } + + swp-journal-entry-marking.hidden { + display: none; + } + + /* Preview Entry */ + swp-journal-entry.preview { + border: 2px dashed var(--color-teal); + opacity: 1; + transform: translateY(0); + transition: opacity 200ms ease, transform 200ms ease, max-height 300ms ease; + max-height: 2000px; + } + + swp-journal-entry.preview.hidden { + opacity: 0; + transform: translateY(-20px); + max-height: 0; + margin: 0; + padding: 0; + overflow: hidden; + border: none; } /* Journal Profile Section */ @@ -1413,6 +1545,401 @@ swp-status-option.opt-cancelled { color: var(--color-text-secondary); } swp-status-option.opt-cancelled swp-status-dot { background: var(--color-text-secondary); } + + /* ========================================== + ADD NOTE PANEL + ========================================== */ + swp-add-note-panel { + position: fixed; + top: 0; + right: 340px; /* Same as journal - starts behind it */ + bottom: 0; + width: 440px; + background: var(--color-surface); + border-left: 1px solid var(--color-border); + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); + transform: translateX(0); /* Behind journal panel */ + visibility: hidden; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), + visibility 0ms 250ms; + display: flex; + flex-direction: column; + z-index: 980; /* Drawer 3 - bottom */ + } + + swp-add-note-panel.open { + transform: translateX(-100%); /* Slide out to the left */ + visibility: visible; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), + visibility 0ms 0ms; + } + + swp-add-note-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + border-bottom: 1px solid var(--color-border); + background: var(--color-background-alt); + } + + swp-add-note-title { + font-size: 16px; + font-weight: 600; + color: var(--color-text); + } + + swp-add-note-close { + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + font-size: 18px; + color: var(--color-text-secondary); + transition: background 150ms ease; + } + + swp-add-note-close:hover { + background: var(--color-background-hover); + } + + swp-add-note-content { + flex: 1; + overflow-y: auto; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; + } + + swp-add-note-desc { + font-size: 13px; + color: var(--color-text-secondary); + line-height: 1.4; + } + + swp-add-note-field { + display: flex; + flex-direction: column; + gap: 8px; + } + + swp-add-note-label { + font-size: 12px; + color: var(--color-text-secondary); + } + + /* Tags */ + swp-add-note-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + } + + swp-add-note-tag-option { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 6px 14px; + font-size: 13px; + border-radius: 16px; + border: 1px solid var(--color-border); + cursor: pointer; + transition: all 150ms ease; + } + + swp-add-note-tag-option::before { + content: ''; + width: 8px; + height: 8px; + border-radius: 50%; + border: 1px solid var(--color-border); + transition: all 150ms ease; + } + + swp-add-note-tag-option:hover { + background: var(--color-background-hover); + } + + swp-add-note-tag-option.selected { + background: color-mix(in srgb, var(--b-color-blue) 12%, var(--b-mix)); + border-color: var(--b-color-blue); + } + + /* Tag Colors - Add Note Panel */ + swp-add-note-tag-option[data-tag="note"].selected { + background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix)); + border-color: var(--b-color-blue); + color: var(--b-color-blue); + } + swp-add-note-tag-option[data-tag="sensitiv"].selected { + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + border-color: #8b5cf6; + color: #7c3aed; + } + swp-add-note-tag-option[data-tag="allergi"].selected { + background: color-mix(in srgb, var(--b-color-red) 15%, var(--b-mix)); + border-color: var(--b-color-red); + color: var(--b-color-red); + } + swp-add-note-tag-option[data-tag="praference"].selected { + background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix)); + border-color: var(--color-teal); + color: var(--color-teal); + } + swp-add-note-tag-option[data-tag="anbefaling"].selected { + background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix)); + border-color: var(--b-color-amber); + color: #b45309; + } + /* Farveformel tags */ + swp-add-note-tag-option[data-tag="farveformel"].selected { + background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix)); + border-color: var(--color-teal); + color: var(--color-teal); + } + swp-add-note-tag-option[data-tag="kold-tone"].selected { + background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix)); + border-color: var(--b-color-blue); + color: var(--b-color-blue); + } + swp-add-note-tag-option[data-tag="toning"].selected { + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + border-color: #8b5cf6; + color: #7c3aed; + } + swp-add-note-tag-option[data-tag="balayage"].selected { + background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix)); + border-color: var(--b-color-amber); + color: #b45309; + } + + swp-add-note-tag-option.selected::before { + background: var(--b-color-blue); + border-color: var(--b-color-blue); + } + swp-add-note-tag-option[data-tag="note"].selected::before { + background: var(--b-color-blue); + border-color: var(--b-color-blue); + } + swp-add-note-tag-option[data-tag="sensitiv"].selected::before { + background: #8b5cf6; + border-color: #8b5cf6; + } + swp-add-note-tag-option[data-tag="allergi"].selected::before { + background: var(--b-color-red); + border-color: var(--b-color-red); + } + swp-add-note-tag-option[data-tag="praference"].selected::before { + background: var(--color-teal); + border-color: var(--color-teal); + } + swp-add-note-tag-option[data-tag="anbefaling"].selected::before { + background: var(--b-color-amber); + border-color: var(--b-color-amber); + } + /* Farveformel tags ::before */ + swp-add-note-tag-option[data-tag="farveformel"].selected::before { + background: var(--color-teal); + border-color: var(--color-teal); + } + swp-add-note-tag-option[data-tag="kold-tone"].selected::before { + background: var(--b-color-blue); + border-color: var(--b-color-blue); + } + swp-add-note-tag-option[data-tag="toning"].selected::before { + background: #8b5cf6; + border-color: #8b5cf6; + } + swp-add-note-tag-option[data-tag="balayage"].selected::before { + background: var(--b-color-amber); + border-color: var(--b-color-amber); + } + + swp-add-note-tip { + font-size: 11px; + color: var(--color-teal); + font-style: italic; + } + + /* Textarea */ + swp-add-note-content textarea { + width: 100%; + min-height: 120px; + padding: 12px; + font-family: inherit; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + resize: vertical; + line-height: 1.5; + } + + swp-add-note-content textarea:focus { + outline: none; + border-color: var(--color-teal); + } + + /* Dropdowns */ + swp-add-note-dropdowns { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + } + + swp-add-note-dropdown-group { + display: flex; + flex-direction: column; + gap: 6px; + } + + swp-add-note-dropdown-group select { + padding: 10px 12px; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface); + cursor: pointer; + } + + swp-add-note-dropdown-group select:focus { + outline: none; + border-color: var(--color-teal); + } + + swp-add-note-help { + font-size: 11px; + color: var(--color-teal); + } + + /* Footer */ + swp-add-note-footer { + display: flex; + gap: 8px; + padding: 16px 20px; + border-top: 1px solid var(--color-border); + } + + swp-add-note-btn { + flex: 1; + padding: 10px 16px; + font-size: 13px; + font-weight: 500; + border-radius: 6px; + cursor: pointer; + text-align: center; + transition: all 150ms ease; + } + + swp-add-note-btn.primary { + background: var(--color-teal); + color: white; + border: none; + } + + swp-add-note-btn.primary:hover { + background: #00796b; + } + + swp-add-note-btn.secondary { + background: var(--color-surface); + border: 1px solid var(--color-border); + color: var(--color-text); + } + + swp-add-note-btn.secondary:hover { + background: var(--color-background-hover); + } + + /* ========================================== + FARVEFORMEL PANEL (extends add-note styles) + ========================================== */ + swp-farveformel-panel { + position: fixed; + top: 0; + right: 340px; + bottom: 0; + width: 440px; + background: var(--color-surface); + border-left: 1px solid var(--color-border); + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1); + transform: translateX(0); + visibility: hidden; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), + visibility 0ms 250ms; + display: flex; + flex-direction: column; + z-index: 980; + } + + swp-farveformel-panel.open { + transform: translateX(-100%); + visibility: visible; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), + visibility 0ms 0ms; + } + + /* Farveformel-specific: 2-column grid layout */ + swp-add-note-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + } + + swp-add-note-field.full-width { + grid-column: 1 / -1; + } + + /* Input styling for farveformel */ + swp-farveformel-panel input[type="text"] { + padding: 10px 12px; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface); + } + + /* Monospace for formula fields */ + swp-farveformel-panel input#ffFormel, + swp-farveformel-panel input#ffBlandingsforhold { + font-family: var(--font-mono); + } + + swp-farveformel-panel input[type="text"]:focus { + outline: none; + border-color: var(--color-teal); + } + + swp-farveformel-panel select { + padding: 10px 12px; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface); + cursor: pointer; + } + + swp-farveformel-panel select:focus { + outline: none; + border-color: var(--color-teal); + } + + swp-farveformel-panel textarea { + width: 100%; + min-height: 100px; + padding: 12px; + font-family: inherit; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface); + resize: vertical; + line-height: 1.5; + } + + swp-farveformel-panel textarea:focus { + outline: none; + border-color: var(--color-teal); + } @@ -1469,54 +1996,141 @@ - Noter - Farveformler + Noter + Farveformler Analyse - - - Kunde-journal (langsigtet) - Private noter om hår, formler, reaktioner og anbefalinger. Kunden ser det ikke. - + Tilføj note - + + + + Kunde-journal (langsigtet) + Private noter om hår, reaktioner og anbefalinger. Kunden ser det ikke. + + Tilføj note + - - - - - Journal - 12. nov 2025 - Af: Maja - - Farveformel - Kold tone - - 🗑 - - - Formel: 7/1 + 7/0 (1:1) + 1.9% • 15 min.
- Resultat: neutral/kold, god glans. Undgå varme toner næste gang. - - + + + - - - Journal - 2. sep 2025 - Af: Nina - - Hovedbund - Sensitiv - - 🗑 - - - Let irritation ved hårgrænsen. Anbefalet parfumefri shampoo + mild kur.
- Kunden reagerer på stærk parfume. - - - + + + Note + + Hovedbund + Sensitiv + + 🗑 + + + Let irritation ved hårgrænsen. Anbefalet parfumefri shampoo + mild kur.
+ Kunden reagerer på stærk parfume. + + + 2. sep 2025 · Af: Nina + + + + Alle + + + + + + + + + + + Farveformler (historik) + Gemte farveformler for denne kunde. Nem genbrug og konsistens. + + Tilføj farveformel + + + + + + + + + Farveformel + 🗑 + + + • Mål/tone: Kold
+ • Oxidant: 1.9%
+ • Formel: 7/1 + 7/0 (1:1)
+ • Virketid: 15 min
+ • Placering: Hele håret

+ Resultat: neutral/kold, god glans. Undgå varme toner næste gang. + + + 12. nov 2025 · Af: Maja + + + + Alle + + + + + + + + Farveformel + 🗑 + + + • Mål/tone: Neutral
+ • Oxidant: 3%
+ • Formel: 6/0 + 7/1 (2:1)
+ • Virketid: 20 min
+ • Placering: Rødder

+ Første besøg. Kunden ønskede naturlig look. + + + 15. aug 2025 · Af: Maja + + + + Alle + + + + + + @@ -1544,6 +2158,142 @@ + + + + Opret ny note + ✕ + + + + God til observationer, præferencer, reaktioner og næste gang-plan. + + + + Tags (klik for at tilføje) + + Fri note + Sensitiv + Allergi + Præference + Anbefaling + + Tip: I et rigtigt system kan tags være søgbare/standardiserede. + + + + + Note + + + + + + + Synlighed + + Hvis I er flere frisører, kan "Kun mig" være nyttigt. + + + Markering + + "Advarsel" kan vise ikon på kundekortet. + + + + + + Annuller + Gem note + + + + + + + Farveformel + ✕ + + + + Struktureret nok til at kunne genskabes. Gemmes som journalnote. + + + + + Mål / tone + + + + Oxidant / styrke + + + + + + + + Formel (skriv som du vil) + + Monospace gør formler nemmere at læse. + + + Blandingsforhold + + + + + + + + Virketid + + + + Placering + + + + + + + Resultat / note + + + + + + + Annuller + Gem farveformel + + + @@ -1870,6 +2620,7 @@ document.getElementById('detailDrawer').classList.remove('open'); document.getElementById('journalPanel').classList.remove('open'); document.getElementById('customerPanel').classList.remove('open'); + document.getElementById('addNotePanel').classList.remove('open'); document.getElementById('journalLink').classList.remove('panel-open'); document.getElementById('customerDetailsLink').classList.remove('panel-open'); } @@ -1889,6 +2640,31 @@ function closeJournal() { document.getElementById('journalPanel').classList.remove('open'); document.getElementById('journalLink').classList.remove('panel-open'); + closeAddNote(); + closeFarveformel(); + } + + function switchJournalTab(tabName) { + // Update tab buttons + document.querySelectorAll('swp-journal-tab[data-tab]').forEach(tab => { + tab.classList.toggle('active', tab.dataset.tab === tabName); + }); + // Update tab content + document.getElementById('tabNoter').classList.toggle('active', tabName === 'noter'); + document.getElementById('tabFarveformler').classList.toggle('active', tabName === 'farveformler'); + // Close any open panels + closeAddNote(); + closeFarveformel(); + } + + function openAddNote() { + document.getElementById('addNotePanel').classList.add('open'); + } + + function closeAddNote() { + document.getElementById('addNotePanel').classList.remove('open'); + hidePreview(); + resetAddNoteForm(); } function toggleJournalProfile() { @@ -1976,6 +2752,212 @@ // Close popover dropdown.hidePopover(); } + + // Add note tags: multi-select (toggle) + update preview + document.querySelectorAll('swp-add-note-tag-option').forEach(tag => { + tag.onclick = () => { + tag.classList.toggle('selected'); + updatePreviewTags(); + }; + }); + + // Live Preview Logic + const addNoteTextarea = document.querySelector('swp-add-note-content textarea'); + const previewEntry = document.getElementById('previewEntry'); + const previewText = document.getElementById('previewText'); + const previewTags = document.getElementById('previewTags'); + const previewVisibility = document.getElementById('previewVisibility'); + const previewMarking = document.getElementById('previewMarking'); + const visibilitySelect = document.querySelector('swp-add-note-dropdown-group:nth-child(1) select'); + const markingSelect = document.querySelector('swp-add-note-dropdown-group:nth-child(2) select'); + + // Show preview on textarea focus + addNoteTextarea.addEventListener('focus', showPreview); + + // Update visibility in preview + visibilitySelect.addEventListener('change', updatePreviewVisibility); + + // Update marking in preview + markingSelect.addEventListener('change', updatePreviewMarking); + + // Update preview text in real-time + addNoteTextarea.addEventListener('input', () => { + previewText.textContent = addNoteTextarea.value || '(Tom note)'; + }); + + function showPreview() { + previewEntry.classList.remove('hidden'); + updatePreviewTags(); + } + + function hidePreview() { + previewEntry.classList.add('hidden'); + } + + function updatePreviewTags() { + const selectedTags = document.querySelectorAll('swp-add-note-tag-option.selected'); + previewTags.innerHTML = ''; + selectedTags.forEach(tag => { + const tagEl = document.createElement('swp-journal-tag'); + tagEl.textContent = tag.textContent; + tagEl.classList.add('tag-' + tag.dataset.tag); + previewTags.appendChild(tagEl); + }); + } + + function updatePreviewVisibility() { + const value = visibilitySelect.value; + const text = value === 'Kun mig' ? 'Kun dig' : 'Alle'; + previewVisibility.querySelector('span').textContent = text; + } + + function updatePreviewMarking() { + const value = markingSelect.value; + previewMarking.className = ''; + + if (value === 'Ingen') { + previewMarking.classList.add('hidden'); + previewMarking.innerHTML = ''; + } else if (value === 'Vigtigt') { + previewMarking.classList.add('important'); + previewMarking.innerHTML = 'Vigtigt'; + } else if (value === 'Advarsel') { + previewMarking.classList.add('warning'); + previewMarking.innerHTML = 'Advarsel'; + } + } + + function resetAddNoteForm() { + addNoteTextarea.value = ''; + previewText.textContent = '(Tom note)'; + document.querySelectorAll('swp-add-note-tag-option').forEach(tag => { + if (tag.textContent === 'Fri note') { + tag.classList.add('selected'); + } else { + tag.classList.remove('selected'); + } + }); + visibilitySelect.value = 'Hele salonen'; + markingSelect.value = 'Ingen'; + updatePreviewTags(); + updatePreviewVisibility(); + updatePreviewMarking(); + } + + // ========================================== + // FARVEFORMEL PANEL + // ========================================== + let activePanel = null; // 'note' or 'farveformel' + + // Farveformel elements + const ffMaalTone = document.getElementById('ffMaalTone'); + const ffOxidant = document.getElementById('ffOxidant'); + const ffFormel = document.getElementById('ffFormel'); + const ffBlandingsforhold = document.getElementById('ffBlandingsforhold'); + const ffVirketid = document.getElementById('ffVirketid'); + const ffPlacering = document.getElementById('ffPlacering'); + const ffResultat = document.getElementById('ffResultat'); + const previewType = document.querySelector('#previewEntry swp-journal-entry-type'); + + // Farveformel preview elements (in farveformler tab) + const previewEntryFarveformel = document.getElementById('previewEntryFarveformel'); + const previewTextFarveformel = document.getElementById('previewTextFarveformel'); + + function openFarveformel() { + document.getElementById('farveformelPanel').classList.add('open'); + activePanel = 'farveformel'; + showFarveformelPreview(); + } + + function closeFarveformel() { + document.getElementById('farveformelPanel').classList.remove('open'); + hideFarveformelPreview(); + resetFarveformelForm(); + activePanel = null; + } + + function showFarveformelPreview() { + previewEntryFarveformel.classList.remove('hidden'); + updateFarveformelPreview(); + } + + function hideFarveformelPreview() { + previewEntryFarveformel.classList.add('hidden'); + } + + function updateFarveformelPreview() { + const lines = []; + + if (ffMaalTone.value) { + lines.push(`• Mål/tone: ${ffMaalTone.value}`); + } + if (ffOxidant.value) { + lines.push(`• Oxidant: ${ffOxidant.value}`); + } + if (ffFormel.value) { + lines.push(`• Formel: ${ffFormel.value}`); + } else { + lines.push(`• Formel: (ikke angivet)`); + } + if (ffBlandingsforhold.value) { + lines.push(`• Blanding: ${ffBlandingsforhold.value}`); + } + if (ffVirketid.value) { + lines.push(`• Virketid: ${ffVirketid.value}`); + } + if (ffPlacering.value) { + lines.push(`• Placering: ${ffPlacering.value}`); + } + if (ffResultat.value) { + lines.push(`
${ffResultat.value}`); + } + + previewTextFarveformel.innerHTML = lines.length > 0 ? lines.join('
') : '(Udfyld felter...)'; + } + + function resetFarveformelForm() { + ffMaalTone.value = ''; + ffOxidant.value = ''; + ffFormel.value = ''; + ffBlandingsforhold.value = ''; + ffVirketid.value = ''; + ffPlacering.value = ''; + ffResultat.value = ''; + } + + function saveFarveformel() { + // In a real app, this would save to backend + alert('Farveformel gemt!'); + closeFarveformel(); + } + + // Add event listeners for farveformel fields + [ffMaalTone, ffOxidant, ffFormel, ffBlandingsforhold, ffVirketid, ffPlacering, ffResultat].forEach(el => { + el.addEventListener('input', () => { + if (activePanel === 'farveformel') { + updateFarveformelPreview(); + } + }); + el.addEventListener('change', () => { + if (activePanel === 'farveformel') { + updateFarveformelPreview(); + } + }); + }); + + // Update original openAddNote to track active panel + const originalOpenAddNote = openAddNote; + openAddNote = function() { + originalOpenAddNote(); + activePanel = 'note'; + }; + + // Update original closeAddNote to clear active panel + const originalCloseAddNote = closeAddNote; + closeAddNote = function() { + originalCloseAddNote(); + activePanel = null; + };