mirror of https://github.com/Lissy93/dashy.git
✨ Adds an App Info section, to help users raise bug for current version
This commit is contained in:
Alicia Sykes
parent
d565a1143c
commit
0b8b1fcf8a
|
|
@ -0,0 +1 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="info" class="svg-inline--fa fa-info fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224 352.589V224c0-16.475-6.258-31.517-16.521-42.872C225.905 161.14 236 135.346 236 108 236 48.313 187.697 0 128 0 68.313 0 20 48.303 20 108c0 20.882 5.886 40.859 16.874 58.037C15.107 176.264 0 198.401 0 224v39.314c0 23.641 12.884 44.329 32 55.411v33.864C12.884 363.671 0 384.359 0 408v40c0 35.29 28.71 64 64 64h128c35.29 0 64-28.71 64-64v-40c0-23.641-12.884-44.329-32-55.411zM128 48c33.137 0 60 26.863 60 60s-26.863 60-60 60-60-26.863-60-60 26.863-60 60-60zm80 400c0 8.836-7.164 16-16 16H64c-8.836 0-16-7.164-16-16v-40c0-8.836 7.164-16 16-16h16V279.314H64c-8.836 0-16-7.164-16-16V224c0-8.836 7.164-16 16-16h96c8.836 0 16 7.164 16 16v168h16c8.836 0 16 7.164 16 16v40z"></path></svg>
|
||||
|
After Width: | Height: | Size: 894 B |
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<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>
|
||||
</router-link>
|
||||
<h3>Service Worker Status</h3>
|
||||
<code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code>
|
||||
<br>
|
||||
<h3>Config Validation Status</h3>
|
||||
<code>{{getIsConfigValidStatus()}}</code>
|
||||
<br>
|
||||
<h3>Help & Support</h3>
|
||||
<ul>
|
||||
<li><a href="https://git.io/JnqPR">Report a Bug</a></li>
|
||||
<li><a href="https://git.io/JnDxL">Request a Feature</a></li>
|
||||
<li><a href="https://git.io/JnDxs">Ask a Question</a></li>
|
||||
<li><a href="https://git.io/JnDxn">Leave Feedback</a></li>
|
||||
<li><a href="https://github.com/Lissy93/dashy/discussions">Join the Discussion</a></li>
|
||||
</ul>
|
||||
<p class="small-note">Please include the following info in your bug report:</p>
|
||||
<a @click="showInfo = !showInfo">{{ showInfo ? 'Hide' : 'Show'}} system info</a>
|
||||
<div class="system-info" v-if="showInfo">
|
||||
<h4>System Info</h4>
|
||||
<code><b>Dashy Version:</b> V {{appVersion}}</code><br>
|
||||
<code><b>Browser:</b> {{systemInfo.browser}}</code><br>
|
||||
<code><b>Is Mobile?</b> {{systemInfo.isMobile ? 'Yes' : 'No'}}</code><br>
|
||||
<code><b>OS:</b> {{systemInfo.os}}</code><br>
|
||||
</div>
|
||||
<h3>About</h3>
|
||||
<p class="about-text">
|
||||
Documentation and Source Code available on
|
||||
<a href="https://github.com/lissy93/dashy">GitHub</a>
|
||||
</p>
|
||||
<h3>License</h3>
|
||||
<code>Licensed under MIT X11. Copyright © 2021</code>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { modalNames, sessionStorageKeys } from '@/utils/defaults';
|
||||
|
||||
export default {
|
||||
name: 'AppInfoModal',
|
||||
data() {
|
||||
return {
|
||||
modalName: modalNames.ABOUT_APP,
|
||||
appVersion: process.env.VUE_APP_VERSION,
|
||||
systemInfo: this.getSystemInfo(),
|
||||
serviceWorkerInfo: 'Checking...',
|
||||
showInfo: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.serviceWorkerInfo = this.getSwStatus();
|
||||
}, 100);
|
||||
},
|
||||
methods: {
|
||||
getIsConfigValidStatus() {
|
||||
const isValidVar = process.env.VUE_APP_CONFIG_VALID;
|
||||
if (isValidVar === undefined) return 'Config validation status is missing';
|
||||
return `Config is ${isValidVar ? 'Valid' : 'Invalid'}`;
|
||||
},
|
||||
getSwStatus() {
|
||||
const sessionData = sessionStorage[sessionStorageKeys.SW_STATUS];
|
||||
const swInfo = sessionData ? JSON.parse(sessionData) : {};
|
||||
let swStatus = '';
|
||||
if (swInfo.registered) swStatus += 'Service worker registered<br>';
|
||||
if (swInfo.ready) swStatus += 'Dashy is being served from service worker<br>';
|
||||
if (swInfo.cached) swStatus += 'Content has been cached for offline use<br>';
|
||||
if (swInfo.updateFound) swStatus += 'New content is downloading<br>';
|
||||
if (swInfo.updated) swStatus += 'New content is available; please refresh<br>';
|
||||
if (swInfo.offline) swStatus += 'No internet connection found. App is running in offline mode<br>';
|
||||
if (swInfo.error) swStatus += 'Error during service worker registration<br>';
|
||||
if (swInfo.devMode) swStatus += 'App running in dev mode, no need for service worker<br>';
|
||||
if (swStatus.length === 0) swStatus += 'No service worker info available';
|
||||
return swStatus;
|
||||
},
|
||||
getSystemInfo() {
|
||||
const { userAgent } = navigator;
|
||||
|
||||
// Find Operating System
|
||||
let os = 'Unknown';
|
||||
if (userAgent.indexOf('Win') !== -1) os = 'Windows';
|
||||
else if (userAgent.indexOf('Mac') !== -1) os = 'MacOS';
|
||||
else if (userAgent.indexOf('Android') !== -1) os = 'Android';
|
||||
else if (userAgent.indexOf('iPhone') !== -1) os = 'iOS';
|
||||
else if (userAgent.indexOf('Linux') !== -1) os = 'Linux';
|
||||
else if (userAgent.indexOf('X11') !== -1) os = 'UNIX';
|
||||
|
||||
// Find Browser
|
||||
let browser = 'Unknown';
|
||||
if (userAgent.indexOf('Opera') !== -1) browser = 'Opera';
|
||||
else if (userAgent.indexOf('Chrome') !== -1) browser = 'Chrome';
|
||||
else if (userAgent.indexOf('Safari') !== -1) browser = 'Safari';
|
||||
else if (userAgent.indexOf('Firefox') !== -1) browser = 'Firefox';
|
||||
else if (userAgent.indexOf('MSIE') !== -1) browser = 'IE';
|
||||
else browser = 'Unknown';
|
||||
|
||||
const isMobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;
|
||||
|
||||
return {
|
||||
os,
|
||||
browser,
|
||||
userAgent,
|
||||
isMobile,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
span.options-label {
|
||||
color: var(--settings-text-color);
|
||||
}
|
||||
|
||||
.display-options {
|
||||
color: var(--settings-text-color);
|
||||
svg {
|
||||
path {
|
||||
fill: var(--settings-text-color);
|
||||
}
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
background: var(--background);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: var(--curve-factor);
|
||||
cursor: pointer;
|
||||
&:hover, &.selected {
|
||||
background: var(--settings-text-color);
|
||||
path { fill: var(--background); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.about-modal {
|
||||
background: var(--about-page-background);
|
||||
color: var(--about-page-color);
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
hr {
|
||||
border-color: var(--about-page-accent);
|
||||
}
|
||||
h2 {
|
||||
text-decoration: none;
|
||||
font-size: 1.8rem;
|
||||
text-align: center;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
margin: 0.75rem 0 0.2rem 0;
|
||||
color: var(--about-page-accent);
|
||||
}
|
||||
p.small-note {
|
||||
font-size: 0.9rem;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
p.about-text {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
a {
|
||||
color: var(--about-page-accent);
|
||||
}
|
||||
ul {
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
.system-info {
|
||||
font-size: 0.8rem;
|
||||
background: var(--black);
|
||||
color: var(--white);
|
||||
border-radius: var(--curve-factor-small);
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--white);
|
||||
width: fit-content;
|
||||
h4 {
|
||||
font-size: 0.8rem;
|
||||
margin: 0 0 0.2rem 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -29,9 +29,14 @@
|
|||
<DeleteIcon class="button-icon"/>
|
||||
Reset Local Settings
|
||||
</button>
|
||||
<button class="config-button center" @click="openAboutModal()">
|
||||
<IconAbout class="button-icon" />
|
||||
App Info
|
||||
</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">Dashy version {{ appVersion }}</p>
|
||||
<div class="config-note">
|
||||
<span>
|
||||
It is recommend to make a backup of your conf.yml file, before making any changes.
|
||||
|
|
@ -79,6 +84,7 @@ import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
|
|||
import CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg';
|
||||
import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
|
||||
import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
|
||||
import IconAbout from '@/assets/interface-icons/application-about.svg';
|
||||
|
||||
export default {
|
||||
name: 'ConfigContainer',
|
||||
|
|
@ -86,6 +92,7 @@ export default {
|
|||
return {
|
||||
jsonParser: JsonToYaml,
|
||||
backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
|
||||
appVersion: process.env.VUE_APP_VERSION,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
|
|
@ -109,6 +116,7 @@ export default {
|
|||
CloudIcon,
|
||||
CustomCssIcon,
|
||||
RebuildIcon,
|
||||
IconAbout,
|
||||
},
|
||||
methods: {
|
||||
/* Seletcs the edit tab of the tab view */
|
||||
|
|
@ -127,6 +135,9 @@ export default {
|
|||
openRebuildAppModal() {
|
||||
this.$modal.show(modalNames.REBUILD_APP);
|
||||
},
|
||||
openAboutModal() {
|
||||
this.$modal.show(modalNames.ABOUT_APP);
|
||||
},
|
||||
openCloudSync() {
|
||||
this.$modal.show(modalNames.CLOUD_BACKUP);
|
||||
},
|
||||
|
|
@ -210,6 +221,12 @@ a.config-button, button.config-button {
|
|||
}
|
||||
}
|
||||
|
||||
p.app-version {
|
||||
margin: 0.5rem auto;
|
||||
font-size: 1rem;
|
||||
color: var(--transparent-white-50);
|
||||
}
|
||||
|
||||
div.code-container {
|
||||
background: var(--config-code-background);
|
||||
#conf-yaml span {
|
||||
|
|
@ -275,7 +292,7 @@ a.hyperlink-wrapper {
|
|||
background: var(--config-settings-background);
|
||||
height: calc(100% - 2rem);
|
||||
h2 {
|
||||
margin: 1rem auto;
|
||||
margin: 0 auto 1rem auto;
|
||||
color: var(--config-settings-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="display-options">
|
||||
<IconLogout @click="logout()" v-tooltip="tooltip('Sign Out')"
|
||||
class="layout-icon" tabindex="-2" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { logout as registerLogout } from '@/utils/Auth';
|
||||
import IconLogout from '@/assets/interface-icons/user-logout.svg';
|
||||
|
||||
export default {
|
||||
name: 'AppButtons',
|
||||
components: {
|
||||
IconLogout,
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
registerLogout();
|
||||
this.$toasted.show('Logged Out');
|
||||
setTimeout(() => {
|
||||
location.reload(true); // eslint-disable-line no-restricted-globals
|
||||
}, 500);
|
||||
},
|
||||
tooltip(content) {
|
||||
return { content, trigger: 'hover focus', delay: 250 };
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
span.options-label {
|
||||
color: var(--settings-text-color);
|
||||
}
|
||||
|
||||
.display-options {
|
||||
color: var(--settings-text-color);
|
||||
svg {
|
||||
path {
|
||||
fill: var(--settings-text-color);
|
||||
}
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0.2rem;
|
||||
padding: 0.2rem;
|
||||
text-align: center;
|
||||
background: var(--background);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: var(--curve-factor);
|
||||
cursor: pointer;
|
||||
&:hover, &.selected {
|
||||
background: var(--settings-text-color);
|
||||
path { fill: var(--background); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -13,12 +13,7 @@
|
|||
<ItemSizeSelector :iconSize="iconSize" @iconSizeUpdated="updateIconSize" />
|
||||
<ConfigLauncher :sections="sections" :pageInfo="pageInfo" :appConfig="appConfig"
|
||||
@modalChanged="modalChanged" />
|
||||
<IconLogout
|
||||
v-if="isUserLoggedIn()"
|
||||
@click="logout()"
|
||||
v-tooltip="'Logout'"
|
||||
class="logout-icon"
|
||||
/>
|
||||
<AppButtons v-if="isUserLoggedIn()" />
|
||||
</div>
|
||||
<div :class="`show-hide-container ${settingsVisible? 'hide-btn' : 'show-btn'}`">
|
||||
<button @click="toggleSettingsVisibility()"
|
||||
|
|
@ -29,6 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<KeyboardShortcutInfo />
|
||||
<AppInfoModal />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -39,9 +35,10 @@ import ConfigLauncher from '@/components/Settings/ConfigLauncher';
|
|||
import ThemeSelector from '@/components/Settings/ThemeSelector';
|
||||
import LayoutSelector from '@/components/Settings/LayoutSelector';
|
||||
import ItemSizeSelector from '@/components/Settings/ItemSizeSelector';
|
||||
import AppButtons from '@/components/Settings/AppButtons';
|
||||
import KeyboardShortcutInfo from '@/components/Settings/KeyboardShortcutInfo';
|
||||
import AppInfoModal from '@/components/Configuration/AppInfoModal';
|
||||
import { logout as registerLogout } from '@/utils/Auth';
|
||||
import IconLogout from '@/assets/interface-icons/user-logout.svg';
|
||||
import IconOpen from '@/assets/interface-icons/config-open-settings.svg';
|
||||
import IconClose from '@/assets/interface-icons/config-close.svg';
|
||||
|
||||
|
|
@ -62,8 +59,9 @@ export default {
|
|||
ThemeSelector,
|
||||
LayoutSelector,
|
||||
ItemSizeSelector,
|
||||
AppButtons,
|
||||
KeyboardShortcutInfo,
|
||||
IconLogout,
|
||||
AppInfoModal,
|
||||
IconOpen,
|
||||
IconClose,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import Toasted from 'vue-toasted'; // Toast component, used to show confirmation
|
|||
import { toastedOptions } from './utils/defaults';
|
||||
import Dashy from './App.vue';
|
||||
import router from './router';
|
||||
import './registerServiceWorker';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
Vue.use(VTooltip);
|
||||
Vue.use(VModal);
|
||||
|
|
@ -20,6 +20,9 @@ Vue.component('v-select', VSelect);
|
|||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
// Register Service Worker
|
||||
registerServiceWorker();
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: (awesome) => awesome(Dashy),
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
--login-form-background: var(--background);
|
||||
--login-form-background-secondary: var(--background-darker);
|
||||
--about-page-color: var(--white);
|
||||
--about-page-background: #0b1021;
|
||||
--about-page-background: var(--background);
|
||||
--about-page-accent: var(--primary);
|
||||
--side-bar-background: var(--background-darker);
|
||||
--side-bar-background-lighter: var(--background);
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ html[data-theme='matrix'] {
|
|||
--curve-factor: 0px;
|
||||
--font-body: 'Cutive Mono', monospace;
|
||||
--font-headings: 'VT323', monospace;
|
||||
--about-page-background: var(--background);
|
||||
.prism-editor-wrapper.my-editor {
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
|
@ -179,6 +180,9 @@ html[data-theme='material-original'] {
|
|||
--status-check-tooltip-background: #f2f2f2;
|
||||
--status-check-tooltip-color: #01579b;
|
||||
--login-form-background: #fff;
|
||||
--about-page-accent: #000;
|
||||
--about-page-color: var(--background-darker);
|
||||
--about-page-background: var(--background);
|
||||
}
|
||||
|
||||
html[data-theme='material-dark-original'] {
|
||||
|
|
@ -254,6 +258,7 @@ html[data-theme='colorful'] {
|
|||
html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-theme='vaporware'] {
|
||||
--font-body: 'PTMono-Regular', 'Courier New', monospace;
|
||||
--font-headings: 'PTMono-Regular', 'Courier New', monospace;
|
||||
|
||||
label.lbl-toggle h3 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
|
@ -289,6 +294,8 @@ html[data-theme='material'], html[data-theme='material-dark'] {
|
|||
--font-headings: 'Francois One', serif;
|
||||
--curve-factor: 4px;
|
||||
--curve-factor-navbar: 8px;
|
||||
--about-page-background: var(--background);
|
||||
--about-page-color: var(--primary);
|
||||
|
||||
.collapsable {
|
||||
margin: 0;
|
||||
|
|
@ -541,6 +548,8 @@ html[data-theme='minimal-light'] {
|
|||
--status-check-tooltip-background: #f2f2f2;
|
||||
--status-check-tooltip-color: #000;
|
||||
--login-form-color: #101931;
|
||||
--about-page-background: var(--background);
|
||||
--about-page-color: var(--background-darker);
|
||||
|
||||
section.filter-container {
|
||||
background: #fff;
|
||||
|
|
@ -572,6 +581,8 @@ html[data-theme='minimal-dark'] {
|
|||
--curve-factor-navbar: 8px;
|
||||
--item-group-heading-text-color: #fff;
|
||||
--item-group-heading-text-color-hover: #ffffffbf;
|
||||
--about-page-background: var(--background);
|
||||
--about-page-color: var(--primary);
|
||||
|
||||
label.lbl-toggle h3 {
|
||||
font-size: 1.8rem;
|
||||
|
|
|
|||
|
|
@ -38,13 +38,19 @@ const bigError = () => {
|
|||
return `\n${line}${msg}${line}\n`;
|
||||
};
|
||||
|
||||
const setIsValidVariable = (isValid) => {
|
||||
process.env.VUE_APP_CONFIG_VALID = isValid;
|
||||
};
|
||||
|
||||
/* Start the validation */
|
||||
const validate = (config) => {
|
||||
console.log('\nChecking config file against schema...');
|
||||
const valid = ajv.validate(schema, config);
|
||||
if (valid) {
|
||||
setIsValidVariable(true);
|
||||
console.log(successMsg());
|
||||
} else {
|
||||
setIsValidVariable(false);
|
||||
console.log(errorMsg(ajv.errors));
|
||||
}
|
||||
};
|
||||
|
|
@ -53,6 +59,7 @@ try {
|
|||
const config = yaml.load(fs.readFileSync('./public/conf.yml', 'utf8'));
|
||||
validate(config);
|
||||
} catch (e) {
|
||||
setIsValidVariable(false);
|
||||
console.log(bigError());
|
||||
console.log('Please ensure that your config file is present, '
|
||||
+ 'has the correct access rights and is parsable. '
|
||||
|
|
|
|||
|
|
@ -61,10 +61,14 @@ module.exports = {
|
|||
cookieKeys: {
|
||||
AUTH_TOKEN: 'authenticationToken',
|
||||
},
|
||||
sessionStorageKeys: {
|
||||
SW_STATUS: 'serviceWorkerStatus',
|
||||
},
|
||||
modalNames: {
|
||||
CONF_EDITOR: 'CONF_EDITOR',
|
||||
CLOUD_BACKUP: 'CLOUD_BACKUP',
|
||||
REBUILD_APP: 'REBUILD_APP',
|
||||
ABOUT_APP: 'ABOUT_APP',
|
||||
},
|
||||
topLevelConfKeys: {
|
||||
PAGE_INFO: 'pageInfo',
|
||||
|
|
|
|||
Loading…
Reference in New Issue