Merge pull request #163 from zirreal/master

fixed bookmarks + added copy button
airalab · Jan 31, 2025 · f037f4d · f037f4d
2 parents 9b156b5 + 4aa23e3
commit f037f4d
Show file tree

Hide file tree

Showing 4 changed files with 215 additions and 86 deletions.
diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@chainsafe/libp2p-noise": "^13.0.1",
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.1",
     "@kyvg/vue3-notification": "^2.9.1",
     "@libp2p/bootstrap": "^9.0.6",

diff --git a/src/components/sensor/Bookmark.vue b/src/components/sensor/Bookmark.vue
@@ -1,8 +1,19 @@
 <template>
   <form class="flexline" @submit.prevent="addbookmark">
-    <input type="text" v-model="bookmarkname" :placeholder="$t('sensorpopup.bookmarkplaceholder')" @input="IsBookmarked = false" />
-    <button :class="buttonclasses" :disabled="IsBookmarked" :area-label="$t('sensorpopup.bookmarkbutton')">
-      <template v-if="!IsBookmarked"><font-awesome-icon icon="fa-solid fa-bookmark" /></template>
+    <input
+      type="text"
+      v-model="bookmarkname"
+      :placeholder="$t('sensorpopup.bookmarkplaceholder')"
+      @input="IsBookmarked = false"
+    />
+    <button
+      :class="buttonclasses"
+      :disabled="IsBookmarked"
+      :area-label="$t('sensorpopup.bookmarkbutton')"
+    >
+      <template v-if="!IsBookmarked"
+        ><font-awesome-icon icon="fa-solid fa-bookmark"
+      /></template>
       <template v-else><font-awesome-icon icon="fa-solid fa-check" /></template>
     </button>
   </form>
@@ -13,7 +24,7 @@ import { useStore } from "@/store";
 import { IDBgettable, IDBworkflow } from "../../idb";
 
 export default {
-  props: ["address", "link", "geo"],
+  props: ["address", "link", "geo", "id"],
 
   data() {
     return {
@@ -33,77 +44,93 @@ export default {
         [`button-green`]: this.IsBookmarked,
         // [`flexline`]: true,
       };
-    }
+    },
   },
 
   methods: {
-
     async findbookmark() {
-      const bookmarks = await IDBgettable(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable)
-      return bookmarks.find(bookmark => bookmark.address === this.$props.address)
+      const bookmarks = await IDBgettable(
+        this.store.idbBookmarkDbname,
+        this.store.idbBookmarkVDbver,
+        this.store.idbBookmarkVDbtable
+      );
+      return bookmarks.find((bookmark) => bookmark.id === this.$props.id);
     },
 
     async addbookmark() {
-
       const bookmark = await this.findbookmark();
 
-      if(bookmark) {
-        if(this.bookmarkid) {
-          
-          IDBworkflow(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable, 'readwrite', store => {
-            const request = store.get(this.bookmarkid);
-            
-            request.addEventListener('error', e => {
-              console.log(e)
-            })
+      if (bookmark) {
+        if (this.bookmarkid) {
+          IDBworkflow(
+            this.store.idbBookmarkDbname,
+            this.store.idbBookmarkVDbver,
+            this.store.idbBookmarkVDbtable,
+            "readwrite",
+            (store) => {
+              const request = store.get(this.bookmarkid);
+
+              request.addEventListener("error", (e) => {
+                console.log(e);
+              });
 
-            request.addEventListener('success', e => {
-              const data = e.target.result;
-              data.customName = this.bookmarkname;
-              const requestUpdate = store.put(data);
+              request.addEventListener("success", (e) => {
+                const data = e.target.result;
+                data.customName = this.bookmarkname;
+                const requestUpdate = store.put(data);
 
-              requestUpdate.addEventListener('error', e => {
-                console.log(e)
-              })
+                requestUpdate.addEventListener("error", (e) => {
+                  console.log(e);
+                });
 
-              requestUpdate.addEventListener('success', e => {
-                this.IsBookmarked = true
-              })
-            })
-          })
+                requestUpdate.addEventListener("success", (e) => {
+                  this.IsBookmarked = true;
+                });
+              });
+            }
+          );
         }
       } else {
-        IDBworkflow(this.store.idbBookmarkDbname, this.store.idbBookmarkVDbver, this.store.idbBookmarkVDbtable, 'readwrite', store => {
+        IDBworkflow(
+          this.store.idbBookmarkDbname,
+          this.store.idbBookmarkVDbver,
+          this.store.idbBookmarkVDbtable,
+          "readwrite",
+          (store) => {
             store.add({
               customName: this.bookmarkname,
+              id: this.$props.id,
               address: this.$props.address,
               link: this.$props.link,
-              geo: JSON.stringify(this.$props.geo)
+              geo: JSON.stringify(this.$props.geo),
             });
             this.IsBookmarked = true;
-          })
-        }
+          }
+        );
+      }
 
-        const bc = new BroadcastChannel(this.store.idbWatcherBroadcast)
-        bc.postMessage(this.store.idbBookmarkVDbtable)
-        bc.close()
+      const bc = new BroadcastChannel(this.store.idbWatcherBroadcast);
+      bc.postMessage(this.store.idbBookmarkVDbtable);
+      bc.close();
     },
   },
 
   async mounted() {
     const bookmark = await this.findbookmark();
-    if(bookmark) {
+    if (bookmark) {
       this.IsBookmarked = true;
       this.bookmarkid = bookmark.id;
       this.bookmarkname = bookmark.customName;
     }
-  }
-}
+
+    console.log(this.$props);
+  },
+};
 </script>
 
 <style scoped>
 button {
-  padding-right: calc(var(--app-inputpadding)*2);
-  padding-left: calc(var(--app-inputpadding)*2);
+  padding-right: calc(var(--app-inputpadding) * 2);
+  padding-left: calc(var(--app-inputpadding) * 2);
 }
-</style>
+</style>