Rahmen bleiben rot wenn man Feld ausgefüllt hat

This commit is contained in:
Moritz Utcke
2025-10-14 18:25:07 -04:00
parent 1ef0b5e15a
commit 882d2d2f60
5 changed files with 37 additions and 21 deletions

View File

@@ -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("")
}

View File

@@ -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"
/>

View File

@@ -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>

View File

@@ -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

View File

@@ -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;
}