Fix: .env code change is not reactive

* WIP

* Add envsubst

* WIP

README.md

@@ -148,13 +148,13 @@ Yes, you can. However, you need to move your compose file into the stacks direct
 3. In Dockge, click the " Scan Stacks Folder" button in the top-right corner's dropdown menu
 4. Now you should see your stack in the list
 
-#### Is Dockge a Portainer replcement?
+#### Is Dockge a Portainer replacement?
 
 Yes or no. Portainer provides a lot of Docker features. While Dockge is currently only focusing on docker-compose with a better user interface and better user experience.
 
 If you want to manage your container with docker-compose only, the answer may be yes.
 
-If you still need to manage something like docker networks, signle containers, the answer may be no.
+If you still need to manage something like docker networks, single containers, the answer may be no.
 
 #### Can I install both Dockge and Portainer?
 

backend/check-version.ts

@@ -3,69 +3,55 @@ import compareVersions from "compare-versions";
 import packageJSON from "../package.json";
 import { Settings } from "./settings";
 
-export const obj = {
-    version: packageJSON.version,
-    latestVersion: null,
-};
-export default obj;
-
 // How much time in ms to wait between update checks
 const UPDATE_CHECKER_INTERVAL_MS = 1000 * 60 * 60 * 48;
 const CHECK_URL = "https://dockge.kuma.pet/version";
 
-let interval : NodeJS.Timeout;
+class CheckVersion {
+    version = packageJSON.version;
+    latestVersion? : string;
+    interval? : NodeJS.Timeout;
 
-export function startInterval() {
-    const check = async () => {
-        if (await Settings.get("checkUpdate") === false) {
-            return;
-        }
-
-        log.debug("update-checker", "Retrieving latest versions");
-
-        try {
-            const res = await fetch(CHECK_URL);
-            const data = await res.json();
-
-            // For debug
-            if (process.env.TEST_CHECK_VERSION === "1") {
-                data.slow = "1000.0.0";
+    async startInterval() {
+        const check = async () => {
+            if (await Settings.get("checkUpdate") === false) {
+                return;
             }
 
-            const checkBeta = await Settings.get("checkBeta");
+            log.debug("update-checker", "Retrieving latest versions");
 
-            if (checkBeta && data.beta) {
-                if (compareVersions.compare(data.beta, data.slow, ">")) {
-                    obj.latestVersion = data.beta;
-                    return;
+            try {
+                const res = await fetch(CHECK_URL);
+                const data = await res.json();
+
+                // For debug
+                if (process.env.TEST_CHECK_VERSION === "1") {
+                    data.slow = "1000.0.0";
                 }
+
+                const checkBeta = await Settings.get("checkBeta");
+
+                if (checkBeta && data.beta) {
+                    if (compareVersions.compare(data.beta, data.slow, ">")) {
+                        this.latestVersion = data.beta;
+                        return;
+                    }
+                }
+
+                if (data.slow) {
+                    this.latestVersion = data.slow;
+                }
+
+            } catch (_) {
+                log.info("update-checker", "Failed to check for new versions");
             }
 
-            if (data.slow) {
-                obj.latestVersion = data.slow;
-            }
+        };
 
-        } catch (_) {
-            log.info("update-checker", "Failed to check for new versions");
-        }
-
-    };
-
-    check();
-    interval = setInterval(check, UPDATE_CHECKER_INTERVAL_MS);
-}
-
-/**
- * Enable the check update feature
- * @param value Should the check update feature be enabled?
- * @returns
- */
-export async function enableCheckUpdate(value : boolean) {
-    await Settings.set("checkUpdate", value);
-
-    clearInterval(interval);
-
-    if (value) {
-        startInterval();
+        await check();
+        this.interval = setInterval(check, UPDATE_CHECKER_INTERVAL_MS);
     }
 }
+
+const checkVersion = new CheckVersion();
+export default checkVersion;

backend/docker.ts

@@ -1,3 +0,0 @@
-export class Docker {
-
-}

backend/dockge-server.ts

@@ -308,6 +308,7 @@ export class DockgeServer {
                 this.sendStackList(true);
             });
 
+            checkVersion.startInterval();
         });
 
         gracefulShutdown(this.httpServer, {

frontend/src/lang/en.json

@@ -98,5 +98,6 @@
     "reconnecting...": "Reconnecting…",
     "connecting...": "Connecting to the socket server…",
     "url": "URL | URLs",
-    "extra": "Extra"
+    "extra": "Extra",
+    "newUpdate": "New Update"
 }

frontend/src/layouts/Layout.vue

@@ -16,8 +16,8 @@
                 <span class="fs-4 title">Dockge</span>
             </router-link>
 
-            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/dockge/releases" class="btn btn-info me-3">
-                <font-awesome-icon icon="arrow-alt-circle-up" /> {{ $t("New Update") }}
+            <a v-if="hasNewVersion" target="_blank" href="https://github.com/louislam/dockge/releases" class="btn btn-warning me-3">
+                <font-awesome-icon icon="arrow-alt-circle-up" /> {{ $t("newUpdate") }}
             </a>
 
             <ul class="nav nav-pills">

frontend/src/pages/Compose.vue

@@ -374,6 +374,17 @@ export default {
             },
             deep: true,
         },
+
+        "stack.composeENV": {
+            handler() {
+                if (this.editorFocus) {
+                    console.debug("env code changed");
+                    this.yamlCodeChange();
+                }
+            },
+            deep: true,
+        },
+
         jsonConfig: {
             handler() {
                 if (!this.editorFocus) {