🔀 Merge pull request #101 from Lissy93/FEATURE/update-checks

[FEATURE] Shows update status next to version

docs/configuring.md

@@ -71,6 +71,7 @@ To disallow any changes from being written to disk via the UI config editor, set
 **`customCss`** | `string` | _Optional_ | Raw CSS that will be applied to the page. This can also be set from the UI. Please minify it first.
 **`hideComponents`** | `object` | _Optional_ | A list of key page components (header, footer, search, settings, etc) that are present by default, but can be removed using this option. See [`appConfig.hideComponents`](#appconfighideComponents-optional)
 **`allowConfigEdit`** | `boolean` | _Optional_ | Should prevent / allow the user to write configuration changes to the conf.yml from the UI. When set to `false`, the user can only apply changes locally using the config editor within the app, whereas if set to `true` then changes can be written to disk directly through the UI. Defaults to `true`. Note that if authentication is enabled, the user must be of type `admin` in order to apply changes globally.
+**`disableUpdateChecks`** | `boolean` | _Optional_ | If set to true, Dashy will not check for updates. Defaults to `false`.
 **`disableServiceWorker`** | `boolean` | _Optional_ | Service workers cache web applications to improve load times and offer basic offline functionality, and are enabled by default in Dashy. The service worker can sometimes cause older content to be cached, requiring the app to be hard-refreshed. If you do not want SW functionality, or are having issues with caching, set this property to `true` to disable all service workers.
 **`disableContextMenu`** | `boolean` | _Optional_ | If set to `true`, the custom right-click context menu will be disabled. Defaults to `false`.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "license": "MIT",
   "main": "server",
   "scripts": {

src/assets/locales/en.json

@@ -34,7 +34,6 @@
     "change-language-button": "Change App Language",
     "reset-settings-button": "Reset Local Settings",
     "app-info-button": "App Info",
-    "app-version-note": "Dashy version",
     "backup-note": "It is recommend to make a backup of your configuration before making changes.",
     "reset-config-msg-l1": "This will remove all user settings from local storage, but won't effect your 'conf.yml' file.",
     "reset-config-msg-l2": "You should first backup any changes you've made locally, if you want to use them in the future.",
@@ -62,6 +61,13 @@
     "item-size-large": "Large",
     "config-launcher-label": "Config"
   },
+  "updates": {
+    "app-version-note": "Dashy version",
+    "up-to-date": "Up-to-Date",
+    "out-of-date": "Update Available",
+    "unsupported-version-l1": "You are using an unsupported version of Dashy",
+    "unsupported-version-l2": "For the best experience, and recent security patches, please update to"
+  },
   "language-switcher": {
     "title": "Change Application Language",
     "dropdown-label": "Select a Language",

src/components/Configuration/AppInfoModal.vue

@@ -2,8 +2,9 @@
   <modal :name="modalName" :resizable="true" width="40%" height="60%" classes="dashy-modal">
     <div class="about-modal">
       <router-link to="/about">
-      <h2>Dashy V{{ appVersion }}</h2>
+      <h2>Dashy</h2>
       </router-link>
+      <AppVersion />
       <h3>Service Worker Status</h3>
       <code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code>
       <br>
@@ -39,10 +40,14 @@
 </template>
 
 <script>
+import AppVersion from '@/components/Configuration/AppVersion';
 import { modalNames, sessionStorageKeys } from '@/utils/defaults';
 
 export default {
   name: 'AppInfoModal',
+  components: {
+    AppVersion,
+  },
   data() {
     return {
       modalName: modalNames.ABOUT_APP,

src/components/Configuration/AppVersion.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="app-version">
+    <!-- Current Version -->
+    <p>
+      {{ $t('updates.app-version-note') }} {{ appVersion }}
+    </p>
+    <div v-if="checksEnabled">
+      <!-- Results haven't come in yet, either still checking, or error -->
+      <p v-if="!finished">
+        {{ error ? 'Error checking for updates.' : 'Chcekcing for Updates...' }}
+      </p>
+      <!-- App is up-to-date -->
+      <p v-if="finished && isUpToDate" class="up-to-date">
+        ✅ {{ $t('updates.up-to-date') }}
+      </p>
+      <!-- An update is available, but not too out-of-date -->
+      <p  v-else-if="finished && !veryOutOfDate" class="update-availible">
+        ⚠️{{ $t('updates.out-of-date') }}: <b>{{ latestVersion }}</b>
+      </p>
+      <!-- Update available, app is VERY out of date, show some additional info -->
+      <p  v-else-if="finished && veryOutOfDate" class="big-update-availible">
+        ❗ {{ $t('updates.out-of-date') }}: <b>{{ latestVersion }}</b>
+        <span class="please-update">
+          {{ $t('updates.unsupported-version-l1') }}.<br>
+          {{ $t('updates.unsupported-version-2') }} {{ latestVersion }}
+        </span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'AppInfoModal',
+  inject: ['config'],
+  data() {
+    return {
+      appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
+      latestVersion: '', // Will store latest version, when request returns
+      checksEnabled: true, // Should we check for updates
+      isUpToDate: true, // Is current version === latest version
+      veryOutOfDate: false, // If the app is more than 5 versions out of date
+      finished: false, // Set to true when request is done
+      error: false, // Set to true if checkig fails
+    };
+  },
+  mounted() {
+    const appConfig = this.config.appConfig || {};
+    if (!this.appVersion || (appConfig && appConfig.disableUpdateChecks)) {
+      // Either current version isn't found, or user disabled checks
+      this.checksEnabled = false;
+    } else {
+      this.checkVersion(); // Trigger the check
+    }
+  },
+  methods: {
+    /* Gets the apps latest version from Dashy's git repo */
+    checkVersion() {
+      const packageUrl = 'https://raw.githubusercontent.com/Lissy93/dashy/master/package.json';
+      axios.get(packageUrl).then((response) => {
+        if (response && response.data && response.data.version) {
+          this.latestVersion = response.data.version;
+          this.isUpToDate = this.checkIfUpToDate(this.appVersion, this.latestVersion);
+          this.finished = true;
+        }
+      }).catch(() => {
+        this.error = true;
+      });
+    },
+    /* Compares the current version, with the package.json version */
+    checkIfUpToDate(currentVersion, latestVersion) {
+      const parse = (version) => parseInt(version.replaceAll('.', ''), 10);
+      const difference = parse(latestVersion) - parse(currentVersion);
+      if (difference > 5) this.veryOutOfDate = true;
+      return difference <= 0;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+div.app-version {
+  color: var(--settings-text-color);
+  text-align: center;
+  p {
+    margin: 0.5rem auto;
+    color: var(--transparent-white-50);
+    cursor: default;
+    &.up-to-date {
+      color: var(--success);
+      font-weight: bold;
+      opacity: 0.8;
+    }
+    &.update-availible {
+      color: var(--warning);
+      opacity: 0.8;
+    }
+    &.big-update-availible {
+      color: var(--danger);
+      .please-update {
+        font-size: 0.8rem;
+        color: var(--danger);
+        display: block;
+      }
+    }
+  }
+}
+
+</style>

src/components/Configuration/ConfigContainer.vue

@@ -40,8 +40,8 @@
         <p class="small-screen-note" style="display: none;">
             You are using a very small screen, and some screens in this menu may not be optimal
         </p>
-        <p class="app-version">{{ $t('config.app-version-note') }} {{ appVersion }}</p>
         <p class="language">{{ getLanguage() }}</p>
+        <AppVersion />
         <div class="config-note">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
@@ -74,7 +74,6 @@
 </template>
 
 <script>
-
 import hljs from 'highlight.js/lib/core';
 import yaml from 'highlight.js/lib/languages/yaml';
 import 'highlight.js/styles/mono-blue.css';
@@ -85,6 +84,7 @@ import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
 import RebuildApp from '@/components/Configuration/RebuildApp';
+import AppVersion from '@/components/Configuration/AppVersion';
 
 import DownloadIcon from '@/assets/interface-icons/config-download-file.svg';
 import DeleteIcon from '@/assets/interface-icons/config-delete-local.svg';
@@ -102,6 +102,7 @@ export default {
       jsonParser: JsonToYaml,
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
       appVersion: process.env.VUE_APP_VERSION,
+      latestVersion: '',
     };
   },
   props: {
@@ -119,6 +120,7 @@ export default {
     JsonEditor,
     CustomCssEditor,
     RebuildApp,
+    AppVersion,
     DownloadIcon,
     DeleteIcon,
     EditIcon,