Merge pull request #133 from positivecrash/master

Geo position, popover api polyfill

package.json

@@ -19,6 +19,7 @@
     "@libp2p/mplex": "^9.0.6",
     "@libp2p/webrtc": "^3.2.0",
     "@libp2p/websockets": "^7.0.7",
+    "@oddbird/popover-polyfill": "^0.4.3",
     "axios": "^1.1.2",
     "buffer": "^6.0.3",
     "chroma-js": "^2.4.2",

src/assets/styles/variables.css

@@ -39,6 +39,8 @@
   --app-buttoncolor-hover:hsl(219, 63%, 35%);
   --app-buttontextcolor: #fff;
   --app-popoverbg: #fff;
+
+  --app-controlsgap: calc(var(--gap) * 2);
 }
 
 @media screen and (max-width: 500px) {

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" target="_blank">
+            <a :href="bookmark.link" @click.prevent="showsensor">
                 <b v-if="bookmark.customName" class="name">{{bookmark.customName}}</b>
                 <b v-if="bookmark.address" :class="bookmark.customName ? 'addresssm' : 'adresslg'">{{bookmark.address}}</b>
             </a>
@@ -19,22 +19,26 @@ export default {
     data() {
         return {
             bookmarks: [],
-            store: useStore()
+            store: useStore(),
         }
     },
 
     methods: {
 
         async getbookmarks() {
-            this.bookmarks = await IDBgettable(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable)
+            this.bookmarks = await IDBgettable(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable);
         },
 
         deletebookmark(id) {
             IDBworkflow(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable, 'readwrite', store => {
-                store.delete(id)
-                this.getbookmarks()
+                store.delete(id);
+                this.getbookmarks();
             })
-        }
+        },
+
+        showsensor() {
+            this.$router.go();
+        },
     },
 
     mounted() {
@@ -43,7 +47,7 @@ export default {
         const bc = new BroadcastChannel(this.store.idbWatcherBroadcast)
         bc.onmessage = e => {
             if(e.data) {
-                this.getbookmarks()
+                this.getbookmarks();
             }
         };
     }

src/components/Map.vue

@@ -1,34 +1,41 @@
 <template>
-  <div
-    :class="{ inactive: store.isColored }"
-    class="mapcontainer"
-    id="map"
-  ></div>
+  <div :class="{ inactive: store.isColored }" class="mapcontainer" id="map"></div>
+  <Footer :currentProvider="provider" :canHistory="historyready" @history="historyhandler" :measuretype="measuretype">
+    <button class="popovercontrol" v-if="geoavailable" @click.prevent="resetgeo" :area-label="$t('showlocation')" :title="$t('showlocation')"><font-awesome-icon icon="fa-solid fa-location-arrow" /></button>
+  </Footer>
 </template>
 
 <script>
 import { useStore } from "@/store";
 import config from "../config";
-import { init, removeMap, setTheme } from "../utils/map/instance";
+import { init, removeMap, setTheme, setview, drawuser } from "../utils/map/instance";
 import { init as initMarkers } from "../utils/map/marker";
-import { getCityByPos } from "../utils/map/utils";
 import { init as initWind } from "../utils/map/wind";
-import { saveMapPosiotion } from "../utils/utils";
+import Footer from "../components/footer/Footer.vue";
 
 export default {
   emits: ["city", "clickMarker", "close"],
-  props: ["zoom", "lat", "lng", "type", "availableWind"],
+  props: ["measuretype", "historyready", "historyhandler"],
+  components: {Footer},
   data() {
     return {
-      locale: localStorage.getItem("locale") || this.$i18n.locale || "en",
-      theme: window?.matchMedia("(prefers-color-scheme: light)").matches
-        ? "light"
-        : "dark",
       store: useStore(),
+      locale: localStorage.getItem("locale") || this.$i18n.locale || "en",
+      theme: window?.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark",
+      userposition: null,
+      geoavailable: false,
     };
   },
+
+  computed: {
+    zoom() { return this.store.mapposition.zoom },
+    lat() { return this.store.mapposition.lat },
+    lng() { return this.store.mapposition.lng },
+    provider() { return config.DEFAUL_TYPE_PROVIDER || this.$route.params.provider },
+  },
+
   methods: {
-    listener({ matches, media }) {
+    themelistener({ matches, media }) {
       if (!matches) {
         // Not matching anymore = not interesting
         return;
@@ -42,103 +49,120 @@ export default {
 
       setTheme(this.theme);
     },
-  },
-  computed: {
-    route() {
-      return this.$router;
+
+    relocatemap(lat, lng, zoom, type) {
+      const options = {
+          name: "main",
+          params: {
+            provider: this.provider || config.DEFAUL_TYPE_PROVIDER,
+            type: this.$route.params.type || "pm10",
+            zoom: zoom,
+            lat: lat,
+            lng: lng,
+            sensor: this.$route.params.sensor,
+          },
+      }
+      
+      if (this.$router.currentRoute.value.name === "main") {
+        /* added here check for current route is map (main), as it caused problems with other pages */
+        if(type === 'reload') {
+          this.$router.push(options).catch(e => { console.warn(e) });
+          setview([lat, lng], zoom);
+        } else {
+          this.$router.replace(options).catch(e => { console.warn(e) });
+        }
+      }
     },
+
+    getlocalmappos() {
+      if(localStorage.getItem("map-position")) {
+        const lastsettings = localStorage.getItem("map-position");
+        this.store.setmapposition(JSON.parse(lastsettings).lat, JSON.parse(lastsettings).lng, JSON.parse(lastsettings).zoom);
+      }
+    },
+
+    setgeo() {
+      return new Promise((resolve) => {
+        if ("geolocation" in navigator) {
+          navigator.geolocation.getCurrentPosition(
+            position => {
+              this.userposition = [position.coords.latitude, position.coords.longitude];
+              /* setting for the app globally user's geo position and zoom 20 for better view */
+              this.store.setmapposition(this.userposition[0], this.userposition[1], 20);
+              this.geoavailable = true;
+              resolve();
+            },
+            e => {
+              console.warn(`ERROR(${e.code}): ${e.message}`);
+              /* Если не удалось получить позицию юзера, то проверяем локальное хранилище */
+              this.getlocalmappos();
+              resolve();
+          });
+        } else {
+          /* Если нет возможности "geolocation", то проверяем локальное хранилище */
+          this.getlocalmappos();
+          resolve();
+        }
+      })
+    },
+
+    resetgeo() {
+      const waitcoords = this.setgeo();
+      waitcoords.then( () => {
+        this.relocatemap(this.lat, this.lng, this.zoom, 'reload');
+      })
+    }
   },
+
   unmounted() {
     removeMap();
   },
+
   async mounted() {
     /* + get user's system theme */
     if (window.matchMedia) {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener("change", this.listener);
+        .addEventListener("change", this.themelistener);
       window
         .matchMedia("(prefers-color-scheme: light)")
-        .addEventListener("change", this.listener);
+        .addEventListener("change", this.themelistener);
     }
     /* - get user's system theme */
 
-    if (this.zoom > 9) {
-      getCityByPos(this.lat, this.lng, this.locale).then((r) => {
-        this.$emit("city", r);
-      });
-    }
+    /* + retrieve coordinates */
+    const waitcoords = this.setgeo();
+    /* - retrieve coordinates */
 
-    const map = init([this.lat, this.lng], this.zoom, this.theme);
 
-    map.on("zoomend", (e) => {
-      const pos = e.target.getCenter();
-      saveMapPosiotion(
-        e.target.getZoom(),
-        pos.lat.toFixed(4),
-        pos.lng.toFixed(4)
-      );
+    /* + Operate with a map */
+    waitcoords.then( async () => {
+      const map = init([this.lat, this.lng], this.zoom, this.theme);
+      this.relocatemap(this.lat, this.lng, this.zoom, 'reload');
 
-      if (this.$router.currentRoute.value.name === "main") {
-        /* added here check for current route is map (main), as it caused problems with other pages */
-        this.$router.replace({
-          name: "main",
-          params: {
-            provider:
-              this.$route.params.provider || config.DEFAUL_TYPE_PROVIDER,
-            type: this.$route.params.type || "pm10",
-            zoom: e.target.getZoom(),
-            lat: pos.lat.toFixed(4),
-            lng: pos.lng.toFixed(4),
-            sensor: this.$route.params.sensor,
-          },
-        });
+      if(this.userposition) {
+        drawuser(this.userposition, this.zoom);
       }
-    });
 
-    map.on("moveend", (e) => {
-      const pos = e.target.getCenter();
-      const zoom = e.target.getZoom();
-      if (zoom > 9) {
-        getCityByPos(pos.lat, pos.lng, this.locale).then((r) => {
-          this.$emit("city", r);
-        });
-      } else {
-        this.$emit("city", "");
-      }
-      saveMapPosiotion(
-        e.target.getZoom(),
-        pos.lat.toFixed(4),
-        pos.lng.toFixed(4)
-      );
+      map.on("zoomend", (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());
+      });
 
-      if (this.$router.currentRoute.value.name === "main") {
-        /* added here check for current route is map (main), as it caused problems with other pages */
-        /* ! Here was a problem actually */
-        this.$router
-          .replace({
-            name: "main",
-            params: {
-              provider:
-                this.$route.params.provider || config.DEFAUL_TYPE_PROVIDER,
-              type: this.$route.params.type || "pm10",
-              zoom: e.target.getZoom(),
-              lat: pos.lat.toFixed(4),
-              lng: pos.lng.toFixed(4),
-              sensor: this.$route.params.sensor,
-            },
-          })
-          .catch(() => {});
-      }
-    });
+      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());
+      });
 
-    initMarkers(map, this.type, (data) => {
-      this.$emit("clickMarker", data);
-    });
+      initMarkers(map, this.measuretype, (data) => {
+        this.$emit("clickMarker", data);
+      });
 
-    if (this.availableWind) {
-      await initWind();
-    }
+      if (this.provider === 'realtime') {
+        await initWind();
+      }
+    });
+    /* - Operate with a map */
   },
 };
 </script>

src/components/footer/Footer.vue

@@ -15,7 +15,7 @@
         :disabled="currentProvider == 'realtime'"
       />
 
-      <Measures :current="type.toLowerCase()" />
+      <Measures :current="measuretype.toLowerCase()" />
     </div>
 
     <div class="flexline">
@@ -39,6 +39,7 @@
         </section>
       </div>
       <button class="popovercontrol" popovertarget="mapsettings"><font-awesome-icon icon="fa-solid fa-gear" /></button>
+      <slot/>
     </div>
   </div>
 </template>
@@ -56,7 +57,7 @@ import Bookmarks from "../../components/Bookmarks.vue";
 
 export default {
   emits: ["history"],
-  props: ["currentProvider", "canHistory", "type"],
+  props: ["currentProvider", "canHistory", "measuretype"],
   components: { HistoryImport, Measures, Bookmarks },
 
   data() {
@@ -169,9 +170,9 @@ export default {
     display: flex;
     justify-content: space-between;
     left: 0;
-    padding: 0 0 var(--gap) var(--gap);
+    padding: 0 var(--app-controlsgap) var(--app-controlsgap);
     position: absolute;
-    right: calc(2 * var(--gap) + var(--app-inputheight));
+    right: 0;
     z-index: 12;
     pointer-events: none;
   }
@@ -181,15 +182,15 @@ export default {
   }
 
   .popover-bottom-right, .popover-bottom-left {
-    bottom: calc(var(--app-inputheight) + var(--gap) * 2);
-    max-width: calc(100vw - var(--gap) * 2);
+    bottom: calc(var(--app-inputheight) + var(--app-controlsgap) * 2);
+    max-width: calc(100vw - var(--app-controlsgap) * 2);
   }
 
   .popover-bottom-right {
-    right: var(--gap);
+    right: var(--app-controlsgap);
   }
 
   .popover-bottom-left {
-    left: var(--gap);
+    left: var(--app-controlsgap);
   }
 </style>

src/components/header/Header.vue

@@ -76,7 +76,7 @@ export default {
 <style scoped>
   header {
     left: 0;
-    padding: var(--gap);
+    padding: var(--app-controlsgap);
     position: absolute;
     top: 0;
     width: 100vw;

src/main.js

@@ -3,6 +3,7 @@ import { createApp } from "vue";
 import VueMatomo from "vue-matomo";
 import App from "./App.vue";
 import { usePlugins } from "./plugins";
+import '@oddbird/popover-polyfill';
 
 import "./assets/styles/main.css";