From 2b37e4e8bda185e9387a89dd5b04fca69abaa9ac Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Tue, 4 Mar 2025 16:59:49 +0100 Subject: [PATCH 01/12] mark stuff to change in feedback page, add title --- frontend/src/lib/components/ChildrenFeedback.svelte | 3 +++ frontend/src/lib/translations.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 9520f92d..3c203d8c 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -407,6 +407,7 @@ let promise = $state(setup());

{i18n.tr.milestone.feedbackDetailsMilestone}

+ {i18n.tr.milestone.legend} @@ -428,6 +429,7 @@ let promise = $state(setup()); +
{:then} - {i18n.tr.milestone.feedbackTitle} -
-

{i18n.tr.milestone.feedbackExplanation}

- - -

{i18n.tr.milestone.feedbackExplanationDetailed}

-

{i18n.tr.milestone.feedbackDetailsMilestoneGroup}

-

{i18n.tr.milestone.feedbackDetailsMilestone}

- - - - - - {i18n.tr.milestone.legend} -
- {#each milestonePresentation as milestone} -
- - - - {milestone.short} - - -
- - {milestone.text} - - {/each} +
+

{i18n.tr.milestone.feedbackExplanation}

+
+ {#each milestonePresentation as milestone} +
+
- - - - -
- + {milestone.short} + {milestone.text} +
+
+
+ {/each}
-
+
- -
- -

{i18n.tr.milestone.selectFeedback}

- - - {i18n.tr.milestone.showHistory} - -
+
+ {i18n.tr.milestone.selectFeedback} +
- - {#if showHistory === true} - - {/if} + + +
{#if relevant_sessionkeys.length=== 0}

{i18n.tr.milestone.noFeedback}

{:else} {#each relevant_sessionkeys as aid} - {#if showHistory === true || aid === sessionkeys[0]} - - - {@render summaryEvaluation(aid)} - - - {#each Object.entries(summary[aid]) as [mid, score]} -
- - - {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} - - {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} - {@render evaluation( - milestoneGroups[aid][Number(mid)].milestones.find((element: any) => - { - return element.id === Number(ms_id); - }), - Number(ms_score), - true - )} -
- {/each} - -
- {/each} - - - {/if} + + + {@render summaryEvaluation(aid)} + + + {#each Object.entries(summary[aid]) as [mid, score]} +
+ + + {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} + + {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} + {@render evaluation( + milestoneGroups[aid][Number(mid)].milestones.find((element: any) => + { + return element.id === Number(ms_id); + }), + Number(ms_score), + true + )} +
+ {/each} + +
+ {/each} + + {/each} {/if}
- {#if showHistory === true} - - {/if} +
From eb39fadf209de2db338d906dd8a0fb28392d8954 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 5 Mar 2025 15:03:40 +0000 Subject: [PATCH 03/12] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- frontend/src/lib/translations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/translations.ts b/frontend/src/lib/translations.ts index 0b51e24c..3e40782d 100644 --- a/frontend/src/lib/translations.ts +++ b/frontend/src/lib/translations.ts @@ -72,7 +72,7 @@ export const translationIds = { child: "Kind", date: "Datum", reportTitle: "Entwicklungsbericht", - feedbackTitle: "Feedback zur Entwicklung des Kindes" + feedbackTitle: "Feedback zur Entwicklung des Kindes", }, search: { allLabel: "Alle", From 0876a197289567b50181e00a7294ab561e8c8883 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Wed, 5 Mar 2025 20:23:17 +0100 Subject: [PATCH 04/12] work on styling and change translations as demanded --- .../lib/components/ChildrenFeedback.svelte | 102 ++++++++++-------- frontend/src/lib/translations.ts | 28 +++-- 2 files changed, 71 insertions(+), 59 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index f08a8dd3..067bc72b 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -34,7 +34,6 @@ import { ChartLineUpOutline, CheckCircleSolid, CloseCircleSolid, - ExclamationCircleSolid, UserSettingsOutline, } from "flowbite-svelte-icons"; import AlertMessage from "./AlertMessage.svelte"; @@ -51,7 +50,7 @@ let detailed = $state({}) as Record; let summary = $state({}) as Record; let answerSessions = $state({}) as Record; let showHelp = $state(false); -const intervalSize = 4; +const intervalSize = 6; let currentSessionIndices = $state([0, intervalSize]); let relevant_sessionkeys = $state([] as number[]); let showMoreInfo = $state(false); @@ -65,7 +64,7 @@ let milestonePresentation = $state([ showExplanation: false, }, { - icon: ExclamationCircleSolid, + icon: BellActiveSolid, text: i18n.tr.milestone.recommendWatch, short: i18n.tr.milestone.recommendWatchShort, class: "text-feedback-1 w-16", @@ -80,6 +79,7 @@ let milestonePresentation = $state([ }, ]); +// data defining where the breadcrumb elements should lead to const breadcrumbdata: any[] = [ { label: currentChild.name, @@ -175,7 +175,19 @@ async function loadDetailedFeedback(relevant: number[]): Promise { return; } - detailed[Number(aid)] = response.data; + let res = {} as Record>; + + // filter out the milestones that are not ideal and only show those + for (const [mid, milestones] of Object.entries(response.data)) { + res[Number(mid)] = {} as Record; + for (const [ms_id, ms_score] of Object.entries(milestones)) { + if (ms_score <= 0) { + res[Number(mid)][Number(ms_id)] = Number(ms_score); + } + } + } + + detailed[Number(aid)] = res; } } @@ -211,6 +223,7 @@ async function loadNext() { } function generateReport(): string { + // generate a report to be printed out for the entire feedback history let report = ""; // add title report += `

${i18n.tr.milestone.reportTitle}

\n\n`; @@ -221,11 +234,8 @@ function generateReport(): string { report += `${i18n.tr.milestone.child}: ${currentChild.name}\n`; report += `${i18n.tr.milestone.born}: ${currentChild.month}/${currentChild.year} \n\n`; - // iterate over all answersessions - + // iterate over all answersessions with aid:key for (let [aid, values] of Object.entries(summary)) { - // aid : value - const min = Math.min(...(Object.values(values) as number[])); report += `

${i18n.tr.milestone.timeperiod}: ${makeTitle(Number(aid))}

\n`; report += `${i18n.tr.milestone.summaryScore}: ${min === 1 ? i18n.tr.milestone.recommendOk : min === 0 ? i18n.tr.milestone.recommendWatch : min === -1 ? i18n.tr.milestone.recommmendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; @@ -233,7 +243,7 @@ function generateReport(): string { for (let [mid, score] of Object.entries(values)) { // mid : score report += `

${milestoneGroups[aid][Number(mid)].text[i18n.locale].title}

`; - report += ` ${score === 1 ? i18n.tr.milestone.recommendOkMs : score === 0 ? i18n.tr.milestone.recommendWatchMs : score === -1 ? i18n.tr.milestone.recommmendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; + report += ` ${score === 1 ? i18n.tr.milestone.recommendOk : score === 0 ? i18n.tr.milestone.recommendWatch : score === -1 ? i18n.tr.milestone.recommmendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; for (let [ms_id, ms_score] of Object.entries(detailed[aid][mid])) { // ms_id : ms_score @@ -294,17 +304,23 @@ async function setup() { await loadDetailedFeedback(relevant_sessionkeys); } +function makeTextColorInFeedback(value: boolean): string { + return value + ? "text-gray-700 dark:text-gray-700" + : "text-gray-700 dark:text-gray-200"; +} + let promise = $state(setup()); {#snippet summaryEvaluation(aid: number)} -
+
{#if Math.min(...(Object.values(summary[aid]) as number[])) === 1} - + {i18n.tr.milestone.summaryScore} {i18n.tr.milestone.recommendOk} {:else if Math.min(...(Object.values(summary[aid]) as number[])) === 0} - + {i18n.tr.milestone.summaryScore} {i18n.tr.milestone.recommendWatch} {:else if Math.min(...(Object.values(summary[aid]) as number[])) === -1} @@ -327,22 +343,22 @@ let promise = $state(setup()); {#if value === 1}
- + {milestone_or_group?.text[i18n.locale].title}
{:else if value === 0} -
+
- + {milestone_or_group?.text[i18n.locale].title}
{#if isMilestone} - - @@ -351,16 +367,16 @@ let promise = $state(setup()); {/if} {:else if value === -1} -
+
- + {milestone_or_group?.text[i18n.locale].title}
{#if isMilestone} - @@ -371,7 +387,7 @@ let promise = $state(setup()); {:else }
- + {milestone_or_group?.text[i18n.locale].title}
@@ -395,14 +411,15 @@ let promise = $state(setup());

{i18n.tr.childData.loadingMessage}

{:then} - {i18n.tr.milestone.feedbackTitle} + {i18n.tr.milestone.feedbackTitle} -
-

{i18n.tr.milestone.feedbackExplanation}

+ +
+

{i18n.tr.milestone.feedbackExplanation}

{#each milestonePresentation as milestone}
- +
{milestone.short} {milestone.text} @@ -413,24 +430,28 @@ let promise = $state(setup());
-
-
- {i18n.tr.milestone.selectFeedback} -
- - + + +

{i18n.tr.milestone.feedbackExplanationDetailed}

+

{i18n.tr.milestone.feedbackDetailsMilestone}

+

{i18n.tr.milestone.feedbackDetailsEval}

+ + +
{#if relevant_sessionkeys.length=== 0} -

{i18n.tr.milestone.noFeedback}

+

{i18n.tr.milestone.noFeedback}

{:else} {#each relevant_sessionkeys as aid} @@ -440,7 +461,7 @@ let promise = $state(setup()); {#each Object.entries(summary[aid]) as [mid, score]}
- + {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} @@ -463,15 +484,10 @@ let promise = $state(setup()); {/each} {/if}
- - -
- +
+
{:catch error} Date: Thu, 6 Mar 2025 09:56:59 +0100 Subject: [PATCH 05/12] add docstrings and comments, reorganize code into more snippets --- .../lib/components/ChildrenFeedback.svelte | 245 +++++++++++------- 1 file changed, 155 insertions(+), 90 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 067bc72b..6bd61054 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -38,7 +38,7 @@ import { } from "flowbite-svelte-icons"; import AlertMessage from "./AlertMessage.svelte"; -let showAlert = $state(false); +// data needed for displaying the page's content let alertMessage = $state( i18n.tr.childData.alertMessageError as string | ValidationError[] | undefined, ); @@ -46,15 +46,19 @@ let milestoneGroups = $state( {} as Record>, ); let sessionkeys = $state([] as number[]); -let detailed = $state({}) as Record; -let summary = $state({}) as Record; +let detailed = $state({}) as Record; // detailed feedback for each milestone +let summary = $state({}) as Record; // summary feedback for each milestonegroup let answerSessions = $state({}) as Record; -let showHelp = $state(false); -const intervalSize = 6; -let currentSessionIndices = $state([0, intervalSize]); -let relevant_sessionkeys = $state([] as number[]); + +// helpers +const intervalSize = 6; // hardcoded number of answersessions to show at once +let currentSessionIndices = $state([0, intervalSize]); // lower and upper bond for currently shown indices +let relevant_sessionkeys = $state([] as number[]); // keys of the answersessions that are currently shown let showMoreInfo = $state(false); +let showHelp = $state(false); +let showAlert = $state(false); +// data defining the legend for the feedback let milestonePresentation = $state([ { icon: CheckCircleSolid, @@ -97,6 +101,16 @@ const breadcrumbdata: any[] = [ }, ]; +// functions needed for making decisions about page rendering and for doing some +// data preprocessing: +// TODO: for performance reasons, we could consider moving some of these functions to the backend, +// but this can be done once performance becomes a problem. + +/** + * Get the answersessions for the child we are concerned with from the database. + * @summary Get the answersessions for the child we are concerned with from the database, set the sessionkeys as a sorted and reversed list of keys that we get from the response, and set the relevant_sessionkeys to be the interval of sessionkeys that we want to show. + * @return {Promise} nothing + */ async function loadAnswersessions(): Promise { user.load; await currentChild.load_data(); @@ -126,6 +140,11 @@ async function loadAnswersessions(): Promise { relevant_sessionkeys = sessionkeys.slice(currentSessionIndices[0], maxindex); } +/** + * Load the summary feedback for the relevant answersessions. + * @param {number[]} relevant - Relevant session keys,i.e., those that are currently displayed + * @return {Promise} nothing + */ async function loadSummaryFeedback(relevant: number[]): Promise { for (const aid of relevant) { const milestoneGroupResponse = await getMilestonegroupsForSession({ @@ -161,6 +180,11 @@ async function loadSummaryFeedback(relevant: number[]): Promise { } } +/** + * load the detailed feedback from the database for the child, i.e., the feedback on the milestones themselves, not just the groups. + * @param {number[]} relevant - Relevant session keys,i.e., those that are currently displayed + * @return {Promise} nothing + */ async function loadDetailedFeedback(relevant: number[]): Promise { for (const aid of relevant) { const response = await getDetailedFeedbackForAnswersession({ @@ -191,7 +215,11 @@ async function loadDetailedFeedback(relevant: number[]): Promise { } } -async function loadLast() { +/** + * Load the last chunk of answersessions and feedbacks from the database. A chunk always has length 'intervalSize'. + * @return {Promise} nothing + */ +async function loadLast(): Promise { currentSessionIndices = [ Math.max(currentSessionIndices[0] - intervalSize, 0), Math.max(currentSessionIndices[1] - intervalSize, intervalSize), @@ -205,7 +233,11 @@ async function loadLast() { await loadDetailedFeedback(relevant_sessionkeys); } -async function loadNext() { +/** + * Load the next chunk of answersessions and feedbacks from the database. A chunk always has length 'intervalSize'. + * @return {Promise} nothing + */ +async function loadNext(): Promise { currentSessionIndices = [ Math.min( currentSessionIndices[0] + intervalSize, @@ -222,8 +254,12 @@ async function loadNext() { await loadDetailedFeedback(relevant_sessionkeys); } +/** + * Generate a printable report from the feedback by concatenating all the feedbacks into a single formatted string. + * @summary If the description is long, write your summary here. Otherwise, feel free to remove this. + * @return {string} Report as a single string + */ function generateReport(): string { - // generate a report to be printed out for the entire feedback history let report = ""; // add title report += `

${i18n.tr.milestone.reportTitle}

\n\n`; @@ -262,7 +298,11 @@ function generateReport(): string { return report; } -function printReport() { +/** + * Print the report generated by the generateReport function, which is called internally. + * @return {void} Nothing + */ +function printReport(): void { const report = generateReport(); const printWindow = window.open("", "", "height=600,width=800"); if (printWindow === null) { @@ -273,6 +313,11 @@ function printReport() { printWindow.print(); } +/** + * Function for formatting a given datetime string into a more readable format. + * @param {string} date - The date to format. + * @return {string} The formatted date: day - month - year + */ function formatDate(date: string): string { const dateObj = new Date(date); return [ @@ -282,20 +327,22 @@ function formatDate(date: string): string { ].join("-"); } +/** + * Create a title for the answersession, using the created_at field of the answersession data. + * @param {number} aid - The id of the answersession to create a title from. + * @return {ReturnValueDataTypeHere} Brief description of the returning value here. + */ function makeTitle(aid: number): string { return aid === sessionkeys[0] ? i18n.tr.milestone.current : formatDate(answerSessions[aid].created_at); } -function scrollToBottom() { - window.scrollTo({ - top: document.body.scrollHeight * 0.35, - behavior: "instant", - }); -} - -async function setup() { +/** + * Load the data and get everything ready to render the page + * @return { Promise} nothign + */ +async function setup(): Promise { await loadAnswersessions(); if (Object.keys(answerSessions).length === 0) { return; @@ -304,15 +351,11 @@ async function setup() { await loadDetailedFeedback(relevant_sessionkeys); } -function makeTextColorInFeedback(value: boolean): string { - return value - ? "text-gray-700 dark:text-gray-700" - : "text-gray-700 dark:text-gray-200"; -} - +// create a promise that will be resolved when the data is loaded let promise = $state(setup()); + {#snippet summaryEvaluation(aid: number)}
{#if Math.min(...(Object.values(summary[aid]) as number[])) === 1} @@ -334,13 +377,12 @@ let promise = $state(setup()); {/if}
- {/snippet} - -{#snippet evaluation( milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined, value: number, isMilestone: boolean,)} -
- {#if value === 1} + +{#snippet evaluation( milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined, grade: number, isMilestone: boolean,)} +
+ {#if grade === 1}
@@ -348,10 +390,10 @@ let promise = $state(setup());
- {:else if value === 0} + {:else if grade === 0}
- + {milestone_or_group?.text[i18n.locale].title}
@@ -366,10 +408,10 @@ let promise = $state(setup()); {/if} - {:else if value === -1} + {:else if grade === -1}
- + {milestone_or_group?.text[i18n.locale].title}
@@ -387,7 +429,7 @@ let promise = $state(setup()); {:else }
- + {milestone_or_group?.text[i18n.locale].title}
@@ -397,55 +439,95 @@ let promise = $state(setup());
{/snippet} + + +{#snippet legend } +
+

{i18n.tr.milestone.feedbackExplanation}

+
+ {#each milestonePresentation as milestone} +
+ +
+ {milestone.short} + +
+
+
+ {/each} +
+
+{/snippet} + + +{#snippet explanationModal} +
+ {i18n.tr.milestone.selectFeedback} + +
+ + + +

{i18n.tr.milestone.feedbackExplanationDetailed}

+

{i18n.tr.milestone.feedbackDetailsMilestone}

+

{i18n.tr.milestone.feedbackDetailsEval}

+ +{/snippet} + + +{#snippet milestoneGroupsEval(aid)} + + {#each Object.entries(summary[aid]) as [mid, score]} +
+ + + {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} + + {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} + {@render evaluation( + milestoneGroups[aid][Number(mid)].milestones.find((element: any) => + { + return element.id === Number(ms_id); + }), + Number(ms_score), + true + )} +
+ {/each} + +
+ {/each} + +{/snippet} + + {#if showAlert} { + showAlert = false; + }} /> {:else} {#await promise} +

{i18n.tr.childData.loadingMessage}

{:then} {i18n.tr.milestone.feedbackTitle} - -
-

{i18n.tr.milestone.feedbackExplanation}

-
- {#each milestonePresentation as milestone} -
- -
- {milestone.short} - {milestone.text} -
-
-
- {/each} -
-
- - -
- {i18n.tr.milestone.selectFeedback} + {@render legend} - -
- - - -

{i18n.tr.milestone.feedbackExplanationDetailed}

-

{i18n.tr.milestone.feedbackDetailsMilestone}

-

{i18n.tr.milestone.feedbackDetailsEval}

- + {@render explanationModal} @@ -458,34 +540,14 @@ let promise = $state(setup()); {@render summaryEvaluation(aid)} - - {#each Object.entries(summary[aid]) as [mid, score]} -
- - - {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} - - {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} - {@render evaluation( - milestoneGroups[aid][Number(mid)].milestones.find((element: any) => - { - return element.id === Number(ms_id); - }), - Number(ms_score), - true - )} -
- {/each} - -
- {/each} - + {@render milestoneGroupsEval(aid)} {/each} {/if}
+
@@ -493,6 +555,9 @@ let promise = $state(setup()); { + showAlert = false; + }} /> {/await} {/if} From f4eaaf2a85e2b83040dd99c45dc0e7677df4bfff Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 6 Mar 2025 11:21:06 +0100 Subject: [PATCH 06/12] refactor to use more snippets, fix text errors --- .../lib/components/ChildrenFeedback.svelte | 124 ++++++++---------- frontend/src/lib/translations.ts | 2 +- 2 files changed, 55 insertions(+), 71 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 6bd61054..b58d59ef 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -76,7 +76,7 @@ let milestonePresentation = $state([ }, { icon: CloseCircleSolid, - text: i18n.tr.milestone.recommmendHelp, + text: i18n.tr.milestone.recommendHelp, short: i18n.tr.milestone.recommendHelpShort, class: "text-feedback-2 w-16 ", showExplanation: false, @@ -274,12 +274,12 @@ function generateReport(): string { for (let [aid, values] of Object.entries(summary)) { const min = Math.min(...(Object.values(values) as number[])); report += `

${i18n.tr.milestone.timeperiod}: ${makeTitle(Number(aid))}

\n`; - report += `${i18n.tr.milestone.summaryScore}: ${min === 1 ? i18n.tr.milestone.recommendOk : min === 0 ? i18n.tr.milestone.recommendWatch : min === -1 ? i18n.tr.milestone.recommmendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; + report += `${i18n.tr.milestone.summaryScore}: ${min === 1 ? i18n.tr.milestone.recommendOk : min === 0 ? i18n.tr.milestone.recommendWatch : min === -1 ? i18n.tr.milestone.recommendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; for (let [mid, score] of Object.entries(values)) { // mid : score report += `

${milestoneGroups[aid][Number(mid)].text[i18n.locale].title}

`; - report += ` ${score === 1 ? i18n.tr.milestone.recommendOk : score === 0 ? i18n.tr.milestone.recommendWatch : score === -1 ? i18n.tr.milestone.recommmendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; + report += ` ${score === 1 ? i18n.tr.milestone.recommendOk : score === 0 ? i18n.tr.milestone.recommendWatch : score === -1 ? i18n.tr.milestone.recommendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; for (let [ms_id, ms_score] of Object.entries(detailed[aid][mid])) { // ms_id : ms_score @@ -340,7 +340,7 @@ function makeTitle(aid: number): string { /** * Load the data and get everything ready to render the page - * @return { Promise} nothign + * @return { Promise} nothing */ async function setup(): Promise { await loadAnswersessions(); @@ -355,93 +355,77 @@ async function setup(): Promise { let promise = $state(setup()); + +{#snippet summaryEvaluationElement(symbol: any, color: string, text: string)} + + {i18n.tr.milestone.summaryScore} + {text} +{/snippet} + {#snippet summaryEvaluation(aid: number)}
{#if Math.min(...(Object.values(summary[aid]) as number[])) === 1} - - {i18n.tr.milestone.summaryScore} - {i18n.tr.milestone.recommendOk} + {@render summaryEvaluationElement(CheckCircleSolid, "text-feedback-0", i18n.tr.milestone.recommendOk)} {:else if Math.min(...(Object.values(summary[aid]) as number[])) === 0} - - {i18n.tr.milestone.summaryScore} - {i18n.tr.milestone.recommendWatch} + {@render summaryEvaluationElement(BellActiveSolid, "text-feedback-1", i18n.tr.milestone.recommendWatch)} {:else if Math.min(...(Object.values(summary[aid]) as number[])) === -1} - - {i18n.tr.milestone.summaryScore} - {i18n.tr.milestone.recommmendHelp} + {@render summaryEvaluationElement(CloseCircleSolid, "text-feedback-2", i18n.tr.milestone.recommendHelp)} {:else} - - {i18n.tr.milestone.summaryScore} - {i18n.tr.milestone.notEnoughDataYet} + {@render summaryEvaluationElement(CloseCircleSolid, "gray", i18n.tr.milestone.notEnoughDataYet)} {/if}
{/snippet} + +{#snippet milestoneHelpButton(milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined)} + + + + {milestone_or_group?.text[i18n.locale].help} + + +{/snippet} + + +{#snippet evaluationElement(symbol: any, milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined, color: string, isMilestone: boolean = false)} +
+ + {#if color !== "gray"} + + {milestone_or_group?.text[i18n.locale].title} + + {/if} +
+
+{/snippet} + {#snippet evaluation( milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined, grade: number, isMilestone: boolean,)}
{#if grade === 1} -
- - - {milestone_or_group?.text[i18n.locale].title} - -
-
+ {@render evaluationElement(CheckCircleSolid, milestone_or_group, "text-feedback-0", isMilestone)} {:else if grade === 0} -
- - - {milestone_or_group?.text[i18n.locale].title} - -
-
+ {@render evaluationElement(BellActiveSolid, milestone_or_group, "text-feedback-1", isMilestone)} {#if isMilestone} - - - - {milestone_or_group?.text[i18n.locale].help} - - + {@render milestoneHelpButton(milestone_or_group)} {/if} {:else if grade === -1} -
- - - {milestone_or_group?.text[i18n.locale].title} - -
-
+ {@render evaluationElement(CloseCircleSolid, milestone_or_group, "text-feedback-2", isMilestone)} {#if isMilestone} - - - - {milestone_or_group?.text[i18n.locale].help} - - + {@render milestoneHelpButton(milestone_or_group)} {/if} {:else } -
- - - {milestone_or_group?.text[i18n.locale].title} - -
-
- + {@render evaluationElement(CloseCircleSolid, milestone_or_group, "gray", isMilestone)} {/if}
{/snippet} - - -{#snippet legend } + +{#snippet legend()}

{i18n.tr.milestone.feedbackExplanation}

@@ -459,8 +443,8 @@ let promise = $state(setup());
{/snippet} - -{#snippet explanationModal} + +{#snippet explanationModal()}
{i18n.tr.milestone.selectFeedback} @@ -478,9 +462,9 @@ let promise = $state(setup()); {/snippet} - -{#snippet milestoneGroupsEval(aid)} +{#snippet milestoneGroupsEval(aid: number)} {#each Object.entries(summary[aid]) as [mid, score]}
@@ -525,9 +509,9 @@ let promise = $state(setup()); {:then} {i18n.tr.milestone.feedbackTitle} - {@render legend} + {@render legend()} - {@render explanationModal} + {@render explanationModal()} diff --git a/frontend/src/lib/translations.ts b/frontend/src/lib/translations.ts index ea5fe41c..845e5462 100644 --- a/frontend/src/lib/translations.ts +++ b/frontend/src/lib/translations.ts @@ -38,7 +38,7 @@ export const translationIds = { recommendWatch: "Das Kind hat für einige Meilensteine leicht unterdurchschnittliche Werte erhalten.", recommendWatchShort: "Aufgepasst!", - recommmendHelp: + recommendHelp: "Das Kind erreicht Werte, die deutlich unter dem Altersdurchschnitt liegen.", recommendHelpShort: "Enwicklungsverzögerung", showHistory: "Feedback zu vorherigen Beobachtungszeiträumen anzeigen", From 8ec443d5f3a3da677fc2e392c35f840036dcea8d Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 6 Mar 2025 16:07:50 +0100 Subject: [PATCH 07/12] add files for refactoring, add windowsize-based data display (not dynamic yet), remove old functions, change styling --- .../lib/components/ChildrenFeedback.svelte | 153 +++++++++--------- .../ChildrenFeedback/Childrenfeedback.svelte | 0 .../ChildrenFeedback/feedbackDisplay.svelte | 0 .../ChildrenFeedback/generateReport.js | 0 .../ChildrenFeedback/preamble.svelte | 0 .../ChildrenFeedback/processData.js | 0 .../lib/components/ChildrenFeedback/utils.js | 0 frontend/src/lib/translations.ts | 2 +- frontend/tailwind.config.ts | 2 +- .../ChildrenFeedback/Childrenfeedback.spec.ts | 0 .../ChildrenFeedback/feedbackDisplay.spec.ts | 0 .../ChildrenFeedback/generateReport.spec.ts | 0 .../tests/ChildrenFeedback/preamble.spec.ts | 0 .../ChildrenFeedback/processData.spec.ts | 0 frontend/tests/ChildrenFeedback/utils.spec.ts | 0 15 files changed, 74 insertions(+), 83 deletions(-) create mode 100644 frontend/src/lib/components/ChildrenFeedback/Childrenfeedback.svelte create mode 100644 frontend/src/lib/components/ChildrenFeedback/feedbackDisplay.svelte create mode 100644 frontend/src/lib/components/ChildrenFeedback/generateReport.js create mode 100644 frontend/src/lib/components/ChildrenFeedback/preamble.svelte create mode 100644 frontend/src/lib/components/ChildrenFeedback/processData.js create mode 100644 frontend/src/lib/components/ChildrenFeedback/utils.js create mode 100644 frontend/tests/ChildrenFeedback/Childrenfeedback.spec.ts create mode 100644 frontend/tests/ChildrenFeedback/feedbackDisplay.spec.ts create mode 100644 frontend/tests/ChildrenFeedback/generateReport.spec.ts create mode 100644 frontend/tests/ChildrenFeedback/preamble.spec.ts create mode 100644 frontend/tests/ChildrenFeedback/processData.spec.ts create mode 100644 frontend/tests/ChildrenFeedback/utils.spec.ts diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index b58d59ef..971cd4a4 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -19,7 +19,6 @@ import { Accordion, AccordionItem, Button, - Checkbox, Heading, Hr, Modal, @@ -28,8 +27,7 @@ import { Tabs, } from "flowbite-svelte"; import { - ArrowLeftOutline, - ArrowRightOutline, + ExclamationCircleSolid, BellActiveSolid, ChartLineUpOutline, CheckCircleSolid, @@ -51,8 +49,38 @@ let summary = $state({}) as Record; // summary feedback for each mi let answerSessions = $state({}) as Record; // helpers -const intervalSize = 6; // hardcoded number of answersessions to show at once -let currentSessionIndices = $state([0, intervalSize]); // lower and upper bond for currently shown indices +const breakpoints = { + sm: 640, + md: 768, + lg: 1024, + xl: 1280, + "2xl": 1536, +}; + +// TODO: make this reactive such that the page reloads when the width changes +// not done here yet +let windowidth = $state(window.innerWidth); +let numShownAnswersessions = $derived.by(() => { + if (windowidth >= breakpoints["2xl"]) { + return 10; + } + if (windowidth >= breakpoints.xl) { + return 8; + } + if (windowidth >= breakpoints.lg) { + return 6; + } + if (windowidth >= breakpoints.md) { + return 4; + } + if (windowidth >= breakpoints.sm) { + return 3; + } + return 2; +}); + + +let currentSessionIndices = $state([0, numShownAnswersessions]); // lower and upper bond for currently shown indices let relevant_sessionkeys = $state([] as number[]); // keys of the answersessions that are currently shown let showMoreInfo = $state(false); let showHelp = $state(false); @@ -75,7 +103,7 @@ let milestonePresentation = $state([ showExplanation: false, }, { - icon: CloseCircleSolid, + icon: ExclamationCircleSolid, text: i18n.tr.milestone.recommendHelp, short: i18n.tr.milestone.recommendHelpShort, class: "text-feedback-2 w-16 ", @@ -215,45 +243,6 @@ async function loadDetailedFeedback(relevant: number[]): Promise { } } -/** - * Load the last chunk of answersessions and feedbacks from the database. A chunk always has length 'intervalSize'. - * @return {Promise} nothing - */ -async function loadLast(): Promise { - currentSessionIndices = [ - Math.max(currentSessionIndices[0] - intervalSize, 0), - Math.max(currentSessionIndices[1] - intervalSize, intervalSize), - ]; - relevant_sessionkeys = sessionkeys.slice( - currentSessionIndices[0], - currentSessionIndices[1], - ); - - await loadSummaryFeedback(relevant_sessionkeys); - await loadDetailedFeedback(relevant_sessionkeys); -} - -/** - * Load the next chunk of answersessions and feedbacks from the database. A chunk always has length 'intervalSize'. - * @return {Promise} nothing - */ -async function loadNext(): Promise { - currentSessionIndices = [ - Math.min( - currentSessionIndices[0] + intervalSize, - Math.max(sessionkeys.length - intervalSize, 0), - ), - Math.min(currentSessionIndices[1] + intervalSize, sessionkeys.length), - ]; - relevant_sessionkeys = sessionkeys.slice( - currentSessionIndices[0], - currentSessionIndices[1], - ); - - await loadSummaryFeedback(relevant_sessionkeys); - await loadDetailedFeedback(relevant_sessionkeys); -} - /** * Generate a printable report from the feedback by concatenating all the feedbacks into a single formatted string. * @summary If the description is long, write your summary here. Otherwise, feel free to remove this. @@ -278,13 +267,13 @@ function generateReport(): string { for (let [mid, score] of Object.entries(values)) { // mid : score - report += `

${milestoneGroups[aid][Number(mid)].text[i18n.locale].title}

`; + report += `

${milestoneGroups[Number(aid)][Number(mid)].text[i18n.locale].title}

`; report += ` ${score === 1 ? i18n.tr.milestone.recommendOk : score === 0 ? i18n.tr.milestone.recommendWatch : score === -1 ? i18n.tr.milestone.recommendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; - for (let [ms_id, ms_score] of Object.entries(detailed[aid][mid])) { + for (let [ms_id, ms_score] of Object.entries(detailed[Number(aid)][mid])) { // ms_id : ms_score report += ` ${ - milestoneGroups[aid][Number(mid)].milestones.find((element: any) => { + milestoneGroups[Number(aid)][Number(mid)].milestones.find((element: any) => { return element.id === Number(ms_id); }).text[i18n.locale].title }:`; @@ -357,30 +346,30 @@ let promise = $state(setup()); {#snippet summaryEvaluationElement(symbol: any, color: string, text: string)} - - {i18n.tr.milestone.summaryScore} - {text} + + {i18n.tr.milestone.summaryScore} + {text} {/snippet} {#snippet summaryEvaluation(aid: number)} -
+
{#if Math.min(...(Object.values(summary[aid]) as number[])) === 1} {@render summaryEvaluationElement(CheckCircleSolid, "text-feedback-0", i18n.tr.milestone.recommendOk)} {:else if Math.min(...(Object.values(summary[aid]) as number[])) === 0} {@render summaryEvaluationElement(BellActiveSolid, "text-feedback-1", i18n.tr.milestone.recommendWatch)} {:else if Math.min(...(Object.values(summary[aid]) as number[])) === -1} - {@render summaryEvaluationElement(CloseCircleSolid, "text-feedback-2", i18n.tr.milestone.recommendHelp)} + {@render summaryEvaluationElement(ExclamationCircleSolid, "text-feedback-2", i18n.tr.milestone.recommendHelp)} {:else} {@render summaryEvaluationElement(CloseCircleSolid, "gray", i18n.tr.milestone.notEnoughDataYet)} {/if}
-
+
{/snippet} {#snippet milestoneHelpButton(milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined)} - + @@ -392,20 +381,20 @@ let promise = $state(setup()); {#snippet evaluationElement(symbol: any, milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined, color: string, isMilestone: boolean = false)} -
+
{#if color !== "gray"} - + {milestone_or_group?.text[i18n.locale].title} {/if} -
+
{/snippet} {#snippet evaluation( milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined, grade: number, isMilestone: boolean,)} -
+
{#if grade === 1} {@render evaluationElement(CheckCircleSolid, milestone_or_group, "text-feedback-0", isMilestone)} {:else if grade === 0} @@ -414,7 +403,7 @@ let promise = $state(setup()); {@render milestoneHelpButton(milestone_or_group)} {/if} {:else if grade === -1} - {@render evaluationElement(CloseCircleSolid, milestone_or_group, "text-feedback-2", isMilestone)} + {@render evaluationElement(ExclamationCircleSolid, milestone_or_group, "text-feedback-2", isMilestone)} {#if isMilestone} {@render milestoneHelpButton(milestone_or_group)} {/if} @@ -426,17 +415,17 @@ let promise = $state(setup()); {#snippet legend()} -
-

{i18n.tr.milestone.feedbackExplanation}

+
+

{i18n.tr.milestone.feedbackExplanation}

{#each milestonePresentation as milestone}
- {milestone.short} - + {milestone.short} +
-
+
{/each}
@@ -445,10 +434,10 @@ let promise = $state(setup()); {#snippet explanationModal()} -
- {i18n.tr.milestone.selectFeedback} +
+
{i18n.tr.milestone.selectFeedback}
- @@ -456,20 +445,22 @@ let promise = $state(setup()); -

{i18n.tr.milestone.feedbackExplanationDetailed}

-

{i18n.tr.milestone.feedbackDetailsMilestone}

-

{i18n.tr.milestone.feedbackDetailsEval}

+

{i18n.tr.milestone.feedbackExplanationDetailed}

+

{i18n.tr.milestone.feedbackDetailsMilestone}

+

{i18n.tr.milestone.feedbackDetailsEval}

 {/snippet} - + {#snippet milestoneGroupsEval(aid: number)} - + {#each Object.entries(summary[aid]) as [mid, score]}
- - + + {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} @@ -481,7 +472,7 @@ let promise = $state(setup()); Number(ms_score), true )} -
+
{/each}
@@ -507,20 +498,20 @@ let promise = $state(setup());

{i18n.tr.childData.loadingMessage}

{:then} - {i18n.tr.milestone.feedbackTitle} + {i18n.tr.milestone.feedbackTitle} {@render legend()} {@render explanationModal()} - -
+ +
{#if relevant_sessionkeys.length=== 0}

{i18n.tr.milestone.noFeedback}

{:else} {#each relevant_sessionkeys as aid} - + {@render summaryEvaluation(aid)} diff --git a/frontend/src/lib/components/ChildrenFeedback/Childrenfeedback.svelte b/frontend/src/lib/components/ChildrenFeedback/Childrenfeedback.svelte new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/lib/components/ChildrenFeedback/feedbackDisplay.svelte b/frontend/src/lib/components/ChildrenFeedback/feedbackDisplay.svelte new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/lib/components/ChildrenFeedback/generateReport.js b/frontend/src/lib/components/ChildrenFeedback/generateReport.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/lib/components/ChildrenFeedback/preamble.svelte b/frontend/src/lib/components/ChildrenFeedback/preamble.svelte new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/lib/components/ChildrenFeedback/processData.js b/frontend/src/lib/components/ChildrenFeedback/processData.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/lib/components/ChildrenFeedback/utils.js b/frontend/src/lib/components/ChildrenFeedback/utils.js new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/lib/translations.ts b/frontend/src/lib/translations.ts index 845e5462..886e1708 100644 --- a/frontend/src/lib/translations.ts +++ b/frontend/src/lib/translations.ts @@ -40,7 +40,7 @@ export const translationIds = { recommendWatchShort: "Aufgepasst!", recommendHelp: "Das Kind erreicht Werte, die deutlich unter dem Altersdurchschnitt liegen.", - recommendHelpShort: "Enwicklungsverzögerung", + recommendHelpShort: "Enwicklungsverzögerung!", showHistory: "Feedback zu vorherigen Beobachtungszeiträumen anzeigen", moreInfoOnEval: "Mehr Info zur Bewertung", legend: "Erklärung zu den einzelnen Symbolen", diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index 36c17f20..466e3a13 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -54,7 +54,7 @@ export default { }, feedback: { 0: "#98CB6A", - 1: "#FFCA67", + 1: "#F59C2F", 2: "#E9715F", }, "feedback-background": { diff --git a/frontend/tests/ChildrenFeedback/Childrenfeedback.spec.ts b/frontend/tests/ChildrenFeedback/Childrenfeedback.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/tests/ChildrenFeedback/feedbackDisplay.spec.ts b/frontend/tests/ChildrenFeedback/feedbackDisplay.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/tests/ChildrenFeedback/generateReport.spec.ts b/frontend/tests/ChildrenFeedback/generateReport.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/tests/ChildrenFeedback/preamble.spec.ts b/frontend/tests/ChildrenFeedback/preamble.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/tests/ChildrenFeedback/processData.spec.ts b/frontend/tests/ChildrenFeedback/processData.spec.ts new file mode 100644 index 00000000..e69de29b diff --git a/frontend/tests/ChildrenFeedback/utils.spec.ts b/frontend/tests/ChildrenFeedback/utils.spec.ts new file mode 100644 index 00000000..e69de29b From f6f88200cebc60a5f729808d539a9b06ee3473f8 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 6 Mar 2025 15:08:49 +0000 Subject: [PATCH 08/12] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../lib/components/ChildrenFeedback.svelte | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 971cd4a4..1804fff6 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -27,11 +27,11 @@ import { Tabs, } from "flowbite-svelte"; import { - ExclamationCircleSolid, BellActiveSolid, ChartLineUpOutline, CheckCircleSolid, CloseCircleSolid, + ExclamationCircleSolid, UserSettingsOutline, } from "flowbite-svelte-icons"; import AlertMessage from "./AlertMessage.svelte"; @@ -57,29 +57,28 @@ const breakpoints = { "2xl": 1536, }; -// TODO: make this reactive such that the page reloads when the width changes +// TODO: make this reactive such that the page reloads when the width changes // not done here yet let windowidth = $state(window.innerWidth); let numShownAnswersessions = $derived.by(() => { if (windowidth >= breakpoints["2xl"]) { return 10; - } + } if (windowidth >= breakpoints.xl) { return 8; - } + } if (windowidth >= breakpoints.lg) { return 6; - } + } if (windowidth >= breakpoints.md) { return 4; - } + } if (windowidth >= breakpoints.sm) { return 3; } return 2; }); - let currentSessionIndices = $state([0, numShownAnswersessions]); // lower and upper bond for currently shown indices let relevant_sessionkeys = $state([] as number[]); // keys of the answersessions that are currently shown let showMoreInfo = $state(false); @@ -270,12 +269,16 @@ function generateReport(): string { report += `

${milestoneGroups[Number(aid)][Number(mid)].text[i18n.locale].title}

`; report += ` ${score === 1 ? i18n.tr.milestone.recommendOk : score === 0 ? i18n.tr.milestone.recommendWatch : score === -1 ? i18n.tr.milestone.recommendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; - for (let [ms_id, ms_score] of Object.entries(detailed[Number(aid)][mid])) { + for (let [ms_id, ms_score] of Object.entries( + detailed[Number(aid)][mid], + )) { // ms_id : ms_score report += ` ${ - milestoneGroups[Number(aid)][Number(mid)].milestones.find((element: any) => { - return element.id === Number(ms_id); - }).text[i18n.locale].title + milestoneGroups[Number(aid)][Number(mid)].milestones.find( + (element: any) => { + return element.id === Number(ms_id); + }, + ).text[i18n.locale].title }:`; report += ` ${ms_score === 1 ? i18n.tr.milestone.recommendOkShort : ms_score === 0 ? i18n.tr.milestone.recommendWatchShort : ms_score === -1 ? i18n.tr.milestone.recommendHelpShort : i18n.tr.milestone.notEnoughDataYet} \n`; } @@ -348,7 +351,7 @@ let promise = $state(setup()); {#snippet summaryEvaluationElement(symbol: any, color: string, text: string)} {i18n.tr.milestone.summaryScore} - {text} + {text} {/snippet} @@ -456,8 +459,8 @@ let promise = $state(setup()); {#each Object.entries(summary[aid]) as [mid, score]}
- From 67d4641d46022db4f4d6e2dac80471bd1af62651 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 6 Mar 2025 16:34:28 +0100 Subject: [PATCH 09/12] =?UTF-8?q?remove=20refactoring=20skeleton=20again,?= =?UTF-8?q?=20doesn=C2=B4t=20belong=20here?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/components/ChildrenFeedback.svelte | 85 ++++++++++--------- .../ChildrenFeedback/Childrenfeedback.svelte | 0 .../ChildrenFeedback/feedbackDisplay.svelte | 0 .../ChildrenFeedback/generateReport.js | 0 .../ChildrenFeedback/preamble.svelte | 0 .../ChildrenFeedback/processData.js | 0 .../lib/components/ChildrenFeedback/utils.js | 0 .../ChildrenFeedback/Childrenfeedback.spec.ts | 0 .../ChildrenFeedback/feedbackDisplay.spec.ts | 0 .../ChildrenFeedback/generateReport.spec.ts | 0 .../tests/ChildrenFeedback/preamble.spec.ts | 0 .../ChildrenFeedback/processData.spec.ts | 0 frontend/tests/ChildrenFeedback/utils.spec.ts | 0 13 files changed, 45 insertions(+), 40 deletions(-) delete mode 100644 frontend/src/lib/components/ChildrenFeedback/Childrenfeedback.svelte delete mode 100644 frontend/src/lib/components/ChildrenFeedback/feedbackDisplay.svelte delete mode 100644 frontend/src/lib/components/ChildrenFeedback/generateReport.js delete mode 100644 frontend/src/lib/components/ChildrenFeedback/preamble.svelte delete mode 100644 frontend/src/lib/components/ChildrenFeedback/processData.js delete mode 100644 frontend/src/lib/components/ChildrenFeedback/utils.js delete mode 100644 frontend/tests/ChildrenFeedback/Childrenfeedback.spec.ts delete mode 100644 frontend/tests/ChildrenFeedback/feedbackDisplay.spec.ts delete mode 100644 frontend/tests/ChildrenFeedback/generateReport.spec.ts delete mode 100644 frontend/tests/ChildrenFeedback/preamble.spec.ts delete mode 100644 frontend/tests/ChildrenFeedback/processData.spec.ts delete mode 100644 frontend/tests/ChildrenFeedback/utils.spec.ts diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 971cd4a4..28a737ba 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -57,29 +57,28 @@ const breakpoints = { "2xl": 1536, }; -// TODO: make this reactive such that the page reloads when the width changes +// TODO: make this reactive such that the page reloads when the width changes // not done here yet let windowidth = $state(window.innerWidth); let numShownAnswersessions = $derived.by(() => { if (windowidth >= breakpoints["2xl"]) { return 10; - } + } if (windowidth >= breakpoints.xl) { return 8; - } + } if (windowidth >= breakpoints.lg) { return 6; - } + } if (windowidth >= breakpoints.md) { return 4; - } + } if (windowidth >= breakpoints.sm) { return 3; } return 2; }); - let currentSessionIndices = $state([0, numShownAnswersessions]); // lower and upper bond for currently shown indices let relevant_sessionkeys = $state([] as number[]); // keys of the answersessions that are currently shown let showMoreInfo = $state(false); @@ -270,12 +269,16 @@ function generateReport(): string { report += `

${milestoneGroups[Number(aid)][Number(mid)].text[i18n.locale].title}

`; report += ` ${score === 1 ? i18n.tr.milestone.recommendOk : score === 0 ? i18n.tr.milestone.recommendWatch : score === -1 ? i18n.tr.milestone.recommendHelp : i18n.tr.milestone.notEnoughDataYet} \n\n`; - for (let [ms_id, ms_score] of Object.entries(detailed[Number(aid)][mid])) { + for (let [ms_id, ms_score] of Object.entries( + detailed[Number(aid)][mid], + )) { // ms_id : ms_score report += ` ${ - milestoneGroups[Number(aid)][Number(mid)].milestones.find((element: any) => { - return element.id === Number(ms_id); - }).text[i18n.locale].title + milestoneGroups[Number(aid)][Number(mid)].milestones.find( + (element: any) => { + return element.id === Number(ms_id); + }, + ).text[i18n.locale].title }:`; report += ` ${ms_score === 1 ? i18n.tr.milestone.recommendOkShort : ms_score === 0 ? i18n.tr.milestone.recommendWatchShort : ms_score === -1 ? i18n.tr.milestone.recommendHelpShort : i18n.tr.milestone.notEnoughDataYet} \n`; } @@ -369,7 +372,7 @@ let promise = $state(setup()); {#snippet milestoneHelpButton(milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined)} - + @@ -413,6 +416,35 @@ let promise = $state(setup());
{/snippet} + +{#snippet milestoneGroupsEval(aid: number)} + + {#each Object.entries(summary[aid]) as [mid, score]} +
+ + + {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} + + {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} + {@render evaluation( + milestoneGroups[aid][Number(mid)].milestones.find((element: any) => + { + return element.id === Number(ms_id); + }), + Number(ms_score), + true + )} +
+ {/each} + +
+ {/each} + +{/snippet} + {#snippet legend()}
@@ -451,34 +483,7 @@ let promise = $state(setup()); {/snippet} - -{#snippet milestoneGroupsEval(aid: number)} - - {#each Object.entries(summary[aid]) as [mid, score]} -
- - - {@render evaluation(milestoneGroups[aid][Number(mid)], score as number, false)} - - {#each Object.entries(detailed[aid][mid]) as [ms_id, ms_score]} - {@render evaluation( - milestoneGroups[aid][Number(mid)].milestones.find((element: any) => - { - return element.id === Number(ms_id); - }), - Number(ms_score), - true - )} -
- {/each} - -
- {/each} - -{/snippet} + @@ -506,7 +511,7 @@ let promise = $state(setup()); -
+
{#if relevant_sessionkeys.length=== 0}

{i18n.tr.milestone.noFeedback}

{:else} diff --git a/frontend/src/lib/components/ChildrenFeedback/Childrenfeedback.svelte b/frontend/src/lib/components/ChildrenFeedback/Childrenfeedback.svelte deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/lib/components/ChildrenFeedback/feedbackDisplay.svelte b/frontend/src/lib/components/ChildrenFeedback/feedbackDisplay.svelte deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/lib/components/ChildrenFeedback/generateReport.js b/frontend/src/lib/components/ChildrenFeedback/generateReport.js deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/lib/components/ChildrenFeedback/preamble.svelte b/frontend/src/lib/components/ChildrenFeedback/preamble.svelte deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/lib/components/ChildrenFeedback/processData.js b/frontend/src/lib/components/ChildrenFeedback/processData.js deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/lib/components/ChildrenFeedback/utils.js b/frontend/src/lib/components/ChildrenFeedback/utils.js deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/tests/ChildrenFeedback/Childrenfeedback.spec.ts b/frontend/tests/ChildrenFeedback/Childrenfeedback.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/tests/ChildrenFeedback/feedbackDisplay.spec.ts b/frontend/tests/ChildrenFeedback/feedbackDisplay.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/tests/ChildrenFeedback/generateReport.spec.ts b/frontend/tests/ChildrenFeedback/generateReport.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/tests/ChildrenFeedback/preamble.spec.ts b/frontend/tests/ChildrenFeedback/preamble.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/tests/ChildrenFeedback/processData.spec.ts b/frontend/tests/ChildrenFeedback/processData.spec.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/tests/ChildrenFeedback/utils.spec.ts b/frontend/tests/ChildrenFeedback/utils.spec.ts deleted file mode 100644 index e69de29b..00000000 From 12fe0faa427fcd1ae550ff3d7e46946437923305 Mon Sep 17 00:00:00 2001 From: Harald Mack Date: Thu, 6 Mar 2025 17:13:33 +0100 Subject: [PATCH 10/12] use additional-colors --- frontend/src/lib/components/ChildrenFeedback.svelte | 13 ++++++++----- frontend/tailwind.config.ts | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 28a737ba..eb54e4c0 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -373,7 +373,7 @@ let promise = $state(setup()); {#snippet milestoneHelpButton(milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined)} - @@ -418,7 +418,7 @@ let promise = $state(setup()); {#snippet milestoneGroupsEval(aid: number)} - + {#each Object.entries(summary[aid]) as [mid, score]}
- +
{#if relevant_sessionkeys.length=== 0}

{i18n.tr.milestone.noFeedback}

{:else} {#each relevant_sessionkeys as aid} - + {@render summaryEvaluation(aid)} @@ -529,7 +532,7 @@ let promise = $state(setup());
- +
{:catch error} Date: Thu, 6 Mar 2025 17:20:00 +0100 Subject: [PATCH 11/12] fix miscoloration --- frontend/src/lib/components/ChildrenFeedback.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index eb54e4c0..4bba2314 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -373,7 +373,7 @@ let promise = $state(setup()); {#snippet milestoneHelpButton(milestone_or_group: MilestonePublic | MilestoneGroupPublic | undefined)} - @@ -469,7 +469,7 @@ let promise = $state(setup());
{i18n.tr.milestone.selectFeedback}
- @@ -532,7 +532,7 @@ let promise = $state(setup());
- +
{:catch error} Date: Thu, 6 Mar 2025 16:22:15 +0000 Subject: [PATCH 12/12] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- frontend/src/lib/components/ChildrenFeedback.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 8b935c4c..dbaf0e22 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -516,8 +516,8 @@ let promise = $state(setup());

{i18n.tr.milestone.noFeedback}

{:else} {#each relevant_sessionkeys as aid} -