chore(refactor): modern UI

2020-12-11 22:24:34 +05:30
parent 773423069b
commit 5a7bcf32ea
55 changed files with 936 additions and 860 deletions
--- a/components/realtime/log.vue
+++ b/components/realtime/log.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col">
    <label for="log">{{ title }}</label>
    <div name="log" class="realtime-log" ref="log">
      <span v-if="log">
@@ -14,9 +14,7 @@

 <style scoped lang="scss">
 .realtime-log {
-  @apply m-2;
-  @apply p-2;
-  @apply rounded-lg;
+  @apply p-4;
  @apply bg-bgDarkColor;
  @apply text-fgColor;
  @apply overflow-auto;
@@ -25,7 +23,6 @@

  &,
  span {
-    @apply text-sm;
    @apply font-mono;
    @apply font-normal;
    @apply select-text;
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -1,15 +1,26 @@
 <template>
  <div>
-    <pw-section class="blue" :label="$t('request')">
+    <pw-section class="blue" :label="$t('request')" no-legend>
      <ul>
        <li>
          <label for="mqtt-url">{{ $t("url") }}</label>
-          <input id="mqtt-url" type="url" v-model="url" spellcheck="false" />
+          <input
+            id="mqtt-url"
+            type="url"
+            v-model="url"
+            spellcheck="false"
+            class="md:rounded-bl-lg"
+          />
        </li>
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button id="connect" :disabled="!validUrl" @click="toggleConnection">
+            <button
+              id="connect"
+              :disabled="!validUrl"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ this.connectionState ? $t("disconnect") : $t("connect") }}
              <span>
                <i class="material-icons">{{ !connectionState ? "sync" : "sync_disabled" }}</i>
@@ -20,7 +31,7 @@
      </ul>
    </pw-section>

-    <pw-section class="blue" :label="$t('communication')">
+    <pw-section class="blue" :label="$t('communication')" no-legend>
      <ul>
        <li>
          <log :title="$t('log')" :log="this.log" />
@@ -50,12 +61,24 @@
      <ul>
        <li>
          <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
-          <input id="sub_topic" type="text" v-model="sub_topic" spellcheck="false" />
+          <input
+            id="sub_topic"
+            type="text"
+            v-model="sub_topic"
+            spellcheck="false"
+            class="md:rounded-bl-lg"
+          />
        </li>
        <div>
          <li>
            <label for="subscribe" class="hide-on-small-screen">&nbsp;</label>
-            <button id="subscribe" name="get" :disabled="!cansubscribe" @click="toggleSubscription">
+            <button
+              id="subscribe"
+              name="get"
+              :disabled="!cansubscribe"
+              @click="toggleSubscription"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ subscriptionState ? $t("mqtt_unsubscribe") : $t("mqtt_subscribe") }}
              <span>
                <i class="material-icons">{{ subscriptionState ? "sync_disabled" : "sync" }}</i>
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
      <ul>
        <li>
          <label for="socketio-url">{{ $t("url") }}</label>
@@ -11,6 +11,7 @@
            :class="{ error: !urlValid }"
            v-model="url"
            @keyup.enter="urlValid ? toggleConnection() : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
@@ -22,7 +23,13 @@
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            <button
+              :disabled="!urlValid"
+              id="connect"
+              name="connect"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ !connectionState ? $t("connect") : $t("disconnect") }}
              <span>
                <i class="material-icons">
@@ -34,7 +41,8 @@
        </div>
      </ul>
    </pw-section>
-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
      <ul>
        <li>
          <log :title="$t('log')" :log="communication.log" />
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
      <ul>
        <li>
          <label for="server">{{ $t("server") }}</label>
@@ -10,12 +10,19 @@
            :class="{ error: !serverValid }"
            v-model="server"
            @keyup.enter="serverValid ? toggleSSEConnection() : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
          <li>
            <label for="start" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!serverValid" id="start" name="start" @click="toggleSSEConnection">
+            <button
+              :disabled="!serverValid"
+              id="start"
+              name="start"
+              @click="toggleSSEConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ !connectionSSEState ? $t("start") : $t("stop") }}
              <span>
                <i class="material-icons">
@@ -28,7 +35,7 @@
      </ul>
    </pw-section>

-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
      <ul>
        <li>
          <log :title="$t('events')" :log="events.log" />
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="page">
-    <pw-section class="blue" :label="$t('request')" ref="request">
+    <pw-section class="blue" :label="$t('request')" ref="request" no-legend>
      <ul>
        <li>
          <label for="websocket-url">{{ $t("url") }}</label>
@@ -11,12 +11,19 @@
            :class="{ error: !urlValid }"
            v-model="url"
            @keyup.enter="urlValid ? toggleConnection() : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
          <li>
            <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-            <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
+            <button
+              :disabled="!urlValid"
+              id="connect"
+              name="connect"
+              @click="toggleConnection"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ !connectionState ? $t("connect") : $t("disconnect") }}
              <span>
                <i class="material-icons">
@@ -29,7 +36,7 @@
      </ul>
    </pw-section>

-    <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+    <pw-section class="purple" :label="$t('communication')" id="response" ref="response" no-legend>
      <ul>
        <li>
          <log :title="$t('log')" :log="communication.log" />
@@ -47,12 +54,19 @@
            @keyup.enter="connectionState ? sendMessage() : null"
            @keyup.up="connectionState ? walkHistory('up') : null"
            @keyup.down="connectionState ? walkHistory('down') : null"
+            class="md:rounded-bl-lg"
          />
        </li>
        <div>
          <li>
            <label for="send" class="hide-on-small-screen">&nbsp;</label>
-            <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+            <button
+              id="send"
+              name="send"
+              :disabled="!connectionState"
+              @click="sendMessage"
+              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+            >
              {{ $t("send") }}
              <span>
                <i class="material-icons">send</i>