blue-chestnut-solar-expert 0.0.17 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/polygon-buttons.d.ts +11 -0
- package/dist/components/polygon-information.d.ts +11 -0
- package/dist/components/undo-icon.d.ts +11 -0
- package/dist/stencil-library/{config-hh5GAFbi.js → config-BV_PiZGS.js} +5 -3
- package/dist/stencil-library/config-BV_PiZGS.js.map +1 -0
- package/dist/stencil-library/eraser-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/eraser-icon.entry.js +1 -1
- package/dist/stencil-library/eraser-icon.entry.js.map +1 -1
- package/dist/stencil-library/house-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/house-icon.entry.js +1 -1
- package/dist/stencil-library/house-icon.entry.js.map +1 -1
- package/dist/stencil-library/icon-selector.entry.esm.js.map +1 -1
- package/dist/stencil-library/icon-selector.entry.js +4 -1
- package/dist/stencil-library/icon-selector.entry.js.map +1 -1
- package/dist/stencil-library/loading-widget.entry.esm.js.map +1 -1
- package/dist/stencil-library/loading-widget.entry.js +2 -2
- package/dist/stencil-library/loading-widget.entry.js.map +1 -1
- package/dist/stencil-library/map-draw.entry.esm.js.map +1 -1
- package/dist/stencil-library/map-draw.entry.js +118 -170
- package/dist/stencil-library/map-draw.entry.js.map +1 -1
- package/dist/stencil-library/map-selector.entry.esm.js.map +1 -1
- package/dist/stencil-library/map-selector.entry.js +4 -4
- package/dist/stencil-library/map-selector.entry.js.map +1 -1
- package/dist/stencil-library/move-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/move-icon.entry.js +1 -1
- package/dist/stencil-library/move-icon.entry.js.map +1 -1
- package/dist/stencil-library/octagon-minus-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/octagon-minus-icon.entry.js +1 -1
- package/dist/stencil-library/octagon-minus-icon.entry.js.map +1 -1
- package/dist/stencil-library/polygon-buttons.entry.esm.js.map +1 -0
- package/dist/stencil-library/polygon-buttons.entry.js +28 -0
- package/dist/stencil-library/polygon-buttons.entry.js.map +1 -0
- package/dist/stencil-library/polygon-information.entry.esm.js.map +1 -0
- package/dist/stencil-library/polygon-information.entry.js +74 -0
- package/dist/stencil-library/polygon-information.entry.js.map +1 -0
- package/dist/stencil-library/search-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/search-icon.entry.js +1 -1
- package/dist/stencil-library/search-icon.entry.js.map +1 -1
- package/dist/stencil-library/settings-icon.entry.esm.js.map +1 -1
- package/dist/stencil-library/settings-icon.entry.js +1 -1
- package/dist/stencil-library/settings-icon.entry.js.map +1 -1
- package/dist/stencil-library/settings-modal.entry.esm.js.map +1 -1
- package/dist/stencil-library/settings-modal.entry.js +10 -10
- package/dist/stencil-library/settings-modal.entry.js.map +1 -1
- package/dist/stencil-library/solar-calculator.entry.esm.js.map +1 -1
- package/dist/stencil-library/solar-calculator.entry.js +2 -2
- package/dist/stencil-library/solar-calculator.entry.js.map +1 -1
- package/dist/stencil-library/solar-expert.entry.esm.js.map +1 -1
- package/dist/stencil-library/solar-expert.entry.js +3 -3
- package/dist/stencil-library/solar-expert.entry.js.map +1 -1
- package/dist/stencil-library/solar-system-form.entry.esm.js.map +1 -1
- package/dist/stencil-library/solar-system-form.entry.js +223 -184
- package/dist/stencil-library/solar-system-form.entry.js.map +1 -1
- package/dist/stencil-library/stencil-library.esm.js +1 -1
- package/dist/stencil-library/{store-CbFNgpiN.js → store-By_Yq2NT.js} +22 -4
- package/dist/stencil-library/store-By_Yq2NT.js.map +1 -0
- package/dist/stencil-library/{store-DsXeXraH.js → store-Dr69Zmu_.js} +27 -5
- package/dist/stencil-library/store-Dr69Zmu_.js.map +1 -0
- package/dist/stencil-library/tool-box.entry.esm.js.map +1 -1
- package/dist/stencil-library/tool-box.entry.js +11 -5
- package/dist/stencil-library/tool-box.entry.js.map +1 -1
- package/dist/stencil-library/{tools-DO8CG56H.js → tools-DU7Muwzb.js} +17 -3
- package/dist/stencil-library/tools-DU7Muwzb.js.map +1 -0
- package/dist/stencil-library/undo-icon.entry.esm.js.map +1 -0
- package/dist/stencil-library/undo-icon.entry.js +20 -0
- package/dist/stencil-library/undo-icon.entry.js.map +1 -0
- package/dist/stencil-library/utils-CTW6J-87.js +99 -0
- package/dist/stencil-library/utils-CTW6J-87.js.map +1 -0
- package/dist/types/components/icons/undo.d.ts +5 -0
- package/dist/types/components/map-draw/map-draw.d.ts +5 -0
- package/dist/types/components/map-draw/polygon-buttons.d.ts +6 -0
- package/dist/types/components/map-draw/polygon-information.d.ts +9 -0
- package/dist/types/components/map-draw/tool-box.d.ts +1 -0
- package/dist/types/components/solar-system-form/solar-system-form.d.ts +3 -2
- package/dist/types/components.d.ts +73 -10
- package/dist/types/config.d.ts +1 -0
- package/dist/types/constants.d.ts +2 -1
- package/dist/types/types/lang.d.ts +6 -0
- package/dist/types/utils/render/polygon.d.ts +6 -1
- package/dist/types/utils/render/tools.d.ts +3 -1
- package/dist/types/utils/simulation/simulation.d.ts +8 -0
- package/dist/types/utils/simulation/solarCurves.d.ts +3 -0
- package/dist/types/utils/simulation/types.d.ts +49 -0
- package/package.json +2 -2
- package/dist/stencil-library/config-hh5GAFbi.js.map +0 -1
- package/dist/stencil-library/store-B-oT8BM6.js +0 -579
- package/dist/stencil-library/store-B-oT8BM6.js.map +0 -1
- package/dist/stencil-library/store-B74GO7_R.js +0 -579
- package/dist/stencil-library/store-B74GO7_R.js.map +0 -1
- package/dist/stencil-library/store-CJCtVxJR.js +0 -546
- package/dist/stencil-library/store-CJCtVxJR.js.map +0 -1
- package/dist/stencil-library/store-CbFNgpiN.js.map +0 -1
- package/dist/stencil-library/store-CzUjX3ZS.js +0 -579
- package/dist/stencil-library/store-CzUjX3ZS.js.map +0 -1
- package/dist/stencil-library/store-D2T-tfKH.js +0 -573
- package/dist/stencil-library/store-D2T-tfKH.js.map +0 -1
- package/dist/stencil-library/store-DsXeXraH.js.map +0 -1
- package/dist/stencil-library/store-TjbCCrIW.js +0 -573
- package/dist/stencil-library/store-TjbCCrIW.js.map +0 -1
- package/dist/stencil-library/store-Y8q2XvVS.js +0 -579
- package/dist/stencil-library/store-Y8q2XvVS.js.map +0 -1
- package/dist/stencil-library/store-tzn2ldy2.js +0 -579
- package/dist/stencil-library/store-tzn2ldy2.js.map +0 -1
- package/dist/stencil-library/tools-DO8CG56H.js.map +0 -1
|
@@ -1,8 +1,148 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-DZjEuBrX.js';
|
|
2
|
-
import { d as CONSUMPTION_PROFILES,
|
|
3
|
-
import { g as getLanguageStrings, s as state } from './store-
|
|
2
|
+
import { d as CONSUMPTION_PROFILES, H as HEAT_PUMP_CONSUMPTION, b as DEFAULT_SOLAR_PANEL_TYPE } from './config-BV_PiZGS.js';
|
|
3
|
+
import { g as getLanguageStrings, s as state } from './store-Dr69Zmu_.js';
|
|
4
4
|
|
|
5
|
-
const outputCss = "/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-green-600: oklch(62.7% 0.194 149.214);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-gray-100: oklch(96.7% 0.003 264.542);\n --color-gray-200: oklch(92.8% 0.006 264.531);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-700: oklch(37.3% 0.034 259.733);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --container-2xl: 42rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-lg: 0.5rem;\n --radius-4xl: 2rem;\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1 {\n top: calc(var(--spacing) * 1);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1 {\n left: calc(var(--spacing) * 1);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-3 {\n left: calc(var(--spacing) * 3);\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\n }\n .m-auto {\n margin: auto;\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .table {\n display: table;\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-\\[400px\\] {\n height: 400px;\n }\n .h-full {\n height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-full {\n width: 100%;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .flex-1 {\n flex: 1;\n }\n .flex-3 {\n flex: 3;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1 {\n --tw-translate-x: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1 {\n --tw-translate-y: calc(var(--spacing) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-help {\n cursor: help;\n }\n .resize {\n resize: both;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-4xl {\n border-radius: var(--radius-4xl);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-\\[\\#271200\\] {\n border-color: #271200;\n }\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-red-500 {\n border-color: var(--color-red-500);\n }\n .bg-\\[\\#271200\\] {\n background-color: #271200;\n }\n .bg-\\[\\#f3ebda\\] {\n background-color: #f3ebda;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-7 {\n padding-top: calc(var(--spacing) * 7);\n }\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n .pl-10 {\n padding-left: calc(var(--spacing) * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-\\[\\#271200\\] {\n color: #271200;\n }\n .text-\\[\\#964500\\] {\n color: #964500;\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n .text-green-600 {\n color: var(--color-green-600);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-white {\n color: var(--color-white);\n }\n .underline {\n text-decoration-line: underline;\n }\n .accent-\\[\\#964500\\] {\n accent-color: #964500;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .hover\\:bg-\\[\\#3a1b00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #3a1b00;\n }\n }\n }\n .hover\\:bg-\\[\\#271200\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #271200;\n }\n }\n }\n .hover\\:bg-\\[\\#964500\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #964500;\n }\n }\n }\n .hover\\:bg-\\[\\#ffffff\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #ffffff;\n }\n }\n }\n .hover\\:bg-gray-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-200);\n }\n }\n }\n .hover\\:bg-gray-300 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-300);\n }\n }\n }\n .hover\\:bg-gray-500 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-500);\n }\n }\n }\n .hover\\:text-white {\n &:hover {\n @media (hover: hover) {\n color: var(--color-white);\n }\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-\\[\\#271200\\] {\n &:focus {\n --tw-ring-color: #271200;\n }\n }\n .focus\\:ring-\\[\\#964500\\] {\n &:focus {\n --tw-ring-color: #964500;\n }\n }\n .focus\\:ring-blue-500 {\n &:focus {\n --tw-ring-color: var(--color-blue-500);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .lg\\:gap-4 {\n @media (width >= 64rem) {\n gap: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n &::-webkit-slider-runnable-track {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n &::-webkit-slider-runnable-track {\n background-color: color-mix(in srgb, #000 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n }\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n &::-webkit-slider-thumb {\n height: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n &::-webkit-slider-thumb {\n width: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n &::-webkit-slider-thumb {\n appearance: none;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n &::-webkit-slider-thumb {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n &::-webkit-slider-thumb {\n background-color: var(--color-white);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-duration: initial;\n }\n }\n}\n";
|
|
5
|
+
const SOLAR_RADIATION = [
|
|
6
|
+
0,
|
|
7
|
+
0,
|
|
8
|
+
0,
|
|
9
|
+
0,
|
|
10
|
+
0,
|
|
11
|
+
0, // 00:00 - 05:00 - 6
|
|
12
|
+
0,
|
|
13
|
+
0.1,
|
|
14
|
+
0.2, // 8
|
|
15
|
+
0.4,
|
|
16
|
+
0.8,
|
|
17
|
+
0.9, // 06:00 - 11:00 - 12
|
|
18
|
+
1,
|
|
19
|
+
0.95,
|
|
20
|
+
0.9,
|
|
21
|
+
0.7,
|
|
22
|
+
0.5,
|
|
23
|
+
0.3, // 12:00 - 17:00 - 18
|
|
24
|
+
0.16,
|
|
25
|
+
0.02,
|
|
26
|
+
0,
|
|
27
|
+
0,
|
|
28
|
+
0,
|
|
29
|
+
0, // 18:00 - 23:00 - 24
|
|
30
|
+
];
|
|
31
|
+
function getSolarRadiation(discountFactor) {
|
|
32
|
+
return SOLAR_RADIATION.map(value => value * discountFactor);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
const DEFAULT_GENERAL_SIMULATION_CONFIG = {
|
|
36
|
+
simulationYears: 25,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
function generateElectricCarChargingHours(start, end) {
|
|
40
|
+
let hours = new Array(24).fill(false);
|
|
41
|
+
if (start < end) {
|
|
42
|
+
for (let i = start; i <= end; i++) {
|
|
43
|
+
hours[i] = true;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
for (let i = start; i <= 24; i++) {
|
|
48
|
+
hours[i] = true;
|
|
49
|
+
}
|
|
50
|
+
for (let i = 0; i <= end; i++) {
|
|
51
|
+
hours[i] = true;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
return hours;
|
|
55
|
+
}
|
|
56
|
+
function simulateDay(production, consumption, dailyConsumption, battery) {
|
|
57
|
+
let batteryCharge = 0;
|
|
58
|
+
let soldEnergy = 0;
|
|
59
|
+
let energyUsageOfProduction = 0;
|
|
60
|
+
for (let hour = 0; hour < production.length; hour++) {
|
|
61
|
+
const energyDifference = production[hour] - consumption[hour];
|
|
62
|
+
if (energyDifference > 0) {
|
|
63
|
+
energyUsageOfProduction += consumption[hour];
|
|
64
|
+
if (batteryCharge < battery) {
|
|
65
|
+
batteryCharge = Math.min(batteryCharge + energyDifference, battery);
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
soldEnergy += energyDifference;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
if (batteryCharge > 0) {
|
|
73
|
+
if (batteryCharge >= -energyDifference) {
|
|
74
|
+
batteryCharge += energyDifference;
|
|
75
|
+
energyUsageOfProduction += consumption[hour];
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
energyUsageOfProduction += production[hour] + batteryCharge;
|
|
79
|
+
soldEnergy -= energyDifference + batteryCharge;
|
|
80
|
+
batteryCharge = 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
else {
|
|
84
|
+
energyUsageOfProduction += production[hour];
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
if (batteryCharge > 0) {
|
|
89
|
+
soldEnergy += batteryCharge;
|
|
90
|
+
}
|
|
91
|
+
const autonomy = energyUsageOfProduction / dailyConsumption;
|
|
92
|
+
return {
|
|
93
|
+
autonomy: autonomy > 1 ? 1 : autonomy,
|
|
94
|
+
soldEnergy,
|
|
95
|
+
energyUsageOfProduction,
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
function simulate(config) {
|
|
99
|
+
const generalConfig = {
|
|
100
|
+
...DEFAULT_GENERAL_SIMULATION_CONFIG,
|
|
101
|
+
...config.general
|
|
102
|
+
};
|
|
103
|
+
const consumption = CONSUMPTION_PROFILES[config.householdConsumption.consumptionProfile];
|
|
104
|
+
const norm = consumption.reduce((acc, curr) => acc + curr, 0);
|
|
105
|
+
const additionalConsumption = config.heatPump?.m2 * HEAT_PUMP_CONSUMPTION || 0;
|
|
106
|
+
let electricCarConsumption = 0;
|
|
107
|
+
let electricCarNorm = 1;
|
|
108
|
+
let electricCarChargingHours = consumption.map(_ => false);
|
|
109
|
+
if (config.electricCar) {
|
|
110
|
+
electricCarChargingHours = config.electricCar.chargingHours;
|
|
111
|
+
const dailyCarUsage = config.electricCar.averageKilometersPerDay / 100 * config.electricCar.consumptionkWhPer100km;
|
|
112
|
+
electricCarConsumption = Math.min(dailyCarUsage, config.electricCar.batteryKWh);
|
|
113
|
+
electricCarNorm = config.electricCar.chargingHours.reduce((acc, curr) => acc + (curr ? 1 : 0), 0);
|
|
114
|
+
if (electricCarNorm === 0) {
|
|
115
|
+
electricCarNorm = 1;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
const systemSize = config.solarSystem.numberOfPanels * config.solarSystem.panelType.kWattPeak;
|
|
119
|
+
const summerProduction = getSolarRadiation(config.solarRadiation.summerFactor * systemSize);
|
|
120
|
+
const winterProduction = getSolarRadiation(config.solarRadiation.winterFactor * systemSize);
|
|
121
|
+
const summerConsumptionWholeDay = config.householdConsumption.averageConsumption * config.householdConsumption.summerConsumptionFactor + additionalConsumption * config.householdConsumption.summerConsumptionFactor;
|
|
122
|
+
const summerConsumptionDaily = consumption.map((c, i) => c / norm * summerConsumptionWholeDay + electricCarConsumption / electricCarNorm * (electricCarChargingHours[i] ? 1 : 0));
|
|
123
|
+
const winterConsumptionWholeDay = config.householdConsumption.averageConsumption * config.householdConsumption.winterConsumptionFactor + additionalConsumption * config.householdConsumption.winterConsumptionFactor;
|
|
124
|
+
const winterConsumptionDaily = consumption.map((c, i) => c / norm * winterConsumptionWholeDay + electricCarConsumption / electricCarNorm * (electricCarChargingHours[i] ? 1 : 0));
|
|
125
|
+
const summerDay = simulateDay(summerProduction, summerConsumptionDaily, summerConsumptionWholeDay + electricCarConsumption, config.batteryKWh);
|
|
126
|
+
const winterDay = simulateDay(winterProduction, winterConsumptionDaily, winterConsumptionWholeDay + electricCarConsumption, config.batteryKWh);
|
|
127
|
+
let savedCosts = 0;
|
|
128
|
+
let savedCostsByYear = [];
|
|
129
|
+
const soldEnergy = (summerDay.soldEnergy + winterDay.soldEnergy) / 2;
|
|
130
|
+
const ownConsumption = (summerDay.energyUsageOfProduction + winterDay.energyUsageOfProduction) / 2;
|
|
131
|
+
let energyPrice = config.electricityPrice.purchase;
|
|
132
|
+
for (let i = 0; i < generalConfig.simulationYears; i++) {
|
|
133
|
+
const savedCostsThisYear = ownConsumption * energyPrice * 365;
|
|
134
|
+
savedCosts += savedCostsThisYear;
|
|
135
|
+
savedCostsByYear.push(savedCostsThisYear);
|
|
136
|
+
energyPrice = (1 + config.electricityPrice.increase) * energyPrice;
|
|
137
|
+
}
|
|
138
|
+
return {
|
|
139
|
+
autonomy: (summerDay.autonomy + winterDay.autonomy) / 2,
|
|
140
|
+
compensationPerDay: soldEnergy * config.electricityPrice.sell,
|
|
141
|
+
byYearSavedCosts: savedCostsByYear,
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const outputCss = "/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-red-500: oklch(63.7% 0.237 25.331);\n --color-green-600: oklch(62.7% 0.194 149.214);\n --color-blue-500: oklch(62.3% 0.214 259.815);\n --color-gray-200: oklch(92.8% 0.006 264.531);\n --color-gray-300: oklch(87.2% 0.01 258.338);\n --color-gray-400: oklch(70.7% 0.022 261.325);\n --color-gray-500: oklch(55.1% 0.027 264.364);\n --color-gray-600: oklch(44.6% 0.03 256.802);\n --color-gray-700: oklch(37.3% 0.034 259.733);\n --color-gray-800: oklch(27.8% 0.033 256.848);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --radius-lg: 0.5rem;\n --radius-4xl: 2rem;\n --animate-spin: spin 1s linear infinite;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *, ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-3 {\n left: calc(var(--spacing) * 3);\n }\n .z-20 {\n z-index: 20;\n }\n .z-50 {\n z-index: 50;\n }\n .m-auto {\n margin: auto;\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-6 {\n margin-bottom: calc(var(--spacing) * 6);\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-\\[400px\\] {\n height: 400px;\n }\n .h-full {\n height: 100%;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-16 {\n width: calc(var(--spacing) * 16);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-full {\n width: 100%;\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .flex-1 {\n flex: 1;\n }\n .flex-3 {\n flex: 3;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .animate-spin {\n animation: var(--animate-spin);\n }\n .cursor-help {\n cursor: help;\n }\n .appearance-none {\n appearance: none;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-rows-2 {\n grid-template-rows: repeat(2, minmax(0, 1fr));\n }\n .grid-rows-3 {\n grid-template-rows: repeat(3, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-row {\n flex-direction: row;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-6 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-4xl {\n border-radius: var(--radius-4xl);\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-2 {\n border-top-style: var(--tw-border-style);\n border-top-width: 2px;\n }\n .border-b-2 {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 2px;\n }\n .border-\\[\\#271200\\] {\n border-color: #271200;\n }\n .border-gray-200 {\n border-color: var(--color-gray-200);\n }\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n .border-red-500 {\n border-color: var(--color-red-500);\n }\n .bg-\\[\\#00000056\\] {\n background-color: #00000056;\n }\n .bg-\\[\\#271200\\] {\n background-color: #271200;\n }\n .bg-\\[\\#f3ebda\\] {\n background-color: #f3ebda;\n }\n .bg-\\[\\#ffffff\\] {\n background-color: #ffffff;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-gray-200 {\n background-color: var(--color-gray-200);\n }\n .bg-gray-800 {\n background-color: var(--color-gray-800);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pt-7 {\n padding-top: calc(var(--spacing) * 7);\n }\n .pr-4 {\n padding-right: calc(var(--spacing) * 4);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n .pl-4 {\n padding-left: calc(var(--spacing) * 4);\n }\n .pl-10 {\n padding-left: calc(var(--spacing) * 10);\n }\n .text-center {\n text-align: center;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-\\[\\#271200\\] {\n color: #271200;\n }\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n .text-gray-700 {\n color: var(--color-gray-700);\n }\n .text-green-600 {\n color: var(--color-green-600);\n }\n .text-red-500 {\n color: var(--color-red-500);\n }\n .text-white {\n color: var(--color-white);\n }\n .accent-\\[\\#964500\\] {\n accent-color: #964500;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .hover\\:bg-\\[\\#0000003c\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #0000003c;\n }\n }\n }\n .hover\\:bg-\\[\\#3a1b00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #3a1b00;\n }\n }\n }\n .hover\\:bg-\\[\\#271200\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #271200;\n }\n }\n }\n .hover\\:bg-\\[\\#964500\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #964500;\n }\n }\n }\n .hover\\:bg-\\[\\#ffffff\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #ffffff;\n }\n }\n }\n .hover\\:bg-gray-200 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-200);\n }\n }\n }\n .hover\\:bg-gray-300 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-300);\n }\n }\n }\n .hover\\:bg-gray-500 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-500);\n }\n }\n }\n .hover\\:text-white {\n &:hover {\n @media (hover: hover) {\n color: var(--color-white);\n }\n }\n }\n .focus\\:border-2 {\n &:focus {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n }\n .focus\\:border-black {\n &:focus {\n border-color: var(--color-black);\n }\n }\n .focus\\:border-transparent {\n &:focus {\n border-color: transparent;\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-\\[\\#271200\\] {\n &:focus {\n --tw-ring-color: #271200;\n }\n }\n .focus\\:ring-\\[\\#964500\\] {\n &:focus {\n --tw-ring-color: #964500;\n }\n }\n .focus\\:ring-blue-500 {\n &:focus {\n --tw-ring-color: var(--color-blue-500);\n }\n }\n .focus\\:ring-offset-0 {\n &:focus {\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .lg\\:gap-4 {\n @media (width >= 64rem) {\n gap: calc(var(--spacing) * 4);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:rounded-full {\n &::-webkit-slider-runnable-track {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-runnable-track\\]\\:bg-black\\/25 {\n &::-webkit-slider-runnable-track {\n background-color: color-mix(in srgb, #000 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 25%, transparent);\n }\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:h-\\[10px\\] {\n &::-webkit-slider-thumb {\n height: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:w-\\[10px\\] {\n &::-webkit-slider-thumb {\n width: 10px;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:appearance-none {\n &::-webkit-slider-thumb {\n appearance: none;\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:rounded-full {\n &::-webkit-slider-thumb {\n border-radius: calc(infinity * 1px);\n }\n }\n .\\[\\&\\:\\:-webkit-slider-thumb\\]\\:bg-white {\n &::-webkit-slider-thumb {\n background-color: var(--color-white);\n }\n }\n}\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-duration {\n syntax: \"*\";\n inherits: false;\n}\n@keyframes spin {\n to {\n transform: rotate(360deg);\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *, ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-duration: initial;\n }\n }\n}\n";
|
|
6
146
|
|
|
7
147
|
const SolarSystemForm = class {
|
|
8
148
|
constructor(hostRef) {
|
|
@@ -11,14 +151,13 @@ const SolarSystemForm = class {
|
|
|
11
151
|
systemConfigs = {};
|
|
12
152
|
roofPolygons = {};
|
|
13
153
|
obstructionPolygons = {};
|
|
14
|
-
householdConsumption =
|
|
154
|
+
householdConsumption = 4500;
|
|
15
155
|
consumptionProfile = "mostly_at_home";
|
|
16
156
|
electricityPrice = 0.3;
|
|
17
157
|
compensationRate = 0.07;
|
|
18
158
|
annualPriceIncrease = 2;
|
|
19
159
|
autonomy = 0;
|
|
20
160
|
costSavings = 0;
|
|
21
|
-
costSavings25Years = 0;
|
|
22
161
|
numberOfPanels = 5;
|
|
23
162
|
panelPeakPower = 0.4; // kW per panel
|
|
24
163
|
name = "";
|
|
@@ -29,168 +168,67 @@ const SolarSystemForm = class {
|
|
|
29
168
|
electricCarChargingTime = "day";
|
|
30
169
|
heatPump = 0;
|
|
31
170
|
battery = 0;
|
|
32
|
-
|
|
33
|
-
|
|
171
|
+
compensation25Years = 0;
|
|
172
|
+
savedCosts25Years = 0;
|
|
173
|
+
maxPanels = 5;
|
|
34
174
|
updateSystemConfigs() {
|
|
35
175
|
if (Object.keys(this.systemConfigs).length === 0) {
|
|
36
176
|
this.numberOfPanels = 0;
|
|
177
|
+
this.maxPanels = 0;
|
|
37
178
|
return;
|
|
38
179
|
}
|
|
39
180
|
this.numberOfPanels = Object.keys(this.systemConfigs).reduce((acc, curr) => acc + this.systemConfigs[curr].positionedPanels.length, 0);
|
|
181
|
+
this.maxPanels = Object.keys(this.systemConfigs).reduce((acc, curr) => acc + this.systemConfigs[curr].positionedPanels.length, 0);
|
|
40
182
|
this.panelPeakPower =
|
|
41
183
|
Object.entries(this.systemConfigs)[0][1].positionedPanels[0].panel
|
|
42
184
|
.kWattPeak;
|
|
43
185
|
this.recalculate();
|
|
44
|
-
this.updateChart();
|
|
45
186
|
}
|
|
46
187
|
recalculate() {
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const remainingBatteryCapacity = this.battery - batteryCharge;
|
|
84
|
-
const energyToStore = Math.min(energyDifference, remainingBatteryCapacity);
|
|
85
|
-
if (energyToStore > 0) {
|
|
86
|
-
batteryCharge += energyToStore;
|
|
87
|
-
energyUsageOfProduction += hourlyConsumption;
|
|
88
|
-
soldEnergy += energyDifference - energyToStore;
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
// Battery full, sell excess
|
|
92
|
-
energyUsageOfProduction += hourlyConsumption;
|
|
93
|
-
soldEnergy += energyDifference;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
else if (energyDifference < 0) {
|
|
97
|
-
// Production deficit - try to use battery
|
|
98
|
-
const energyNeeded = -energyDifference;
|
|
99
|
-
const energyFromBattery = Math.min(energyNeeded, batteryCharge);
|
|
100
|
-
if (energyFromBattery > 0) {
|
|
101
|
-
batteryCharge -= energyFromBattery;
|
|
102
|
-
energyUsageOfProduction += production[i] +
|
|
103
|
-
energyFromBattery;
|
|
188
|
+
const simulationConfig = {
|
|
189
|
+
general: {
|
|
190
|
+
simulationYears: 25,
|
|
191
|
+
},
|
|
192
|
+
householdConsumption: {
|
|
193
|
+
consumptionProfile: this.consumptionProfile,
|
|
194
|
+
winterConsumptionFactor: 1.2,
|
|
195
|
+
summerConsumptionFactor: 0.8,
|
|
196
|
+
averageConsumption: this.householdConsumption / 365,
|
|
197
|
+
},
|
|
198
|
+
electricityPrice: {
|
|
199
|
+
purchase: this.electricityPrice,
|
|
200
|
+
sell: this.compensationRate,
|
|
201
|
+
increase: this.annualPriceIncrease / 100,
|
|
202
|
+
},
|
|
203
|
+
solarSystem: {
|
|
204
|
+
numberOfPanels: this.numberOfPanels,
|
|
205
|
+
panelType: DEFAULT_SOLAR_PANEL_TYPE,
|
|
206
|
+
pitch: 30,
|
|
207
|
+
},
|
|
208
|
+
batteryKWh: this.battery,
|
|
209
|
+
solarRadiation: {
|
|
210
|
+
winterFactor: 0.2,
|
|
211
|
+
summerFactor: 0.6,
|
|
212
|
+
},
|
|
213
|
+
heatPump: {
|
|
214
|
+
m2: this.heatPump,
|
|
215
|
+
},
|
|
216
|
+
electricCar: this.electricCar
|
|
217
|
+
? {
|
|
218
|
+
averageKilometersPerDay: 50,
|
|
219
|
+
consumptionkWhPer100km: 17,
|
|
220
|
+
batteryKWh: 20,
|
|
221
|
+
chargingHours: this.electricCarChargingTime === "day"
|
|
222
|
+
? generateElectricCarChargingHours(6, 18)
|
|
223
|
+
: generateElectricCarChargingHours(18, 6),
|
|
104
224
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
energyUsageOfProduction += hourlyConsumption;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
// Calculate the cost savings
|
|
116
|
-
this.costSavings = soldEnergy * this.compensationRate * 365 +
|
|
117
|
-
energyUsageOfProduction * 365 * this.electricityPrice;
|
|
118
|
-
// Calculate 25-year savings with price increase
|
|
119
|
-
let totalSavings = 0;
|
|
120
|
-
let currentPrice = this.electricityPrice;
|
|
121
|
-
for (let year = 0; year < 25; year++) {
|
|
122
|
-
const yearlySavings = soldEnergy * this.compensationRate * 365 +
|
|
123
|
-
energyUsageOfProduction * 365 * currentPrice;
|
|
124
|
-
totalSavings += yearlySavings;
|
|
125
|
-
currentPrice *= 1 + this.annualPriceIncrease / 100;
|
|
126
|
-
}
|
|
127
|
-
this.costSavings25Years = totalSavings;
|
|
128
|
-
this.autonomy =
|
|
129
|
-
(energyUsageOfProduction / (totalHouseholdConsumption / 365)) *
|
|
130
|
-
100;
|
|
131
|
-
}
|
|
132
|
-
updateChart() {
|
|
133
|
-
// if (!this.chartRef) return;
|
|
134
|
-
// const ctx = this.chartRef.getContext("2d");
|
|
135
|
-
// if (!ctx) return;
|
|
136
|
-
// if (this.chart) {
|
|
137
|
-
// this.chart.destroy();
|
|
138
|
-
// }
|
|
139
|
-
// const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`);
|
|
140
|
-
// const data = CONSUMPTION_PROFILES[this.consumptionProfile];
|
|
141
|
-
// const norm = data.reduce((acc, curr) => acc + curr, 0);
|
|
142
|
-
// const peakKwh = this.numberOfPanels * this.panelPeakPower;
|
|
143
|
-
// const production = SOLAR_RADIATION.map((radiation) =>
|
|
144
|
-
// radiation * peakKwh
|
|
145
|
-
// );
|
|
146
|
-
// for (let i = 0; i < data.length; i++) {
|
|
147
|
-
// data[i] = data[i] * this.householdConsumption / norm / 365;
|
|
148
|
-
// }
|
|
149
|
-
// let datasets = [{
|
|
150
|
-
// label: "Energy Consumption",
|
|
151
|
-
// data: data,
|
|
152
|
-
// borderColor: "#964500",
|
|
153
|
-
// backgroundColor: "rgba(150, 69, 0, 0.1)",
|
|
154
|
-
// fill: true,
|
|
155
|
-
// tension: 0.4,
|
|
156
|
-
// }, {
|
|
157
|
-
// label: "Energy Production",
|
|
158
|
-
// data: production,
|
|
159
|
-
// borderColor: "#000000",
|
|
160
|
-
// backgroundColor: "rgba(0, 0, 0, 0.1)",
|
|
161
|
-
// fill: true,
|
|
162
|
-
// }];
|
|
163
|
-
// this.chart = new Chart(ctx, {
|
|
164
|
-
// type: "line",
|
|
165
|
-
// data: {
|
|
166
|
-
// labels: hours,
|
|
167
|
-
// datasets: datasets,
|
|
168
|
-
// },
|
|
169
|
-
// options: {
|
|
170
|
-
// responsive: true,
|
|
171
|
-
// plugins: {
|
|
172
|
-
// title: {
|
|
173
|
-
// display: true,
|
|
174
|
-
// text: "Daily Consumption Profile",
|
|
175
|
-
// },
|
|
176
|
-
// },
|
|
177
|
-
// scales: {
|
|
178
|
-
// y: {
|
|
179
|
-
// beginAtZero: true,
|
|
180
|
-
// title: {
|
|
181
|
-
// display: true,
|
|
182
|
-
// text: "Relative Consumption",
|
|
183
|
-
// },
|
|
184
|
-
// },
|
|
185
|
-
// x: {
|
|
186
|
-
// title: {
|
|
187
|
-
// display: true,
|
|
188
|
-
// text: "Hour of Day",
|
|
189
|
-
// },
|
|
190
|
-
// },
|
|
191
|
-
// },
|
|
192
|
-
// },
|
|
193
|
-
// });
|
|
225
|
+
: undefined,
|
|
226
|
+
};
|
|
227
|
+
const result = simulate(simulationConfig);
|
|
228
|
+
this.compensation25Years = result.compensationPerDay * 365 * 25;
|
|
229
|
+
this.savedCosts25Years = result.byYearSavedCosts.reduce((acc, curr) => acc + curr, 0);
|
|
230
|
+
this.costSavings = result.compensationPerDay * 365;
|
|
231
|
+
this.autonomy = result.autonomy * 100;
|
|
194
232
|
}
|
|
195
233
|
componentWillLoad() {
|
|
196
234
|
this.updateSystemConfigs();
|
|
@@ -239,100 +277,101 @@ const SolarSystemForm = class {
|
|
|
239
277
|
}
|
|
240
278
|
render() {
|
|
241
279
|
const t = getLanguageStrings(state.settings.language);
|
|
242
|
-
return (h("div", { key: '
|
|
280
|
+
return (h("div", { key: '549db75bce0f8725afa3e83edcecf3549807c38d', class: "flex flex-col justify-center items-center w-full h-full pt-4" // style={{
|
|
243
281
|
,
|
|
244
282
|
// display: (Object.keys(this.systemConfigs).length === 0)
|
|
245
283
|
// ? "none"
|
|
246
284
|
// : "flex",
|
|
247
285
|
// }}
|
|
248
|
-
id: "solar-system-form" }, h("h1", { key: '
|
|
249
|
-
|
|
286
|
+
id: "solar-system-form" }, h("h1", { key: 'bc4168635630a21f9afbe5a8f5eaa8192f4d5d7e', class: "text-2xl font-bold text-[#271200] mb-4 w-full" }, t.solarSystemForm.title), h("div", { key: '2a6847308b78e63ba54459c699771693bbf7a9d3', class: "w-full bg-[#f3ebda] rounded-4xl p-6 space-y-6" }, h("div", { key: '9e51bbc779825677c5b6726ed7797482f0854119', class: "space-y-4" }, h("h2", { key: '6057bdc5850662ebfa7a2b0dbce1398f87662aaa', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.systemInformation), h("div", { key: '9b38fbccfe6d43ea6bb304fa65f151f0ed751ad8', class: "grid grid-rows-3 gap-0" }, h("div", { key: '38706df8513d97cb48d83855985d180de3db38dd', class: "grid grid-cols-2 gap-4" }, h("label", { key: '0a3a91aa7025d19d77cd293a0b27ffe1312e507f', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.numberOfPanels), h("label", { key: '4cf57fc0dcfc8112cfd9ce6a16dd8ae6324b1819', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.panelPeakPower)), h("div", { key: 'dab6790a8fac11b934434cd8da73d9cde10b5fba', class: "grid grid-cols-2 gap-4" }, h("input", { key: 'c99c84c3476a3868d7e19cc964794c02a3d81957', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.numberOfPanels, readOnly: true }), h("input", { key: 'd7db6af3b8ecac5af1db73411ddbc6bcf13681d4', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.panelPeakPower, readonly: true })), h("div", { key: 'cb268bc1d12fb77969ecaca2e51d9c4a21138b72', class: "grid grid-cols-2 gap-4" }, h("div", { key: '3945bb882f1a817769915a5aaa6daf3dee15f7ac', class: "w-full pt-2" }, h("input", { key: 'e5b2fde4db4b134df199b2d75e3b044dfec73688', type: "range", min: "1", max: this.maxPanels, step: "1", class: " w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.numberOfPanels, onInput: (e) => {
|
|
287
|
+
this.numberOfPanels = parseInt(e.target
|
|
288
|
+
.value);
|
|
289
|
+
this.recalculate();
|
|
290
|
+
} })))), h("div", { key: '91039b151c6e6262e09f68e87b21fa9b22afeb02', class: "bg-white rounded-4xl p-4" }, h("div", { key: 'bff40697513cbceb2efe3b2e0c6804cbd26a3d9b', class: "flex items-center justify-between" }, h("span", { key: '9cd0535836f88cf495ef02b4c6c0a28bb9ab893d', class: "text-gray-600" }, t.solarSystemForm.totalSystemPeakPower), h("span", { key: '072b28d2f631d0b8ff05ff027e3f150d0d167cb5', class: "text-xl font-bold text-[#271200]" }, (DEFAULT_SOLAR_PANEL_TYPE.kWattPeak *
|
|
291
|
+
this.numberOfPanels).toFixed(1), " kW")))), h("div", { key: '53deeca9b648b9e1e0af5819050c708986872bbb', class: "space-y-4" }, h("h2", { key: 'b62489c01793003851a37c9d0de6d100eae5aaa2', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.householdConsumptionTitle), h("div", { key: 'f4876aab0a3a7e28a812d0e36e6db5a8e800bfe7', class: "grid grid-rows-2 gap-0" }, h("div", { key: '9024f92117e409241889d45eb1175b538df89574', class: "grid grid-cols-2 gap-4" }, h("label", { key: '4caf4a458811e3ecd9603fec6e566dbdb1e1e1ec', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.annualConsumption), h("label", { key: '7bf4644865873487503551a25c78aeefe143315e', class: "block text-sm font-medium text-gray-600" }, t.solarSystemForm.consumptionProfileTitle)), h("div", { key: 'a77586750b22cda7f92fc34a6f4be0f59b3df090', class: "grid grid-cols-2 gap-4" }, h("input", { key: '62da5df5b4207ff4f2aa657dac4935f4fc64fffc', type: "number", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.householdConsumption, onInput: (e) => {
|
|
250
292
|
this.householdConsumption = parseInt(e.target
|
|
251
293
|
.value);
|
|
252
294
|
this.recalculate();
|
|
253
|
-
|
|
254
|
-
} }), h("select", { key: '29eacf0b6727fe47586febc387219323d374c28d', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
|
|
295
|
+
} }), h("select", { key: '994762d2b75728dcb2694e89115cfea27376d4f7', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
|
|
255
296
|
this.consumptionProfile =
|
|
256
297
|
e.target
|
|
257
298
|
.value;
|
|
258
299
|
this.recalculate();
|
|
259
|
-
|
|
260
|
-
} }, h("option", { key: '30f0204de862d8a97495344aa4bc7629d65be77a', value: "mostly_at_home", selected: this.consumptionProfile ===
|
|
300
|
+
} }, h("option", { key: '24ee1bea612f94ec170c7a9ad4e7ca6542eb7e4d', value: "mostly_at_home", selected: this.consumptionProfile ===
|
|
261
301
|
"mostly_at_home" }, t.solarSystemForm.consumptionProfiles
|
|
262
|
-
.mostlyAtHome), h("option", { key: '
|
|
302
|
+
.mostlyAtHome), h("option", { key: '8e7f0a2a97475823bea723c97fdc1b21bf2d0d22', value: "mostly_away", selected: this.consumptionProfile ===
|
|
263
303
|
"mostly_away" }, t.solarSystemForm.consumptionProfiles
|
|
264
|
-
.mostlyAway))))), h("div", { key: '
|
|
304
|
+
.mostlyAway))))), h("div", { key: '7d7888ec6c7f17519d5db02df7cd9065201099e6', class: "space-y-4" }, h("h2", { key: 'c5560b019a9b79c5a153a68f59cea40a956a4767', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.additionalComponents.title), h("div", { key: 'be016271b936821f7e863a09ad0174510c41f93e', class: "flex flex-col gap-4" }, h("div", { key: '9aadde82ccd4033ed2ae1d34bab5d5dbe27564b4', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: 'e164de24b8e6447aad3e97c4ee062f2b31b87925', class: "flex items-center justify-between" }, h("div", { key: '331a5f50e130ee3fe9f84d80e2b4eef21f79dc42', class: "flex items-center gap-2" }, h("input", { key: '2e9b577115cd944947f8baa5ded85d4b4d2774d8', type: "checkbox", id: "heatPump", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded-full focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.heatPump > 0, onChange: (e) => {
|
|
265
305
|
this.heatPump =
|
|
266
306
|
e.target
|
|
267
307
|
.checked
|
|
268
308
|
? 100
|
|
269
309
|
: 0;
|
|
270
310
|
this.recalculate();
|
|
271
|
-
} }), h("label", { key: '
|
|
311
|
+
} }), h("label", { key: '9c20845872a8b2a0c6ebfa53482a4c0940095565', htmlFor: "heatPump", class: "text-gray-600" }, t.solarSystemForm
|
|
272
312
|
.additionalComponents
|
|
273
|
-
.heatPump)), this.heatPump > 0 && (h("span", { key: '
|
|
313
|
+
.heatPump)), this.heatPump > 0 && (h("span", { key: 'a58c9562ff0aef0edf13d376fa3dfdf27ce34aae', class: "text-gray-600" }, this.heatPump, " m\u00B2"))), this.heatPump > 0 && (h("div", { key: 'c5fe352644acd2a3d33ebfd8ed64c7b9aa6907d2', class: "flex flex-col gap-2" }, h("input", { key: '8fb252eb096f83d17deeb683e7fc3696597227b7', type: "range", min: "10", max: "300", step: "10", class: "custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.heatPump, onInput: (e) => {
|
|
274
314
|
this.heatPump = parseInt(e.target
|
|
275
315
|
.value);
|
|
276
316
|
this.recalculate();
|
|
277
|
-
} })))), h("div", { key: '
|
|
317
|
+
} })))), h("div", { key: '012467ae9202024f865b13ed5a6435f4a9c49f0b', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: 'a2b9a39aa3102226cdd593bf5d961af2d2765281', class: "flex items-center justify-between" }, h("div", { key: '7cbb3ffa6eb1197acf099cd5da223d5d913b2516', class: "flex items-center gap-2" }, h("input", { key: '6ae6b3ff3e584d1db873f75dab92b7fd39a6973c', type: "checkbox", id: "electricCar", class: "w-4 h-4 accent-[#964500] border-gray-300 rounded focus:ring-[#964500] focus:ring-offset-0 focus:ring-2", checked: this.electricCar, onChange: (e) => {
|
|
278
318
|
this.electricCar =
|
|
279
319
|
e.target
|
|
280
320
|
.checked;
|
|
281
321
|
this.recalculate();
|
|
282
|
-
} }), h("label", { key: '
|
|
322
|
+
} }), h("label", { key: 'b7ff8400fe6570621a2973fd235b22dc406997ef', htmlFor: "electricCar", class: "text-gray-600" }, t.solarSystemForm
|
|
283
323
|
.additionalComponents
|
|
284
|
-
.electricCar))), this.electricCar && (h("div", { key: '
|
|
324
|
+
.electricCar))), this.electricCar && (h("div", { key: 'b9d235f46fe01d3e80f54405749c64e9a228985e', class: "flex flex-col gap-2" }, h("label", { key: '015ac57c891d7146e967f4a33f9bfa01c3c1cd51', class: "text-sm text-gray-600" }, t.solarSystemForm
|
|
285
325
|
.additionalComponents
|
|
286
|
-
.chargingTime), h("select", { key: '
|
|
326
|
+
.chargingTime), h("select", { key: '0b041a8a9989bd6ef107aefccf7d5a7749d1a5b4', class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", onChange: (e) => {
|
|
287
327
|
this.electricCarChargingTime =
|
|
288
328
|
e.target
|
|
289
329
|
.value;
|
|
290
330
|
this.recalculate();
|
|
291
|
-
} }, h("option", { key: '
|
|
331
|
+
} }, h("option", { key: 'f5a7691bbd5a6997e50622d3145123f55e4c3c8f', value: "day", selected: this
|
|
292
332
|
.electricCarChargingTime ===
|
|
293
333
|
"day" }, t.solarSystemForm
|
|
294
334
|
.additionalComponents
|
|
295
|
-
.chargingTimeDay), h("option", { key: '
|
|
335
|
+
.chargingTimeDay), h("option", { key: '606e7bb1adf1d3fa9463a285dbc73a49cc9bd3c5', value: "night", selected: this
|
|
296
336
|
.electricCarChargingTime ===
|
|
297
337
|
"night" }, t.solarSystemForm
|
|
298
338
|
.additionalComponents
|
|
299
|
-
.chargingTimeNight))))), h("div", { key: '
|
|
300
|
-
.battery), h("span", { key: '
|
|
339
|
+
.chargingTimeNight))))), h("div", { key: '7c329053c1cf7dfea784e0e1d8ecd3a612c37ed6', class: "flex flex-col bg-white rounded-4xl p-4 gap-4" }, h("div", { key: 'eb11f346e9b0a0e4d59aecd14629d0905a54d5ec', class: "flex items-center justify-between" }, h("label", { key: '7bb0d4d3494175b4c82d5dbe0eb0a16b149ea822', class: "text-gray-600" }, t.solarSystemForm.additionalComponents
|
|
340
|
+
.battery), h("span", { key: '499245d3a4aef452ff2ad7689ce6b7ecd5703b7d', class: "text-gray-600" }, this.battery, " kWh")), h("div", { key: '908b4f2e886195df667f0e30e88f8bbc6eaa253a', class: "flex flex-col gap-2" }, h("input", { key: 'c67ecd207650c19792eea046b352a99e690d5dc9', type: "range", min: "0", max: "20", step: "1", class: "w-full custom-range appearance-none rounded-full bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", value: this.battery, onInput: (e) => {
|
|
301
341
|
this.battery = parseInt(e.target
|
|
302
342
|
.value);
|
|
303
343
|
this.recalculate();
|
|
304
|
-
} }))))), h("div", { key: '
|
|
344
|
+
} }))))), h("div", { key: '7cc865c4599f2f58978e54c7bb72b65e6d0139f9', class: "space-y-4" }, h("h2", { key: '7ea222c40d2e37aa387cad0f30c64e3df2cd5d0b', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.electricityCostsTitle), h("div", { key: '30fe79923aa176908ae06d766e6ad79a9ff7eb5e', class: "grid grid-rows-2 gap-0" }, h("div", { key: '19d565dc42ef28922f4813db7467a49794e4526f', class: "grid grid-cols-3 gap-4" }, h("label", { key: '14b06e38baf9ecfaa757cf864774e56bef3f9711', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.electricityPrice), h("label", { key: 'd2c18b3855515a72432a0ab68cd46c44153defb7', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.compensationRate), h("label", { key: '77a4143768b914b62fe3754d0a51083b01d8b08c', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.annualPriceIncrease)), h("div", { key: '4d7e0fce256cfea6037d4bced033d780c3a72145', class: "grid grid-cols-3 gap-4" }, h("input", { key: '71cb9bf44a58011c7d4d22d428db2ff9a58c9257', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.electricityPrice.toFixed(2), onInput: (e) => {
|
|
305
345
|
this.electricityPrice = parseFloat(e.target
|
|
306
346
|
.value);
|
|
307
347
|
this.recalculate();
|
|
308
|
-
|
|
309
|
-
} }), h("input", { key: 'a32241bcc6b210c1be689ebd5b45451741f45cff', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
|
|
348
|
+
} }), h("input", { key: '35d325add1b8b5e4c38a2c218495ed4964a52c9b', type: "number", step: "0.01", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.compensationRate.toFixed(2), onInput: (e) => {
|
|
310
349
|
this.compensationRate = parseFloat(e.target
|
|
311
350
|
.value);
|
|
312
351
|
this.recalculate();
|
|
313
|
-
|
|
314
|
-
} }), h("input", { key: 'eb099c05451e31c412be6baf77ab7355f67562e1', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
|
|
352
|
+
} }), h("input", { key: '2a25d8c930cb17343c80170f420ff5528753523d', type: "number", step: "0.1", class: "w-full px-4 py-2 rounded-4xl border border-gray-300 focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white", value: this.annualPriceIncrease.toFixed(1), onInput: (e) => {
|
|
315
353
|
this.annualPriceIncrease = parseFloat(e.target
|
|
316
354
|
.value);
|
|
317
355
|
this.recalculate();
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
.
|
|
321
|
-
.
|
|
356
|
+
} })))), h("div", { key: '0bbfa420bca00de05ae8cc09cddd49c93479e924', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: 'b8265980075313a3c95aa3a88c4b790f7a62562f', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.resultsTitle), h("div", { key: '78d516d3c9c73e6bbdb6cff8900bde8e1c60dc27', class: "bg-white rounded-4xl p-4" }, h("div", { key: '285f302261570f3d5ae71b057a2e180fd639c4d6', class: "flex items-center justify-between" }, h("span", { key: '0de488a6059b75314ade39ca96f1cbe01f2d122d', class: "text-gray-600" }, t.solarSystemForm.autonomy), h("span", { key: 'c97a28602e6faf4f3c039d80fc6c685310386da5', class: "text-xl font-bold text-[#271200]" }, this.autonomy > 100
|
|
357
|
+
? "100"
|
|
358
|
+
: this.autonomy.toFixed(1), "%")), h("div", { key: 'deaef9e1509d5b0fee8dfd7284f635482de4bb13', class: "flex items-center justify-between mt-4" }, h("div", { key: '850517b406fd946c37d0f72bb5bc1ca8e861af33', class: "flex items-center gap-2" }, h("span", { key: '6d647228d231d4a7a365efc1a5a687f79135042b', class: "text-gray-600" }, t.solarSystemForm.costSavings), h("div", { key: '0a7b1ec878a4d54bf28276bcc8f122ce014cb4b8', class: "relative group" }, h("svg", { key: 'f76925e1ce4cc46860adc87c9a106cb6df7b9e28', xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5 text-gray-400 cursor-help", viewBox: "0 0 20 20", fill: "currentColor" }, h("path", { key: 'e0df75135f42f62cede1a50fbf74ac9fd2155661', "fill-rule": "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z", "clip-rule": "evenodd" })), h("div", { key: '1772540273c275ed02ddc2e909ca65ab8227392e', class: "absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-64 p-2 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" }, t.solarSystemForm
|
|
359
|
+
.savingsDisclaimer))), h("span", { key: '3f1f218796c7f993ffd9a404b82d97aef24c984b', class: "text-xl font-bold text-green-600" }, this.costSavings.toFixed(2), "\u20AC/", t
|
|
360
|
+
.solarSystemForm.year)), h("div", { key: '4672a624002ea70e50214f68565595fc283e8bba', class: "flex items-center justify-between mt-4" }, h("div", { key: '07e833038ea771151ad720ef49ecf7c03a171a21', class: "flex items-center gap-2" }, h("span", { key: '89a41d9d26df2be868be135eb8aadd6029b8a0c7', class: "text-gray-600" }, "Einspeiseverg\u00FCtung 25 Jahre")), h("span", { key: '2a9f9306c36d9796ca4399c27ec2dbb162c97af7', class: "text-xl font-bold text-green-600" }, this.compensation25Years.toFixed(2), "\u20AC")), h("div", { key: '85ea5163dfde3736aa8ed940b8c36f0340a4cfd9', class: "flex items-center justify-between mt-4" }, h("div", { key: 'a785728c4874b30b0725e67577d76b1f4edd4756', class: "flex items-center gap-2" }, h("span", { key: '562a8131aab4af7b45bc24e30080abf1f99ec28f', class: "text-gray-600" }, "Geldwerter Vorteil 25 Jahre")), h("span", { key: '944c9d2d3b232f6e4312ba656b1826fe908a986b', class: "text-xl font-bold text-green-600" }, this.savedCosts25Years.toFixed(2), "\u20AC")))), h("div", { key: '3e6abd9e4ce1c6f7f8302ea92cadc86590a2dd98', class: "space-y-4 pt-4 border-t border-gray-200" }, h("h2", { key: '6120ce37b8e4704d4c92447ff9a65aa36f6fdadd', class: "text-lg font-semibold text-[#271200]" }, t.solarSystemForm.requestOffer), h("div", { key: 'ed27552b46ad71385623e19afa9f10cea71ffc61', class: "grid grid-rows-2 gap-0" }, h("div", { key: '284eb931bad5f79634980795bd42172e99925313', class: "grid grid-cols-2 gap-4" }, h("label", { key: '19fcfd75f5a363f9a0c4bba979d6e7379ee0e606', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.name), h("label", { key: 'e6614194b968abf48acb1c5ccb8c16b25566c213', class: "block text-sm font-medium text-gray-600 mb-1" }, t.solarSystemForm.email)), h("div", { key: '9999ccb0adf14c7ef5d1103082e20b3969ae1011', class: "grid grid-cols-2 gap-4" }, h("input", { key: '8e5d1b56c21242f95094cc94395f6336b9634f51', type: "text", class: `w-full px-4 py-2 rounded-4xl border ${this.nameError
|
|
322
361
|
? "border-red-500"
|
|
323
362
|
: "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.name, onInput: (e) => {
|
|
324
363
|
this.name =
|
|
325
364
|
e.target
|
|
326
365
|
.value;
|
|
327
366
|
this.validateForm();
|
|
328
|
-
}, placeholder: "Your name" }), this.nameError && (h("p", { key: '
|
|
367
|
+
}, placeholder: "Your name" }), this.nameError && (h("p", { key: 'da2c7ad50327f0939d241c502803371fd265e755', class: "text-red-500 text-sm mt-1" }, this.nameError)), h("input", { key: 'df4338c9f7d288e6cb35fda35517155058b3050b', type: "email", class: `w-full px-4 py-2 rounded-4xl border ${this.emailError
|
|
329
368
|
? "border-red-500"
|
|
330
369
|
: "border-gray-300"} focus:ring-2 focus:ring-[#964500] focus:border-transparent bg-white`, value: this.email, onInput: (e) => {
|
|
331
370
|
this.email =
|
|
332
371
|
e.target
|
|
333
372
|
.value;
|
|
334
373
|
this.validateForm();
|
|
335
|
-
}, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: '
|
|
374
|
+
}, placeholder: "your.email@example.com" }), this.emailError && (h("p", { key: 'a8a6b21d385f892f3f7d234e2b9ca46332c50db1', class: "text-red-500 text-sm mt-1" }, this.emailError)))), h("div", { key: 'e73e74a966c7596517ddd22dc31cd6a253ba7f2c', class: "flex justify-center" }, h("button", { key: '9582b88643616e57920f81b11d796ca143b04496', onClick: () => this.handleRequestOffer(), disabled: !this.name.trim() ||
|
|
336
375
|
!this.email.trim() || !!this.nameError ||
|
|
337
376
|
!!this.emailError, class: "px-4 py-2 bg-[#271200] rounded-4xl hover:bg-[#964500] transition-colors duration-200", style: { color: "white" } }, t.solarSystemForm.requestOfferButton))))));
|
|
338
377
|
}
|