⚡ Show error log

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">
+      <router-link to="/about" class="title"><h2>App Info</h2></router-link>
-      <h2>Dashy</h2>
+      <!-- App Version -->
-      </router-link>
+      <h3>Version</h3>
-      <AppVersion />
+      <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>
+      <pre class="logs"><code v-html="serviceWorkerInfo">{{ serviceWorkerInfo }}</code></pre>
-      <br>
+      <!-- Config Validation Status -->
       <h3>Config Validation Status</h3>
-      <code>{{getIsConfigValidStatus()}}</code>
+      <pre class="logs"><code>{{getIsConfigValidStatus()}}</code></pre>
-      <br>
+      <hr />
+      <!-- Help Links -->
       <h3>Help & Support</h3>
       <ul>
-        <li><a href="https://git.io/JnqPR">Report a Bug</a></li>
+        <li><a href="https://github.com/Lissy93/dashy/discussions">Get Support</a></li>
-        <li><a href="https://git.io/JnDxL">Request a Feature</a></li>
+        <li><a href="https://github.com/Lissy93/dashy/issues/new/choose">Report a Bug</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>
+      <span class="small-note">Please include the following info in your bug report: </span>
-      <a @click="showInfo = !showInfo">{{ showInfo ? 'Hide' : 'Show'}} system info</a>
+      <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
+        Source: <a href="https://github.com/lissy93/dashy">github.com/lissy93/dashy</a><br>
-        <a href="https://github.com/lissy93/dashy">GitHub</a>
+        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 {
+  p, ul li, a {
-    border-color: var(--about-page-accent);
+    font-size: 1rem;
   }
-  h2 {
+
+  a.title {
     text-decoration: none;
-    font-size: 1.8rem;
+    h2 {
-    text-align: center;
+      font-size: 1.8rem;
-    margin: 0.2rem;
+      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>