diff --git a/frontend/src/lib/components/ChildrenFeedback.svelte b/frontend/src/lib/components/ChildrenFeedback.svelte index 9520f92d..04378a14 100644 --- a/frontend/src/lib/components/ChildrenFeedback.svelte +++ b/frontend/src/lib/components/ChildrenFeedback.svelte @@ -13,7 +13,7 @@ import { import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte"; import { i18n } from "$lib/i18n.svelte"; import { currentChild } from "$lib/stores/childrenStore.svelte"; -import { activeTabChildren } from "$lib/stores/componentStore"; +import { activePage } from "$lib/stores/componentStore"; import { user } from "$lib/stores/userStore.svelte"; import { Accordion, @@ -35,6 +35,7 @@ import { CheckCircleSolid, CloseCircleSolid, ExclamationCircleSolid, + GridPlusSolid, UserSettingsOutline, } from "flowbite-svelte-icons"; import AlertMessage from "./AlertMessage.svelte"; @@ -81,17 +82,24 @@ let milestonePresentation = $state([ }, ]); const breadcrumbdata: any[] = [ + { + label: i18n.tr.childData.overviewLabel, + onclick: () => { + activePage.set("childrenGallery"); + }, + symbol: GridPlusSolid, + }, { label: currentChild.name, onclick: () => { - activeTabChildren.set("childrenRegistration"); + activePage.set("childrenRegistration"); }, symbol: UserSettingsOutline, }, { label: i18n.tr.milestone.feedbackTitle, onclick: () => { - activeTabChildren.set("childrenFeedback"); + activePage.set("childrenFeedback"); }, symbol: ChartLineUpOutline, }, diff --git a/frontend/src/lib/components/ChildrenGallery.svelte b/frontend/src/lib/components/ChildrenGallery.svelte index 6f1df9f5..3be28884 100644 --- a/frontend/src/lib/components/ChildrenGallery.svelte +++ b/frontend/src/lib/components/ChildrenGallery.svelte @@ -6,7 +6,7 @@ import CardDisplay from "$lib/components/DataDisplay/CardDisplay.svelte"; import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte"; import { i18n } from "$lib/i18n.svelte"; import { currentChild } from "$lib/stores/childrenStore.svelte"; -import { activeTabChildren } from "$lib/stores/componentStore"; +import { activePage } from "$lib/stores/componentStore"; import { type CardElement, type CardStyle } from "$lib/util"; import { Heading, Spinner } from "flowbite-svelte"; import AlertMessage from "./AlertMessage.svelte"; @@ -87,7 +87,7 @@ async function setup(): Promise { onclick: async () => { currentChild.id = child.id; await currentChild.load_data(); - activeTabChildren.set("childrenRegistration"); + activePage.set("childrenRegistration"); }, }, }; @@ -103,7 +103,7 @@ async function setup(): Promise { events: { onclick: () => { currentChild.id = null; - activeTabChildren.set("childrenRegistration"); + activePage.set("childrenRegistration"); }, }, }, @@ -141,7 +141,7 @@ const searchData = [ /> {/if} -
+
{ + activePage.set("childrenGallery"); + }, + symbol: GridPlusSolid, + }, { label: childLabel, symbol: UserSettingsOutline, + onclick: () => { + activePage.set("childrenRegistration"); + }, }, ]); @@ -255,7 +266,7 @@ async function submitData(): Promise { // disable all elements to make editing a conscious choice amd go back to childrenGallery console.log("submission of child data successful."); - activeTabChildren.set("childrenGallery"); + activePage.set("childrenGallery"); } @@ -418,7 +429,7 @@ async function submitData(): Promise { type="button" color="green" on:click={() => { - activeTabChildren.set("milestoneGroup"); + activePage.set("milestoneGroup"); }} > @@ -429,7 +440,7 @@ async function submitData(): Promise { color = "yellow" type ="button" onclick={() => { - activeTabChildren.set("childrenFeedback"); + activePage.set("childrenFeedback"); }} > @@ -460,7 +471,7 @@ async function submitData(): Promise { alertMessage=i18n.tr.childData.alertMessageError + response.error.detail; } else { - activeTabChildren.update((value) => { + activePage.update((value) => { return "childrenGallery"; }); currentChild.id = null; diff --git a/frontend/src/lib/components/DarkModeChooser.svelte b/frontend/src/lib/components/DarkModeChooser.svelte new file mode 100644 index 00000000..86b770af --- /dev/null +++ b/frontend/src/lib/components/DarkModeChooser.svelte @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/frontend/src/lib/components/FrontPageCard.svelte b/frontend/src/lib/components/FrontPageCard.svelte index ba2c523c..25d495be 100644 --- a/frontend/src/lib/components/FrontPageCard.svelte +++ b/frontend/src/lib/components/FrontPageCard.svelte @@ -1,7 +1,7 @@
@@ -10,10 +10,16 @@ import { Button, Card, Tooltip } from "flowbite-svelte";

{i18n.tr.frontpage.summary}

- - {i18n.tr.frontpage.toolTip} -
+ + +
diff --git a/frontend/src/lib/components/LocaleChooser.svelte b/frontend/src/lib/components/LocaleChooser.svelte index c05a305e..86e52467 100644 --- a/frontend/src/lib/components/LocaleChooser.svelte +++ b/frontend/src/lib/components/LocaleChooser.svelte @@ -1,17 +1,23 @@ -
+
+ diff --git a/frontend/src/lib/components/Milestone.svelte b/frontend/src/lib/components/Milestone.svelte index 26e76f48..031608a1 100644 --- a/frontend/src/lib/components/Milestone.svelte +++ b/frontend/src/lib/components/Milestone.svelte @@ -11,7 +11,7 @@ import SubmitMilestoneImageModal from "$lib/components/DataInput/SubmitMilestone import MilestoneButton from "$lib/components/MilestoneButton.svelte"; import { i18n } from "$lib/i18n.svelte"; import { currentChild } from "$lib/stores/childrenStore.svelte"; -import { activeTabChildren } from "$lib/stores/componentStore"; +import { activePage } from "$lib/stores/componentStore"; import { contentStore } from "$lib/stores/contentStore.svelte"; import { Accordion, AccordionItem, Button, Checkbox } from "flowbite-svelte"; import { @@ -19,6 +19,7 @@ import { ArrowRightOutline, EditOutline, GridOutline, + GridPlusSolid, InfoCircleSolid, QuestionCircleSolid, RectangleListOutline, @@ -83,7 +84,7 @@ async function nextMilestone() { currentMilestoneIndex + 1 === contentStore.milestoneGroupData.milestones.length ) { - activeTabChildren.set("milestoneOverview"); + activePage.set("milestoneOverview"); return; } currentMilestoneIndex += 1; @@ -145,24 +146,31 @@ let currentImageIndex = $state(0); let showSubmitMilestoneImageModal = $state(false); const promise = setup(); const breadcrumbdata = $derived([ + { + label: i18n.tr.childData.overviewLabel, + onclick: () => { + activePage.set("childrenGallery"); + }, + symbol: GridPlusSolid, + }, { label: currentChild.name, onclick: () => { - activeTabChildren.set("childrenRegistration"); + activePage.set("childrenRegistration"); }, symbol: UserSettingsOutline, }, { label: i18n.tr.milestone.groupOverviewLabel, onclick: () => { - activeTabChildren.set("milestoneGroup"); + activePage.set("milestoneGroup"); }, symbol: RectangleListOutline, }, { label: contentStore.milestoneGroupData.text[i18n.locale].title, onclick: () => { - activeTabChildren.set("milestoneOverview"); + activePage.set("milestoneOverview"); }, symbol: GridOutline, }, diff --git a/frontend/src/lib/components/MilestoneGroup.svelte b/frontend/src/lib/components/MilestoneGroup.svelte index 770448c5..0695a04e 100644 --- a/frontend/src/lib/components/MilestoneGroup.svelte +++ b/frontend/src/lib/components/MilestoneGroup.svelte @@ -11,10 +11,11 @@ import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte"; import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte"; import { i18n } from "$lib/i18n.svelte"; import { currentChild } from "$lib/stores/childrenStore.svelte"; -import { activeTabChildren } from "$lib/stores/componentStore"; +import { activePage } from "$lib/stores/componentStore"; import { contentStore } from "$lib/stores/contentStore.svelte"; import { Spinner } from "flowbite-svelte"; import { + GridPlusSolid, RectangleListOutline, UserSettingsOutline, } from "flowbite-svelte-icons"; @@ -95,7 +96,7 @@ async function setup(): Promise { progress: computeProgress(item.milestones, answerSession.data), events: { onclick: () => { - activeTabChildren.set("milestoneOverview"); + activePage.set("milestoneOverview"); contentStore.milestoneGroup = item.id; contentStore.milestoneGroupData = item; }, @@ -108,16 +109,26 @@ async function setup(): Promise { } const breadcrumbdata: any[] = [ + { + label: i18n.tr.childData.overviewLabel, + onclick: () => { + activePage.set("childrenGallery"); + }, + symbol: GridPlusSolid, + }, { label: currentChild.name, symbol: UserSettingsOutline, onclick: () => { - activeTabChildren.set("childrenRegistration"); + activePage.set("childrenRegistration"); }, }, { label: i18n.tr.milestone.groupOverviewLabel, symbol: RectangleListOutline, + onclick: () => { + activePage.set("milestoneGroup"); + }, }, ]; @@ -227,7 +238,7 @@ const searchData: any[] = [
{:catch error} { - activeTabChildren.set("milestoneOverview"); + activePage.set("milestoneOverview"); showAlert = false; }}/> {/await} diff --git a/frontend/src/lib/components/MilestoneOverview.svelte b/frontend/src/lib/components/MilestoneOverview.svelte index 2a103e1e..57d84ed9 100644 --- a/frontend/src/lib/components/MilestoneOverview.svelte +++ b/frontend/src/lib/components/MilestoneOverview.svelte @@ -10,7 +10,7 @@ import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte"; import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte"; import { i18n } from "$lib/i18n.svelte"; import { currentChild } from "$lib/stores/childrenStore.svelte"; -import { activeTabChildren } from "$lib/stores/componentStore"; +import { activePage } from "$lib/stores/componentStore"; import { contentStore } from "$lib/stores/contentStore.svelte"; import { CheckCircleSolid, @@ -125,7 +125,7 @@ async function setup(): Promise { summary: item?.text?.[i18n.locale]?.desc ?? "", events: { onclick: () => { - activeTabChildren.set("milestone"); + activePage.set("milestone"); contentStore.milestone = item.id; contentStore.milestoneData = item; contentStore.milestoneIndex = idx; @@ -192,21 +192,21 @@ const breadcrumbdata: any[] = [ { label: currentChild.name, onclick: () => { - activeTabChildren.set("childrenRegistration"); + activePage.set("childrenRegistration"); }, symbol: UserSettingsOutline, }, { label: i18n.tr.milestone.groupOverviewLabel, onclick: () => { - activeTabChildren.set("milestoneGroup"); + activePage.set("milestoneGroup"); }, symbol: RectangleListOutline, }, { label: contentStore.milestoneGroupData.text[i18n.locale].title, onclick: () => { - activeTabChildren.set("milestoneOverview"); + activePage.set("milestoneOverview"); }, symbol: GridOutline, }, diff --git a/frontend/src/lib/components/Navigation/Breadcrumbs.svelte b/frontend/src/lib/components/Navigation/Breadcrumbs.svelte index 7dfd3ce5..90b2398e 100644 --- a/frontend/src/lib/components/Navigation/Breadcrumbs.svelte +++ b/frontend/src/lib/components/Navigation/Breadcrumbs.svelte @@ -14,7 +14,7 @@ let { data }: { data: any[] } = $props(); {#each data as item}
{#if item.href} @@ -26,7 +26,7 @@ let { data }: { data: any[] } = $props(); {:else} + + + {@render sidebarNav()} + + +
+ +
+
+ {:else} + + {/if} + {:else} +
+
+ {i18n.tr.login.notLoggedIn} +
-
- + + {/if} {/if} diff --git a/frontend/src/lib/components/UserProfile.svelte b/frontend/src/lib/components/UserProfile.svelte deleted file mode 100644 index 3a231b6c..00000000 --- a/frontend/src/lib/components/UserProfile.svelte +++ /dev/null @@ -1,71 +0,0 @@ - - - - - {#if showAlert} - { - showAlert = false; - }} - /> - {/if} - {#if user.data !== null} -
-

- {user.data?.email} -

- - -
- {:else} -
- {i18n.tr.login.profileTitleDefault} - -
- {/if} - diff --git a/frontend/src/lib/stores/componentStore.ts b/frontend/src/lib/stores/componentStore.ts index 0df9f7f9..c13653d8 100644 --- a/frontend/src/lib/stores/componentStore.ts +++ b/frontend/src/lib/stores/componentStore.ts @@ -36,5 +36,4 @@ export const componentTable: ComponentTable = { }; // used in userlandingpage to make it single page -export const activeTabPersonal = writable("userDataInput"); -export const activeTabChildren = writable("childrenGallery"); +export const activePage = writable("userDataInput"); diff --git a/frontend/src/lib/translations.ts b/frontend/src/lib/translations.ts index 2512f9e3..ab05ca08 100644 --- a/frontend/src/lib/translations.ts +++ b/frontend/src/lib/translations.ts @@ -174,7 +174,7 @@ export const translationIds = { adminRole: "Admin", submitButtonLabel: "Absenden", selectPlaceholder: "Bitte auswählen", - profileButtonLabelDefault: "Einloggen oder Registrieren", + profileButtonLabelDefault: "Einloggen", profileButtonLabelLogout: "Logout", profileTitleDefault: "Willkommen!", profileAccess: "Ihr Profil", @@ -195,6 +195,7 @@ export const translationIds = { submitButtonLabel: "Abschließen", changeData: "Daten vollständig, zum bearbeiten klicken", loadingMessage: "Daten werden geladen", + settingsLabel: "Einstellungen", }, settings: { settings: "Einstellungen", @@ -287,6 +288,7 @@ export const translationIds = { summary: "Hier sind Sie genau richtig!", buttonLabel: "Anmeldung", toolTip: "Anmelden oder ein neues Konto erstellen", + toggleDarkmode: "Darkmode ein- oder ausschalten", }, frontpageAbout: { heading: "Was ist MONDEY?", diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 10bd466f..c987ecde 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -5,23 +5,24 @@ import logo_dark from "$lib/assets/mondey_dark.svg"; import logo_light from "$lib/assets/mondey_light.svg"; import LocaleChooser from "$lib/components/LocaleChooser.svelte"; import Footer from "$lib/components/Navigation/Footer.svelte"; -import FunctionalIcon from "$lib/components/Navigation/FunctionalIcon.svelte"; -import UserProfile from "$lib/components/UserProfile.svelte"; import { i18n } from "$lib/i18n.svelte"; import { user } from "$lib/stores/userStore.svelte"; import { - Avatar, - DarkMode, + Button, NavBrand, NavHamburger, NavLi, NavUl, Navbar, } from "flowbite-svelte"; -import { MoonSolid, SunSolid } from "flowbite-svelte-icons"; import { onMount } from "svelte"; import "../app.css"; +import DarkModeChooser from "$lib/components/DarkModeChooser.svelte"; + +import { page } from "$app/stores"; +let isUserLand = $derived($page.url.pathname.includes("userLandingpage")); +// Done this way because, other approaches to the layout (like a different +layout for userLand) would largely duplicate this one, but it is still hardcoded. let { children } = $props(); @@ -40,31 +41,38 @@ onMount(async () => { MONDEY Logo - - - {i18n.tr.misc.latest} - {i18n.tr.misc.downloads} - {i18n.tr.misc.contact} - - - - - - - + {#if false === isUserLand} + + + {i18n.tr.misc.latest} + {i18n.tr.misc.downloads} + {i18n.tr.misc.contact} - - - + + {#if user.data === null} + + {:else} + + {/if} - + - - + + {/if}
{@render children?.()}