Skip to content

Commit

Permalink
🔀 Merge pull request #101 from Lissy93/FEATURE/update-checks
Browse files Browse the repository at this point in the history
[FEATURE] Shows update status next to version
  • Loading branch information
Lissy93 authored Jul 25, 2021
2 parents 92b52e8 + 994bea6 commit 0414463
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 5 deletions.
1 change: 1 addition & 0 deletions docs/configuring.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Dashy",
"version": "1.4.2",
"version": "1.4.3",
"license": "MIT",
"main": "server",
"scripts": {
Expand Down
8 changes: 7 additions & 1 deletion src/assets/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down Expand Up @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion src/components/Configuration/AppInfoModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
Expand Down
112 changes: 112 additions & 0 deletions src/components/Configuration/AppVersion.vue
Original file line number Diff line number Diff line change
@@ -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>
6 changes: 4 additions & 2 deletions src/components/Configuration/ConfigContainer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -102,6 +102,7 @@ export default {
jsonParser: JsonToYaml,
backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
appVersion: process.env.VUE_APP_VERSION,
latestVersion: '',
};
},
props: {
Expand All @@ -119,6 +120,7 @@ export default {
JsonEditor,
CustomCssEditor,
RebuildApp,
AppVersion,
DownloadIcon,
DeleteIcon,
EditIcon,
Expand Down

0 comments on commit 0414463

Please sign in to comment.