From e216de0e63266c215a1f45aa58ad654dacc33531 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 12 Sep 2021 15:59:59 +0100
Subject: [PATCH] :zap: Show error log
---
src/components/Configuration/AppInfoModal.vue | 109 ++++++++++--------
1 file changed, 59 insertions(+), 50 deletions(-)
diff --git a/src/components/Configuration/AppInfoModal.vue b/src/components/Configuration/AppInfoModal.vue
index 8fc237eb..7a5cd265 100644
--- a/src/components/Configuration/AppInfoModal.vue
+++ b/src/components/Configuration/AppInfoModal.vue
@@ -1,26 +1,29 @@
<template>
- <modal :name="modalName" :resizable="true" width="40%" height="60%" classes="dashy-modal">
+ <modal :name="modalName" :resizable="true" width="60%" height="60%" classes="dashy-modal">
<div class="about-modal">
- <router-link to="/about">
- <h2>Dashy</h2>
- </router-link>
- <AppVersion />
+ <router-link to="/about" class="title"><h2>App Info</h2></router-link>
+ <!-- App Version -->
+ <h3>Version</h3>
+ <AppVersion class="app-version" />
+ <!-- Error Log -->
+ <h3>Error Log</h3>
+ <pre v-if="errorLog" class="logs"><code>{{ errorLog }}</code></pre>
+ <p v-else>No recent errors detected :)</p>
+ <!-- Service Worker Status -->
<h3>Service Worker Status</h3>
- <code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code>
- <br>
+ <pre class="logs"><code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code></pre>
+ <!-- Config Validation Status -->
<h3>Config Validation Status</h3>
- <code>{{getIsConfigValidStatus()}}</code>
- <br>
+ <pre class="logs"><code>{{getIsConfigValidStatus()}}</code></pre>
+ <hr />
+ <!-- Help Links -->
<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>
+ <li><a href="https://github.com/Lissy93/dashy/discussions">Get Support</a></li>
+ <li><a href="https://github.com/Lissy93/dashy/issues/new/choose">Report a Bug</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>
+ <span class="small-note">Please include the following info in your bug report: </span>
+ <a class="info" @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>
@@ -28,13 +31,16 @@
<code><b>Is Mobile?</b> {{systemInfo.isMobile ? 'Yes' : 'No'}}</code><br>
<code><b>OS:</b> {{systemInfo.os}}</code><br>
</div>
+ <!-- About App -->
<h3>About</h3>
<p class="about-text">
- Documentation and Source Code available on
- <a href="https://github.com/lissy93/dashy">GitHub</a>
+ Source: <a href="https://github.com/lissy93/dashy">github.com/lissy93/dashy</a><br>
+ Documentation: <a href="https://dashy.to/docs">dashy.to/docs</a>
</p>
+ <!-- License -->
<h3>License</h3>
- <code>Licensed under MIT X11. Copyright © 2021</code>
+ <p>Licensed under MIT X11. Copyright © 2021</p>
+ <br><br>
</div>
</modal>
</template>
@@ -53,6 +59,7 @@ export default {
modalName: modalNames.ABOUT_APP,
appVersion: process.env.VUE_APP_VERSION,
systemInfo: this.getSystemInfo(),
+ errorLog: this.getErrorLog(),
serviceWorkerInfo: 'Checking...',
showInfo: false,
};
@@ -63,6 +70,9 @@ export default {
}, 100);
},
methods: {
+ getErrorLog() {
+ return sessionStorage.getItem(sessionStorageKeys.ERROR_LOG) || '';
+ },
getIsConfigValidStatus() {
const isValidVar = process.env.VUE_APP_CONFIG_VALID;
if (isValidVar === undefined) return 'Config validation status is missing';
@@ -123,49 +133,30 @@ 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;
+ overflow-y: auto;
+ padding: 0 1rem;
height: 100%;
- hr {
- border-color: var(--about-page-accent);
+ p, ul li, a {
+ font-size: 1rem;
}
- h2 {
+
+ a.title {
text-decoration: none;
- font-size: 1.8rem;
- text-align: center;
- margin: 0.2rem;
+ h2 {
+ font-size: 1.8rem;
+ text-align: center;
+ margin: 1rem;
+ }
}
h3 {
font-size: 1.3rem;
- margin: 0.75rem 0 0.2rem 0;
+ margin: 1rem 0 0.2rem 0;
color: var(--about-page-accent);
}
p.small-note {
- font-size: 0.9rem;
margin: 0.2rem 0;
}
p.about-text {
@@ -177,6 +168,10 @@ div.about-modal {
ul {
margin-top: 0.2rem;
}
+ a.info {
+ text-decoration: underline;
+ margin-left: 0.2rem;
+ }
.system-info {
font-size: 0.8rem;
background: var(--black);
@@ -191,6 +186,20 @@ div.about-modal {
text-decoration: underline;
}
}
+ .app-version {
+ text-align: left;
+ }
+ pre.logs {
+ max-height: 200px;
+ overflow-y: auto;
+ padding: 1rem;
+ font-size: 0.75rem;
+ border-radius: var(--curve-factor-small);
+ text-align: left;
+ color: var(--white);
+ background: var(--black);
+ white-space: pre-wrap;
+ }
}
</style>