Improve Loaders (#55)

* Cleanup dataset map loader * Cleanup station history loader * Show loading bar until station color has loaded
wmo-im · Sep 28, 2022 · 7b8adb1 · 7b8adb1
1 parent 17cbc99
commit 7b8adb1
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 43 deletions.
diff --git a/src/components/leaflet/DatasetMap.vue b/src/components/leaflet/DatasetMap.vue
@@ -1,12 +1,9 @@
 <template id="dataset-map">
   <div class="dataset-map">
-    <div :style="{ visibility: loading ? 'visible' : 'hidden' }">
+    <div v-if="loading">
       <v-progress-linear striped indeterminate color="primary" />
     </div>
-    <div
-      :style="{ visibility: !loading ? 'visible' : 'hidden' }"
-      class="text-center"
-    >
+    <div v-show="!loading">
       <l-map
         :ref="dataset.id"
         :center="center"

diff --git a/src/components/leaflet/WisMap.vue b/src/components/leaflet/WisMap.vue
@@ -1,6 +1,6 @@
 <template id="wis-map">
   <div class="wis-map">
-    <div :style="{ visibility: loading ? 'visible' : 'hidden' }">
+    <div v-if="loading || vals.loading">
       <v-progress-linear striped indeterminate color="primary" />
     </div>
     <div
@@ -22,19 +22,8 @@
                   style="height: 60vh"
                   @ready="onReady()"
                 >
-                  <wis-station :features="features" :map="map" />
+                  <wis-station :vals="vals" :features="features" :map="map" />
                   <l-tile-layer :url="url" :attribution="attribution" />
-                  <l-control position="bottomleft">
-                    <v-card width="95px" max-height="40px">
-                      <v-select
-                        v-model="limit_"
-                        :items="items"
-                        :label="$t('station.limit')"
-                        hide-details
-                        density="compact"
-                      />
-                    </v-card>
-                  </l-control>
                   <l-control position="bottomright">
                     <v-card width="125px" class="legend pa-2">
                       <strong> {{ $t("messages.no_of_observations") }} </strong>
@@ -89,6 +78,9 @@ export default defineComponent({
     return {
       numberMatched: 0,
       limit_: null,
+      vals: {
+        loading: true,
+      },
       loading: true,
       map: undefined,
       features_: this.features,
@@ -136,13 +128,6 @@ export default defineComponent({
       return items;
     },
   },
-  watch: {
-    limit_: {
-      handler() {
-        this.loadStations();
-      },
-    },
-  },
   methods: {
     onReady() {
       this.$nextTick(() => {

diff --git a/src/components/station/StationHistory.vue b/src/components/station/StationHistory.vue
@@ -1,7 +1,13 @@
 <template id="station-history">
   <div class="station-history">
+    <div
+      class="pt-0 mb-2"
+      :style="{ visibility: loading ? 'visible' : 'hidden' }"
+    >
+      <v-progress-linear height="6" indeterminate color="primary" />
+    </div>
     <v-row justify="center">
-      <div id="stationHistory" />
+      <div id="station-history-plot" />
     </v-row>
   </div>
 </template>
@@ -17,6 +23,7 @@ export default defineComponent({
   props: ["features", "map"],
   data() {
     return {
+      loading: true,
       features_: this.features,
       data: [],
       layout: {
@@ -25,7 +32,7 @@ export default defineComponent({
         showlegend: false,
         xaxis: {
           type: "date",
-          dtick: 86400000.0,
+          // dtick: 86400000.0,
           showgrid: true,
           gridcolor: "#d5e3f0",
           gridwidth: 2,
@@ -65,12 +72,12 @@ export default defineComponent({
   },
   methods: {
     plot() {
-      var plot = document.getElementById("stationHistory");
+      var plot = document.getElementById("station-history-plot");
       Plotly.purge(plot);
       Plotly.newPlot(plot, this.data, this.layout, this.config);
-      this.loading = false;
     },
     async loadObservations(station) {
+      this.loading = true;
       var self = this;
       this.data = [];
       await this.$http({
@@ -97,11 +104,6 @@ export default defineComponent({
             self.msg = self.$t("messages.not_authorized");
             self.snackbar = true;
           }
-        })
-        .then(function () {
-          self.tab = 0;
-          self.loading = false;
-          console.log("done");
         });
     },
     async loadDailyObservations(station, index) {
@@ -113,7 +115,7 @@ export default defineComponent({
       for (
         var d = new Date(this.oldestResultTime);
         d <= now;
-        d.setDate(d.getDate() + 1)
+        this.iterDate(d)
       ) {
         var date_ = d.toISOString().split("T")[0];
         await this.$http({
@@ -130,7 +132,7 @@ export default defineComponent({
           let fillColor;
           let hits = response.data.numberMatched;
           if (hits === 0) {
-            fillColor = "#000000";
+            self.getNextDate(station, index, d);
           } else if (hits <= 7) {
             fillColor = "#FF3300";
           } else if (hits <= 19) {
@@ -153,6 +155,52 @@ export default defineComponent({
           self.plot();
         });
       }
+      this.loading = false;
+    },
+    iterDate(d) {
+      var nextDate = new Date(d.toISOString());
+      nextDate.setDate(d.getDate() + 1);
+      if (nextDate < d) {
+        nextDate.setDate(d.getDate());
+        nextDate.setMonth(d.getMonth() + 1);
+        if (nextDate < d) {
+          nextDate.setMonth(d.getMonth());
+          nextDate.setFullYear(d.getFullYear() + 1);
+        }
+      }
+      d.setFullYear(nextDate.getFullYear());
+      d.setMonth(nextDate.getMonth());
+      d.setDate(nextDate.getDate());
+    },
+    getNextDate(station, index, d) {
+      var nextDate = new Date(d.toISOString());
+      this.iterDate(nextDate);
+      this.$http({
+        method: "get",
+        url: station.links[0].href + "/items",
+        params: {
+          f: "json",
+          datetime: `${nextDate.toISOString()}/..`,
+          sortby: "+resultTime",
+          index: index,
+          limit: 1,
+          wigos_station_identifier: station.id,
+        },
+      })
+        .then(function (response) {
+          var next;
+          if (response.data.numberMatched > 0) {
+            next = new Date(response.data.features[0].properties.resultTime);
+          } else {
+            next = new Date();
+          }
+          d.setFullYear(next.getFullYear());
+          d.setMonth(next.getMonth());
+          d.setDate(next.getDate());
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
     },
   },
 });

diff --git a/src/components/station/WisStation.vue b/src/components/station/WisStation.vue
@@ -20,15 +20,15 @@ export default defineComponent({
   components: {
     LGeoJson,
   },
-  props: ["features", "map"],
+  props: ["vals", "features", "map"],
   data: function () {
     return {
       features_: this.features,
-      loading: true,
       geojsonOptions: {
         onEachFeature: this.onEachFeature,
         pointToLayer: this.pointToLayer,
       },
+      status: {},
     };
   },
   methods: {
@@ -39,7 +39,6 @@ export default defineComponent({
       e.originalEvent.stopPropagation();
     },
     onEachFeature(feature, layer) {
-      this.loading = true;
       var self = this;
       layer.on("mouseover", function (e) {
         self.features_.station = feature;
@@ -65,6 +64,7 @@ export default defineComponent({
       if (feature.links.length === 0) {
         return;
       }
+      this.station_loading(feature, true);
       await this.$http({
         method: "get",
         url: feature.links[0].href + "/items",
@@ -96,19 +96,18 @@ export default defineComponent({
             layer.options.fillColor = fillColor;
             layer.options.color = color;
             layer.addTo(self.map);
+            self.station_loading(feature, false);
           });
         })
         .catch(function (error) {
           // handle error
           console.log(error);
         })
         .then(function () {
-          self.loading = false;
           setTimeout(self.getStationStyle, 60000, feature, layer);
         });
     },
     async countDailyObservations(station, index) {
-      this.loading = true;
       let hits;
       const startTime = new Date();
       startTime.setDate(startTime.getDate() - 1);
@@ -127,6 +126,11 @@ export default defineComponent({
       });
       return hits;
     },
+    station_loading(feature, loading) {
+      this.status[feature.id] = loading;
+      var self = this;
+      self.vals["loading"] = Object.values(this.status).includes(true);
+    },
   },
   computed: {
     stations: function () {

diff --git a/src/views/Datasets.vue b/src/views/Datasets.vue
@@ -13,8 +13,8 @@
                   <v-container>
                     <v-row justify="center" fill-height>
                       <v-card
-                        class="pa-2 ma-0"
-                        :elevation="isHovering ? 12 : 0"
+                        class="pa-0 ma-0"
+                        :elevation="isHovering ? 24 : 0"
                         v-bind="props"
                         @click="loadMap(item.id)"
                       >