changeset 4329:83eb99662a91

client: improve ability to test FW diagrams * Restructure code in fairwayavailability.js to seperate external data retrieval and adding the data into the store. Good side effects are that using a mutation for setting test data is easier and only one commit call is necessary, which means less clutter in the state history. * Adding an example how to use this for testing to docs/developers.md . * Bump copyright year for one file.
author Bernhard Reiter <bernhard@intevation.de>
date Wed, 04 Sep 2019 17:05:43 +0200
parents ff21b742b106
children fe01e997d66f
files client/docs/developers.md client/src/store/fairwayavailability.js
diffstat 2 files changed, 43 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/client/docs/developers.md	Wed Sep 04 16:45:59 2019 +0200
+++ b/client/docs/developers.md	Wed Sep 04 17:05:43 2019 +0200
@@ -2,3 +2,31 @@
 
 * [How translations are handled](dev-translations.md)
 * [Rationale of some choices](dev-generalconsiderations.md)
+
+## Hints
+
+When testing the vuex store object can be accessed from the
+webbrowsers console like
+
+```javascript
+store = document.getElementsByTagName('a')[0].__vue__.$store
+```
+
+This allows for setting test values where getting real test data
+is complicated. For example testing the diagramm for the
+fairwayavailability (tested with Chromium 73 und gemma-2019-09-04):
+
+```javascript
+data = store.state.fairwayavailability.csv
+
+data=`#time,# < LDC (164.0) [h],# >= LDC (164.0) [h],# < 230.0 [h],# >= 230.0 [h],# >= 250.0 [h]
+05-2019,140,80,80,45,50
+06-2019,0,230.000,0.000,0.000
+07-2019,0,300,0.000,0.000,0.000
+08-2019,0.000,120.000,0.000,0.000,120.000
+`
+
+store.commit("fairwayavailability/setAvailableFairwayDepthData", data)
+```
+
+(Depends on the code structure in store/fairwayavailability.js.)
--- a/client/src/store/fairwayavailability.js	Wed Sep 04 16:45:59 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Wed Sep 04 17:05:43 2019 +0200
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  * License-Filename: LICENSES/AGPL-3.0.txt
  *
- * Copyright (C) 2018 by via donau
+ * Copyright (C) 2018, 2019 by via donau
  *   – Österreichische Wasserstraßen-Gesellschaft mbH
  * Software engineering by Intevation GmbH
  *
@@ -178,9 +178,6 @@
     setSelectedFairwayAvailability: (state, feature) => {
       state.selectedFairwayAvailabilityFeature = feature;
     },
-    setFwData: (state, fwData) => {
-      state.fwData = fwData;
-    },
     setFwLNWLData: (state, fwLNWLData) => {
       state.fwLNWLData = fwLNWLData;
     },
@@ -195,8 +192,17 @@
         state.fwLNWLOverviewData.splice(existingIndex, 1);
       state.fwLNWLOverviewData.push(data);
     },
-    setLegend: (state, header) => {
-      const headerEntries = header.split(",");
+    setLegendLNWL: (state, headerLNWL) => {
+      state.headerLNWL = headerLNWL;
+    },
+    // See docs/developers.md for an example how to directly
+    // call this method for testing.
+    setAvailableFairwayDepthData: (state, data) => {
+      state.csv = data;
+      const csv = data.split("\n").filter(x => x !== ""); //omit empty lines
+
+      // setLegend
+      const headerEntries = csv.shift().split(",");
       headerEntries.shift();
       headerEntries.shift();
       state.legend = headerEntries.map(x => {
@@ -204,9 +210,8 @@
         entry = entry.replace("[h]", "").trim(); // omit unit
         return entry;
       });
-    },
-    setLegendLNWL: (state, headerLNWL) => {
-      this.headerLNWL = headerLNWL;
+
+      state.fwData = transformAFD(csv);
     }
   },
   actions: {
@@ -247,12 +252,7 @@
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            const { data } = response;
-            commit("setCSV", data);
-            const csv = data.split("\n").filter(x => x !== ""); //omit empty lines
-            commit("setLegend", csv.shift());
-            let transformed = transformAFD(csv);
-            commit("setFwData", transformed);
+            commit("setAvailableFairwayDepthData", response.data);
             resolve(response);
           })
           .catch(error => {