BA Designvorschlag
This commit is contained in:
Jens Cornelsen
@@ -104,6 +104,27 @@
|
||||
ausweis.anteil_zusatzheizung = 0.7;
|
||||
ausweis = ausweis;
|
||||
}
|
||||
|
||||
function toggleSection(section: HTMLElement): void {
|
||||
// Find the next sibling element and assert it's an HTMLElement
|
||||
const formContainer = section.nextElementSibling as HTMLElement | null;
|
||||
if (!formContainer) {
|
||||
console.error("Form container not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the icon inside the section and assert it's an HTMLElement
|
||||
const icon = section.querySelector('.toggle-icon') as HTMLElement | null;
|
||||
if (!icon) {
|
||||
console.error("Toggle icon not found.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle classes for expanded and collapsed states
|
||||
formContainer.classList.toggle('expanded');
|
||||
section.classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="flex flex-row gap-8 items-center mb-8">
|
||||
@@ -117,62 +138,44 @@
|
||||
|
||||
<form action="FORM/transfer/VA_1to2" enctype="multipart/form-data">
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-section" onclick="toggleSection(this)">
|
||||
<label id="headlinep" class="section-title">A - Prüfung der Ausweisart</label>
|
||||
<span class="toggle-icon">▶</span>
|
||||
</div>
|
||||
|
||||
<div class="form-container">
|
||||
<div class="form-grid">
|
||||
<!-- Anlass für Energieausweis -->
|
||||
<div class="form-group">
|
||||
<label for="ausstellgrund" class="form-label">Anlass für Energieausweis *</label>
|
||||
<div class="form-options">
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="ausstellgrund" value="Neubau" required>
|
||||
<span>Neubau</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="ausstellgrund" value="Vermietung" required>
|
||||
<span>Vermietung</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="ausstellgrund" value="Verkauf" required>
|
||||
<span>Verkauf</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="ausstellgrund" value="Modernisierung" required>
|
||||
<span>Modernisierung</span>
|
||||
</label>
|
||||
<label class="radio-option">
|
||||
<input type="radio" name="ausstellgrund" value="Sonstiges" required>
|
||||
<span>Sonstiges</span>
|
||||
</label>
|
||||
</div>
|
||||
<select id="ausstellgrund" name="ausstellgrund" required class="form-select">
|
||||
<option value="" disabled selected>Anlass *</option>
|
||||
<option value="Neubau">Neubau</option>
|
||||
<option value="Vermietung">Vermietung</option>
|
||||
<option value="Verkauf">Verkauf</option>
|
||||
<option value="Modernisierung">Modernisierung</option>
|
||||
<option value="Sonstiges">Sonstiges</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Baujahr Heizung -->
|
||||
<div class="form-group">
|
||||
<label for="baujahr_anlage" class="form-label">Baujahr Heizung *</label>
|
||||
<input id="baujahr_anlage" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" class="form-input">
|
||||
<input id="baujahr_anlage" name="baujahr_anlage" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Heizung *" class="form-input">
|
||||
</div>
|
||||
|
||||
<!-- Baujahr Gebäude -->
|
||||
<div class="form-group">
|
||||
<label for="baujahr_gebaeude" class="form-label">Baujahr Gebäude *</label>
|
||||
<input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" class="form-input">
|
||||
<input id="baujahr_gebaeude" name="baujahr_gebaeude" type="text" maxlength="20" required autocomplete="off" placeholder="Baujahr Gebäude *" class="form-input">
|
||||
</div>
|
||||
|
||||
<!-- Anzahl der Wohnungen -->
|
||||
<div class="form-group">
|
||||
<label for="anzahl_einheiten" class="form-label">Anzahl Wohnungen *</label>
|
||||
<input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" class="form-input">
|
||||
<input id="anzahl_einheiten" name="anzahl_einheiten" type="text" maxlength="3" required autocomplete="off" placeholder="Anzahl Wohnungen *" class="form-input">
|
||||
</div>
|
||||
|
||||
<!-- Sanierungsstatus -->
|
||||
<div class="form-group">
|
||||
<label for="objekt_saniert" class="form-label">Sanierungsstatus *</label>
|
||||
<select id="objekt_saniert" name="objekt_saniert" required class="form-select">
|
||||
<option value="">Bitte auswählen</option>
|
||||
<option value="" disabled selected>Sanierungsstatus *</option>
|
||||
<option value="1">saniert</option>
|
||||
<option value="0">unsaniert</option>
|
||||
</select>
|
||||
@@ -180,12 +183,107 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-section" onclick="toggleSection(this)">
|
||||
<label id="headlinep" class="section-title">B - Eingabe der Gebäudeadresse</label>
|
||||
<span class="toggle-icon">▶</span>
|
||||
</div>
|
||||
|
||||
<!-- Collapsible Container -->
|
||||
<div class="form-container">
|
||||
<div class="form-grid">
|
||||
<!-- Straße und Hausnummer -->
|
||||
<div class="form-group">
|
||||
<input
|
||||
name="objekt_strasse"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Straße, Hausnummer *"
|
||||
bind:value="{ausweis.objekt_strasse}"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- PLZ und Ort -->
|
||||
<div class="form-group">
|
||||
<input
|
||||
name="objekt_plz"
|
||||
type="text"
|
||||
required
|
||||
placeholder="PLZ *"
|
||||
bind:value="{ausweis.objekt_plz}"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Ort -->
|
||||
<div class="form-group">
|
||||
<input
|
||||
name="objekt_ort"
|
||||
type="text"
|
||||
placeholder="Ort *"
|
||||
bind:value="{ausweis.objekt_ort}"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Wohnfläche -->
|
||||
<div class="form-group">
|
||||
<input
|
||||
name="wohnflaeche"
|
||||
type="number"
|
||||
required
|
||||
placeholder="Wohnfläche in m² *"
|
||||
bind:value="{ausweis.wohnflaeche}"
|
||||
class="form-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Gebäudetyp -->
|
||||
<div class="form-group">
|
||||
<select
|
||||
name="objekt_typ"
|
||||
required
|
||||
bind:value="{ausweis.objekt_typ}"
|
||||
class="form-input"
|
||||
>
|
||||
<option value="" disabled selected>Gebäudetyp *</option>
|
||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||
<option value="Freistehendes Einfamilienhaus">Freistehendes Einfamilienhaus</option>
|
||||
<option value="Freistehendes Zweifamilienhaus">Freistehendes Zweifamilienhaus</option>
|
||||
<option value="Doppelhaushälfte">Doppelhaushälfte</option>
|
||||
<option value="Reihenendhaus">Reihenendhaus</option>
|
||||
<option value="Reihenmittelhaus">Reihenmittelhaus</option>
|
||||
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
||||
<option value="Wohn- und Geschäftshaus">Wohn- und Geschäftshaus</option>
|
||||
<option value="Atrium-Bungalow">Atrium-Bungalow</option>
|
||||
<option value="Winkelbungalow">Winkelbungalow</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Gebäudeteil -->
|
||||
<div class="form-group">
|
||||
<select
|
||||
name="objekt_gebaeudeteil"
|
||||
required
|
||||
bind:value="{ausweis.objekt_gebaeudeteil}"
|
||||
class="form-input"
|
||||
>
|
||||
<option value="" disabled selected>Gebäudeteil *</option>
|
||||
<option value="Gesamtgebäude">Gesamtgebäude</option>
|
||||
<option value="Wohnen">Wohnen</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.8rem;
|
||||
margin-top: 2rem;
|
||||
|
||||
.section-title {
|
||||
font-size: 1.125rem; // 18px
|
||||
@@ -198,6 +296,7 @@
|
||||
padding: 1rem;
|
||||
background-color: #f3f4f6; // Tailwind's bg-gray-100
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 1.5;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
@@ -237,6 +336,20 @@
|
||||
box-shadow: 0 0 0 1px #6366f1; // Tailwind's focus:ring-indigo-500
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #9ca3af; // Tailwind's text-gray-400
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
option {
|
||||
color: #111827; // Tailwind's text-gray-900
|
||||
}
|
||||
|
||||
option[disabled] {
|
||||
color: #9ca3af; // Tailwind's text-gray-400
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.form-options {
|
||||
@@ -247,17 +360,55 @@
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
input {
|
||||
input {
|
||||
accent-color: #6366f1; // Tailwind's text-indigo-600
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
color: #374151; // Tailwind's text-gray-700
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.form-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 1.5rem;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.collapsed .toggle-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.form-container {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.collapsed .form-container {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-container.expanded {
|
||||
max-height: 500px; /* Adjust based on content size */
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user