add modal for detailed milestonegroup feedback

frontend/src/lib/components/ChildrenFeedback.svelte

@@ -144,16 +144,21 @@ const promise = setup();
 				<AccordionItem>
 					<span slot="header">{milestongeGroups[aid][Number(mid)].text[$locale].title}</span>
 					{#if Number(score)  > 0}
+						<div class="flex flex-row items-center">
 						<CheckCircleSolid color = "green" size="xl"/>
 						<p class = "text-lg">{$_("childData.recommendOk")}</p>
-
+						</div>
 					{:else if Number(score) === 0}
+						<div class="flex flex-row items-center">
 						<BellActiveSolid color = "orange"size="xl"/>
 						<p class = "text-lg">{$_("childData.recommendWatch")}</p>
+						</div>
 
 					{:else}
+						<div class="flex flex-row items-center">
 						<CircleMinusSolid color = "red" size="xl"/>
 						<p class = "text-lg">{$_("childData.recommmendHelp")}</p>
+						</div>
 					{/if}
 				</AccordionItem>
 				{/each}

frontend/src/lib/components/DataDisplay/DetailedFeedbackModal.svelte

@@ -0,0 +1,63 @@
+<svelte:options runes={true} />
+<script lang="ts">
+import { Accordion, AccordionItem, Modal, Spinner } from "flowbite-svelte";
+import { _ } from "svelte-i18n";
+import AlertMessage from "../AlertMessage.svelte";
+
+let {
+	open = $bindable(false),
+	session_id = $bindable(null),
+	milestonegroup_id = $bindable(null),
+}: {
+	open: boolean;
+	session_id: number | null;
+	milestonegroup_id: number | null;
+} = $props();
+
+let showAlert = $state(false);
+let alertMessage = $state(
+	$_("childData.alertMessageError") as string | undefined,
+);
+
+async function setup(): Promise<Record<number, number>> {
+	console.log("setup");
+	const detailedFeedbackresponse = await getDetailedFeedbackForMilestonegroup({
+		path: {
+			answersession_id: session_id,
+			milestonegroup_id: milestonegroup_id,
+		},
+	});
+	if (detailedFeedbackresponse.error) {
+		console.log(detailedFeedbackresponse.error);
+		return {};
+	}
+	return detailedFeedbackresponse.data;
+}
+
+let promise = setup();
+</script>
+
+{#await promise}
+<div class = "flex justify-center items-center flex-row">
+	<Spinner /> <p>{$_("childData.loadingMessage")}</p>
+</div>
+{:then detailedFeedback}
+{#if showAlert }
+<AlertMessage title = {$_("childData.alertMessageTitle")} message = {alertMessage} />
+{/if}
+<Modal open={open}>
+    <Accordion>
+        {#each Object.keys(detailedFeedback) as key}
+        <AccordionItem >
+            <span slot="header">{key}</span>
+            <p>{detailedFeedback[key]}</p>
+        </AccordionItem>
+        {/each}
+    </Accordion>
+</Modal>
+{:catch error}
+<AlertMessage
+    message = {`${alertMessage} ${error}`}
+    title = {$_("childData.alertMessageTitle")}
+/>
+{/await}

mondey_backend/src/mondey_backend/routers/scores.py

@@ -11,6 +11,7 @@
 from ..models.children import Child
 from ..models.milestones import MilestoneAgeScore
 from ..models.milestones import MilestoneAgeScores
+from ..models.milestones import MilestoneAnswer
 from ..models.milestones import MilestoneAnswerSession
 from ..models.milestones import MilestoneGroupStatistics
 from .utils import _session_has_expired
@@ -79,6 +80,29 @@ def leq(val: float, lim: float) -> bool:
         return TrafficLight.green.value
 
 
+def compute_detailed_feedback_for_answers(
+    session: SessionDep,
+    answers: list[MilestoneAnswer],
+    statistics: dict[int, MilestoneAgeScores],
+    age: int,
+) -> dict[int, int]:
+    milestonegroup_result: dict[int, int] = {}  # type: ignore
+    for answer in answers:
+        if statistics.get(answer.milestone_id) is None:  # type: ignore
+            stat = calculate_milestone_statistics_by_age(
+                session,
+                answer.milestone_id,  # type: ignore
+            )  # type: ignore
+
+            statistics[answer.milestone_id] = stat  # type: ignore
+        feedback = compute_feedback_simple(
+            statistics[answer.milestone_id].scores[age],  # type: ignore
+            answer.answer,  # type: ignore
+        )  # type: ignore
+        milestonegroup_result[answer.milestone_id] = feedback  # type: ignore
+    return milestonegroup_result
+
+
 def compute_detailed_milestonegroup_feedback_for_answersession(
     session: SessionDep,
     answersession: MilestoneAnswerSession,
@@ -99,20 +123,9 @@ def compute_detailed_milestonegroup_feedback_for_answersession(
     result: dict[int, dict[int, int]] = {}
     statistics: dict[int, MilestoneAgeScores] = {}
     for milestonegroup_id, answers in filtered_answers.items():
-        milestonegroup_result: dict[int, int] = result.get(milestonegroup_id, {})  # type: ignore
-        for answer in answers:
-            if statistics.get(answer.milestone_id) is None:  # type: ignore
-                stat = calculate_milestone_statistics_by_age(
-                    session,
-                    answer.milestone_id,  # type: ignore
-                )  # type: ignore
-
-                statistics[answer.milestone_id] = stat  # type: ignore
-            feedback = compute_feedback_simple(
-                statistics[answer.milestone_id].scores[age],  # type: ignore
-                answer.answer,  # type: ignore
-            )  # type: ignore
-            milestonegroup_result[answer.milestone_id] = feedback  # type: ignore
+        milestonegroup_result = compute_detailed_feedback_for_answers(
+            session, answers, statistics, age
+        )
         result[milestonegroup_id] = milestonegroup_result  # type: ignore
     return result
 

mondey_backend/src/mondey_backend/routers/users.py

@@ -24,12 +24,14 @@
 from ..models.users import UserRead
 from ..models.users import UserUpdate
 from ..users import fastapi_users
+from .scores import compute_detailed_feedback_for_answers
 from .scores import compute_detailed_milestonegroup_feedback_for_answersession
 from .scores import compute_summary_milestonegroup_feedback_for_answersession
 from .utils import _session_has_expired
 from .utils import add
 from .utils import child_image_path
 from .utils import get
+from .utils import get_child_age_in_months
 from .utils import get_db_child
 from .utils import get_milestonegroups_for_answersession
 from .utils import get_or_create_current_milestone_answer_session
@@ -270,6 +272,34 @@ def get_milestonegroups_for_session(
         answersession = get(session, MilestoneAnswerSession, answersession_id)
         return get_milestonegroups_for_answersession(session, answersession)
 
+    @router.get(
+        "/feedback/answersession={answersession_id}/milestonegroup={milestonegroup_id}/details",
+        response_model=dict[int, int],
+    )
+    def get_detailed_feedback_for_milestonegroup(
+        session: SessionDep,
+        current_active_user: CurrentActiveUserDep,
+        answersession_id: int,
+        milestonegroup_id: int,
+    ) -> dict[int, int]:
+        answersession = get(session, MilestoneAnswerSession, answersession_id)
+        m = get(session, MilestoneGroupPublic, milestonegroup_id)
+        answers = [
+            answersession.answers[ms.id]
+            for ms in m.milestones
+            if ms.id in answersession.answers and ms.id is not None
+        ]
+        child = get_db_child(session, current_active_user, answersession.child_id)
+        age = get_child_age_in_months(child, answersession.created_at)
+        statistics = {}  # type: ignore
+        feedback = compute_detailed_feedback_for_answers(
+            session,
+            answers,
+            statistics,
+            age,
+        )
+        return feedback
+
     @router.get(
         "/feedback/answersession={answersession_id}/summary",
         response_model=dict[int, int],