Merge master into beta

docs/Einstellungs-Seite erstellen.md

@@ -0,0 +1,24 @@
+Dieser Beitrag erklärt, wie Einstellungen für ein Element aus einer Auswahlliste anhand einer Vorlage erstellt werden. Zu diesen Elementen zählen: Geräte, Komponenten, Fahrzeug(SoC)-Module und Backup-Clouds.
+
+Die Installation des GUI-Repositories ist in eben diesem beschrieben: [openwb-ui-settings](https://github.com/openWB/openwb-ui-settings)
+
+Die Auswahllisten werden dynamisch erzeugt. Damit euer Element darin enthalten ist, muss im entsprechenden Ordner im Core-Repo eine config.py-Datei wie in den Samples beschrieben enthalten sein. Wenn keine Einstellungsseiten in vue hinterlegt sind, sind die Einstellungen als json-Objekt editierbar. Dies ist für einen PR im Core-Repo ausreichend. Wie Ihr auch einen PR im GUI-Repo für die Einstellungen erstellen könnt, erklären wir Euch hier am Beispiel eines Fahrzeugs:
+
+### Einstellungen erzeugen
+Im Ordner src/components des GUI-Repos legt Ihr im Ordner `vehicles` einen neuen Ordner `sample` an. Dort hinein kopiert Ihr die Vorlage aus dem Ordner [samples_gui](https://github.com/openWB/core/tree/master/docs/samples/samples_gui) und ersetzt sample durch den Namen eures neuen Fahrzeugs. Bitte auf die Groß- und Kleinschreibung achten.
+
+Nun müssen noch Frames für einzelnen Einstellungen ergänzt werden. Dafür könnt Ihr euch entweder an den bereits existierenden Modulen orientieren oder die Beispiele nutzen, die Ihr euch im GUI unter Einstellungen -> Beispiele anschauen könnt. Die Frames findet Ihr [hier](https://github.com/openWB/openwb-ui-settings/blob/main/src/views/TestingStore.vue).
+
+`:model-value="$store.state.examples.text3"`  
+`@update:model-value="updateState('text3', $event)"`  
+Diese beiden Zeilen gibt es in jedem Frame. Die erste Zeile gibt den Wert an, der vom Broker gelesen werden soll. Die zweite den Wert, der aktualisiert werden soll. 
+Für die Einstellungen müssen die Zeilen immer so aussehen:  
+`:model-value="configuration.sample"`  
+`@update:model-value="updateConfiguration($event, 'configuration.sample')`
+
+Dann werden die Einstellungen automatisch dem richtigen Topic im Broker zugeordnet. Wichtig ist, dass sample immer genau so heißt, wie die Einstellung in der config.py. Nach dem Tag `<template #help>` könnt Ihr einen Hilfetext eingeben, der angezeigt wird, wenn man auf das Fragezeichen klickt.
+
+### Pull Request stellen
+Die kompilierten vue-Dateien im Core-Repo können nicht gemergt werden. Deshalb dürfen im PR des Core-Repos keine kompilierten vue-Dateien enthalten sein. Für die Einstellungs-Seiten bitte einen PR im openwb-ui-settings-Repo stellen. Nach dem Mergen kompilieren wir die vue-Dateien neu und aktualisieren diese im Core-Repo.
+
+_Bei Fragen programmiert Ihr die Einstellungs-Seite vorerst, wie Ihr es versteht, und erstellt einen (Draft-)PR. Wir unterstützen Euch gerne per Review._

docs/_Sidebar.md

@@ -12,6 +12,7 @@
   * [Entwicklungsumgebung](https://github.com/openWB/core/wiki/Entwicklungsumgebung)
   * [Neues Gerät programmieren](https://github.com/openWB/core/wiki/Neues-Gerät-programmieren)
   * [Neues SoC-Modul programmieren](https://github.com/openWB/core/wiki/Neues-Soc-Modul-programmieren)
+  * [Einstellungs-Seite erstellen](https://github.com/openWB/core/wiki/Einstellungs-Seite-erstellen)
 * Konfiguration
   * [Cloud-Sicherung](https://github.com/openWB/core/wiki/Cloud-Sicherung)
     * [NextCloud](https://github.com/openWB/core/wiki/NextCloud-als-Sicherungs-Cloud-einrichten)

docs/samples/samples_gui/backup_cloud.vue

@@ -0,0 +1,26 @@
+<template>
+	<div class="backup-cloud-sample">
+		<openwb-base-heading>
+			Einstellungen für Sample-Backup Cloud
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "BackupCloudSample",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>

docs/samples/samples_gui/bat.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="device-sample-bat">
+		<openwb-base-heading>
+			Einstellungen für Sample Batteriespeicher
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSampleBat",
+	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>

docs/samples/samples_gui/counter.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="device-sample-counter">
+		<openwb-base-heading>
+			Einstellungen für Sample Zähler
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSampleCounter",
+	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>

docs/samples/samples_gui/device.vue

@@ -0,0 +1,33 @@
+<template>
+	<div class="device-sample">
+		<openwb-base-heading>
+			Einstellungen für Sample
+			<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_address"
+			@update:model-value="
+				updateConfiguration($event, 'configuration.ip_address')
+			"
+		/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSample",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		deviceId: { default: undefined },
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>

docs/samples/samples_gui/inverter.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="device-sample-inverter">
+		<openwb-base-heading>
+			Einstellungen für Sample Wechselrichter
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "DeviceSampleInverter",
+	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>

docs/samples/samples_gui/vehicle.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="vehicle-soc-sample">
+		<openwb-base-heading>
+			Einstellungen für Sample SoC
+			<span class="small">(Modul: {{ $options.name }})</span>
+		</openwb-base-heading>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "VehicleSocSample",
+	emits: ["update:configuration"],
+	props: {
+		configuration: { type: Object, required: true },
+		vehicleId: { required: true },
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		updateConfiguration(event, path = undefined) {
+			this.$emit("update:configuration", { value: event, object: path });
+		},
+	},
+};
+</script>