Merge pull request #20 from PinoutLTD/dev

merge upstream

Author: Vourhey

src/components/Map.vue

@@ -5,6 +5,7 @@
     :canHistory="historyready"
     @history="historyhandler"
     :measuretype="measuretype"
+    :isLoad="isLoad"
   >
 
   <button
@@ -36,7 +37,7 @@ import { getTypeProvider } from "../utils/utils";
 
 export default {
   emits: ["city", "clickMarker", "close"],
-  props: ["measuretype", "historyready", "historyhandler"],
+  props: ["measuretype", "historyready", "historyhandler", "isLoad"],
   components: { Footer },
   data() {
     return {
@@ -126,7 +127,7 @@ export default {
     opengeotip(msg) {
 
       this.closegeotip();
-      
+
       this.geomsg = msg;
       this.geomsgopened = true;
 
@@ -139,7 +140,7 @@ export default {
     getlocalmappos() {
       // console.log("Geolocation setting up default values");
       const lastsettings = localStorage.getItem("map-position") || JSON.stringify({"lat": config.MAP.position.lat, "lng": config.MAP.position.lng, "zoom": config.MAP.zoom });
-      const savelocally = true;
+      let savelocally = true;
 
       /* We don't need to save position loacally if there is set from config */
       if(!localStorage.getItem("map-position")) {
@@ -206,7 +207,7 @@ export default {
             this.geoavailable = false;
             reject("Geolocation is not available");
           }
-        
+
       });
     },
 
@@ -227,7 +228,7 @@ export default {
 
     async loadMap() {
       this.geoisloading = false;
-      
+
       this.map = init([this.lat, this.lng], this.zoom, this.theme);
       this.relocatemap(this.lat, this.lng, this.zoom, "reload");
 
@@ -313,7 +314,7 @@ export default {
       this.loadMap();
     });
     /* - Operate with a map */
-    
+
   },
 };
 </script>
@@ -454,8 +455,8 @@ export default {
 
 .popoovergeo-tip:after {
   content: "";
-  width: 0; 
-  height: 0; 
+  width: 0;
+  height: 0;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid color-mix(in srgb, var(--color-dark) 70%, transparent);

src/components/footer/Footer.vue

@@ -1,46 +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>
-
-      <input
-        type="date"
-        v-model="start"
-        :max="maxDate"
-        :disabled="currentProvider == 'realtime'"
+      <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
+        :startTime="startTimestamp"
+        :endTime="endTimestamp"
+        :current="measuretype.toLowerCase()"
       />
-
-      <Measures :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>
@@ -58,7 +71,7 @@ import Bookmarks from "../../components/Bookmarks.vue";
 
 export default {
   emits: ["history"],
-  props: ["currentProvider", "canHistory", "measuretype"],
+  props: ["currentProvider", "canHistory", "measuretype", "isLoad"],
   components: { HistoryImport, Measures, Bookmarks },
 
   data() {
@@ -77,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) {
@@ -139,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/components/sensor/Chart.vue

@@ -6,6 +6,7 @@
 import Highcharts from "highcharts";
 import { Chart } from "highcharts-vue";
 import stockInit from "highcharts/modules/stock";
+import config from "../../config";
 import unitsettings from "../../measurements";
 
 Highcharts.seriesTypes.spline.prototype.drawLegendSymbol = function (legend, item) {
@@ -44,11 +45,23 @@ export default {
                 name: keyname,
                 data: [[item.timestamp * 1000, parseFloat(item.data[keyname])]],
                 zones: unitsettingsLowerCase[keyname]?.zones,
+                visible: true,
+                dataGrouping: {
+                  enabled: false,
+                },
               });
             }
           }
         }
       }
+      for (const measurement of result) {
+        if (measurement.data.length > config.SERIES_MAX_VISIBLE) {
+          measurement.visible = false;
+          measurement.dataGrouping = {
+            approximation: "high",
+          };
+        }
+      }
       return result;
     },
 
@@ -135,6 +148,14 @@ export default {
       tooltip: {
         valueDecimals: 2,
       },
+      plotOptions: {
+        series: {
+          dataGrouping: {
+            enabled: true,
+            units: [["minute", [5]]],
+          },
+        },
+      },
       // plotOptions: {
       //   series: {
       //     lineWidth: 2,