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>
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) |
<ezs-klimafoerderrechner></ezs-klimafoerderrechner>
<div class="bg-gray font-white" buttoncolor="red"><ezs-klimafoerderrechner locale="fr">Test</ezs-klimafoerderrechner></div>
<ezs-klimafoerderrechner newtechnologies='["woodHeaters"]'></ezs-klimafoerderrechner>
<ezs-klimafoerderrechner currenttechnologies='["gas"]'></ezs-klimafoerderrechner>
<ezs-klimafoerderrechner locale="fr"><button>🤔 Button</button></ezs-klimafoerderrechner>
<ezs-klimafoerderrechner customization="meier-tobler"></ezs-klimafoerderrechner>
<ezs-klimafoerderrechner customization="ait"></ezs-klimafoerderrechner>