Merge pull request #77 from benderl/dev

beginning of graph pages

src/App.vue

@@ -58,6 +58,16 @@ export default {
 		};
 	},
 	computed: {
+		/**
+		 * @return {Str} - Mqtt client id of our connection
+		 */
+		mqttClientId() {
+			try {
+				return this.client.options.clientId;
+			} catch (error) {
+				return undefined;
+			}
+		},
 		/**
 		 * @return {Array} - Array of topics (String)
 		 */

src/components/OpenwbPageNavbar.vue

@@ -198,6 +198,33 @@
 						Status
 					</router-link>
 				</li>
+				<li class="nav-item dropdown">
+					<a
+						class="nav-link dropdown-toggle"
+						href="#"
+						role="button"
+						data-toggle="dropdown"
+						aria-expanded="false"
+					>
+						Auswertungen
+					</a>
+					<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+						<router-link
+							to="/Logging/ChargeLog"
+							class="dropdown-item"
+							active-class="active disabled"
+						>
+							Ladeprotokoll
+						</router-link>
+						<router-link
+							to="/Logging/DailyGraph"
+							class="dropdown-item"
+							active-class="active disabled"
+						>
+							Tagesauswertung
+						</router-link>
+					</div>
+				</li>
 				<li v-if="nodeEnv !== 'production'" class="nav-item dropdown">
 					<a
 						class="nav-link dropdown-toggle"

src/components/mixins/ComponentState.vue

@@ -13,6 +13,9 @@ export default {
 				"Sonntag",
 			];
 		},
+		mqttClientId() {
+			return this.$root.mqttClientId;
+		},
 	},
 	methods: {
 		updateState(topic, value, objectPath = undefined) {
@@ -82,6 +85,9 @@ export default {
 		},
 	},
 	mounted() {
+		this.mqttTopicsToSubscribe.push(
+			"openWB/log/" + this.mqttClientId + "/data"
+		);
 		this.mqttTopicsToSubscribe.forEach((topic) => {
 			if (topic.includes("#") || topic.includes("+")) {
 				console.debug("skipping init of wildcard topic:", topic);

src/router/index.js

@@ -233,6 +233,18 @@ const routes = [
 				"../views/ChargeLog.vue"
 			),
 	},
+	{
+		path: "/Logging/DailyGraph",
+		name: "DailyGraph",
+		meta: {
+			heading: "Tagesauswertung",
+		},
+		component: () =>
+			import(
+				/* webpackChunkName: "DailyGraph" */
+				"../views/DailyGraph.vue"
+			),
+	},
 ];
 /* examples for development only start here */
 if (process.env.NODE_ENV !== "production") {

src/views/ChargeLog.vue

@@ -6,7 +6,7 @@
 					title="Zeitraum"
 					subtype="month"
 					min="2018-01"
-					max="2021-12"
+					max="2022-12"
 					v-model="chargeLogDate"
 				/>
 				<openwb-base-card
@@ -33,6 +33,15 @@
 				</template>
 			</openwb-base-card>
 			<openwb-base-card title="Ladeprotokoll"></openwb-base-card>
+			<openwb-base-alert subtype="info">
+				<pre>{{
+					JSON.stringify(
+						$store.state.mqtt[
+							"openWB/log/" + mqttClientId + "/data"
+						]
+					)
+				}}</pre>
+			</openwb-base-alert>
 		</form>
 	</div>
 </template>

src/views/DailyGraph.vue

@@ -0,0 +1,104 @@
+<template>
+	<div class="dailyGraph">
+		<form name="dailyGraphForm">
+			<openwb-base-card title="Filter">
+				<openwb-base-text-input
+					title="Datum"
+					subtype="date"
+					min="2018-01-01"
+					max="2022-12-31"
+					v-model="dailyGraphDate"
+				/>
+				<template #footer>
+					<div class="row justify-content-center">
+						<openwb-base-click-button
+							class="col-4 btn-success"
+							@click="requestDailyGraph()"
+						>
+							Daten anfordern
+						</openwb-base-click-button>
+					</div>
+				</template>
+			</openwb-base-card>
+			<openwb-base-card title="Tages-Diagramm"></openwb-base-card>
+			<openwb-base-alert subtype="info">
+				Graph Dataset:<br />
+				<pre>{{ dailyGraphDataset }}</pre>
+			</openwb-base-alert>
+		</form>
+	</div>
+</template>
+
+<script>
+import ComponentStateMixin from "@/components/mixins/ComponentState.vue";
+
+export default {
+	name: "DailyGraph",
+	mixins: [ComponentStateMixin],
+	emits: ["sendCommand"],
+	data() {
+		return {
+			mqttTopicsToSubscribe: [
+				"openWB/general/extern",
+				"openWB/log/daily/#",
+			],
+			dailyGraphRequestData: {
+				day: "01",
+				month: "01",
+				year: "2022",
+			},
+		};
+	},
+	computed: {
+		dailyGraphDate: {
+			get() {
+				return (
+					this.dailyGraphRequestData.year +
+					"-" +
+					this.dailyGraphRequestData.month +
+					"-" +
+					this.dailyGraphRequestData.day
+				);
+			},
+			set(newValue) {
+				let splitDate = newValue.split("-");
+				this.dailyGraphRequestData.year = splitDate[0];
+				this.dailyGraphRequestData.month = splitDate[1];
+				this.dailyGraphRequestData.day = splitDate[2];
+			},
+		},
+		commandData: {
+			get() {
+				return {
+					day:
+						this.dailyGraphRequestData.year +
+						this.dailyGraphRequestData.month +
+						this.dailyGraphRequestData.day,
+				};
+			},
+		},
+		dailyGraphDataset: {
+			get() {
+				return this.$store.state.mqtt[
+					"openWB/log/daily/" + this.commandData.day
+				];
+			},
+		},
+	},
+	methods: {
+		requestDailyGraph() {
+			let myForm = document.forms["dailyGraphForm"];
+			if (!myForm.reportValidity()) {
+				console.log("form invalid");
+				return;
+			} else {
+				console.log(this.dailyGraphRequestData);
+				this.$emit("sendCommand", {
+					command: "getDailyLog",
+					data: this.commandData,
+				});
+			}
+		},
+	},
+};
+</script>