move /troubleshoot to /debug

Website/pages/debug.vue

@@ -1,71 +1,224 @@
 <template>
   <div>
-    <!--   Top Section // "Sections" Card   -->
-    <v-card max-width="600px" class="rounded-lg">
-      <v-card-title style="padding-bottom: 0">Debug Information</v-card-title>
-      <v-card-text style="text-align: left">
-        <!--   Gather Browser Information   -->
-        <span><b>Browser Information:</b></span
-        ><br />
-        <span>Browser: {{ device._parsed.name }}</span
-        ><br />
-        <span>Browser Vendor: {{ device._parsed.vendor }}</span
-        ><br />
-        <span>Version: {{ device._parsed.version }}</span
-        ><br />
-        <span>Operating System: {{ device._parsed.os }}</span
-        ><br />
-        <span>Operating System Version: {{ device._parsed.os_version }}</span
-        ><br />
-        <span>Device Type: {{ device._parsed.category }}</span
-        ><br /><br />
-        <!--   Gather Extension Information   -->
-        <span><b>Installed Extension Information:</b></span
-        ><br />
-        <span
-          >Extension Version:
-          <span id="extension-version">Waiting For Extension...</span></span
-        ><br />
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn @click="copy()">
-          <v-icon small style="margin-right: 0.25em">mdi-content-copy</v-icon
-          >Copy
-        </v-btn>
-      </v-card-actions>
-    </v-card>
+    <div id="extension-version" />
+
+    <v-stepper :value="progress" class="mt-12" outlined max-width="800px">
+      <v-stepper-header>
+        <v-stepper-step step="1" :complete="steps.one">Setup</v-stepper-step>
+        <v-divider />
+        <v-stepper-step step="2" :complete="steps.two">Extension Status</v-stepper-step>
+        <v-divider />
+        <v-stepper-step step="3" :complete="steps.three">Server Connection</v-stepper-step>
+        <v-divider />
+        <v-stepper-step step="4" :complete="steps.four">Browser Support</v-stepper-step>
+        <v-divider />
+        <v-stepper-step step="5" :complete="steps.five">Report</v-stepper-step>
+      </v-stepper-header>
+
+      <v-stepper-content step="1">
+        <h1>Getting Ready...</h1>
+        <v-progress-circular indeterminate size="50" width="5" color="primary" />
+      </v-stepper-content>
+
+      <v-stepper-content step="2">
+        <h1>Ensuring the Extension is Running...</h1>
+        <v-progress-circular indeterminate size="50" width="5" color="primary" />
+      </v-stepper-content>
+
+      <v-stepper-content step="3">
+        <h1>Testing Server Connection...</h1>
+        <v-progress-circular indeterminate size="50" width="5" color="primary" />
+      </v-stepper-content>
+
+      <v-stepper-content step="4">
+        <h1>Checking Browser Information...</h1>
+        <v-progress-circular indeterminate size="50" width="5" color="primary" />
+      </v-stepper-content>
+
+      <v-stepper-content step="5" style="text-align:left">
+        <div class="reportHeader">
+          <h1>Browser</h1>
+          <v-divider style="transform: translateY(1.5em)" />
+        </div>
+        <v-alert dense outlined v-text="notices.browser.text" :type="notices.browser.type" />
+        <span><b>BROWSER-</b> {{ userInformation.browser.name }}</span><br>
+        <span><b>VENDOR-</b> {{ userInformation.browser.vendor }} </span><br>
+        <span><b>VERSION-</b> {{ userInformation.browser.version }}</span><br>
+
+        <div class="reportHeader">
+          <h1>System</h1>
+          <v-divider style="transform: translateY(1.5em)" />
+        </div>
+        <v-alert dense outlined v-text="notices.system.text" :type="notices.system.type" />
+        <span><b>OS-</b> {{ userInformation.system.os }}</span><br>
+        <span><b>VERSION-</b> {{ userInformation.system.version }} </span><br>
+        <span><b>TYPE-</b> {{ userInformation.system.type }}</span><br>
+
+        <div class="reportHeader">
+          <h1>Extension</h1>
+          <v-divider style="transform: translateY(1.5em)" />
+        </div>
+        <v-alert dense outlined v-text="notices.extension.text" :type="notices.extension.type" />
+        <span><b>RUNNING-</b> {{ userInformation.extension.running ? "Yes" : "Failed to connect"}}</span><br>
+        <span><b>VERSION-</b> {{ userInformation.extension.version || "Failed to connect"}} </span><br>
+        <span><b>SERVER CONNECTION-</b>{{ userInformation.extension.serverConnection ? "Working" : "Failed to connect" }}</span><br>
+      </v-stepper-content>
+
+    </v-stepper>
   </div>
 </template>
 
+<style scoped>
+  .reportHeader {
+    display: flex;
+    margin-top: 1em;
+  }
+
+</style>
+
 <script>
-export default {
-  transition(to) {
-    return to.name == "debug" ? "swoop-in" : "swoop-out";
-  },
-  data() {
-    return {
-      device: this.$ua,
-    };
-  },
-
-  methods: {
-    copy() {
-      const toCopy = `\`\`\`
-Browser Information:
-Browser: ${this.device._parsed.name}
-Browser Vendor: ${this.device._parsed.vendor}
-Version: ${this.device._parsed.version}
-Operating System: ${this.device._parsed.os}
-Operating System Version: ${this.device._parsed.os_version}
-Device Type: ${this.device._parsed.category}
-
-Installed Extension Information:
-Extension Version: ${document.getElementById("extension-version").innerHTML}
-\`\`\``;
-
-      navigator.clipboard.writeText(toCopy);
+  export default {
+    data() {
+      return {
+        stepTime: 1000,
+        supportedBrowsers: ["Firefox", "Chrome", "Brave", "Edge", "Opera"],
+
+        progress: 1,
+        steps: {
+          one: false,
+          two: false,
+          three: false,
+          four: false,
+          five: false,
+        },
+
+        userInformation: {
+          browser: {
+            name: this.$ua._parsed.name,
+            vendor: this.$ua._parsed.vendor,
+            version: this.$ua._parsed.version
+          },
+          system: {
+            os: this.$ua._parsed.os,
+            version: this.$ua._parsed.os_version,
+            type: this.$ua._parsed.category
+          },
+          extension: {
+            running: null,
+            version: null,
+            serverConnection: null,
+            latestExtensionVersion: null,
+          },
+        },
+
+        notices: {
+          system: {
+            text: null,
+            type: null
+          },
+          browser: {
+            text: null,
+            type: null
+          },
+          extension: {
+            text: null,
+            type: null
+          }
+        }
+
+      }
     },
-  },
-};
+
+    mounted() {
+      //---   Wait   ---//
+      setTimeout(() => {
+
+        this.$axios.$get('https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json')
+        .then(res => {
+          console.log(res)
+        })
+
+
+        this.progress++;
+        this.steps.one = true;
+      }, this.stepTime);
+
+      //---   Check If Extension Is Running   ---//
+      setTimeout(() => {
+        this.progress++;
+        this.steps.two = true;
+      }, this.stepTime * 2);
+
+      //---   Check Server Connection ---//
+      setTimeout(() => {
+        this.$axios.$get('https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14')
+          .then(res => {
+            this.userInformation.extension.serverConnection = true;
+          })
+          .catch(err => {
+            this.userInformation.extension.serverConnection = false;
+          })
+
+
+        this.progress++;
+        this.steps.three = true;
+      }, this.stepTime * 3);
+
+      setTimeout(() => {
+        this.progress++;
+        this.steps.four = true;
+        //this.steps.five = true;
+
+
+
+
+        //---   Parse Extension Data   ---//
+        this.notices.extension.text = `Everything is running normally!`;
+        this.notices.extension.type = "success";
+
+        if (this.userInformation.extension.running != true) {
+          this.notices.extension.text = `The extension doesn't appear to be running!`;
+          this.notices.extension.type = "error";
+        }
+
+        if (this.userInformation.extension.serverConnection != true) {
+          this.notices.extension.text = `Failed to connect to the server!`;
+          this.notices.extension.type = "error";
+        }
+
+
+
+        //---   Parse System Compatibility   ---//
+        this.notices.system.text = `${this.userInformation.system.os} is supported!`;
+        this.notices.system.type = "success";
+
+        if (this.userInformation.system.type != "pc") {
+          this.notices.system.text = `"${this.userInformation.system.type}" may not be a supported device type!`;
+          this.notices.system.type = "warning";
+        }
+
+
+
+        //---   Parse Browser Compatibility   ---//
+        this.notices.browser.text = `${this.userInformation.browser.name} ${this.userInformation.browser.version} is supported!`;
+        this.notices.browser.type = "success";
+
+        if (!this.supportedBrowsers.includes(this.userInformation.browser.name)) {
+          this.notices.browser.text = `${this.userInformation.browser.name} is not a supported browser! You may continue to use the extension, but we don't provide official support.`;
+          this.notices.browser.type = "warning";
+        }
+
+
+
+
+
+      }, this.stepTime * 4);
+
+
+
+
+    }
+
+  }
+
 </script>

Website/pages/troubleshoot.vue

@@ -1,221 +0,0 @@
-<template>
-  <div>
-    <div id="extension-version" />
-
-    <v-stepper :value="progress" class="mt-12" outlined max-width="800px">
-      <v-stepper-header>
-        <v-stepper-step step="1" :complete="steps.one">Setup</v-stepper-step>
-        <v-divider />
-        <v-stepper-step step="2" :complete="steps.two">Extension Status</v-stepper-step>
-        <v-divider />
-        <v-stepper-step step="3" :complete="steps.three">Server Connection</v-stepper-step>
-        <v-divider />
-        <v-stepper-step step="4" :complete="steps.four">Browser Support</v-stepper-step>
-        <v-divider />
-        <v-stepper-step step="5" :complete="steps.five">Report</v-stepper-step>
-      </v-stepper-header>
-
-      <v-stepper-content step="1">
-        <h1>Getting Ready...</h1>
-        <v-progress-circular
-          indeterminate
-          size="50"
-          width="5"
-          color="primary"
-        />
-      </v-stepper-content>
-
-      <v-stepper-content step="2">
-        <h1>Ensuring the Extension is Running...</h1>
-        <v-progress-circular
-          indeterminate
-          size="50"
-          width="5"
-          color="primary"
-        />
-      </v-stepper-content>
-
-      <v-stepper-content step="3">
-        <h1>Testing Server Connection...</h1>
-        <v-progress-circular
-          indeterminate
-          size="50"
-          width="5"
-          color="primary"
-        />
-      </v-stepper-content>
-
-      <v-stepper-content step="4">
-        <h1>Checking Browser Information...</h1>
-        <v-progress-circular
-          indeterminate
-          size="50"
-          width="5"
-          color="primary"
-        />
-      </v-stepper-content>
-
-      <v-stepper-content step="5" style="text-align:left">
-        <div class="reportHeader"><h1>Browser</h1><v-divider style="transform: translateY(1.5em)" /></div>
-        <v-alert dense outlined v-text="notices.browser.text" :type="notices.browser.type" />
-        <span><b>BROWSER-</b> {{ userInformation.browser.name }}</span><br>
-        <span><b>VENDOR-</b> {{ userInformation.browser.vendor }} </span><br>
-        <span><b>VERSION-</b> {{ userInformation.browser.version }}</span><br>
-
-        <div class="reportHeader"><h1>System</h1><v-divider style="transform: translateY(1.5em)" /></div>
-        <v-alert dense outlined v-text="notices.system.text" :type="notices.system.type" />
-        <span><b>OS-</b> {{ userInformation.system.os }}</span><br>
-        <span><b>VERSION-</b> {{ userInformation.system.version }} </span><br>
-        <span><b>TYPE-</b> {{ userInformation.system.type }}</span><br>
-
-        <div class="reportHeader"><h1>Extension</h1><v-divider style="transform: translateY(1.5em)" /></div>
-        <v-alert dense outlined v-text="notices.extension.text" :type="notices.extension.type" />
-        <span><b>RUNNING-</b> {{ userInformation.extension.running ? "Yes" : "Failed to connect"}}</span><br>
-        <span><b>VERSION-</b> {{ userInformation.extension.version || "Failed to connect"}} </span><br>
-        <span><b>SERVER CONNECTION-</b> {{ userInformation.extension.serverConnection ? "Working" : "Failed to connect" }}</span><br>
-      </v-stepper-content>
-
-    </v-stepper>
-  </div>
-</template>
-
-<style scoped>
-.reportHeader {
-  display: flex;
-  margin-top: 1em;
-}
-</style>
-
-<script>
-  export default {
-    data () {
-      return {
-        stepTime: 1000,
-        supportedBrowsers: ["Firefox","Chrome","Brave","Edge","Opera"],
-
-        progress: 1,
-        steps: {
-          one: false,
-          two: false,
-          three: false,
-          four: false,
-          five: false,
-        },
-
-        userInformation: {
-          browser: {
-            name: this.$ua._parsed.name,
-            vendor: this.$ua._parsed.vendor,
-            version: this.$ua._parsed.version
-          },
-          system: {
-            os: this.$ua._parsed.os,
-            version: this.$ua._parsed.os_version,
-            type: this.$ua._parsed.category
-          },
-          extension: {
-            running: null,
-            version: null,
-            serverConnection: null
-          },
-        },
-
-          notices: {
-            system: {
-              text: null,
-              type: null
-            },
-            browser: {
-              text: null,
-              type: null
-            },
-            extension: {
-              text: null,
-              type: null
-            }
-          }
-
-      }
-    },
-
-    mounted() {
-      //---   Wait   ---//
-      setTimeout(() => { 
-        this.progress++;
-        this.steps.one = true;
-      }, this.stepTime); 
-
-      //---   Check If Extension Is Running   ---//
-      setTimeout(() => { 
-        this.progress++;
-        this.steps.two = true;
-      }, this.stepTime * 2); 
-
-      //---   Check Server Connection ---//
-      setTimeout(() => { 
-        this.$axios.$get('https://returnyoutubedislikeapi.com/votes?videoId=QOFEgexls14')
-        .then(res => { this.userInformation.extension.serverConnection = true; })
-        .catch(err => { this.userInformation.extension.serverConnection = false; })
-
-
-        this.progress++;
-        this.steps.three = true;
-      }, this.stepTime * 3); 
-
-      setTimeout(() => { 
-        this.progress++;
-        this.steps.four = true;
-        //this.steps.five = true;
-
-
-
-
-        //---   Parse Extension Data   ---//
-        this.notices.extension.text = `Everything is running normally!`;
-        this.notices.extension.type = "success";
-
-        if (this.userInformation.extension.running != true) {
-          this.notices.extension.text = `The extension doesn't appear to be running!`;
-          this.notices.extension.type = "error";
-        }
-
-        if (this.userInformation.extension.serverConnection != true) {
-          this.notices.extension.text = `Failed to connect to the server!`;
-          this.notices.extension.type = "error";
-        }
-
-
-
-        //---   Parse System Compatibility   ---//
-        this.notices.system.text = `${this.userInformation.system.os} is supported!`;
-        this.notices.system.type = "success";
-
-        if (this.userInformation.system.type != "pc") {
-          this.notices.system.text = `"${this.userInformation.system.type}" may not be a supported device type!`;
-          this.notices.system.type = "warning";
-        }
-
-
-
-        //---   Parse Browser Compatibility   ---//
-        this.notices.browser.text = `${this.userInformation.browser.name} ${this.userInformation.browser.version} is supported!`;
-        this.notices.browser.type = "success";
-
-        if (!this.supportedBrowsers.includes(this.userInformation.browser.name)) {
-          this.notices.browser.text = `${this.userInformation.browser.name} is not a supported browser! You may continue to use the extension, but we don't provide official support.`;
-          this.notices.browser.type = "warning";
-        }
-
-
-
-
-
-      }, this.stepTime * 4); 
-
-      
-
-
-    }
-
-  }
-</script>