256 lines
6.7 KiB
Svelte
256 lines
6.7 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
Gear,
|
|
LockClosed,
|
|
CaretDown,
|
|
MagnifyingGlass,
|
|
} from "radix-svelte-icons";
|
|
import { Benutzer, Enums } from "#lib/server/prisma.js";
|
|
|
|
export let lightTheme: boolean;
|
|
export let benutzer: Benutzer;
|
|
export let besteller: Benutzer | null;
|
|
|
|
let id: string;
|
|
|
|
let dropdownOpen = false;
|
|
|
|
function toggleDropdown() {
|
|
dropdownOpen = !dropdownOpen;
|
|
}
|
|
</script>
|
|
|
|
<aside class="rounded-lg bg-white box px-6 py-5">
|
|
<div class="flex flex-row items-center">
|
|
<div class="flex flex-row mr-6">
|
|
<a href="/"
|
|
><img
|
|
src="/images/header/logo-IBC-big.svg"
|
|
class="h-16"
|
|
alt="IBCornelsen - Logo"
|
|
/></a
|
|
>
|
|
</div>
|
|
|
|
<div class="flex-col items-end">
|
|
<div class="text-base-content font-semibold text-left flex">
|
|
{benutzer.vorname}
|
|
{benutzer.name}
|
|
</div>
|
|
<div class="text-base-content text-sm flex">{benutzer.email}</div>
|
|
<a href="/auth/logout" class="text-xs">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="flex flex-col gap-2 mt-0 md:mt-8 px-0">
|
|
<!-- <a class="button-tab" href="/dashboard">
|
|
<Reader width={22} height={22} />
|
|
Ausweise
|
|
</a> -->
|
|
|
|
<div class="flex flex-row gap-2 mb-2">
|
|
<input type="text" bind:value={id} placeholder="ID">
|
|
<button class="button" on:click={() => {
|
|
window.location.href = `/dashboard/objekte/${id}`
|
|
}}><MagnifyingGlass size={24}></MagnifyingGlass></button>
|
|
</div>
|
|
|
|
<div class="relative mb-4">
|
|
<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center" on:click={toggleDropdown}>
|
|
Energieausweis erstellen +
|
|
</button>
|
|
{#if dropdownOpen}
|
|
<div class="absolute top-15 left-0 mt-2 w-50 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-[9999]" on:click|stopPropagation on:keydown|stopPropagation on:keyup|stopPropagation>
|
|
<div class="py-1 w-full" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
|
<a href="/energieausweis-erstellen/verbrauchsausweis-wohngebaeude" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Wohnen Erstellen</a>
|
|
<a href="/energieausweis-erstellen/verbrauchsausweis-gewerbe" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Verbrauchsausweis<br>Gewerbe Erstellen</a>
|
|
<a href="/energieausweis-erstellen/bedarfsausweis-wohngebaeude" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left" role="menuitem">Bedarfsausweis<br>Wohnen Erstellen</a>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{#if benutzer.rolle === Enums.BenutzerRolle.RESELLER}
|
|
<a href="/dashboard/abrechnung" class="button ">Monatliche Abrechnung</a>
|
|
{/if}
|
|
</div>
|
|
|
|
<hr class="border-gray-600" />
|
|
|
|
{#if besteller}
|
|
Besteller
|
|
|
|
<div class="flex flex-row mb-4">
|
|
<div class="item-center mr-4">
|
|
<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
{besteller.vorname} {besteller.name}
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
Eigentümer oder im Auftrag
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
<!-- Soll für den Aussteller sichtbar sein -->
|
|
Tel. 1: {besteller.telefon}<br>
|
|
<!-- Tel. 2: {rechnung.telefon} -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="border-gray-600" />
|
|
{/if}
|
|
|
|
|
|
<!--
|
|
Mitwirkende
|
|
|
|
<div class="flex flex-row mb-1">
|
|
<div class="item-center mr-4">
|
|
<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Ernie Energieberater
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
Energieberater
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row mb-1">
|
|
<div class="item-center mr-4">
|
|
<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Peter Planer
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
Architekt
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row mb-1">
|
|
<div class="item-center mr-4">
|
|
<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Hans Meier
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
Eigentümer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-gray-600" />
|
|
|
|
Experten in der Nähe
|
|
|
|
<div class="flex flex-row mb-1">
|
|
<div class="item-center mr-4">
|
|
<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Thorsten Maas
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
Energieberater
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-row mb-1">
|
|
<div class="item-center mr-4">
|
|
<img src="../../images/profile-placeholder.svg" alt="profile icon" width="40" height="40" />
|
|
</div>
|
|
<div>
|
|
<div>
|
|
Herbert Holm
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
Gutachter
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-gray-600" />
|
|
|
|
<div class="flex justify-end mt-2 mb-2">
|
|
<button class="button flex flex-row rounded-lg gap-2 bg-secondary text-white text-center">
|
|
Einladen
|
|
</button>
|
|
</div>
|
|
-->
|
|
|
|
{#if benutzer.rolle === "ADMIN"}
|
|
<li>
|
|
<details class="[&_.caret]:open:rotate-180" open>
|
|
<summary
|
|
class="button-tab w-full outline-0 hover:outline-0 cursor-pointer"
|
|
>
|
|
<LockClosed size={22}/>
|
|
Admin <CaretDown
|
|
size={24}
|
|
class="caret ml-auto transition-transform"
|
|
></CaretDown></summary
|
|
>
|
|
<ul>
|
|
<li>
|
|
<a
|
|
class="button-tab"
|
|
href="/dashboard/admin/impersonate-user"
|
|
>
|
|
Impersonate User
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</li>
|
|
{/if}
|
|
</div>
|
|
<div class="items-end bottom-4 right-4 z-50 mt-4">
|
|
<div class="flex flex-row justify-end items-end">
|
|
<a
|
|
href="/dashboard/einstellungen"
|
|
class="hover:bg-gray-200 p-3 rounded-lg"
|
|
>
|
|
<Gear size={24} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<style>
|
|
@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;
|
|
}
|
|
|
|
/* .button-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;
|
|
} */
|
|
|
|
.button-tab:hover {
|
|
@apply bg-gray-200 outline-0;
|
|
}
|
|
|
|
li {
|
|
@apply list-none;
|
|
}
|
|
|
|
.button-tab {
|
|
@apply flex flex-row gap-4 py-2.5 px-4 cursor-pointer items-center;
|
|
}
|
|
|
|
summary.button-tab::after {
|
|
@apply ml-auto;
|
|
}
|
|
</style>
|