From b408b83cac83bfad446c27531e7ef8db360b4288 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Sun, 21 Dec 2025 22:34:23 +0100 Subject: [PATCH] Adds analysis tab and panel to journal interface Introduces new analysis functionality for hair and scalp tracking Adds dynamic preview, form interactions, and styling for analysis entries Enables users to log detailed hair and scalp condition assessments --- wwwroot/poc-detail-drawer.html | 442 ++++++++++++++++++++++++++++++++- 1 file changed, 441 insertions(+), 1 deletion(-) diff --git a/wwwroot/poc-detail-drawer.html b/wwwroot/poc-detail-drawer.html index b7d72fe..3ae375d 100644 --- a/wwwroot/poc-detail-drawer.html +++ b/wwwroot/poc-detail-drawer.html @@ -652,6 +652,10 @@ background: var(--color-text-secondary); } + .tab-indicator.purple { + background: #8b5cf6; + } + /* Tab Content Container */ swp-journal-tab-content { display: none; @@ -752,6 +756,11 @@ background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix)); } + swp-journal-entry-type.analyse { + color: #7c3aed; + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + } + swp-journal-entry-date { font-size: 12px; color: var(--color-text-secondary); @@ -1940,6 +1949,111 @@ outline: none; border-color: var(--color-teal); } + + /* ========================================== + ANALYSE PANEL (extends add-note styles) + ========================================== */ + swp-analyse-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-analyse-panel.open { + transform: translateX(-100%); + visibility: visible; + transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), + visibility 0ms 0ms; + } + + swp-analyse-panel input[type="text"] { + padding: 10px 12px; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface); + } + + swp-analyse-panel input[type="text"]:focus { + outline: none; + border-color: #8b5cf6; + } + + swp-analyse-panel select { + padding: 10px 12px; + font-size: 13px; + border: 1px solid var(--color-border); + border-radius: 6px; + background: var(--color-surface); + cursor: pointer; + } + + swp-analyse-panel select:focus { + outline: none; + border-color: #8b5cf6; + } + + swp-analyse-panel textarea { + width: 100%; + min-height: 80px; + 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-analyse-panel textarea:focus { + outline: none; + border-color: #8b5cf6; + } + + /* Analyse tags */ + swp-add-note-tag-option[data-tag="analyse"].selected { + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + border-color: #8b5cf6; + color: #7c3aed; + } + swp-add-note-tag-option[data-tag="hovedbund"].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[data-tag="analyse"].selected::before { + background: #8b5cf6; + border-color: #8b5cf6; + } + swp-add-note-tag-option[data-tag="hovedbund"].selected::before { + background: var(--b-color-amber); + border-color: var(--b-color-amber); + } + + /* Journal tag for analyse */ + swp-journal-tag.tag-analyse { + background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix)); + border-color: #8b5cf6; + color: #7c3aed; + } + swp-journal-tag.tag-hovedbund { + background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix)); + border-color: var(--b-color-amber); + color: #b45309; + } @@ -1998,7 +2112,7 @@ Noter Farveformler - Analyse + Analyse @@ -2132,6 +2246,66 @@ + + + + Hår & hovedbund (analyse) + Struktureret analyse af hår og hovedbund. Kan blive til advarsel. + + Tilføj analyse + + + + + + + + + Analyse + + Hovedbund + Sensitiv + + 🗑 + + + • Hovedbund: Let irriteret
+ • Hår: Medium · Bølget
+ • Porøsitet: Medium
+ • Kemisk beh.: Nej

+ Let rødme ved hårgrænsen. Anbefalet parfumefri shampoo. + + + 2. sep 2025 · Af: Nina + + + + Alle + + + + Advarsel + + + + + + + @@ -2294,6 +2468,130 @@ + + + + Shampoo & hovedbund-analyse + ✕ + + + + Hurtige valg + bemærkning. Kan blive til "sticky warning". + + + + + Hovedbund (tilstand) + + + + Irritation + + + + + + + + Hår (tykkelse) + + + + Hår (struktur) + + + + + + + + Porøsitet + + + + Tidligere kemisk behandling? + + + + + + + + Anvendt shampoo + + + + Anbefalet hjemmepleje + + + + + + + Bemærkning + + + + + + + Gør til advarsel på kundekort? + + Brug "Ja" ved fx allergi/sensitivitet. + + + Tags + + Analyse + Hovedbund + Sensitiv + Allergi + + + + + + + Annuller + Gem analyse + + + @@ -2642,6 +2940,7 @@ document.getElementById('journalLink').classList.remove('panel-open'); closeAddNote(); closeFarveformel(); + closeAnalyse(); } function switchJournalTab(tabName) { @@ -2652,9 +2951,11 @@ // Update tab content document.getElementById('tabNoter').classList.toggle('active', tabName === 'noter'); document.getElementById('tabFarveformler').classList.toggle('active', tabName === 'farveformler'); + document.getElementById('tabAnalyse').classList.toggle('active', tabName === 'analyse'); // Close any open panels closeAddNote(); closeFarveformel(); + closeAnalyse(); } function openAddNote() { @@ -2958,6 +3259,145 @@ originalCloseAddNote(); activePanel = null; }; + + // ========================================== + // ANALYSE PANEL + // ========================================== + + // Analyse form elements + const anHovedbund = document.getElementById('anHovedbund'); + const anIrritation = document.getElementById('anIrritation'); + const anHaarTykkelse = document.getElementById('anHaarTykkelse'); + const anHaarStruktur = document.getElementById('anHaarStruktur'); + const anPorositet = document.getElementById('anPorositet'); + const anKemisk = document.getElementById('anKemisk'); + const anShampoo = document.getElementById('anShampoo'); + const anHjemmepleje = document.getElementById('anHjemmepleje'); + const anBemaerkning = document.getElementById('anBemaerkning'); + const anAdvarsel = document.getElementById('anAdvarsel'); + + // Analyse preview elements + const previewEntryAnalyse = document.getElementById('previewEntryAnalyse'); + const previewTextAnalyse = document.getElementById('previewTextAnalyse'); + const previewTagsAnalyse = document.getElementById('previewTagsAnalyse'); + + function openAnalyse() { + document.getElementById('analysePanel').classList.add('open'); + activePanel = 'analyse'; + showAnalysePreview(); + } + + function closeAnalyse() { + document.getElementById('analysePanel').classList.remove('open'); + hideAnalysePreview(); + resetAnalyseForm(); + activePanel = null; + } + + function showAnalysePreview() { + previewEntryAnalyse.classList.remove('hidden'); + updateAnalysePreview(); + updateAnalysePreviewTags(); + } + + function hideAnalysePreview() { + previewEntryAnalyse.classList.add('hidden'); + } + + function updateAnalysePreview() { + const lines = []; + + if (anHovedbund.value) { + lines.push(`• Hovedbund: ${anHovedbund.value}`); + } + if (anIrritation.value) { + lines.push(`• Irritation: ${anIrritation.value}`); + } + if (anHaarTykkelse.value || anHaarStruktur.value) { + const haarParts = []; + if (anHaarTykkelse.value) haarParts.push(anHaarTykkelse.value); + if (anHaarStruktur.value) haarParts.push(anHaarStruktur.value); + lines.push(`• Hår: ${haarParts.join(' · ')}`); + } + if (anPorositet.value) { + lines.push(`• Porøsitet: ${anPorositet.value}`); + } + if (anKemisk.value) { + lines.push(`• Kemisk beh.: ${anKemisk.value}`); + } + if (anShampoo.value) { + lines.push(`• Shampoo: ${anShampoo.value}`); + } + if (anHjemmepleje.value) { + lines.push(`• Hjemmepleje: ${anHjemmepleje.value}`); + } + if (anBemaerkning.value) { + lines.push(`
${anBemaerkning.value}`); + } + + previewTextAnalyse.innerHTML = lines.length > 0 ? lines.join('
') : '(Udfyld felter...)'; + } + + function updateAnalysePreviewTags() { + const analysePanelTags = document.querySelectorAll('#analysePanel swp-add-note-tag-option.selected'); + previewTagsAnalyse.innerHTML = ''; + analysePanelTags.forEach(tag => { + const tagEl = document.createElement('swp-journal-tag'); + tagEl.textContent = tag.textContent; + tagEl.classList.add('tag-' + tag.dataset.tag); + previewTagsAnalyse.appendChild(tagEl); + }); + } + + function resetAnalyseForm() { + anHovedbund.value = ''; + anIrritation.value = ''; + anHaarTykkelse.value = ''; + anHaarStruktur.value = ''; + anPorositet.value = ''; + anKemisk.value = ''; + anShampoo.value = ''; + anHjemmepleje.value = ''; + anBemaerkning.value = ''; + anAdvarsel.value = 'Nej'; + + // Reset tags - only "Analyse" selected by default + document.querySelectorAll('#analysePanel swp-add-note-tag-option').forEach(tag => { + if (tag.dataset.tag === 'analyse') { + tag.classList.add('selected'); + } else { + tag.classList.remove('selected'); + } + }); + } + + function saveAnalyse() { + // In a real app, this would save to backend + alert('Analyse gemt!'); + closeAnalyse(); + } + + // Add event listeners for analyse form fields + [anHovedbund, anIrritation, anHaarTykkelse, anHaarStruktur, anPorositet, anKemisk, anShampoo, anHjemmepleje, anBemaerkning, anAdvarsel].forEach(el => { + el.addEventListener('input', () => { + if (activePanel === 'analyse') { + updateAnalysePreview(); + } + }); + el.addEventListener('change', () => { + if (activePanel === 'analyse') { + updateAnalysePreview(); + } + }); + }); + + // Add tag toggle listeners for analyse panel + document.querySelectorAll('#analysePanel swp-add-note-tag-option').forEach(tag => { + tag.onclick = () => { + tag.classList.toggle('selected'); + updateAnalysePreviewTags(); + }; + });