121 lines
3.1 KiB
Svelte
121 lines
3.1 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 TagInput from "#components/TagInput.svelte";
|
|
import { api } from "astro-typesafe-api/client";
|
|
import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
|
|
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";
|
|
|
|
export let user: BenutzerClient;
|
|
export let objekte: ObjektKomplettClient[];
|
|
|
|
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,
|
|
erstellungsdatum: new Date(),
|
|
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: [],
|
|
uid: result.uid
|
|
})
|
|
|
|
objekt = {
|
|
adresse: "",
|
|
erstellungsdatum: new Date(),
|
|
latitude: 0,
|
|
longitude: 0,
|
|
ort: "",
|
|
plz: ""
|
|
}
|
|
|
|
objekte = objekte
|
|
}
|
|
</script>
|
|
|
|
<h1>Gebäudeübersicht</h1>
|
|
|
|
<hr />
|
|
|
|
<div class="relative mb-6">
|
|
<button class="button" on:click={() => {
|
|
objektOverlayHidden = false
|
|
}}> Gebäude anlegen + </button>
|
|
</div>
|
|
|
|
<div class="columns columns-1 md:columns-2 lg:columns-3 gap-4">
|
|
{#each objekte as objekt}
|
|
<DashboardObjekt {objekt}></DashboardObjekt>
|
|
{/each}
|
|
</div>
|
|
|
|
<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> |