Merge pull request #135 from positivecrash/master

Fixes and new features for the UI

Author: positivecrash

package.json

@@ -24,7 +24,8 @@
     "buffer": "^6.0.3",
     "chroma-js": "^2.4.2",
     "events": "^3.3.0",
-    "highcharts": "^10.2.1",
+    "highcharts": "^11.4.3",
+    "highcharts-vue": "^2.0.1",
     "js-file-download": "^0.4.12",
     "js-queue": "^2.0.2",
     "leaflet": "^1.9.2",
@@ -41,7 +42,6 @@
     "vite-plugin-mkcert": "^1.17.5",
     "vite-plugin-pwa": "^0.19.7",
     "vue": "^3.2.38",
-    "vue-highcharts": "^0.2.0",
     "vue-i18n": "9",
     "vue-matomo": "^4.1.0",
     "vue-router": "^4.1.5",

src/assets/styles/base.css

@@ -162,6 +162,15 @@ label {
 .popovercontrol .svg-inline--fa path {
   fill: var(--app-textcolor);
 }
+
+@supports not selector(:popover-open) {
+  .popover {
+    background-color: #fff;
+    inset: unset;
+    border: 0;
+    padding: var(--gap);
+  }
+}
 /* - POPOVER API */
 
 /* + SCROLLABLE CONTENT */

src/components/Bookmarks.vue

@@ -2,7 +2,7 @@
     <template v-if="!bookmarks || bookmarks.length < 1">{{$t("bookmarks.listempty")}}</template>
     <template v-else>
         <section v-for="bookmark in bookmarks" :key="bookmark.id" class="flexline">
-            <a :href="bookmark.link" @click.prevent="showsensor">
+            <a :href="bookmark.link" @click.prevent="showsensor(bookmark.link)">
                 <b v-if="bookmark.customName" class="name">{{bookmark.customName}}</b>
                 <b v-if="bookmark.address" :class="bookmark.customName ? 'addresssm' : 'adresslg'">{{bookmark.address}}</b>
             </a>
@@ -13,44 +13,41 @@
 
 <script>
 import { useStore } from "@/store";
-import {IDBgettable, IDBworkflow} from "../idb";
+import { IDBworkflow } from "../idb";
 
 export default {
     data() {
         return {
-            bookmarks: [],
             store: useStore(),
         }
     },
 
-    methods: {
+    computed: {
+        bookmarks: function() {
+            return this.store.idbBookmarks;
+        }
+    },
 
-        async getbookmarks() {
-            this.bookmarks = await IDBgettable(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable);
-        },
+    methods: {
 
         deletebookmark(id) {
             IDBworkflow(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable, 'readwrite', store => {
                 store.delete(id);
-                this.getbookmarks();
+
+                const bc = new BroadcastChannel(this.store.idbWatcherBroadcast);
+                bc.postMessage(true);
+                bc.close();
             })
         },
 
-        showsensor() {
-            this.$router.go();
-        },
+        showsensor(link) {
+            /* 
+            I'm really sorry for that, but current routing system is very complicated and it seems 
+            very hard to impelement proper router mechanism here, so I just reload - positivecrash */
+            window.location.href = link;
+            location.reload();
+        }
     },
-
-    mounted() {
-        this.getbookmarks()
-
-        const bc = new BroadcastChannel(this.store.idbWatcherBroadcast)
-        bc.onmessage = e => {
-            if(e.data) {
-                this.getbookmarks();
-            }
-        };
-    }
 }
 </script>
 
@@ -83,4 +80,5 @@ export default {
     button:hover {
         color: var(--color-red);
     }
+    
 </style>

src/components/Map.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ inactive: store.isColored }" class="mapcontainer" id="map"></div>
+  <div :class="{ inactive: store.mapinactive }" class="mapcontainer" id="map"></div>
   <Footer
     :currentProvider="provider"
     :canHistory="historyready"
@@ -20,11 +20,11 @@
 
 <script>
 import { useStore } from "@/store";
-import Footer from "../components/footer/Footer.vue";
 import { drawuser, init, removeMap, setTheme, setview } from "../utils/map/instance";
 import { init as initMarkers } from "../utils/map/marker";
 import { init as initWind } from "../utils/map/wind";
 import { getTypeProvider } from "../utils/utils";
+import Footer from "../components/footer/Footer.vue";
 
 export default {
   emits: ["city", "clickMarker", "close"],
@@ -126,6 +126,11 @@ export default {
               /* Если не удалось получить позицию юзера, то проверяем локальное хранилище */
               this.getlocalmappos();
               resolve();
+            },
+            {
+              enableHighAccuracy: true,
+              timeout: 200000,
+              maximumAge: 0
             }
           );
         } else {
@@ -187,16 +192,20 @@ export default {
       });
 
       map.on("moveend", (e) => {
-        this.relocatemap(
-          e.target.getCenter().lat.toFixed(4),
-          e.target.getCenter().lng.toFixed(4),
-          e.target.getZoom()
-        );
-        this.store.setmapposition(
-          e.target.getCenter().lat.toFixed(4),
-          e.target.getCenter().lng.toFixed(4),
-          e.target.getZoom()
-        );
+        /* setTimeout for mobiles (whne swiping up app, it causes unpleasant map moving before closing app) */
+        setTimeout( () => {
+          this.relocatemap(
+            e.target.getCenter().lat.toFixed(4),
+            e.target.getCenter().lng.toFixed(4),
+            e.target.getZoom()
+          );
+          this.store.setmapposition(
+            e.target.getCenter().lat.toFixed(4),
+            e.target.getCenter().lng.toFixed(4),
+            e.target.getZoom()
+          );
+        }, 50)
+        
       });
 
       initMarkers(map, this.measuretype, (data) => {
@@ -208,6 +217,9 @@ export default {
       }
     });
     /* - Operate with a map */
+
+    /* get bookmarks and listenning for broadcast from DB */
+    await this.store.idbBookmarkGet();
   },
 };
 </script>

src/components/footer/Footer.vue

@@ -2,12 +2,13 @@
   <div class="mapcontrols">
 <div style="display:none">{{bufer}}</div>
     <div class="flexline">
-      <div id="bookmarks" class="popover-bottom-left" popover>
+
+      <div id="bookmarks" class="popover-bottom-left popover" popover>
         <h3>{{$t("bookmarks.listtitle")}}</h3>
         <Bookmarks />
       </div>
-      <button class="popovercontrol" 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"
@@ -19,7 +20,7 @@
     </div>
 
     <div class="flexline">
-      <div id="mapsettings" class="popover-bottom-right" popover>
+      <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>
@@ -62,6 +63,7 @@ export default {
 
   data() {
     return {
+      store: useStore(),
       isActive: false,
       isActiveMenu: false,
       isMeasuresPopupOpen: false,
@@ -71,7 +73,6 @@ export default {
       messages: config.SHOW_MESSAGES,
       start: moment().format("YYYY-MM-DD"),
       maxDate: moment().format("YYYY-MM-DD"),
-      store: useStore(),
     };
   },
   computed: {
@@ -85,6 +86,9 @@ export default {
         moment(this.start + " 23:59:59", "YYYY-MM-DD HH:mm:ss").format("X")
       );
     },
+    bookmarks: function() {
+      return this.store.idbBookmarks;
+    }
   },
   watch: {
     async realtime(v) {
@@ -121,35 +125,6 @@ export default {
   },
 
   methods: {
-    toggleOpen(state) {
-      if (!this[state]) {
-        this[state] = true;
-        this.store.colorMap();
-      } else {
-        this[state] = false;
-        this.store.removeColorMap();
-      }
-    },
-
-    toggleIsActive() {
-      this.toggleOpen("isActive");
-    },
-
-    toggleMobileMenu() {
-      this.toggleOpen("isActiveMenu");
-    },
-
-    toggleMeasurePopup(e) {
-      if (
-        e.target.classList.contains("footer__close-popup") &&
-        this.$refs.details.open
-      ) {
-        this.$refs.details.open = false;
-      } else {
-        this.toggleOpen("isMeasuresPopupOpen");
-      }
-    },
-
     getHistory() {
       if (this.realtime) {
         return;
@@ -159,7 +134,7 @@ export default {
         end: this.endTimestamp,
       });
     },
-  }
+  },
 };
 </script>
 
@@ -193,4 +168,14 @@ export default {
   .popover-bottom-left {
     left: var(--app-controlsgap);
   }
+</style>
+
+<style>
+  .popovercontrol.active {
+    border-color: var(--color-green);
+  }
+
+  .popovercontrol.active path {
+    fill: var(--color-green) !important;
+  }
 </style>

src/components/header/Header.vue

@@ -2,7 +2,7 @@
   <header class="flexline space-between">
     <div class="flexline align-start">
       <router-link to="/" class="appicon"><img alt="App logo" src="../../../public/app-icon-512.png" /></router-link>
-      <b class="text-changabletheme" v-if="countPoints > 0">{{$t('loadedsesnsors')}}: {{countPoints}}</b>
+      <b class="sensorscount" v-if="countPoints > 0"><IconSensor/> {{countPoints}}</b>
     </div>
 
     <div class="flexline">
@@ -11,7 +11,8 @@
         <option value="ru">Русский</option>
       </select>
 
-      <div id="about" class="popover-top-right" popover>
+
+      <div id="about" class="popover popover-top-right" popover>
         <template v-if="locale === 'ru'">
           <h3>Web3 открытая сеть датчиков</h3>
           <p>Добро пожаловать в открытую сеть датчиков, которая построена на open-source принципах и поддерживается энтузиастами (см. 
@@ -46,19 +47,23 @@
           </section>
       </div>
       <button class="popovercontrol" popovertarget="about"><font-awesome-icon icon="fa-solid fa-bars" /></button>
+  
 
     </div>
   </header>
 </template>
 
 <script>
 import { useStore } from "@/store";
+import IconSensor from "../icons/Sensor.vue";
 
 export default {
+  components: { IconSensor },
+
   data() {
     return {
       locale: localStorage.getItem("locale") || this.$i18n.locale || 'en',
-      store: useStore()
+      store: useStore(),
     }
   },
   watch: {
@@ -102,12 +107,18 @@ export default {
   }
 
   .popover-top-right {
-    top: calc(var(--gap) * 2 + var(--app-inputheight));
+    top: calc(var(--gap) * 3 + var(--app-inputheight));
     right: var(--gap);
     width: 500px;
     max-width: calc(100vw - var(--gap) * 2);
   }
 
+  @supports not selector(:popover-open) {
+    .popover-top-right {
+      right: var(--gap) !important;
+    }
+  }
+
   #about p {
     font-size: .9em;
   }
@@ -123,4 +134,19 @@ export default {
   .navlinks a:not(:last-child) {
     margin-bottom: calc(var(--gap) * .5);
   }
+
+  .sensorscount {
+    color: #fff;
+    background: var(--color-orange);
+    padding: 4px 10px;
+    display: block;
+    border-radius: 5px;
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .sensorscount svg {
+    width: 22px;
+  }
 </style>