feat(frontend): check for updates

ravenclaw900 · Apr 3, 2022 · 3abb628 · 3abb628
1 parent a41f23e
commit 3abb628
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 7 deletions.
diff --git a/src/backend/src/shared.rs b/src/backend/src/shared.rs
@@ -100,6 +100,7 @@ pub struct GlobalData {
     pub update: String,
     pub version: String,
     pub login: bool,
+    pub update_check: bool,
     #[cfg(feature = "frontend")]
     pub nodes: Vec<String>,
 }

diff --git a/src/backend/src/systemdata.rs b/src/backend/src/systemdata.rs
@@ -351,6 +351,7 @@ pub fn global() -> shared::GlobalData {
         update,
         login: crate::CONFIG.pass,
         version: env!("CARGO_PKG_VERSION").to_string(),
+        update_check: crate::CONFIG.update_check,
         #[cfg(feature = "frontend")]
         nodes: crate::CONFIG.nodes.clone(),
     }

diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -64,6 +64,7 @@
         error: boolean;
         nodes: string[];
         version: string;
+        update_check: boolean;
     }
 
     interface software {
@@ -128,10 +129,14 @@
     let password = "";
     let frontendVersion = "__PACKAGE_VERSION__";
     let backendVersion = "";
-    let node = `${window.location.hostname}:${window.location.port}`;
+    let updateAvailable = "";
+    let node = `${window.location.hostname}:${5252}`;
 
     $: node && ((shown = false), connectSocket(node));
-    $: notify = dpUpdate != "" || cmp(frontendVersion, backendVersion) != 0;
+    $: notify =
+        dpUpdate != "" ||
+        cmp(frontendVersion, backendVersion) != 0 ||
+        updateAvailable != "";
 
     // Get dark mode
     if (localStorage.getItem("darkMode") != null) {
@@ -140,6 +145,39 @@
         darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
     }
 
+    const updateCheck = () => {
+        if (
+            localStorage.getItem("update-check") == null ||
+            JSON.parse(localStorage.getItem("update-check")).lastChecked >
+                Math.round(Date.now() / 1000) + 86400
+        ) {
+            fetch(
+                "https://api.github.com/repos/ravenclaw900/DietPi-Dashboard/releases/latest"
+            ).then((response) =>
+                response.text().then((body) => {
+                    let version = JSON.parse(body).name.substring(1);
+                    if (cmp(version, backendVersion) > 0) {
+                        updateAvailable = version;
+                    }
+                    localStorage.setItem(
+                        "update-check",
+                        JSON.stringify({
+                            version,
+                            lastChecked: Math.round(Date.now() / 1000),
+                        })
+                    );
+                })
+            );
+        } else if (localStorage.getItem("update-check") != null) {
+            let version = JSON.parse(
+                localStorage.getItem("update-check")
+            ).version;
+            if (cmp(version, backendVersion) > 0) {
+                updateAvailable = version;
+            }
+        }
+    };
+
     const socketMessageListener = (e: MessageEvent) => {
         socketData = JSON.parse(e.data);
         if (socketData.update != undefined) {
@@ -166,6 +204,9 @@
                 localStorage.removeItem("tokens");
                 pollServer(window.location.pathname);
             }
+            if (socketData.update_check) {
+                updateCheck();
+            }
         }
         if (socketData.error == true) {
             loginDialog = true;
@@ -356,9 +397,8 @@
             <div class="flex justify-around">
                 {#if nodes.length != 0}
                     <select bind:value={node} class="hidden md:inline-block">
-                        <option
-                            value={`${window.location.hostname}:${window.location.port}`}
-                            >{`${window.location.hostname}:${window.location.port}`}
+                        <option value={`${window.location.hostname}:${5252}`}
+                            >{`${window.location.hostname}:${5252}`}
                         </option>
                         {#each nodes as node}
                             <option value={node}>
@@ -415,6 +455,11 @@
                                 node: {backendVersion})</tr
                             >
                         {/if}
+                        {#if updateAvailable}
+                            <tr class="border-b border-gray-300 border-gray-600"
+                                >DietPi-Dashboard update available: {updateAvailable}</tr
+                            >
+                        {/if}
                     </table>
                 </div>
             </div>
@@ -425,8 +470,8 @@
                     <table class="w-full">
                         <select bind:value={node} class="w-full">
                             <option
-                                value={`${window.location.hostname}:${window.location.port}`}
-                                >{`${window.location.hostname}:${window.location.port}`}
+                                value={`${window.location.hostname}:${5252}`}
+                                >{`${window.location.hostname}:${5252}`}
                             </option>
                             {#each nodes as node}
                                 <option value={node}>