Widget #81
222
src/pages/welcher-energieausweis/index.astro
Normal file
222
src/pages/welcher-energieausweis/index.astro
Normal file
@@ -0,0 +1,222 @@
|
||||
---
|
||||
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
|
||||
---
|
||||
|
||||
<Layout title="Welcher Energieausweis">
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Initial setup: Reset all selections
|
||||
$('.OEA_bitte').prop('selected', true);
|
||||
$('#OEA_result').hide();
|
||||
|
||||
// Handle main type selection
|
||||
$('#OEA_changeTyp').change(function () {
|
||||
const chTyp = $('#OEA_changeTyp').val();
|
||||
const chAnlass = $('#OEA_changeAnlass').val();
|
||||
|
||||
// Reset second-level options
|
||||
$('.OEA_bitte').prop('selected', true);
|
||||
$('.OEA_title2, .OEA_auswahl2').hide();
|
||||
|
||||
// Logic for Gewerbegebäude and Neubau
|
||||
if (chTyp === 'Gewerbegebäude' || chAnlass === 'Neubau') {
|
||||
if (chAnlass) $('#OEA_result').show();
|
||||
} else if (chAnlass && chTyp) {
|
||||
$('.OEA_title2, .OEA_auswahl2').show();
|
||||
$('#OEA_result').hide();
|
||||
}
|
||||
|
||||
// Update result
|
||||
getResult();
|
||||
});
|
||||
|
||||
// Handle secondary selection
|
||||
$('.OEA_auswahl2').change(function () {
|
||||
const baujahr = parseInt($('#changeBaujahr').val());
|
||||
const einheiten = parseInt($('#changeEinheiten').val());
|
||||
const status = parseInt($('#changeStatus').val());
|
||||
|
||||
const checkAusweis = baujahr + einheiten + status;
|
||||
const chTyp = $('#OEA_changeTyp').val();
|
||||
|
||||
// Determine Ausweis type
|
||||
if (checkAusweis === 3) {
|
||||
const BA = `https://online-energieausweis.org/energieausweis-erstellen/bedarfsausweis-erstellen.php?recode=${$('#recode').val()}`;
|
||||
$('#OEA_result_text').html(
|
||||
`Ihr Gebäude wurde vor 1978 gebaut, hat weniger als 5 Wohneinheiten und ist energetisch unsaniert. In diesem Fall benötigen Sie einen Bedarfsausweis.<br />
|
||||
<div class="empfehlungen">
|
||||
<a class="OEA_toUS" href="${BA}" target="_blank">Jetzt Bedarfsausweis online erstellen</a>
|
||||
</div>`
|
||||
);
|
||||
$('#OEA_result').show();
|
||||
} else {
|
||||
getResult();
|
||||
$('#OEA_result').show();
|
||||
}
|
||||
});
|
||||
|
||||
// General result update function
|
||||
function getResult() {
|
||||
const chTyp = $('#OEA_changeTyp').val();
|
||||
const chAnlass = $('#OEA_changeAnlass').val();
|
||||
|
||||
// Example: Update based on Einfamilienhaus and Vermietung/Verkauf
|
||||
if (chTyp === 'Einfamilienhaus' && chAnlass === 'Vermietung/Verkauf') {
|
||||
const VA = `https://online-energieausweis.org/energieausweis-erstellen/verbrauchsausweis-erstellen.php?recode=${$('#recode').val()}`;
|
||||
$('#OEA_result_text').html(
|
||||
`Für Vermietung/Verkauf können Sie einen Verbrauchsausweis erstellen.<br />
|
||||
<div class="empfehlungen">
|
||||
<a class="OEA_toUS" href="${VA}" target="_blank">Jetzt Verbrauchsausweis online erstellen</a>
|
||||
</div>`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Additional listeners for other dropdowns
|
||||
$('#OEA_changeAnlass').change(getResult);
|
||||
});
|
||||
</script
|
||||
|
||||
<h1 class="text-3xl">Welcher Energieausweis?</h1>
|
||||
|
||||
<div class="mt-12 m-auto w-[90%] relative">
|
||||
<div id="OEA_widget">
|
||||
<input id="recode" type="hidden" value="widgetvorlage">
|
||||
|
||||
<div id="OEA_input">
|
||||
<div class="OEA_item1">
|
||||
<div class="OEA_title1">Gebäudetyp</div>
|
||||
<select class="OEA_auswahl1" id="OEA_changeTyp">
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option value="Einfamilienhaus">Einfamilienhaus</option>
|
||||
<option value="Zweifamilienhaus">Zweifamilienhaus</option>
|
||||
<option value="Mehrfamilienhaus">Mehrfamilienhaus</option>
|
||||
<option value="Gewerbegebäude">Gewerbegebäude</option>
|
||||
<option value="Mischgebäude">Mischgebäude</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item2">
|
||||
<div class="OEA_title1">Anlass</div>
|
||||
<select class="OEA_auswahl1" id="OEA_changeAnlass">
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option value="Vermietung/Verkauf">Vermietung/Verkauf</option>
|
||||
<option value="Modernisierung">Modernisierung</option>
|
||||
<option value="Neubau">Neubau</option>
|
||||
<option value="Erweiterung">Erweiterung</option>
|
||||
<option value="Aushangpflicht">Aushangpflicht</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item3">
|
||||
<div class="OEA_title2">Baujahr</div>
|
||||
<select class="OEA_auswahl2" id="changeBaujahr">
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option value="1">vor 1978</option>
|
||||
<option value="0">nach 1977</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item4">
|
||||
<div class="OEA_title2">Wohneinheiten</div>
|
||||
<select class="OEA_auswahl2" id="changeEinheiten">
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option value="1">bis 4 Wohneinheiten</option>
|
||||
<option value="0">mehr als 4 Wohneinheiten</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item5">
|
||||
<div class="OEA_title2">Sanierungsstatus</div>
|
||||
<select class="OEA_auswahl2" id="changeStatus">
|
||||
<option value="" selected disabled>bitte auswählen</option>
|
||||
<option value="0">saniert</option>
|
||||
<option value="1">unsaniert</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item6 result">
|
||||
<div id="OEA_result">
|
||||
<div class="OEA_title3">Das Ergebnis Ihrer Anfrage:</div>
|
||||
<p id="OEA_result_text"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item7 referrer">
|
||||
<div id="OEA_logo_referrer">
|
||||
<img src="https://widgetvorlage-widget.online-energieausweis.org/img/logo.png" alt="Logo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="OEA_item8 ibcornelsen">
|
||||
<div id="OEA_logo_IBC">
|
||||
<a class="IBC_link" href="https://online-energieausweis.org?recode=widgetvorlage" title="IB Cornelsen">
|
||||
<div id="IBC_LOGO">powered by</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
#OEA_widget {
|
||||
@apply bg-white p-6 rounded-lg shadow-lg space-y-6;
|
||||
|
||||
#OEA_input {
|
||||
@apply space-y-4;
|
||||
|
||||
.OEA_item1, .OEA_item2, .OEA_item3, .OEA_item4, .OEA_item5 {
|
||||
@apply space-y-2;
|
||||
|
||||
.OEA_title1, .OEA_title2 {
|
||||
@apply font-bold text-lg text-white p-2 rounded;
|
||||
}
|
||||
}
|
||||
|
||||
.OEA_title1 {
|
||||
@apply bg-blue-900;
|
||||
}
|
||||
|
||||
.OEA_title2 {
|
||||
@apply bg-blue-300 text-blue-900;
|
||||
}
|
||||
|
||||
.OEA_auswahl1, .OEA_auswahl2 {
|
||||
@apply w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
|
||||
}
|
||||
|
||||
#OEA_result {
|
||||
@apply p-4 border-2 border-blue-300 rounded-lg text-gray-700;
|
||||
}
|
||||
|
||||
.OEA_title3 {
|
||||
@apply text-xl font-semibold text-blue-900;
|
||||
}
|
||||
|
||||
#OEA_logo_referrer img {
|
||||
@apply w-full max-w-xs mx-auto;
|
||||
}
|
||||
|
||||
#IBC_LOGO {
|
||||
@apply text-center text-gray-500 font-semibold text-sm mt-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
@apply w-full p-2 border border-gray-300 rounded focus:ring focus:ring-blue-500;
|
||||
}
|
||||
|
||||
|
||||
.empfehlungen a {
|
||||
@apply text-blue-600 underline hover:text-blue-800 font-semibold;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user