From 933ef6d876805e40e6fcd07b36dcb3631dbb29e3 Mon Sep 17 00:00:00 2001 From: Moritz Utcke Date: Fri, 19 Jan 2024 11:36:46 +0700 Subject: [PATCH] Neues Login Design und Dashboard --- .../VerbrauchsausweisWohnen/erstellen.cy.ts | 2 +- docker-compose.yml | 1 + package.json | 2 + public/images/header/logo-big.svg | 105 ++ .../Ausweis/PerformanceScore.svelte | 22 +- .../Dashboard/DashboardAusweis.svelte | 165 +++ .../Dashboard/DashboardNotification.svelte | 26 + .../Dashboard/DashboardSidebar.svelte | 174 ++-- src/components/Header.astro | 17 +- src/components/HelpLabel.svelte | 2 +- .../NotificationProvider/Notification.svelte | 9 + .../NotificationProvider.svelte | 9 + src/components/NotificationProvider/shared.ts | 80 ++ src/components/SidebarLeft.astro | 26 +- src/components/SidebarRight.astro | 2 +- src/components/Tabs/Tab.svelte | 13 + src/components/Tabs/TabList.svelte | 3 + src/components/Tabs/TabPanel.svelte | 13 + src/components/Tabs/Tabs.svelte | 50 + src/components/Tabs/index.ts | 4 + src/components/ThemeController.svelte | 21 + src/components/Widget.svelte | 981 ++++++++++++------ src/layouts/AusweisLayout.astro | 64 +- src/layouts/Layout.astro | 16 +- src/layouts/MinimalLayout.astro | 103 ++ src/layouts/UserLayout.astro | 7 +- .../VerbrauchsausweisWohnenModule.svelte | 2 +- .../Dashboard/DashboardAusweiseModule.svelte | 68 ++ .../DashboardEinstellungenModule.svelte | 131 +++ src/modules/Dashboard/UserModule.svelte | 60 ++ src/modules/LoginModule.svelte | 24 +- src/modules/RegisterModule.svelte | 26 +- src/modules/UserModule.svelte | 107 -- src/pages/auth/login.astro | 8 +- src/pages/auth/signup.astro | 15 +- src/pages/dashboard/ausweise/index.astro | 26 + src/pages/dashboard/einstellungen/index.astro | 10 + src/pages/{user => dashboard}/index.astro | 13 +- src/style/576.scss | 28 +- src/style/global.scss | 3 +- svelte-dialogs.config.ts | 17 +- 41 files changed, 1769 insertions(+), 686 deletions(-) create mode 100644 public/images/header/logo-big.svg create mode 100644 src/components/Dashboard/DashboardAusweis.svelte create mode 100644 src/components/Dashboard/DashboardNotification.svelte create mode 100644 src/components/NotificationProvider/Notification.svelte create mode 100644 src/components/NotificationProvider/NotificationProvider.svelte create mode 100644 src/components/NotificationProvider/shared.ts create mode 100644 src/components/Tabs/Tab.svelte create mode 100644 src/components/Tabs/TabList.svelte create mode 100644 src/components/Tabs/TabPanel.svelte create mode 100644 src/components/Tabs/Tabs.svelte create mode 100644 src/components/Tabs/index.ts create mode 100644 src/components/ThemeController.svelte create mode 100644 src/layouts/MinimalLayout.astro create mode 100644 src/modules/Dashboard/DashboardAusweiseModule.svelte create mode 100644 src/modules/Dashboard/DashboardEinstellungenModule.svelte create mode 100644 src/modules/Dashboard/UserModule.svelte delete mode 100644 src/modules/UserModule.svelte create mode 100644 src/pages/dashboard/ausweise/index.astro create mode 100644 src/pages/dashboard/einstellungen/index.astro rename src/pages/{user => dashboard}/index.astro (56%) diff --git a/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts b/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts index cf10d396..0164ed33 100644 --- a/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts +++ b/cypress/e2e/VerbrauchsausweisWohnen/erstellen.cy.ts @@ -223,7 +223,7 @@ describe("Verbrauchsausweis erstellen Schritt 1", () => { cy.get("button[name='registrieren']").click(); const email = faker.internet.email(); - const passwort = faker.internet.password(); + const passwort = "test1234"; const vorname = faker.person.firstName(); const nachname = faker.person.lastName(); diff --git a/docker-compose.yml b/docker-compose.yml index 874d32b6..fab66329 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -14,6 +14,7 @@ services: - ./node_modules/@ibcornelsen/ui:/online-energieausweis/node_modules/@ibcornelsen/ui - ./node_modules/@ibcornelsen/database:/online-energieausweis/node_modules/@ibcornelsen/database - ./node_modules/@ibcornelsen/api:/online-energieausweis/node_modules/@ibcornelsen/api + - ./node_modules/radix-svelte-icons:/online-energieausweis/node_modules/radix-svelte-icons - ../api/persistent:/persistent ibcornelsen-api: extends: diff --git a/package.json b/package.json index 1669bfa7..d9946142 100644 --- a/package.json +++ b/package.json @@ -48,11 +48,13 @@ "knex": "^2.4.2", "moment": "^2.29.4", "pg": "^8.11.0", + "radix-svelte-icons": "^1.0.0", "sass": "^1.62.1", "svelte": "^3.59.1", "svelte-dialogs": "^1.2.2", "svelte-preprocess": "^5.0.3", "svelte-ripple-action": "^1.0.5", + "svelte-tabs": "^1.1.0", "tailwindcss": "^3.3.2", "trpc-openapi": "^1.2.0", "uuid": "^9.0.0", diff --git a/public/images/header/logo-big.svg b/public/images/header/logo-big.svg new file mode 100644 index 00000000..e37b1652 --- /dev/null +++ b/public/images/header/logo-big.svg @@ -0,0 +1,105 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/components/Ausweis/PerformanceScore.svelte b/src/components/Ausweis/PerformanceScore.svelte index 52fbfe81..a9f29680 100644 --- a/src/components/Ausweis/PerformanceScore.svelte +++ b/src/components/Ausweis/PerformanceScore.svelte @@ -1,6 +1,8 @@ -
+
Energieeffizienz Skala - - + +
\ No newline at end of file diff --git a/src/components/Dashboard/DashboardAusweis.svelte b/src/components/Dashboard/DashboardAusweis.svelte new file mode 100644 index 00000000..b5459ea1 --- /dev/null +++ b/src/components/Dashboard/DashboardAusweis.svelte @@ -0,0 +1,165 @@ + + +
+
+ Album +
+
+
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+ Verbrauchsausweis +
+
Ausgestellt
+
+

{ausweis.gebaeude_stammdaten.adresse}

+
+ + 54% +
+
+
+ Energieverbrauch + 215kWh/A +
+
+ CO2 Ausstoß + N/A +
+
+ Erstellungsdatum + {moment(ausweis.erstellungsdatum).format( + "DD.MM.YYYY" + )} +
+
+ Baujahr + {ausweis.gebaeude_stammdaten.baujahr_gebaeude[0] || "N/A"} / + {ausweis.gebaeude_stammdaten.baujahr_heizung[0] || + "N/A"} +
+
+ Wohnfläche + {ausweis.gebaeude_stammdaten.flaeche + ? `${ausweis.gebaeude_stammdaten.flaeche}m²` + : "N/A"} +
+
+
+ Bearbeiten + +
+
+
+ + +
+

Hilfe Anfordern

+

+ Brauchen sie Hilfe bei der Erstellung oder Bearbeitung ihres + Ausweises? +

+

+ In unserem Helpdesk finden sie antworten auf + häufig gestellte Fragen. +

+

+ Falls sie dort nicht finden wonach sie suchen, rufen sie uns doch + unter 040 220 31 87 an oder + schreiben sie uns eine email. +

+

+ Wenn wir telefonisch nicht erreichbar sind, können sie uns auch + direkt hier eine Nachricht hinterlassen. +

+
+ + +
+
+
+ +
+
+
+ diff --git a/src/components/Dashboard/DashboardNotification.svelte b/src/components/Dashboard/DashboardNotification.svelte new file mode 100644 index 00000000..de69c5a1 --- /dev/null +++ b/src/components/Dashboard/DashboardNotification.svelte @@ -0,0 +1,26 @@ + + +
+
+

{@html notification.title}

+ {@html notification.description} +
+ +
diff --git a/src/components/Dashboard/DashboardSidebar.svelte b/src/components/Dashboard/DashboardSidebar.svelte index 2e642007..a2ba991e 100644 --- a/src/components/Dashboard/DashboardSidebar.svelte +++ b/src/components/Dashboard/DashboardSidebar.svelte @@ -1,152 +1,94 @@