From 2d319e81792d5504ac2fd6d4c3e4ff0d6da303da Mon Sep 17 00:00:00 2001
From: Lutz Bender <user.email=github@lutz-bender.de>
Date: Fri, 11 Feb 2022 11:38:55 +0100
Subject: [PATCH] add device/component config

---
 .../devices/carlo_gavazzi/counter.vue         |  28 ++++
 .../devices/carlo_gavazzi/device.vue          |  32 +++++
 src/components/devices/fronius/bat.vue        |  28 ++++
 src/components/devices/fronius/device.vue     |  32 +++++
 src/components/devices/fronius/inverter.vue   |  28 ++++
 src/components/devices/http/bat.vue           |  94 +++++++++++++
 src/components/devices/http/counter.vue       | 132 ++++++++++++++++++
 src/components/devices/http/device.vue        |  44 ++++++
 src/components/devices/http/inverter.vue      |  60 ++++++++
 src/components/devices/mqtt/bat.vue           |   4 +-
 src/components/devices/mqtt/counter.vue       |   2 +-
 src/components/devices/mqtt/inverter.vue      |   2 +-
 src/components/devices/openwb_flex/bat.vue    |  47 +++++++
 .../devices/openwb_flex/inverter.vue          |  47 +++++++
 src/components/devices/sonnenbatterie/bat.vue |  28 ++++
 .../devices/sonnenbatterie/counter.vue        |  28 ++++
 .../devices/sonnenbatterie/device.vue         |  94 +++++++++++++
 .../devices/sonnenbatterie/inverter.vue       |  28 ++++
 18 files changed, 754 insertions(+), 4 deletions(-)
 create mode 100644 src/components/devices/carlo_gavazzi/counter.vue
 create mode 100644 src/components/devices/carlo_gavazzi/device.vue
 create mode 100644 src/components/devices/fronius/bat.vue
 create mode 100644 src/components/devices/fronius/device.vue
 create mode 100644 src/components/devices/fronius/inverter.vue
 create mode 100644 src/components/devices/http/bat.vue
 create mode 100644 src/components/devices/http/counter.vue
 create mode 100644 src/components/devices/http/device.vue
 create mode 100644 src/components/devices/http/inverter.vue
 create mode 100644 src/components/devices/openwb_flex/bat.vue
 create mode 100644 src/components/devices/openwb_flex/inverter.vue
 create mode 100644 src/components/devices/sonnenbatterie/bat.vue
 create mode 100644 src/components/devices/sonnenbatterie/counter.vue
 create mode 100644 src/components/devices/sonnenbatterie/device.vue
 create mode 100644 src/components/devices/sonnenbatterie/inverter.vue

diff --git a/src/components/devices/carlo_gavazzi/counter.vue b/src/components/devices/carlo_gavazzi/counter.vue
new file mode 100644
index 00000000..5bf16280
--- /dev/null
+++ b/src/components/devices/carlo_gavazzi/counter.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="device-carlogavazzi-counter">
+		<openwb-base-heading>
+			Einstellungen für Carlo Gavazzi EM24 LAN
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-alert subtype="info">
+			Ausgelesen wird ID 1 auf Port 502. ModbusTCP muss aktiviert sein.
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceCarlogavazziCounter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/carlo_gavazzi/device.vue b/src/components/devices/carlo_gavazzi/device.vue
new file mode 100644
index 00000000..00cb8c7b
--- /dev/null
+++ b/src/components/devices/carlo_gavazzi/device.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="device-carlogavazzi">
+		<openwb-base-heading>
+			Einstellungen für Carlo Gavazzi
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="IP oder Hostname"
+			subtype="host"
+			:model-value="configuration.ip_address"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.ip_address')
+			"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceCarlogavazzi",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/fronius/bat.vue b/src/components/devices/fronius/bat.vue
new file mode 100644
index 00000000..19b0059f
--- /dev/null
+++ b/src/components/devices/fronius/bat.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="device-fronius-bat">
+		<openwb-base-heading>
+			Einstellungen für Fronius Batteriespeicher
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-alert subtype="info">
+			Diese Komponente erfordert keine Einstellungen.
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceFroniusBat",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/fronius/device.vue b/src/components/devices/fronius/device.vue
new file mode 100644
index 00000000..5460c8d5
--- /dev/null
+++ b/src/components/devices/fronius/device.vue
@@ -0,0 +1,32 @@
+<template>
+	<div class="device-fronius">
+		<openwb-base-heading>
+			Einstellungen für Fronius
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="IP oder Hostname"
+			subtype="host"
+			:model-value="configuration.ip_address"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.ip_address')
+			"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceFronius",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/fronius/inverter.vue b/src/components/devices/fronius/inverter.vue
new file mode 100644
index 00000000..15ec1406
--- /dev/null
+++ b/src/components/devices/fronius/inverter.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="device-fronius-inverter">
+		<openwb-base-heading>
+			Einstellungen für Fronius Wechselrichter
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-alert subtype="info">
+			Diese Komponente erfordert keine Einstellungen.
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceFroniusInverter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/http/bat.vue b/src/components/devices/http/bat.vue
new file mode 100644
index 00000000..eddba84d
--- /dev/null
+++ b/src/components/devices/http/bat.vue
@@ -0,0 +1,94 @@
+<template>
+	<div class="device-http-bat">
+		<openwb-base-heading>
+			Einstellungen für Http Batteriespeicher
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="Pfad für Leistung"
+			subtype="text"
+			required
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.power_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.power_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine ganze Zahl (Integer) erwartet, welche
+				die aktuelle Leistung in Watt darstellt.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Zählerstand laden"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.imported_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.imported_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche den
+				aktuellen absoluten Zählerstand in kWh darstellt.<br />
+				Wenn dieses Feld leer ist, wird der Zählerstand intern
+				simuliert.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Zählerstand entladen"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.exported_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.exported_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche den
+				aktuellen absoluten Zählerstand in kWh darstellt.<br />
+				Wenn dieses Feld leer ist, wird der Zählerstand intern
+				simuliert.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Ladestand"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.soc_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.soc_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine ganze Zahl (Integer) erwartet, welche
+				den aktuellen Ladestand (SoC) in Prozent darstellt.
+			</template>
+		</openwb-base-text-input>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceHttpBat",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/http/counter.vue b/src/components/devices/http/counter.vue
new file mode 100644
index 00000000..e7152975
--- /dev/null
+++ b/src/components/devices/http/counter.vue
@@ -0,0 +1,132 @@
+<template>
+	<div class="device-http-counter">
+		<openwb-base-heading>
+			Einstellungen für Http Zähler
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="Pfad für Leistung"
+			subtype="text"
+			required
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.power_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.power_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine ganze Zahl (Integer) erwartet, welche
+				die aktuelle Leistung in Watt darstellt.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Zählerstand Bezug"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.imported_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.imported_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche den
+				aktuellen absoluten Zählerstand in kWh darstellt.<br />
+				Wenn dieses Feld leer ist, wird der Zählerstand intern
+				simuliert.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Zählerstand Einspeisung"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.exported_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.exported_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche den
+				aktuellen absoluten Zählerstand in kWh darstellt.<br />
+				Wenn dieses Feld leer ist, wird der Zählerstand intern
+				simuliert.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Strom Phase 1"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.current_l1_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.current_l1_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche die
+				aktuelle Stromstärke der 1. Phase in Ampere darstellt.<br />
+				Wenn dieses Feld leer ist, kann kein Lastmanagement berechnet
+				werden!
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Strom Phase 2"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.current_l2_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.current_l2_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche die
+				aktuelle Stromstärke der 2. Phase in Ampere darstellt.<br />
+				Wenn dieses Feld leer ist, kann kein Lastmanagement berechnet
+				werden!
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Strom Phase 3"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.current_l3_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.current_l3_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche die
+				aktuelle Stromstärke der 3. Phase in Ampere darstellt.<br />
+				Wenn dieses Feld leer ist, kann kein Lastmanagement berechnet
+				werden!
+			</template>
+		</openwb-base-text-input>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceHttpCounter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/http/device.vue b/src/components/devices/http/device.vue
new file mode 100644
index 00000000..36dfc8a7
--- /dev/null
+++ b/src/components/devices/http/device.vue
@@ -0,0 +1,44 @@
+<template>
+	<div class="device-http">
+		<openwb-base-heading>
+			Einstellungen für Http
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="IP oder Hostname"
+			subtype="host"
+			required
+			:model-value="configuration.domain"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.domain')
+			"
+		/>
+		<openwb-base-select-input
+			title="Protokoll"
+			:options="[
+				{ value: 'http', text: 'http://' },
+				{ value: 'https', text: 'https://' },
+			]"
+			:model-value="configuration.protocol"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.protocol')
+			"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceHttp",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/http/inverter.vue b/src/components/devices/http/inverter.vue
new file mode 100644
index 00000000..04a2e3d3
--- /dev/null
+++ b/src/components/devices/http/inverter.vue
@@ -0,0 +1,60 @@
+<template>
+	<div class="device-http-inverter">
+		<openwb-base-heading>
+			Einstellungen für Http Wechselrichter
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="Pfad für Leistung"
+			subtype="text"
+			required
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.power_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.power_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine ganze Zahl (Integer) erwartet, welche
+				die aktuelle Leistung in Watt darstellt.
+			</template>
+		</openwb-base-text-input>
+		<openwb-base-text-input
+			title="Pfad für Zählerstand Bezug"
+			subtype="text"
+			pattern="^/[-a-zA-Z0-9@:%_\+.~#?&/=]*"
+			:model-value="configuration.counter_path"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.counter_path')
+			"
+		>
+			<template #help>
+				Diese Angabe wird an die IP bzw. den Hostnamen angehängt und
+				muss mit einem Schrägstrich "/" beginnen.<br />
+				Es wird vom Server eine Zahl (Float) erwartet, welche den
+				aktuellen absoluten Zählerstand in kWh darstellt.<br />
+				Wenn dieses Feld leer ist, wird der Zählerstand intern
+				simuliert.
+			</template>
+		</openwb-base-text-input>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceHttpInverter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/mqtt/bat.vue b/src/components/devices/mqtt/bat.vue
index 033fc7ea..2a38adac 100644
--- a/src/components/devices/mqtt/bat.vue
+++ b/src/components/devices/mqtt/bat.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="device-mqtt">
+	<div class="device-mqtt-bat">
 		<openwb-base-heading>
 			Einstellungen für MQTT Batteriespeicher
 			<span class="small">(Modul: {{ $options.name }})</span>
@@ -32,7 +32,7 @@
 						>openWB/set/bat/{{ componentId }}/get/soc</span
 					><br />
 					Ladestand des Speichers, ohne Nachkommastellen (Integer),
-					Gültige Werte 0 bis 100
+					gültige Werte 0 bis 100
 				</li>
 			</ul>
 		</openwb-base-alert>
diff --git a/src/components/devices/mqtt/counter.vue b/src/components/devices/mqtt/counter.vue
index a9b6c289..8e948792 100644
--- a/src/components/devices/mqtt/counter.vue
+++ b/src/components/devices/mqtt/counter.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="device-mqtt">
+	<div class="device-mqtt-counter">
 		<openwb-base-heading>
 			Einstellungen für MQTT Zähler
 			<span class="small">(Modul: {{ $options.name }})</span>
diff --git a/src/components/devices/mqtt/inverter.vue b/src/components/devices/mqtt/inverter.vue
index d2129736..4ca4009e 100644
--- a/src/components/devices/mqtt/inverter.vue
+++ b/src/components/devices/mqtt/inverter.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="device-mqtt">
+	<div class="device-mqtt-inverter">
 		<openwb-base-heading>
 			Einstellungen für MQTT Wechselrichter
 			<span class="small">(Modul: {{ $options.name }})</span>
diff --git a/src/components/devices/openwb_flex/bat.vue b/src/components/devices/openwb_flex/bat.vue
new file mode 100644
index 00000000..54b0d59a
--- /dev/null
+++ b/src/components/devices/openwb_flex/bat.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="device-openwb-flex-bat">
+		<openwb-base-heading>
+			Einstellungen für openWB-Flex Batteriespeicher
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-select-input
+			title="Zählermodell"
+			notSelected="Bitte auswählen"
+			:options="[
+				{ value: 0, text: 'MPM3PM' },
+				{ value: 1, text: 'SDM120' },
+				{ value: 2, text: 'SDM630' },
+			]"
+			:model-value="configuration.version"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.version')
+			"
+		/>
+		<openwb-base-number-input
+			title="Modbus-ID"
+			:min="1"
+			:max="255"
+			:model-value="configuration.id"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.id')
+			"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceOpenwbFlexBat",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/openwb_flex/inverter.vue b/src/components/devices/openwb_flex/inverter.vue
new file mode 100644
index 00000000..370872c3
--- /dev/null
+++ b/src/components/devices/openwb_flex/inverter.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="device-openwb-flex-inverter">
+		<openwb-base-heading>
+			Einstellungen für openWB-Flex Wechselrichter
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-select-input
+			title="Zählermodell"
+			notSelected="Bitte auswählen"
+			:options="[
+				{ value: 0, text: 'MPM3PM' },
+				{ value: 1, text: 'Lovato' },
+				{ value: 2, text: 'SDM630' },
+			]"
+			:model-value="configuration.version"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.version')
+			"
+		/>
+		<openwb-base-number-input
+			title="Modbus-ID"
+			:min="1"
+			:max="255"
+			:model-value="configuration.id"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.id')
+			"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceOpenwbFlexInverter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/sonnenbatterie/bat.vue b/src/components/devices/sonnenbatterie/bat.vue
new file mode 100644
index 00000000..14538024
--- /dev/null
+++ b/src/components/devices/sonnenbatterie/bat.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="device-sonnenbatterie-bat">
+		<openwb-base-heading>
+			Einstellungen für SonnenBatterie Speicher
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-alert subtype="info">
+			Diese Komponente erfordert keine Einstellungen.
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSonnenbatterieBat",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/sonnenbatterie/counter.vue b/src/components/devices/sonnenbatterie/counter.vue
new file mode 100644
index 00000000..981f2c68
--- /dev/null
+++ b/src/components/devices/sonnenbatterie/counter.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="device-sonnenbatterie-counter">
+		<openwb-base-heading>
+			Einstellungen für SonnenBatterie Zähler
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-alert subtype="info">
+			Diese Komponente erfordert keine Einstellungen.
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSonnenbatterieCounter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/sonnenbatterie/device.vue b/src/components/devices/sonnenbatterie/device.vue
new file mode 100644
index 00000000..97098425
--- /dev/null
+++ b/src/components/devices/sonnenbatterie/device.vue
@@ -0,0 +1,94 @@
+<template>
+	<div class="device-sonnenbatterie">
+		<openwb-base-heading>
+			Einstellungen für SonnenBatterie
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-text-input
+			title="IP oder Hostname"
+			subtype="host"
+			required
+			:model-value="configuration.ip"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.ip')
+			"
+		/>
+		<openwb-base-select-input
+			title="Datenverbindung"
+			required
+			notSelected="Bitte auswählen"
+			:options="[
+				{ value: 0, text: 'Rest-API 1 (z.B. ECO 4)' },
+				{ value: 2, text: 'Rest-API 2 (z.B. ECO 6)' },
+				{ value: 1, text: 'JSON-API (z.B. ECO 8 oder 10)' },
+			]"
+			:model-value="configuration.variant"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.variant')
+			"
+		>
+			<template #help>
+				<span style="display: block">
+					Je nach Sonnen Batterie muss die richtige Datenverbindung
+					ausgewählt werden. Folgende URLs werden zum Abruf der Daten
+					genutzt und können auch manuell über einen Browser abgefragt
+					werden, um die richtige Einstellung zu finden:<br />
+					Rest-API 1:
+					<a
+						:href="linkRestApi1"
+						target="_blank"
+						rel="noopener noreferrer"
+						>{{ linkRestApi1 }}</a
+					><br />
+					Rest-API 2:
+					<a
+						:href="linkRestApi2"
+						target="_blank"
+						rel="noopener noreferrer"
+						>{{ linkRestApi2 }}</a
+					><br />
+					JSON-API:
+					<a
+						:href="linkJsonApi"
+						target="_blank"
+						rel="noopener noreferrer"
+						>{{ linkJsonApi }}
+					</a>
+				</span>
+			</template>
+		</openwb-base-select-input>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSonnenbatterie",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		componentId: { required: true },
+	},
+	computed: {
+		linkRestApi1() {
+			return (
+				"http://" + this.configuration.ip + ":7979/rest/devices/battery"
+			);
+		},
+		linkRestApi2() {
+			return (
+				"http://" +
+				this.configuration.ip +
+				":7979/rest/devices/battery/M05"
+			);
+		},
+		linkJsonApi() {
+			return "http://" + this.configuration.ip + "/api/v1/status";
+		},
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>
diff --git a/src/components/devices/sonnenbatterie/inverter.vue b/src/components/devices/sonnenbatterie/inverter.vue
new file mode 100644
index 00000000..1ee05749
--- /dev/null
+++ b/src/components/devices/sonnenbatterie/inverter.vue
@@ -0,0 +1,28 @@
+<template>
+	<div class="device-sonnenbatterie-inverter">
+		<openwb-base-heading>
+			Einstellungen für SonnenBatterie Wechselrichter
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+		<openwb-base-alert subtype="info">
+			Diese Komponente erfordert keine Einstellungen.
+		</openwb-base-alert>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSonnenbatterieInverter",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+		componentId: { required: true },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>