notification bar

Author: Piotr

src/App.vue

@@ -34,6 +34,7 @@ import TopBar from "./components/TopBar.vue"
 import Close from './components/icon/Close.vue';
 import { useContextMenuStore } from './stores/contextMenu';
 import { globalEventBus } from './event_bus';
+import { useNotificationBarStore } from './stores/notificationBar';
 
 const store = useMainStore()
 const storeFilter = useFilterStore()
@@ -557,6 +558,10 @@ const initWs = async (): Promise<boolean> => {
 
   store.initSettings = init.json!
 
+  if (init.json) {
+    useNotificationBarStore().processNotification(init.json?.updateVersion)
+  }
+
   let passValid = await client.sendGet("check-pass?password=" + store.getPassword())
   if (store.initSettings.authRequired && passValid.status !== 200) {
     store.modalShow = "auth"
@@ -606,10 +611,10 @@ const updateSampleLine = () => {
   <SettingsDrawer v-if="store.settingsDrawer" @close="store.settingsDrawer = false" :layout="(store.layout as Layout)"
     @edit="columnEdited" @remove="columnRemoved" @move="reorderColumns" @settings-update="settingsUpdate"
     @update-sample-line="updateSampleLine" :sampleLine="sampleLine" />
-  <UpdateBar v-if="store.notificationBar" />
+  <UpdateBar v-if="useNotificationBarStore().display" />
   <DemoBar v-if="store.demoMode" @start="store.demoStatus = 'started'" @stop="store.demoStatus = 'stopped'"
     @mode="changeDemoMode" @add="addDemoData(100)" />
-  <div :class="{ 'demo': store.demoMode, 'update': store.notificationBar }">
+  <div :class="{ 'demo': store.demoMode, 'update': useNotificationBarStore().display }">
     <div class="top-bar">
       <div class="left">
         <div class="logo">
@@ -636,7 +641,7 @@ const updateSampleLine = () => {
           <Close />
         </button>
         <span class="search-error" v-if="store.searchbarValid.length > 0">Invalid search query: {{ store.searchbarValid
-          }}.
+        }}.
           <br />
           <a href="https://logdy.dev/docs" target="_blank">Visit docs</a>
         </span>

src/components/UpdateBar.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
-import { useMainStore } from '../store';
+import { useNotificationBarStore } from '../stores/notificationBar';
 
-const hide = () => {
-
-}
-
-const remind = () => {
-
-}
+const store = useNotificationBarStore()
 
 </script>
 
 <template>
-    <div class="update-bar" v-if="useMainStore().initSettings && useMainStore().initSettings?.updateVersion">
-        <span>🎉 New Logdy v{{ useMainStore().initSettings?.updateVersion.current_version }} available! {{
-            useMainStore().initSettings?.updateVersion.excerpt }} <a
-                :href="useMainStore().initSettings?.updateVersion.blog_link"
-                v-if="useMainStore().initSettings?.updateVersion.blog_link" target="_blank">Read
+    <div class="update-bar" v-if="store.updateResponse">
+        <span>🎉 New Logdy v{{ store.updateResponse.current_version }} available! {{
+            store.updateResponse.excerpt }} <a :href="store.updateResponse.blog_link"
+                v-if="store.updateResponse.blog_link" target="_blank">Read
                 more</a></span>
-        <button @click="hide">Hide</button>
-        <button @click="remind">Remind later</button>
+        <button @click="store.hide">Hide</button>
+        <button @click="store.remindLater">Remind later</button>
     </div>
 </template>
 
@@ -55,7 +48,7 @@ const remind = () => {
     button {
         padding: 3px 8px;
         font-size: 10px;
-        border-radius: 7px;
+        border-radius: 4px;
         margin-right: 4px;
     }
 }

src/storage.ts

@@ -95,6 +95,20 @@ export class Storage<T extends { id?: string }> {
         localStorage.setItem(this.id(id), JSON.stringify(item))
     }
 
+    upsert(id: string, item: T) {
+        if (typeof item !== 'object') {
+            throw new Error("upsert is only available for objects")
+        }
+
+        let doc = this.getOne(id)
+
+        if (doc) {
+            this.update(id, { ...doc, ...item })
+        } else {
+            this.add(item, id)
+        }
+    }
+
     remove(id: string) {
         let _id = this.id(id)
         localStorage.removeItem(_id)

src/storage_common.ts

@@ -0,0 +1,36 @@
+import { Storage } from "./storage";
+
+interface CommonStorage {
+    id?: string
+    updateBarVersionSeen?: string // which version the user acknowledged
+    updateBarShowAfter?: number //a UNIX timestamp after which the banner can be displayed next time
+}
+
+class CommonStorageImpl {
+
+    private storage: Storage<CommonStorage>;
+
+    constructor() {
+        this.storage = new Storage<CommonStorage>('common')
+    }
+
+    private ID = "main_id"
+
+    get(): CommonStorage {
+        let st = this.storage.getOne(this.ID)
+
+        if (!st) {
+            this.storage.upsert(this.ID, {})
+        } else {
+            return st
+        }
+
+        return {}
+    }
+
+    save(item: CommonStorage) {
+        this.storage.update(this.ID, item)
+    }
+}
+
+export const storageCommon = new CommonStorageImpl()

src/store.ts

@@ -26,15 +26,17 @@ export interface InitSettings {
     // this will hold a Layout JSON to load from the backend
     configStr: string;
 
-    updateVersion: {
-        checked: boolean;
-        local_version: string;
-        current_version: string;
-        current_version_published: string;
-        download_link: string;
-        blog_link: string;
-        excerpt: string;
-    }
+    updateVersion: UpdateResponse
+}
+
+export interface UpdateResponse {
+    checked: boolean;
+    local_version: string;
+    current_version: string;
+    current_version_published: string;
+    download_link: string;
+    blog_link: string;
+    excerpt: string;
 }
 
 type ReceiveStatus = "paused" | "following" | "following_cursor"
@@ -448,18 +450,6 @@ export const useMainStore = defineStore("main", () => {
         }
     }
 
-    const notificationBar = computed(() => {
-
-        return false // for until its finished
-
-        // if (!initSettings.value) {
-        //     return false
-        // }
-
-        // return initSettings.value?.updateVersion.checked &&
-        //     initSettings.value.updateVersion.current_version != initSettings.value.updateVersion.local_version
-    })
-
     watch(searchbar, (newVal) => {
         if (!isRecordJson.value) {
             return
@@ -492,7 +482,6 @@ export const useMainStore = defineStore("main", () => {
         status,
         statusStr,
 
-        notificationBar,
         getUpdate,
 
         receiveStatus,

src/stores/notificationBar.ts

@@ -0,0 +1,61 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { UpdateResponse, useMainStore } from "../store";
+import { storageCommon } from "../storage_common";
+
+const DAY = 1000 * 3600 * 24
+
+export const useNotificationBarStore = defineStore("notification_bar", () => {
+
+    const display = ref<Boolean>(false)
+    const updateResponse = ref<UpdateResponse>()
+
+    const processNotification = (resp: UpdateResponse) => {
+        updateResponse.value = resp
+
+        let s = useMainStore().initSettings
+
+        if (!s?.updateVersion.checked) {
+            return
+        }
+
+        if (s.updateVersion.current_version == s.updateVersion.local_version) {
+            return
+        }
+
+        let stored = storageCommon.get()
+        if (stored.updateBarVersionSeen == s.updateVersion.current_version) {
+            return
+        }
+
+        if (stored.updateBarShowAfter && stored.updateBarShowAfter > new Date().getTime()) {
+            return
+        }
+
+        display.value = true
+    }
+
+    const hide = () => {
+        let st = storageCommon.get()
+        st.updateBarVersionSeen = updateResponse.value?.current_version
+        st.updateBarShowAfter = undefined
+        storageCommon.save(st)
+
+        display.value = false
+    }
+    const remindLater = () => {
+        display.value = false
+        let st = storageCommon.get()
+        st.updateBarShowAfter = new Date().getTime() + (3 * DAY)
+        storageCommon.save(st)
+
+    }
+
+    return {
+        display,
+        processNotification,
+        hide,
+        remindLater,
+        updateResponse
+    };
+});