Rahmen bleiben rot wenn man Feld ausgefüllt hat
This commit is contained in:
@@ -52,6 +52,11 @@
|
||||
if (!value && element.required) {
|
||||
element.setCustomValidity("Eine Auswahl ist verpflichtend.")
|
||||
element.dataset["isinvalid"] = "true"
|
||||
|
||||
element.addEventListener("change", () => {
|
||||
element.setCustomValidity("")
|
||||
element.dataset["isinvalid"] = "false"
|
||||
})
|
||||
} else {
|
||||
element.setCustomValidity("")
|
||||
}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script lang="ts">
|
||||
import HelpLabel from "#components/labels/HelpLabel.svelte";
|
||||
import Inputlabel from "#components/labels/InputLabel.svelte";
|
||||
import PlzSuche from "#components/PlzSuche.svelte";
|
||||
|
||||
|
||||
import ZipSearch from "#components/PlzSuche.svelte";
|
||||
import { Enums } from "#lib/client/prisma.js";
|
||||
import { AufnahmeClient, ObjektClient } from "./types.js";
|
||||
|
||||
@@ -27,6 +26,8 @@
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
let ortInput: HTMLInputElement;
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -69,9 +70,12 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
||||
<div class="input-noHelp">
|
||||
<Inputlabel title="PLZ *"></Inputlabel>
|
||||
|
||||
<ZipSearch
|
||||
<PlzSuche
|
||||
bind:zip={objekt.plz}
|
||||
bind:city={objekt.ort}
|
||||
onchange={(e) => {
|
||||
ortInput.dispatchEvent(new Event('change'));
|
||||
}}
|
||||
name="plz"
|
||||
/>
|
||||
</div>
|
||||
@@ -85,6 +89,7 @@ xl:grid-cols-3 xl:gap-x-8 xl:gap-y-8
|
||||
readonly={false}
|
||||
required
|
||||
bind:value={objekt.ort}
|
||||
bind:this={ortInput}
|
||||
type="text"
|
||||
/>
|
||||
|
||||
|
||||
@@ -746,24 +746,29 @@
|
||||
<div class="card-body">
|
||||
<div class="flex flex-col flex-wrap items-left gap-2">
|
||||
|
||||
<h3 class="font-semibold text-lg">Bilder</h3>
|
||||
<div class="grid grid-cols-[1fr] md:grid-cols-[1fr,1fr,1fr] lg:grid-cols-[1fr,1fr,1fr] justify-start items-center gap-2">
|
||||
{#each aufnahme.bilder as bild, i (i)}
|
||||
<img src="/bilder/{bild.id}.jpg" alt={bild.kategorie} loading="lazy" class="max-h-[10vh] h-full w-full object-contain">
|
||||
{/each}
|
||||
</div>
|
||||
<hr>
|
||||
<h3 class="font-semibold text-lg">Unterlagen</h3>
|
||||
<div class="text-sm">
|
||||
{#if aufnahme.unterlagen.length > 0}
|
||||
{#each aufnahme.unterlagen as unterlage}
|
||||
<a href="/unterlagen/{unterlage.id}.{mime.getExtension(unterlage.mime)}" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 p-2 rounded-lg"><FileText size={32}></FileText> {unterlage.name}</a>
|
||||
{#if aufnahme.bilder.length > 0}
|
||||
<h3 class="font-semibold text-lg">Bilder</h3>
|
||||
<div class="grid grid-cols-[1fr] md:grid-cols-[1fr,1fr,1fr] lg:grid-cols-[1fr,1fr,1fr] justify-start items-center gap-2">
|
||||
{#each aufnahme.bilder as bild, i (i)}
|
||||
<img src="/bilder/{bild.id}.jpg" alt={bild.kategorie} loading="lazy" class="max-h-[10vh] h-full w-full object-contain">
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
{/if}
|
||||
{#if aufnahme.unterlagen.length > 0}
|
||||
<h3 class="font-semibold text-lg">Unterlagen</h3>
|
||||
<div class="text-sm">
|
||||
{#if aufnahme.unterlagen.length > 0}
|
||||
{#each aufnahme.unterlagen as unterlage}
|
||||
<a href="/unterlagen/{unterlage.id}.{mime.getExtension(unterlage.mime)}" target="_blank" class="text-black flex flex-row items-center gap-2 bg-base-200 p-2 rounded-lg"><FileText size={32}></FileText> {unterlage.name}</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top items-end absolute bottom-4 right-4 z-50">
|
||||
<!-- Benachrichtigungen -->
|
||||
<!-- <div class="dropdown dropdown-top items-end absolute bottom-4 right-4 z-50">
|
||||
<div class="indicator">
|
||||
{#if Object.keys($notifications).length > 0}
|
||||
<span class="indicator-item badge badge-accent text-xs"
|
||||
@@ -782,7 +787,7 @@
|
||||
>
|
||||
<NotificationProvider component={DashboardNotification} />
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
export let readonly: boolean = false;
|
||||
export let city: string | null | undefined;
|
||||
export let zip: string | null = "";
|
||||
|
||||
export let onchange: (event: Event) => void;
|
||||
|
||||
let hideZipDropdown: boolean = true;
|
||||
let zipCodes: inferOutput<API["postleitzahlen"]["GET"]> = [];
|
||||
@@ -58,6 +58,7 @@
|
||||
{...$$restProps}
|
||||
bind:value={zip}
|
||||
on:input={fetchZipCodeInformation}
|
||||
on:change={onchange}
|
||||
on:focus={() => {
|
||||
if (zipCodes.length > 0) {
|
||||
hideZipDropdown = false
|
||||
|
||||
@@ -3,7 +3,7 @@ import { memoize } from "./Memoization.js";
|
||||
import { api } from "astro-typesafe-api/client"
|
||||
|
||||
export const getKlimafaktoren = memoize(async (date: Date, plz: string) => {
|
||||
if (!plz || !date) {
|
||||
if (!plz || plz.length < 5 || !date) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user