Neues Login Design und Dashboard
This commit is contained in:
Moritz Utcke
68
src/modules/Dashboard/DashboardAusweiseModule.svelte
Normal file
68
src/modules/Dashboard/DashboardAusweiseModule.svelte
Normal file
@@ -0,0 +1,68 @@
|
||||
<script lang="ts">
|
||||
import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
|
||||
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
|
||||
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
|
||||
import { client } from "src/trpc";
|
||||
export let user: BenutzerClient;
|
||||
|
||||
let ausweisRequest = client.v1.benutzer.getAusweise.query({
|
||||
limit: 10
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
|
||||
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="card w-96 card-bordered bg-base-200 border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="badge badge-warning font-semibold">Warnung!</div>
|
||||
<h2 class="card-title">Gebäudebilder</h2>
|
||||
<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a class="btn btn-primary">Beheben</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card w-96 card-bordered bg-base-200 border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="badge badge-error font-semibold">Fehler!</div>
|
||||
<h2 class="card-title">Daten</h2>
|
||||
<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a class="btn btn-primary">Beheben</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
|
||||
|
||||
<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
|
||||
|
||||
{#await ausweisRequest}
|
||||
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
|
||||
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
|
||||
|
||||
{:then ausweise}
|
||||
{#if ausweise.length == 0}
|
||||
<div class="">
|
||||
<h1 class="text-2xl">Es konnten keine Ausweise gefunden werden.</h1>
|
||||
<p>Erstellen sie einen Verbrauchsausweis für ihr Wohngebäude <a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">hier</a></p>
|
||||
</div>
|
||||
{:else}
|
||||
{#each ausweise as ausweis}
|
||||
<DashboardAusweis {ausweis}></DashboardAusweis>
|
||||
{/each}
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mt-12">
|
||||
<div class="join">
|
||||
<button class="join-item btn btn-ghost shadow-none">1</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">2</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">3</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">4</button>
|
||||
</div>
|
||||
</div>
|
||||
131
src/modules/Dashboard/DashboardEinstellungenModule.svelte
Normal file
131
src/modules/Dashboard/DashboardEinstellungenModule.svelte
Normal file
@@ -0,0 +1,131 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
Reader,
|
||||
EnvelopeClosed,
|
||||
Cube,
|
||||
Person,
|
||||
} from "radix-svelte-icons";
|
||||
import { Tabs, Tab, TabList, TabPanel } from "../../components/Tabs";
|
||||
import { dialogs } from "../../../svelte-dialogs.config";
|
||||
|
||||
function profilSpeichern() {
|
||||
dialogs.confirm({
|
||||
title: "Profil speichern",
|
||||
text: "Möchtest du deine Änderungen speichern?",
|
||||
confirmButtonText: "Speichern",
|
||||
declineButtonText: "Abbrechen",
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1 class="text-4xl font-medium my-8">Einstellungen</h1>
|
||||
<Tabs class="h-full">
|
||||
<div class="grid grid-cols-[1fr_3fr] h-full gap-8">
|
||||
<TabList>
|
||||
<Tab>
|
||||
<Person size={22} />
|
||||
Profil
|
||||
</Tab>
|
||||
<Tab>
|
||||
<Reader width={22} height={22} />
|
||||
Ausweise
|
||||
</Tab>
|
||||
<Tab>
|
||||
<EnvelopeClosed width={22} height={22} />
|
||||
Kontakt
|
||||
</Tab>
|
||||
<li>
|
||||
<details>
|
||||
<summary class="tab w-full outline-0 hover:outline-0">
|
||||
<Cube width={22} height={22} />
|
||||
Services</summary
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<Tab>
|
||||
<EnvelopeClosed width={22} height={22} />
|
||||
Kontakt
|
||||
</Tab>
|
||||
</li>
|
||||
<li>
|
||||
<Tab>
|
||||
<EnvelopeClosed width={22} height={22} />
|
||||
Kontakt
|
||||
</Tab>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</TabList>
|
||||
<div
|
||||
class="border border-base-300 w-full h-full rounded-lg bg-base-200 p-8"
|
||||
>
|
||||
<TabPanel>
|
||||
<h2 class="text-2xl font-medium">Profil</h2>
|
||||
<div class="flex flex-col gap-4 my-4 max-w-2xl">
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="whitespace-nowrap">Vorname</span>
|
||||
<input type="password" class="input text-base-content font-medium" placeholder="Max">
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="whitespace-nowrap">Nachname</span>
|
||||
<input type="password" class="input text-base-content font-medium" placeholder="Müller">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="whitespace-nowrap">Email Adresse</span>
|
||||
<input type="text" class="input text-base-content font-medium" placeholder="name@email.com" value="zobhusdi@wo.tk">
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="whitespace-nowrap">Passwort</span>
|
||||
<input type="password" class="input text-base-content font-medium" placeholder="*********">
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="whitespace-nowrap">Passwort bestätigen</span>
|
||||
<input type="password" class="input text-base-content font-medium" placeholder="*********">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" on:click={profilSpeichern}>Speichern</button>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<h1>Panel Two</h1>
|
||||
</TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
</Tabs>
|
||||
|
||||
<style>
|
||||
:global(.tab-list) {
|
||||
@apply menu flex flex-col gap-2 px-0 bg-base-200 rounded-lg border border-base-300;
|
||||
}
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
|
||||
|
||||
:global(*) {
|
||||
font-family: Poppins !important;
|
||||
}
|
||||
|
||||
:global(.tab.selected) {
|
||||
@apply bg-base-300;
|
||||
}
|
||||
|
||||
:global(.tab) {
|
||||
@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
|
||||
}
|
||||
|
||||
:global(.tab:hover) {
|
||||
@apply bg-base-300 outline-0;
|
||||
}
|
||||
|
||||
:global(.tab:focus) {
|
||||
@apply shadow-none;
|
||||
}
|
||||
|
||||
:global(summary.tab::after) {
|
||||
@apply ml-auto;
|
||||
}
|
||||
</style>
|
||||
60
src/modules/Dashboard/UserModule.svelte
Normal file
60
src/modules/Dashboard/UserModule.svelte
Normal file
@@ -0,0 +1,60 @@
|
||||
<script lang="ts">
|
||||
import { BenutzerClient, VerbrauchsausweisWohnenClient } from "#components/Ausweis/types";
|
||||
import DashboardAusweis from "#components/Dashboard/DashboardAusweis.svelte";
|
||||
import DashboardAusweisSkeleton from "#components/Dashboard/DashboardAusweisSkeleton.svelte";
|
||||
export let user: BenutzerClient;
|
||||
export let ausweise: VerbrauchsausweisWohnenClient[];
|
||||
|
||||
console.log(ausweise);
|
||||
|
||||
</script>
|
||||
|
||||
<h1 class="text-4xl font-medium my-8">Wichtiges</h1>
|
||||
|
||||
<div class="flex flex-row gap-4">
|
||||
<div class="card w-96 card-bordered bg-base-200 border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="badge badge-warning font-semibold">Warnung!</div>
|
||||
<h2 class="card-title">Gebäudebilder</h2>
|
||||
<p>Wir haben festgestellt, dass die Bilder für eines ihrer Gebäude nicht ganz den Anforderungen entsprechen, beheben sie das Problem, damit der Fehler so schnell wie möglich behoben werden kann.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a class="btn btn-primary">Beheben</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card w-96 card-bordered bg-base-200 border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="badge badge-error font-semibold">Fehler!</div>
|
||||
<h2 class="card-title">Daten</h2>
|
||||
<p>Der Ausweis für <strong>Curslacker Deich 170</strong> hat unvollständige Daten oder die gegebenen Daten sind fehlerhaft, bitte beheben sie das Problem, damit der Ausweis so schnell wie möglich ausgestellt werden kann.</p>
|
||||
<div class="card-actions justify-end">
|
||||
<a class="btn btn-primary">Beheben</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl font-medium my-8">Ihre Ausweise</h1>
|
||||
|
||||
<div class="grid xl:grid-cols-2 grid-cols-1 gap-4">
|
||||
|
||||
{#if ausweise.length == 0}
|
||||
|
||||
{:else}
|
||||
{#each ausweise as ausweis}
|
||||
<DashboardAusweis {ausweis}></DashboardAusweis>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<DashboardAusweisSkeleton></DashboardAusweisSkeleton>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center mt-12">
|
||||
<div class="join">
|
||||
<button class="join-item btn btn-ghost shadow-none">1</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">2</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">3</button>
|
||||
<button class="join-item btn btn-ghost shadow-none">4</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user