Feature: PV Forecast function with 3 providers

src/components/OpenwbPageNavbar.vue

@@ -175,6 +175,14 @@
             >
               Lastmanagement
             </router-link>
+            <router-link
+              v-if="accessAllowed('ForecastConfiguration')"
+              to="/ForecastConfiguration"
+              class="dropdown-item"
+              active-class="active disabled"
+            >
+              PV-Prognose
+            </router-link>
             <router-link
               v-if="accessAllowed('ChargePointInstallation')"
               to="/ChargePointInstallation"

src/components/forecast/ForecastConfigMixin.vue

@@ -0,0 +1,13 @@
+<script>
+export default {
+  props: {
+    forecast: { type: Object, required: true },
+  },
+  emits: ["update:configuration"],
+  methods: {
+    updateConfiguration(event, path = undefined) {
+      this.$emit("update:configuration", { value: event, object: path });
+    },
+  },
+};
+</script>

src/components/forecast/OpenwbForecastConfigFallback.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="forecast-fallback">
+    <openwb-base-alert
+      v-if="Object.keys(forecast.configuration || {}).length == 0"
+      subtype="info"
+    >
+      Der Anbieter "{{ forecast.name }}" bietet keine Einstellungen.
+    </openwb-base-alert>
+    <div v-else>
+      <openwb-base-alert subtype="warning">
+        Es wurde keine Konfigurationsseite für den Anbieter "{{ forecast.name }}" gefunden. Die Einstellungen können als
+        JSON direkt bearbeitet werden.
+      </openwb-base-alert>
+      <openwb-base-textarea
+        title="Konfiguration"
+        subtype="json"
+        :model-value="forecast.configuration"
+        @update:model-value="updateConfiguration($event, 'configuration')"
+      >
+        <template #help> Bitte prüfe, ob die Eingaben richtig interpretiert werden. </template>
+      </openwb-base-textarea>
+      <openwb-base-alert subtype="info">
+        <pre>{{ JSON.stringify(forecast.configuration, undefined, 2) }}</pre>
+      </openwb-base-alert>
+    </div>
+  </div>
+</template>
+
+<script>
+import ForecastConfigMixin from "./ForecastConfigMixin.vue";
+
+export default {
+  name: "OpenwbForecastConfigFallback",
+  mixins: [ForecastConfigMixin],
+};
+</script>

src/components/forecast/OpenwbForecastProxy.vue

@@ -0,0 +1,94 @@
+<template>
+  <openwb-base-heading> Einstellungen für Modul "{{ forecast.name }}" </openwb-base-heading>
+  <component
+    :is="forecastComponent"
+    :forecast="forecast"
+    @update:configuration="updateConfiguration($event)"
+  />
+</template>
+
+<script>
+import { defineAsyncComponent, markRaw } from "vue";
+import OpenwbForecastConfigFallback from "./OpenwbForecastConfigFallback.vue";
+
+const FORECAST_COMPONENT_MODULES = import.meta.glob("./*/forecast.vue");
+
+export default {
+  name: "OpenwbForecastProxy",
+  props: {
+    forecast: { type: Object, required: true },
+  },
+  emits: ["update:configuration"],
+  data() {
+    return {
+      providerComponentCache: {},
+    };
+  },
+  computed: {
+    providerComponentLoaders() {
+      return Object.entries(FORECAST_COMPONENT_MODULES).reduce((loaders, [path, loader]) => {
+        const match = path.match(/^\.\/([^/]+)\/forecast\.vue$/);
+        if (!match) {
+          return loaders;
+        }
+        return {
+          ...loaders,
+          [match[1]]: loader,
+        };
+      }, {});
+    },
+    normalizedProviderType() {
+      const rawType =
+        typeof this.forecast?.type === "string" && this.forecast.type.trim().length > 0
+          ? this.forecast.type
+          : this.forecast?.name;
+      if (typeof rawType !== "string") {
+        return null;
+      }
+      const trimmed = rawType.trim();
+      if (!trimmed) {
+        return null;
+      }
+      const loaderTypes = Object.keys(this.providerComponentLoaders);
+      if (loaderTypes.includes(trimmed)) {
+        return trimmed;
+      }
+      const lowered = trimmed.toLowerCase();
+      if (loaderTypes.includes(lowered)) {
+        return lowered;
+      }
+      const simplified = lowered.replace(/[^a-z0-9]/g, "");
+      return (
+        loaderTypes.find((providerType) => providerType.toLowerCase().replace(/[^a-z0-9]/g, "") === simplified) || null
+      );
+    },
+    forecastComponent() {
+      const providerType = this.normalizedProviderType;
+      if (!providerType) {
+        return OpenwbForecastConfigFallback;
+      }
+      const loader = this.providerComponentLoaders[providerType];
+      if (!loader) {
+        return OpenwbForecastConfigFallback;
+      }
+      return this.getProviderComponent(providerType, loader);
+    },
+  },
+  methods: {
+    getProviderComponent(providerType, loader) {
+      if (!this.providerComponentCache[providerType]) {
+        this.providerComponentCache[providerType] = markRaw(
+          defineAsyncComponent({
+            loader,
+            errorComponent: OpenwbForecastConfigFallback,
+          }),
+        );
+      }
+      return this.providerComponentCache[providerType];
+    },
+    updateConfiguration(event) {
+      this.$emit("update:configuration", event);
+    },
+  },
+};
+</script>

src/components/forecast/forecastsolar/forecast.vue

@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <openwb-base-alert subtype="info">
+      Forecast.Solar wird von der Community gepflegt. Ohne API Key sind 12 Anfragen pro Stunde möglich.
+    </openwb-base-alert>
+    <openwb-base-alert subtype="warning">
+      <strong>Hinweis zur kostenlosen API:</strong> Die kostenlose API zeigt nur noch die verbleibenden Stunden des aktuellen Tages.
+      Bei mehrfachen Abfragen pro Tag verringert sich daher der Prognosewert kontinuierlich. Mit einem kostenpflichtigen API-Key 
+      erhält man die vollständige Tageshistorie und dieser Effekt tritt nicht auf.
+    </openwb-base-alert>
+    <openwb-base-number-input
+      title="Breitengrad"
+      :step="0.000001"
+      required
+      :model-value="forecast.configuration.latitude"
+      @update:model-value="updateConfiguration($event, 'configuration.latitude')"
+    >
+      <template #help> Dezimalgrad, z.B. 51.123456 </template>
+    </openwb-base-number-input>
+    <openwb-base-number-input
+      title="Längengrad"
+      :step="0.000001"
+      required
+      :model-value="forecast.configuration.longitude"
+      @update:model-value="updateConfiguration($event, 'configuration.longitude')"
+    >
+      <template #help> Dezimalgrad, z.B. 7.654321 </template>
+    </openwb-base-number-input>
+    <openwb-base-text-input
+      title="API Key (optional)"
+      subtype="password"
+      :model-value="forecast.configuration.api_key"
+      @update:model-value="updateConfiguration($event || null, 'configuration.api_key')"
+    >
+      <template #help>
+        Optional: API Key für einen bezahlten Forecast.Solar Account. Ohne Key gelten die Limits des Free Tiers.
+      </template>
+    </openwb-base-text-input>
+    <openwb-base-alert subtype="info">
+      Jede Dachfläche muss einzeln erfasst werden, auch wenn es nur eine Dachfläche gibt.
+    </openwb-base-alert>
+    <openwb-base-alert
+      v-if="stringRows.length >= 6"
+      subtype="warning"
+    >
+      Maximal 6 Dachflächen sind erlaubt.
+    </openwb-base-alert>
+    <openwb-base-alert
+      v-if="stringRows.length === 0"
+      subtype="secondary"
+    >
+      Noch keine Dachflächen konfiguriert.
+    </openwb-base-alert>
+    <openwb-base-card
+      v-for="(row, index) in stringRows"
+      :key="`fs-string-${index}`"
+      :title="row.name && row.name.trim() ? row.name : `Dachfläche ${index + 1}`"
+      class="mb-2"
+    >
+      <openwb-base-text-input
+        title="Name der Dachfläche"
+        :model-value="row.name"
+        @update:model-value="updateStringField(index, 'name', $event)"
+      />
+      <openwb-base-number-input
+        title="Leistung Dachfläche/String"
+        unit="kWp"
+        :min="0"
+        :step="0.01"
+        required
+        :model-value="row.peak_power_kw"
+        @update:model-value="updateStringField(index, 'peak_power_kw', $event)"
+      />
+      <openwb-base-number-input
+        title="Dachneigung"
+        unit="Grad"
+        :min="0"
+        :max="90"
+        :step="1"
+        required
+        :model-value="row.tilt"
+        @update:model-value="updateStringField(index, 'tilt', $event)"
+      />
+      <openwb-base-number-input
+        title="Ausrichtung"
+        unit="Grad"
+        :min="-180"
+        :max="180"
+        :step="1"
+        required
+        :model-value="row.azimuth"
+        @update:model-value="updateStringField(index, 'azimuth', $event)"
+      />
+      <openwb-base-alert subtype="info">
+        Ausrichtung: 0&deg; = S&uuml;den | -90&deg; = Osten | 90&deg; = Westen | 180&deg; = Norden
+      </openwb-base-alert>
+      <div class="d-flex justify-content-end">
+        <button
+          type="button"
+          class="btn btn-danger btn-sm"
+          title="Dachfläche entfernen"
+          @click="removeStringRow(index)"
+        >
+          <font-awesome-icon :icon="['fas', 'trash']" />
+        </button>
+      </div>
+    </openwb-base-card>
+    <button
+      type="button"
+      class="btn btn-success btn-sm mb-2"
+      :disabled="stringRows.length >= 6"
+      title="Dachfläche hinzufügen"
+      @click="addStringRow"
+    >
+      <font-awesome-icon :icon="['fas', 'plus']" />
+      Dachfläche hinzufügen
+    </button>
+  </div>
+</template>
+
+<script>
+import ForecastConfigMixin from "../ForecastConfigMixin.vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlus as fasPlus, faTrash as fasTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(fasPlus, fasTrash);
+
+export default {
+  name: "ForecastSolarForecastConfig",
+  components: { FontAwesomeIcon },
+  mixins: [ForecastConfigMixin],
+  computed: {
+    stringRows() {
+      return Array.isArray(this.forecast.configuration.strings) ? this.forecast.configuration.strings : [];
+    },
+  },
+  methods: {
+    addStringRow() {
+      if (this.stringRows.length >= 6) {
+        return;
+      }
+      const next = [
+        ...this.stringRows,
+        {
+          name: `Ausrichtung ${this.stringRows.length + 1}`,
+          peak_power_kw: this.forecast.configuration.peak_power_kw || 1,
+          tilt: this.forecast.configuration.tilt ?? 30,
+          azimuth: this.forecast.configuration.azimuth ?? 0,
+        },
+      ];
+      this.updateConfiguration(next, "configuration.strings");
+    },
+    removeStringRow(index) {
+      const next = this.stringRows.filter((_, rowIndex) => rowIndex !== index);
+      this.updateConfiguration(next, "configuration.strings");
+    },
+    updateStringField(index, key, value) {
+      const next = this.stringRows.map((row, rowIndex) => {
+        if (rowIndex !== index) {
+          return row;
+        }
+        return {
+          ...row,
+          [key]: value,
+        };
+      });
+      this.updateConfiguration(next, "configuration.strings");
+    },
+  },
+};
+</script>