return-youtube-dislike/Website/pages/debug.vue

<template>
  <div>

    <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,
            latestExtensionVersion: null,
          },
        },

        notices: {
          system: {
            text: null,
            type: null
          },
          browser: {
            text: null,
            type: null
          },
          extension: {
            text: null,
            type: null
          }
        }

      }
    },

    mounted() {
      const vm = this;

      //---   Wait   ---//
      setTimeout(() => {

        this.$axios.$get('https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json')
        .then(res => {
          this.userInformation.extension.latestExtensionVersion = res.version;
        })


        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>