Merge branch 'master' of github.com:Lissy93/dashy into FEATURE/minimal-view

2021-08-06 20:48:59 +01:00
parent 43c94b76b3 9e3d728768
commit 992a18cf1b
103 changed files with 3706 additions and 2372 deletions
--- a/src/components/Configuration/AppInfoModal.vue
+++ b/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,
--- a/src/components/Configuration/AppVersion.vue
+++ b/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>
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -2,46 +2,48 @@
  <Tabs :navAuto="true" name="Add Item" ref="tabView">
    <TabItem :name="$t('config.main-tab')" class="main-tab">
      <div class="main-options-container">
-        <h2>Configuration Options</h2>
-        <a class="hyperlink-wrapper"  @click="downloadConfigFile('conf.yml', yaml)">
-          <button class="config-button center">
-            <DownloadIcon class="button-icon"/>
-            {{ $t('config.download-config-button') }}
+        <div class="config-buttons">
+          <h2>Configuration Options</h2>
+          <a class="hyperlink-wrapper"  @click="downloadConfigFile('conf.yml', yaml)">
+            <button class="config-button center">
+              <DownloadIcon class="button-icon"/>
+              {{ $t('config.download-config-button') }}
+            </button>
+          </a>
+          <button class="config-button center" @click="() => navigateToTab(2)">
+            <EditIcon class="button-icon"/>
+            {{ $t('config.edit-config-button') }}
          </button>
-        </a>
-        <button class="config-button center" @click="() => navigateToTab(2)">
-          <EditIcon class="button-icon"/>
-          {{ $t('config.edit-config-button') }}
-        </button>
-        <button class="config-button center" @click="() => navigateToTab(3)">
-          <CustomCssIcon class="button-icon"/>
-          {{ $t('config.edit-css-button') }}
-        </button>
-        <button class="config-button center" @click="openCloudSync()">
-          <CloudIcon class="button-icon"/>
-          {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
-        </button>
-        <button class="config-button center" @click="openLanguageSwitchModal()">
-          <LanguageIcon class="button-icon"/>
-          {{ $t('config.change-language-button') }}
-        </button>
-        <button class="config-button center" @click="openRebuildAppModal()">
-          <RebuildIcon class="button-icon"/>
-          {{ $t('config.rebuild-app-button') }}
-        </button>
-        <button class="config-button center" @click="resetLocalSettings()">
-          <DeleteIcon class="button-icon"/>
-          {{ $t('config.reset-settings-button') }}
-        </button>
-        <button class="config-button center" @click="openAboutModal()">
-          <IconAbout class="button-icon" />
-          {{ $t('config.app-info-button') }}
-        </button>
-        <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>
+          <button class="config-button center" @click="() => navigateToTab(4)">
+            <CustomCssIcon class="button-icon"/>
+            {{ $t('config.edit-css-button') }}
+          </button>
+          <button class="config-button center" @click="() => navigateToTab(3)">
+            <CloudIcon class="button-icon"/>
+            {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
+          </button>
+          <button class="config-button center" @click="openLanguageSwitchModal()">
+            <LanguageIcon class="button-icon"/>
+            {{ $t('config.change-language-button') }}
+          </button>
+          <button class="config-button center" @click="openRebuildAppModal()">
+            <RebuildIcon class="button-icon"/>
+            {{ $t('config.rebuild-app-button') }}
+          </button>
+          <button class="config-button center" @click="resetLocalSettings()">
+            <DeleteIcon class="button-icon"/>
+            {{ $t('config.reset-settings-button') }}
+          </button>
+          <button class="config-button center" @click="openAboutModal()">
+            <IconAbout class="button-icon" />
+            {{ $t('config.app-info-button') }}
+          </button>
+          <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="language">{{ getLanguage() }}</p>
+          <AppVersion />
+        </div>
        <div class="config-note">
          <span>{{ $t('config.backup-note') }}</span>
        </div>
@@ -67,6 +69,9 @@
    <TabItem :name="$t('config.edit-config-tab')">
      <JsonEditor :config="config" />
    </TabItem>
+    <TabItem :name="$t('cloud-sync.title')">
+      <CloudBackupRestore :config="config" />
+    </TabItem>
    <TabItem :name="$t('config.custom-css-tab')">
      <CustomCssEditor :config="config" />
    </TabItem>
@@ -74,7 +79,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';
@@ -84,7 +88,9 @@ import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
+import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
 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 +108,7 @@ export default {
      jsonParser: JsonToYaml,
      backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
      appVersion: process.env.VUE_APP_VERSION,
+      latestVersion: '',
    };
  },
  props: {
@@ -118,7 +125,9 @@ export default {
  components: {
    JsonEditor,
    CustomCssEditor,
+    CloudBackupRestore,
    RebuildApp,
+    AppVersion,
    DownloadIcon,
    DeleteIcon,
    EditIcon,
@@ -140,9 +149,6 @@ export default {
    openAboutModal() {
      this.$modal.show(modalNames.ABOUT_APP);
    },
-    openCloudSync() {
-      this.$modal.show(modalNames.CLOUD_BACKUP);
-    },
    openLanguageSwitchModal() {
      this.$modal.show(modalNames.LANG_SWITCHER);
    },
@@ -213,7 +219,8 @@ a.config-button, button.config-button {
  text-decoration: none;
  cursor: pointer;
  margin: 0.5rem auto;
-  width: 18rem;
+  min-width: 18rem;
+  width: 100%;
  svg.button-icon {
    path {
      fill: var(--config-settings-color);
@@ -232,6 +239,13 @@ a.config-button, button.config-button {
  }
 }

+a.hyperlink-wrapper {
+  margin: 0 auto;
+  text-decoration: none;
+  min-width: 18rem;
+  width: 100%;
+}
+
 p.app-version, p.language {
  margin: 0.5rem auto;
  font-size: 1rem;
@@ -292,17 +306,21 @@ div.code-container {
  }
 }

-a.hyperlink-wrapper {
-  margin: 0 auto;
-  text-decoration: none;
-}
-
 .main-options-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.config-buttons {
  display: flex;
  flex-direction: column;
-  padding-top: 2rem;
  background: var(--config-settings-background);
-  height: calc(100% - 2rem);
+  height: calc(100% - 4rem);
+  width: fit-content;
+  margin: 0 auto;
+  padding: 2rem 1rem;
  h2 {
    margin: 0 auto 1rem auto;
    color: var(--config-settings-color);
@@ -311,7 +329,6 @@ a.hyperlink-wrapper {

 .config-note {
  width: 80%;
-  position: absolute;
  bottom: 1rem;
  left: 10%;
  margin: 0.5rem auto;
--- a/src/components/Configuration/JsonEditor.vue
+++ b/src/components/Configuration/JsonEditor.vue
@@ -146,6 +146,7 @@ export default {
        localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(data.pageInfo));
      }
      if (data.appConfig) {
+        data.appConfig.auth = this.config.appConfig.auth || [];
        localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(data.appConfig));
      }
      if (data.appConfig.theme) {
--- a/src/components/PageStrcture/Header.vue
+++ b/src/components/PageStrcture/Header.vue
@@ -1,6 +1,11 @@
 <template>
    <header>
-      <PageTitle v-if="titleVisible"  :title="pageInfo.title" :description="pageInfo.description" />
+      <PageTitle
+        v-if="titleVisible"
+        :title="pageInfo.title"
+        :description="pageInfo.description"
+        :logo="pageInfo.logo"
+      />
      <Nav v-if="navVisible" :links="pageInfo.navLinks" class="nav" />
    </header>
 </template>
--- a/src/components/PageStrcture/PageTitle.vue
+++ b/src/components/PageStrcture/PageTitle.vue
@@ -1,7 +1,10 @@
 <template>
  <router-link to="/" class="page-titles">
+    <img v-if="logo" :src="logo" class="site-logo" />
+    <div class="text">
    <h1>{{ title }}</h1>
    <span class="subtitle">{{ description }}</span>
+    </div>
  </router-link>
 </template>

@@ -11,6 +14,7 @@ export default {
  props: {
    title: String,
    description: String,
+    logo: String,
  },
 };
 </script>
@@ -20,7 +24,9 @@ export default {

 .page-titles {
  display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
  text-decoration: none;
  h1 {
    color: var(--heading-text-color);
@@ -33,7 +39,13 @@ export default {
    text-shadow: 1px 1px 2px #130f23;
    opacity: var(--dimming-factor);
  }
+  img.site-logo {
+    margin: 0.2rem 0.5rem 0.2rem 0;
+    max-width: 3.5rem;
+    height: fit-content;
+  }
  @include phone {
+    flex-direction: column;
    text-align: center;
    padding: 0.25rem 0;
  }
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -5,8 +5,6 @@
    <div class="config-buttons">
      <IconSpanner @click="showEditor()" tabindex="-2"
        v-tooltip="tooltip('Update configuration')" />
-      <IconCloud @click="showCloudModal()" tabindex="-2"
-        v-tooltip="tooltip('Backup / restore cloud config')" />
    </div>

    <!-- Modal containing all the configuration options -->
@@ -15,12 +13,6 @@
      <ConfigContainer :config="combineConfig()" />
    </modal>

-    <!-- Modal for cloud backup and restore options -->
-    <modal :name="modalNames.CLOUD_BACKUP" :resizable="true" width="65%" height="60%"
-      @closed="$emit('modalChanged', false)" classes="dashy-modal">
-      <CloudBackupRestore :config="combineConfig()" />
-    </modal>
-
    <!-- Modal for manually changing locale -->
    <modal :name="modalNames.LANG_SWITCHER" classes="dashy-modal"
      :resizable="true" width="30%" height="25%">
@@ -33,9 +25,7 @@
 <script>

 import IconSpanner from '@/assets/interface-icons/config-editor.svg';
-import IconCloud from '@/assets/interface-icons/cloud-backup-restore.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
-import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
 import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';

@@ -48,9 +38,7 @@ export default {
  },
  components: {
    IconSpanner,
-    IconCloud,
    ConfigContainer,
-    CloudBackupRestore,
    LanguageSwitcher,
  },
  props: {
@@ -64,10 +52,6 @@ export default {
      this.$modal.show(modalNames.CONF_EDITOR);
      this.$emit('modalChanged', true);
    },
-    showCloudModal: function show() {
-      this.$modal.show(modalNames.CLOUD_BACKUP);
-      this.$emit('modalChanged', true);
-    },
    combineConfig() {
      const conf = {};
      conf[topLevelConfKeys.APP_CONFIG] = this.appConfig;
--- a/src/components/Settings/ThemeSelector.vue
+++ b/src/components/Settings/ThemeSelector.vue
@@ -104,9 +104,9 @@ export default {
    /* Updates theme. Checks if the new theme is local or external,
    and calls appropirate updating function. Updates local storage */
    updateTheme(newTheme) {
-      if (newTheme === 'Deafault') {
+      if (newTheme === 'Default') {
        this.resetToDefault();
-        this.themeHelper.theme = 'Deafault';
+        this.themeHelper.theme = 'Default';
      } else if (this.isThemeLocal(newTheme)) {
        this.ApplyLocalTheme(newTheme);
      } else {
@@ -131,7 +131,8 @@ export default {
  div.vs__dropdown-toggle {
    border-color: var(--settings-text-color);
    border-radius: var(--curve-factor);
-    width: 8rem;
+    min-width: 8rem;
+    max-width: 16rem;
    height: 1.8rem;
    font-size: 0.85rem;
    cursor: pointer;