From 6d52b7f70192aae38c7ae136576e40e03601ac59 Mon Sep 17 00:00:00 2001
From: Ralf Bauer <Ralf@Bauer-NSU.de>
Date: Sat, 3 Jun 2023 12:35:24 +0200
Subject: [PATCH] Fixed problem that charts are not shown after page refresh.

---
 webapp/src/components/BarChart.vue      | 61 ++++++++++----------
 webapp/src/components/CalendarChart.vue | 74 +++++++++++++------------
 webapp/src/types/DatabaseStatus.ts      |  4 ++
 webapp/src/views/HomeView.vue           | 14 ++++-
 4 files changed, 84 insertions(+), 69 deletions(-)
 create mode 100644 webapp/src/types/DatabaseStatus.ts

diff --git a/webapp/src/components/BarChart.vue b/webapp/src/components/BarChart.vue
index 291294c6..7b3b2b7d 100644
--- a/webapp/src/components/BarChart.vue
+++ b/webapp/src/components/BarChart.vue
@@ -1,15 +1,17 @@
 <template>
     <div class="card" :class="{}">
-        <div class="card-header">
-            {{ $t('chart.LastDay') }}
+        <div v-if="dataBase.valid_data">
+            <div class="card-header">
+                {{ $t('chart.LastDay') }}
+            </div>
+            <GoogleChart />
         </div>
-        <GoogleChart />
     </div>
 </template>
 
 <script lang="ts">
-import { authHeader, handleResponse } from '@/utils/authentication';
-import { defineComponent, h } from 'vue';
+import { defineComponent, type PropType, h } from 'vue';
+import type { DatabaseStatus } from "@/types/DatabaseStatus";
 import { GChart } from 'vue-google-charts';
 //import { DatetimeFormat } from 'vue-i18n';
 
@@ -33,6 +35,9 @@ export default defineComponent({
     components: {
         GChart,
     },
+    props: {
+        dataBase: { type: Object as PropType<DatabaseStatus>, required: true },
+    },
     setup() {
         return () =>
             h(GChart, {
@@ -41,36 +46,32 @@ export default defineComponent({
                 type
             });
     },
-    mounted() {
+    beforeMount() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            fetch("/api/database", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then((energy) => {
-                    var end = new Date()
-                    var start = new Date()
-                    var interval = 1    // number of days to show in the chart
-                    start.setDate(end.getDate() - interval)
-                    start.setHours(start.getHours() - 2)
+            var end = new Date()
+            var start = new Date()
+            var interval = 1    // number of days to show in the chart
+            start.setDate(end.getDate() - interval)
+            start.setHours(start.getHours() - 2)
+            const energy = this.dataBase.values
+            var old_energy = energy[0][4]
+            data = [['Time', 'Energy']];
+            energy.forEach((x: any[]) => {
+                var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+                if ((d >= start) && (d <= end)) {
+                    var a = [d, (x[4] - old_energy) * 1000]
+                    data.push(a)
+                }
+                old_energy = x[4]
+            })
 
-                    var old_energy = energy[0][4]
-                    data = [['Time', 'Energy']];
-                    energy.forEach((x: any[]) => {
-                        var d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
-                        if ((d >= start) && (d <= end)) {
-                            var a = [d, (x[4] - old_energy) * 1000]
-                            data.push(a)
-                        }
-                        old_energy = x[4]
-                    })
-
-                    // var date_formatter = new google.visualization.DateFormat({
-                    //     pattern: "dd.MM.YY HH:mm"
-                    // });
-                    // date_formatter.format(data, 0);
-                });
+            // var date_formatter = new google.visualization.DateFormat({
+            //     pattern: "dd.MM.YY HH:mm"
+            // });
+            // date_formatter.format(data, 0);
         }
     }
 });
diff --git a/webapp/src/components/CalendarChart.vue b/webapp/src/components/CalendarChart.vue
index e5c28185..5aa03c15 100644
--- a/webapp/src/components/CalendarChart.vue
+++ b/webapp/src/components/CalendarChart.vue
@@ -1,14 +1,16 @@
 <template>
     <div class="card" :class="{}">
-        <div class="card-header">
+        <div v-if="dataBase.valid_data">
+            <div class="card-header">
+            </div>
+            <GoogleChart />
         </div>
-        <GoogleChart />
     </div>
 </template>
 
 <script lang="ts">
-import { authHeader, handleResponse } from '@/utils/authentication';
-import { defineComponent, h } from 'vue';
+import { defineComponent, type PropType, h } from 'vue';
+import type { DatabaseStatus } from "@/types/DatabaseStatus";
 import { GChart } from 'vue-google-charts';
 //import { DatetimeFormat } from 'vue-i18n';
 
@@ -30,6 +32,9 @@ export default defineComponent({
     components: {
         GChart,
     },
+    props: {
+        dataBase: { type: Object as PropType<DatabaseStatus>, required: true },
+    },
     setup() {
         return () =>
             h(GChart, {
@@ -41,44 +46,41 @@ export default defineComponent({
                 }
             });
     },
-    mounted() {
+    beforeMount() {
         this.drawChart()
     },
     methods: {
         drawChart() {
-            fetch("/api/database", { headers: authHeader() })
-                .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then((energy) => {
-                    data = [[{
-                        type: 'date',
-                        id: 'Date'
-                    },
-                    {
-                        type: 'number',
-                        id: 'Energy'
-                    }]]
-                    var d : Date
-                    var a : any
-                    var old_energy = energy[0][4]
-                    var old_day = energy[0][2]
-                    var last_energy : number
-                    energy.forEach((x: any[]) => {
-                        if (x[2] != old_day) {
-                            data.push(a)
-                            old_day = x[2]
-                            old_energy = last_energy
-                        }
-                        last_energy = x[4]
-                        d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
-                        a = [d, ((last_energy - old_energy) * 1000).toFixed(0)]
-                    })
+            data = [[{
+                type: 'date',
+                id: 'Date'
+            },
+            {
+                type: 'number',
+                id: 'Energy'
+            }]]
+            var d: Date
+            var a: any
+            const energy = this.dataBase.values
+            var old_energy = energy[0][4]
+            var old_day = energy[0][2]
+            var last_energy: number
+            energy.forEach((x: any[]) => {
+                if (x[2] != old_day) {
                     data.push(a)
+                    old_day = x[2]
+                    old_energy = last_energy
+                }
+                last_energy = x[4]
+                d = new Date(x[0] + 2000, x[1] - 1, x[2], x[3])
+                a = [d, ((last_energy - old_energy) * 1000).toFixed(0)]
+            })
+            data.push(a)
 
-                    // var date_formatter = new google.visualization.DateFormat({
-                    //     pattern: "dd.MM.YY HH:mm"
-                    // });
-                    // date_formatter.format(data, 0);
-                });
+            // var date_formatter = new google.visualization.DateFormat({
+            //     pattern: "dd.MM.YY HH:mm"
+            // });
+            // date_formatter.format(data, 0);
         }
     }
 });
diff --git a/webapp/src/types/DatabaseStatus.ts b/webapp/src/types/DatabaseStatus.ts
new file mode 100644
index 00000000..9a32de37
--- /dev/null
+++ b/webapp/src/types/DatabaseStatus.ts
@@ -0,0 +1,4 @@
+export interface DatabaseStatus {
+    valid_data: boolean;
+    values: [];
+}
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index f65a6952..efa45bcf 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -16,8 +16,8 @@
                     </button>
                 </div>
             </div>
-            <BarChart />
-            <CalendarChart />
+            <BarChart v-bind:dataBase="dataBase" dataLoading="dataLoading" />
+            <CalendarChart v-bind:dataBase="dataBase" />
 
             <div class="tab-content" id="v-pills-tabContent" :class="{
                     'col-sm-9 col-md-10': inverterData.length > 1,
@@ -338,6 +338,7 @@ import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
 import BarChart from "@/components/BarChart.vue";
 import CalendarChart from "@/components/CalendarChart.vue";
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
+import type { DatabaseStatus } from '@/types/DatabaseStatus';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import type { EventlogItems } from '@/types/EventlogStatus';
 import type { LimitConfig } from '@/types/LimitConfig';
@@ -396,6 +397,7 @@ export default defineComponent({
             eventLogLoading: true,
             devInfoView: {} as bootstrap.Modal,
             devInfoList: {} as DevInfoStatus,
+            dataBase: {} as DatabaseStatus,
             devInfoLoading: true,
 
             limitSettingView: {} as bootstrap.Modal,
@@ -486,7 +488,13 @@ export default defineComponent({
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.liveData = data;
-                    this.dataLoading = false;
+                    fetch("/api/database", { headers: authHeader() })
+                        .then((response) => handleResponse(response, this.$emitter, this.$router))
+                        .then((data) => {
+                            this.dataBase.values = data;
+                            this.dataBase.valid_data = true;
+                            this.dataLoading = false;
+                        });
                 });
         },
         initSocket() {