Setup vom Klimaförderrechner

Im HTML die JavaScript Datei laden:

<script
  type="module"
  src="https://klimafoerderrechner.web02.ezs.opsserver.ch/ezs-klimafoerderrechner.js"
></script>

Und dann benutzen an der Stelle wo man den Rechner einbinden will

<ezs-klimafoerderrechner></ezs-klimafoerderrechner>

Optionen

Der Rechner hat einige Optionen die direkt an das Tag übergeben werden können:

<ezs-klimafoerderrechner locale="de"></ezs-klimafoerderrechner>
Name Beschreibung Default
locale Sprache in die der Rechner angezeigt werden soll ("de", "fr" und "it" werden supported) de
backendurl URL zum Backend das aufgerufen wird https://klimafoerderrechner.web02.ezs.opsserver.ch/calculate
currenttechnologies Zur Verfügung stehende Auswahl an bestehdener Technologien (oil und gas) ["oil", "gas"]
newtechnologies Zur Verfügung stehende Auswahl an neuen Technologien (heatOrWaterPump, miscHeatPumps und woodHeaters) ["heatOrWaterPump", "miscHeatPumps", "woodHeaters"]
canton Vorausgewählter Kanton (als Kürzel) "AG"
buttoncolor Farbe des Buttons "rgba(10, 148, 241, 1)" (siehe CSS Definition)

Standard Einstellungen

<ezs-klimafoerderrechner></ezs-klimafoerderrechner>

Französisch, custom Hintergrundfarbe im Wrapper und Eigenen Content

<div class="bg-gray font-white" buttoncolor="red"><ezs-klimafoerderrechner locale="fr">Test</ezs-klimafoerderrechner></div>
Test

Eingeschränkte Neue Technologie-Auswahl

<ezs-klimafoerderrechner newtechnologies='["woodHeaters"]'></ezs-klimafoerderrechner>

Eingeschränkte Bestehende Technologie-Auswahl

<ezs-klimafoerderrechner currenttechnologies='["gas"]'></ezs-klimafoerderrechner>

Italienisch und Button

<ezs-klimafoerderrechner locale="fr"><button>🤔 Button</button></ezs-klimafoerderrechner>

Meier Tobler

<ezs-klimafoerderrechner customization="meier-tobler"></ezs-klimafoerderrechner>

Ait

<ezs-klimafoerderrechner customization="ait"></ezs-klimafoerderrechner>