141 lines
3.8 KiB
Svelte
141 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
import "../../style/formular.css";
|
|
import {
|
|
BenutzerClient,
|
|
ObjektClient,
|
|
ObjektKomplettClient,
|
|
} from "#components/Ausweis/types.js";
|
|
import DashboardObjekt from "#components/Dashboard/DashboardObjekt.svelte";
|
|
import Overlay from "#components/Overlay.svelte";
|
|
import PlzSuche from "#components/PlzSuche.svelte";
|
|
import { api } from "astro-typesafe-api/client";
|
|
import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
|
|
import { addNotification } from "#components/Notifications/shared.js";
|
|
import Cookies from "js-cookie";
|
|
import { API_ACCESS_TOKEN_COOKIE_NAME } from "#lib/constants.js";
|
|
import Pagination from "#components/Pagination.svelte";
|
|
import AusweisePruefenFilter from "#components/Dashboard/AusweisePruefenFilter.svelte";
|
|
import { filterAusweise } from "#lib/filters.js";
|
|
import { z, ZodTypeAny } from "zod";
|
|
import { Enums } from "#lib/client/prisma.js";
|
|
|
|
export let user: BenutzerClient;
|
|
export let objekte: ObjektKomplettClient[];
|
|
export let page: number;
|
|
export let totalPages: number;
|
|
|
|
let objektOverlayHidden = true;
|
|
|
|
let objekt: Omit<ObjektClient, "uid"> = {
|
|
adresse: "",
|
|
erstellungsdatum: new Date(),
|
|
latitude: 0,
|
|
longitude: 0,
|
|
ort: "",
|
|
plz: ""
|
|
};
|
|
|
|
async function objektErstellen() {
|
|
if (!objekt.adresse || !objekt.ort || !objekt.plz) {
|
|
addNotification({
|
|
message: "Daten unvollständig.",
|
|
subtext: "Ihre eingegebenen Daten sind unvollständig, bitte vervollständigen sie diese und versuchen sie es erneut..",
|
|
timeout: 3000,
|
|
dismissable: true,
|
|
type: "error"
|
|
})
|
|
|
|
return;
|
|
}
|
|
|
|
const result = await api.objekt.PUT.fetch({
|
|
adresse: objekt.adresse,
|
|
latitude: 0,
|
|
longitude: 0,
|
|
ort: objekt.ort,
|
|
plz: objekt.plz
|
|
}, {
|
|
headers: {
|
|
Authorization: `Bearer ${Cookies.get(API_ACCESS_TOKEN_COOKIE_NAME)}`
|
|
}
|
|
})
|
|
|
|
if (!result) {
|
|
addNotification({
|
|
message: "Etwas ist schiefgelaufen.",
|
|
subtext: "Das Objekt konnte nicht erstellt werden.",
|
|
timeout: 3000,
|
|
dismissable: true,
|
|
type: "error"
|
|
})
|
|
|
|
return;
|
|
}
|
|
|
|
objektOverlayHidden = true;
|
|
|
|
objekte.push({
|
|
...objekt,
|
|
aufnahmen: [],
|
|
id: result.id
|
|
})
|
|
|
|
objekt = {
|
|
adresse: "",
|
|
erstellungsdatum: new Date(),
|
|
latitude: 0,
|
|
longitude: 0,
|
|
ort: "",
|
|
plz: ""
|
|
}
|
|
|
|
objekte = objekte
|
|
}
|
|
let filters: { name: keyof z.infer<typeof filterAusweise>, type: ZodTypeAny, value: any }[] = []
|
|
|
|
export let id: string = "";
|
|
</script>
|
|
|
|
<h1>Gebäudeübersicht</h1>
|
|
|
|
<hr />
|
|
|
|
{#if user.rolle === Enums.BenutzerRolle.ADMIN}
|
|
<!-- <div class="flex flex-col mb-4">
|
|
<AusweisePruefenFilter bind:filters={filters}></AusweisePruefenFilter>
|
|
</div> -->
|
|
<form action="" class="flex flex-row gap-2 my-2">
|
|
<input type="text" bind:value={id} name="id" placeholder="ID">
|
|
<button class="button text-sm">Suchen</button>
|
|
</form>
|
|
{/if}
|
|
|
|
<div class="relative mb-6">
|
|
<button class="button" on:click={() => {
|
|
objektOverlayHidden = false
|
|
}}> Gebäude anlegen + </button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{#each objekte as objekt}
|
|
<DashboardObjekt {objekt}></DashboardObjekt>
|
|
{/each}
|
|
</div>
|
|
|
|
<Pagination pages={totalPages} current={page} prev="/dashboard/objekte/{page - 1}" next="/dashboard/objekte/{page + 1}"></Pagination>
|
|
|
|
|
|
<Overlay bind:hidden={objektOverlayHidden}>
|
|
<div class="bg-white w-full max-w-screen-sm px-4 py-6 flex flex-col gap-4">
|
|
<h2 class="p-0 m-0">Gebäude erstellen</h2>
|
|
|
|
<input type="text" placeholder="Adresse" bind:value={objekt.adresse}>
|
|
<div class="flex flex-row gap-4 justify-between">
|
|
<PlzSuche bind:city={objekt.ort} bind:zip={objekt.plz} name="" placeholder="PLZ"></PlzSuche>
|
|
<input type="text" bind:value={objekt.ort} placeholder="Ort">
|
|
</div>
|
|
<button class="button mt-4" on:click={objektErstellen}>Gebäude Erstellen</button>
|
|
</div>
|
|
</Overlay>
|
|
|
|
<NotificationWrapper></NotificationWrapper> |