loading measurements for footer

Author: vol4tim

src/components/footer/Footer.vue

@@ -1,42 +1,59 @@
 <template>
   <div class="mapcontrols">
-<!-- <div style="display:none">{{bufer}}</div> -->
+    <!-- <div style="display:none">{{bufer}}</div> -->
     <div class="flexline">
-
       <div id="bookmarks" class="popover-bottom-left popover" popover>
-        <h3>{{$t("bookmarks.listtitle")}}</h3>
+        <h3>{{ $t("bookmarks.listtitle") }}</h3>
         <Bookmarks />
       </div>
-      <button class="popovercontrol" :class="bookmarks && bookmarks.length > 0 ? 'active' : null" popovertarget="bookmarks"><font-awesome-icon icon="fa-solid fa-bookmark" /></button>
+      <button
+        class="popovercontrol"
+        :class="bookmarks && bookmarks.length > 0 ? 'active' : null"
+        popovertarget="bookmarks"
+      >
+        <font-awesome-icon icon="fa-solid fa-bookmark" />
+      </button>
 
       <input type="date" v-model="start" :max="maxDate" :disabled="currentProvider == 'realtime'" />
 
-      <Measures :current="measuretype.toLowerCase()" />
+      <Measures
+        :startTime="startTimestamp"
+        :endTime="endTimestamp"
+        :current="measuretype.toLowerCase()"
+      />
       <div v-if="isLoad">{{ $t("isLoad") }}</div>
     </div>
 
     <div class="flexline">
       <div id="mapsettings" class="popover-bottom-right popover" popover>
         <section>
           <input id="realtime" v-model="realtime" type="checkbox" :checked="realtime" />
-          <label for="realtime">{{$t('provider.realtime')}}</label>
+          <label for="realtime">{{ $t("provider.realtime") }}</label>
         </section>
         <section>
-          <input id="wind" v-model="wind" type="checkbox" :disabled="!realtime" :checked="wind && realtime" />
-          <label for="wind">{{$t('layer.wind')}}</label>
+          <input
+            id="wind"
+            v-model="wind"
+            type="checkbox"
+            :disabled="!realtime"
+            :checked="wind && realtime"
+          />
+          <label for="wind">{{ $t("layer.wind") }}</label>
         </section>
         <section>
           <input id="messages" v-model="messages" type="checkbox" :checked="messages" />
-          <label for="messages">{{$t('layer.messages')}}</label>
+          <label for="messages">{{ $t("layer.messages") }}</label>
         </section>
-        <hr/>
+        <hr />
         <section>
-          <h3>{{$t("history.title")}}</h3>
+          <h3>{{ $t("history.title") }}</h3>
           <HistoryImport />
         </section>
       </div>
-      <button class="popovercontrol" popovertarget="mapsettings"><font-awesome-icon icon="fa-solid fa-gear" /></button>
-      <slot/>
+      <button class="popovercontrol" popovertarget="mapsettings">
+        <font-awesome-icon icon="fa-solid fa-gear" />
+      </button>
+      <slot />
     </div>
   </div>
 </template>
@@ -73,18 +90,14 @@ export default {
   },
   computed: {
     startTimestamp: function () {
-      return Number(
-        moment(this.start + " 00:00:00", "YYYY-MM-DD HH:mm:ss").format("X")
-      );
+      return Number(moment(this.start + " 00:00:00", "YYYY-MM-DD HH:mm:ss").format("X"));
     },
     endTimestamp: function () {
-      return Number(
-        moment(this.start + " 23:59:59", "YYYY-MM-DD HH:mm:ss").format("X")
-      );
+      return Number(moment(this.start + " 23:59:59", "YYYY-MM-DD HH:mm:ss").format("X"));
     },
-    bookmarks: function() {
+    bookmarks: function () {
       return this.store.idbBookmarks;
-    }
+    },
   },
   watch: {
     async realtime(v) {
@@ -135,43 +148,44 @@ export default {
 </script>
 
 <style scoped>
-  .mapcontrols {
-    bottom: 0;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    left: 0;
-    padding: 0 var(--app-controlsgap) var(--app-controlsgap);
-    position: absolute;
-    right: 0;
-    z-index: 12;
-    pointer-events: none;
-  }
-
-  .mapcontrols > * {
-    pointer-events: all;
-  }
-
-  .popover-bottom-right, .popover-bottom-left {
-    bottom: calc(var(--app-inputheight) + var(--app-controlsgap) * 2);
-    max-width: calc(100vw - var(--app-controlsgap) * 2);
-  }
-
-  .popover-bottom-right {
-    right: var(--app-controlsgap);
-  }
-
-  .popover-bottom-left {
-    left: var(--app-controlsgap);
-  }
+.mapcontrols {
+  bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  left: 0;
+  padding: 0 var(--app-controlsgap) var(--app-controlsgap);
+  position: absolute;
+  right: 0;
+  z-index: 12;
+  pointer-events: none;
+}
+
+.mapcontrols > * {
+  pointer-events: all;
+}
+
+.popover-bottom-right,
+.popover-bottom-left {
+  bottom: calc(var(--app-inputheight) + var(--app-controlsgap) * 2);
+  max-width: calc(100vw - var(--app-controlsgap) * 2);
+}
+
+.popover-bottom-right {
+  right: var(--app-controlsgap);
+}
+
+.popover-bottom-left {
+  left: var(--app-controlsgap);
+}
 </style>
 
 <style>
-  .popovercontrol.active {
-    border-color: var(--color-green);
-  }
+.popovercontrol.active {
+  border-color: var(--color-green);
+}
 
-  .popovercontrol.active path {
-    fill: var(--color-green) !important;
-  }
-</style>
+.popovercontrol.active path {
+  fill: var(--color-green) !important;
+}
+</style>

src/components/measures/Measures.vue

@@ -1,7 +1,7 @@
 <template>
   <select v-model="type" v-if="store.sensors.length > 0">
     <option v-for="opt in availableoptions" :key="opt.value" :value="opt.value">
-      {{ opt.name }} 
+      {{ opt.name }}
       <!-- - {{locale}} -->
     </option>
   </select>
@@ -11,36 +11,42 @@
 import { useStore } from "@/store";
 import measurements from "../../measurements";
 import { getTypeProvider } from "../../utils/utils";
+import { Remote } from "../../providers";
 
 export default {
-  props: ["current"],
+  props: ["current", "startTime", "endTime"],
   data() {
     return {
       type: this.current,
       measurements: Object.entries(measurements),
       store: useStore(),
+      availableunits: [{ name: "PM10", value: "pm10" }],
     };
   },
+  async mounted() {
+    try {
+      const array = await Remote.getMeasurements(this.startTime, this.endTime);
+      const toMove = ["pm10", "pm25"];
+      const movedElements = array.filter((item) => toMove.includes(item));
+      const remainingElements = array.filter((item) => !toMove.includes(item));
+      this.availableunits = [...movedElements, ...remainingElements];
+    } catch (error) {
+      console.log(error);
+    }
+  },
   computed: {
     locale() {
       return localStorage.getItem("locale") || this.$i18n.locale || "en";
     },
-    availableunits() {
-      let bufer = [];
-      this.store.sensors.forEach((i) => {
-        Object.keys(i.data).forEach((units) => {
-          bufer.push(units.toLowerCase());
-        });
-      });
-      return [...new Set(bufer)];
-    },
     availableoptions() {
       let buffer = [];
       this.availableunits.forEach((i) => {
         if (measurements[i]) {
-          buffer.push({ 
-            name: measurements[i]?.nameshort ? measurements[i].nameshort[this.locale] : measurements[i]?.label, 
-            value: i 
+          buffer.push({
+            name: measurements[i]?.nameshort
+              ? measurements[i].nameshort[this.locale]
+              : measurements[i]?.label,
+            value: i,
           });
         }
       });

src/views/Main.vue

@@ -309,12 +309,6 @@ export default {
       this.providerObj = new providers.Libp2p(config.LIBP2P);
     }
 
-    const result = await providers.Remote.getMeasurements(
-      moment().startOf("day").format("X"),
-      moment().format("X")
-    );
-    console.log(result);
-
     this.providerObj.ready().then(() => {
       this.providerReady = true;
       this.providerObj.watch(this.handlerNewPoint);