refactor: lint

2021-05-17 19:17:57 +05:30
parent e424d06026
commit d9ddc184cb
21 changed files with 455 additions and 364 deletions
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -1,10 +1,14 @@
 <template>
  <div class="flex flex-col">
    <label for="log">{{ title }}</label>
-    <div name="log" class="realtime-log" ref="log">
+    <div ref="log" name="log" class="realtime-log">
      <span v-if="log">
-        <span v-for="(logEntry, index) in log" :style="{ color: logEntry.color }" :key="index"
-          >@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source) }}{{ logEntry.payload }}</span
+        <span
+          v-for="(logEntry, index) in log"
+          :key="index"
+          :style="{ color: logEntry.color }"
+          >@ {{ logEntry.ts }}{{ getSourcePrefix(logEntry.source)
+          }}{{ logEntry.payload }}</span
        >
      </span>
      <span v-else>{{ $t("waiting_for_connection") }}</span>
@@ -12,6 +16,30 @@
  </div>
 </template>

+<script>
+import { getSourcePrefix } from "~/helpers/utils/string"
+
+export default {
+  props: {
+    log: { type: Array, default: () => [] },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  updated() {
+    this.$nextTick(function () {
+      if (this.$refs.log) {
+        this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
+      }
+    })
+  },
+  methods: {
+    getSourcePrefix,
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .realtime-log {
  @apply p-4;
@@ -35,21 +63,3 @@
  }
 }
 </style>
-
-<script>
-import { getSourcePrefix } from "~/helpers/utils/string"
-
-export default {
-  props: ["log", "title"],
-  methods: {
-    getSourcePrefix,
-  },
-  updated() {
-    this.$nextTick(function () {
-      if (this.$refs.log) {
-        this.$refs.log.scrollBy(0, this.$refs.log.scrollHeight + 100)
-      }
-    })
-  },
-}
-</script>
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -6,8 +6,8 @@
          <label for="mqtt-url">{{ $t("url") }}</label>
          <input
            id="mqtt-url"
-            type="url"
            v-model="url"
+            type="url"
            spellcheck="false"
            class="md:rounded-bl-lg"
            :placeholder="$t('url')"
@@ -19,12 +19,14 @@
            <button
              id="connect"
              :disabled="!validUrl"
-              @click="toggleConnection"
              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleConnection"
            >
-              {{ this.connectionState ? $t("disconnect") : $t("connect") }}
+              {{ connectionState ? $t("disconnect") : $t("connect") }}
              <span>
-                <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
+                <i class="material-icons">{{
+                  !connectionState ? "sync" : "sync_disabled"
+                }}</i>
              </span>
            </button>
          </li>
@@ -35,20 +37,25 @@
    <AppSection :label="$t('communication')" no-legend>
      <ul>
        <li>
-          <RealtimeLog :title="$t('log')" :log="this.log" />
+          <RealtimeLog :title="$t('log')" :log="log" />
        </li>
      </ul>
      <ul>
        <li>
          <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
-          <input id="pub_topic" type="text" v-model="pub_topic" spellcheck="false" />
+          <input
+            id="pub_topic"
+            v-model="pub_topic"
+            type="text"
+            spellcheck="false"
+          />
        </li>
        <li>
          <label for="mqtt-message">{{ $t("message") }}</label>
          <input
            id="mqtt-message"
-            type="text"
            v-model="msg"
+            type="text"
            spellcheck="false"
            class="border-dashed md:border-l border-brdColor"
          />
@@ -56,7 +63,12 @@
        <div>
          <li>
            <label for="publish" class="hide-on-small-screen">&nbsp;</label>
-            <button id="publish" name="get" :disabled="!canpublish" @click="publish">
+            <button
+              id="publish"
+              name="get"
+              :disabled="!canpublish"
+              @click="publish"
+            >
              {{ $t("mqtt_publish") }}
              <span>
                <i class="material-icons">send</i>
@@ -70,8 +82,8 @@
          <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
          <input
            id="sub_topic"
-            type="text"
            v-model="sub_topic"
+            type="text"
            spellcheck="false"
            class="md:rounded-bl-lg"
          />
@@ -83,12 +95,18 @@
              id="subscribe"
              name="get"
              :disabled="!cansubscribe"
-              @click="toggleSubscription"
              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleSubscription"
            >
-              {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
+              {{
+                subscriptionState
+                  ? $t("mqtt_unsubscribe")
+                  : $t("mqtt_subscribe")
+              }}
              <span>
-                <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
+                <i class="material-icons">{{
+                  subscriptionState ? "sync_disabled" : "sync"
+                }}</i>
              </span>
            </button>
          </li>
@@ -117,6 +135,22 @@ export default {
      subscriptionState: false,
    }
  },
+  computed: {
+    validUrl() {
+      return this.isUrlValid
+    },
+    canpublish() {
+      return this.pub_topic !== "" && this.msg !== "" && this.connectionState
+    },
+    cansubscribe() {
+      return this.sub_topic !== "" && this.connectionState
+    },
+  },
+  watch: {
+    url() {
+      this.debouncer()
+    },
+  },
  mounted() {
    if (process.browser) {
      this.worker = this.$worker.createRejexWorker()
@@ -126,22 +160,6 @@ export default {
  destroyed() {
    this.worker.terminate()
  },
-  watch: {
-    url(val) {
-      this.debouncer()
-    },
-  },
-  computed: {
-    validUrl() {
-      return this.isUrlValid
-    },
-    canpublish() {
-      return this.pub_topic != "" && this.msg != "" && this.connectionState
-    },
-    cansubscribe() {
-      return this.sub_topic != "" && this.connectionState
-    },
-  },
  methods: {
    debouncer: debounce(function () {
      this.worker.postMessage({ type: "ws", url: this.url })
@@ -158,10 +176,10 @@ export default {
          ts: new Date().toLocaleTimeString(),
        },
      ]
-      let parseUrl = new URL(this.url)
+      const parseUrl = new URL(this.url)
      this.client = new Paho.Client(
        parseUrl.hostname,
-        parseUrl.port != "" ? Number(parseUrl.port) : 8081,
+        parseUrl.port !== "" ? Number(parseUrl.port) : 8081,
        "postwoman"
      )
      this.client.connect({
@@ -267,7 +285,9 @@ export default {
        })
      } catch (e) {
        this.log.push({
-          payload: this.$t("error_occurred") + `while subscribing to topic:  ${this.sub_topic}`,
+          payload:
+            this.$t("error_occurred") +
+            `while subscribing to topic:  ${this.sub_topic}`,
          source: "info",
          color: "#ff5555",
          ts: new Date().toLocaleTimeString(),
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,28 +1,28 @@
 <template>
  <div class="page">
-    <AppSection :label="$t('request')" ref="request" no-legend>
+    <AppSection ref="request" :label="$t('request')" no-legend>
      <ul>
        <li>
          <label for="server">{{ $t("server") }}</label>
          <input
            id="server"
+            v-model="server"
            type="url"
            :class="{ error: !serverValid }"
-            v-model="server"
-            @keyup.enter="serverValid ? toggleSSEConnection() : null"
            class="md:rounded-bl-lg"
            :placeholder="$t('url')"
+            @keyup.enter="serverValid ? toggleSSEConnection() : null"
          />
        </li>
        <div>
          <li>
            <label for="start" class="hide-on-small-screen">&nbsp;</label>
            <button
-              :disabled="!serverValid"
              id="start"
+              :disabled="!serverValid"
              name="start"
-              @click="toggleSSEConnection"
              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleSSEConnection"
            >
              {{ !connectionSSEState ? $t("start") : $t("stop") }}
              <span>
@@ -36,7 +36,12 @@
      </ul>
    </AppSection>

-    <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection
+      id="response"
+      ref="response"
+      :label="$t('communication')"
+      no-legend
+    >
      <ul>
        <li>
          <RealtimeLog :title="$t('events')" :log="events.log" />
@@ -63,8 +68,13 @@ export default {
      },
    }
  },
+  computed: {
+    serverValid() {
+      return this.isUrlValid
+    },
+  },
  watch: {
-    server(val) {
+    server() {
      this.debouncer()
    },
  },
@@ -77,11 +87,6 @@ export default {
  destroyed() {
    this.worker.terminate()
  },
-  computed: {
-    serverValid() {
-      return this.isUrlValid
-    },
-  },
  methods: {
    debouncer: debounce(function () {
      this.worker.postMessage({ type: "sse", url: this.server })
@@ -106,7 +111,7 @@ export default {
      if (typeof EventSource !== "undefined") {
        try {
          this.sse = new EventSource(this.server)
-          this.sse.onopen = (event) => {
+          this.sse.onopen = () => {
            this.connectionSSEState = true
            this.events.log = [
              {
@@ -120,10 +125,10 @@ export default {
              icon: "sync",
            })
          }
-          this.sse.onerror = (event) => {
+          this.sse.onerror = () => {
            this.handleSSEError()
          }
-          this.sse.onclose = (event) => {
+          this.sse.onclose = () => {
            this.connectionSSEState = false
            this.events.log.push({
              payload: this.$t("disconnected_from", { name: this.server }),
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,29 +1,29 @@
 <template>
  <div class="page">
-    <AppSection :label="$t('request')" ref="request" no-legend>
+    <AppSection ref="request" :label="$t('request')" no-legend>
      <ul>
        <li>
          <label for="websocket-url">{{ $t("url") }}</label>
          <input
            id="websocket-url"
+            v-model="url"
            type="url"
            spellcheck="false"
            :class="{ error: !urlValid }"
-            v-model="url"
-            @keyup.enter="urlValid ? toggleConnection() : null"
            class="md:rounded-bl-lg"
            :placeholder="$t('url')"
+            @keyup.enter="urlValid ? toggleConnection() : null"
          />
        </li>
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
            <button
-              :disabled="!urlValid"
              id="connect"
+              :disabled="!urlValid"
              name="connect"
-              @click="toggleConnection"
              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="toggleConnection"
            >
              {{ !connectionState ? $t("connect") : $t("disconnect") }}
              <span>
@@ -37,7 +37,12 @@
      </ul>
    </AppSection>

-    <AppSection :label="$t('communication')" id="response" ref="response" no-legend>
+    <AppSection
+      id="response"
+      ref="response"
+      :label="$t('communication')"
+      no-legend
+    >
      <ul>
        <li>
          <RealtimeLog :title="$t('log')" :log="communication.log" />
@@ -48,14 +53,14 @@
          <label for="websocket-message">{{ $t("message") }}</label>
          <input
            id="websocket-message"
+            v-model="communication.input"
            name="message"
            type="text"
-            v-model="communication.input"
            :readonly="!connectionState"
+            class="md:rounded-bl-lg"
            @keyup.enter="connectionState ? sendMessage() : null"
            @keyup.up="connectionState ? walkHistory('up') : null"
            @keyup.down="connectionState ? walkHistory('down') : null"
-            class="md:rounded-bl-lg"
          />
        </li>
        <div>
@@ -65,8 +70,8 @@
              id="send"
              name="send"
              :disabled="!connectionState"
-              @click="sendMessage"
              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+              @click="sendMessage"
            >
              {{ $t("send") }}
              <span>
@@ -94,9 +99,19 @@ export default {
        log: null,
        input: "",
      },
-      currentIndex: -1, //index of the message log array to put in input box
+      currentIndex: -1, // index of the message log array to put in input box
    }
  },
+  computed: {
+    urlValid() {
+      return this.isUrlValid
+    },
+  },
+  watch: {
+    url() {
+      this.debouncer()
+    },
+  },
  mounted() {
    if (process.browser) {
      this.worker = this.$worker.createRejexWorker()
@@ -106,16 +121,6 @@ export default {
  destroyed() {
    this.worker.terminate()
  },
-  computed: {
-    urlValid() {
-      return this.isUrlValid
-    },
-  },
-  watch: {
-    url(val) {
-      this.debouncer()
-    },
-  },
  methods: {
    debouncer: debounce(function () {
      this.worker.postMessage({ type: "ws", url: this.url })
@@ -139,7 +144,7 @@ export default {
      ]
      try {
        this.socket = new WebSocket(this.url)
-        this.socket.onopen = (event) => {
+        this.socket.onopen = () => {
          this.connectionState = true
          this.communication.log = [
            {
@@ -153,10 +158,10 @@ export default {
            icon: "sync",
          })
        }
-        this.socket.onerror = (event) => {
+        this.socket.onerror = () => {
          this.handleError()
        }
-        this.socket.onclose = (event) => {
+        this.socket.onclose = () => {
          this.connectionState = false
          this.communication.log.push({
            payload: this.$t("disconnected_from", { name: this.url }),
@@ -215,20 +220,24 @@ export default {
      this.communication.input = ""
    },
    walkHistory(direction) {
-      const clientMessages = this.communication.log.filter(({ source }) => source === "client")
+      const clientMessages = this.communication.log.filter(
+        ({ source }) => source === "client"
+      )
      const length = clientMessages.length
      switch (direction) {
        case "up":
          if (length > 0 && this.currentIndex !== 0) {
-            //does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
+            // does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
            if (this.currentIndex === -1) {
              this.currentIndex = length - 1
-              this.communication.input = clientMessages[this.currentIndex].payload
+              this.communication.input =
+                clientMessages[this.currentIndex].payload
            } else if (this.currentIndex === 0) {
              this.communication.input = clientMessages[0].payload
            } else if (this.currentIndex > 0) {
              this.currentIndex = this.currentIndex - 1
-              this.communication.input = clientMessages[this.currentIndex].payload
+              this.communication.input =
+                clientMessages[this.currentIndex].payload
            }
          }
          break
@@ -239,7 +248,8 @@ export default {
              this.communication.input = ""
            } else if (this.currentIndex < length - 1) {
              this.currentIndex = this.currentIndex + 1
-              this.communication.input = clientMessages[this.currentIndex].payload
+              this.communication.input =
+                clientMessages[this.currentIndex].payload
            }
          }
          break