From d4dfa09345084d1256b5c1593bed284109e2a829 Mon Sep 17 00:00:00 2001
From: garionion <github@entr0py.de>
Date: Thu, 8 Apr 2021 14:21:30 +0200
Subject: [PATCH] reformat registered AP status show nicer progressbar make
 registering more mobilefriendly

---
 src/components/VTaskState.vue     | 61 +++++++++++++++++++------------
 src/views/RegisterAccessPoint.vue | 12 +++---
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/components/VTaskState.vue b/src/components/VTaskState.vue
index 9c71cf3..97e3bf6 100644
--- a/src/components/VTaskState.vue
+++ b/src/components/VTaskState.vue
@@ -2,35 +2,44 @@
   <div
     class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left"
   >
-    <span class="block w-full" v-text="apName" />
-    <div v-if="stateOfTask.result === undefined">
-      <span class="block w-full" v-text="stateOfTask.state" />
-      <progress
-        class="block w-full"
-        :max="stateOfTask.total"
-        :value="stateOfTask.current"
-      ></progress>
-      <span class="block w-full" v-text="stateOfTask.status" />
+    <span class="block w-full text-3xl mb-4" v-text="apName" />
+
+    <div v-if="stateOfTask.result === undefined" class="relative pt-1">
+      <div class="flex mb-2 items-center justify-between">
+        <div>
+          <span
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200"
+            v-text="stateOfTask.state"
+          />
+        </div>
+        <div class="text-right">
+          <span class="text-xs font-semibold inline-block text-yellow-600">
+            {{ stateOfTask.current }}/{{ stateOfTask.total }}
+          </span>
+        </div>
+      </div>
+      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
+        <div
+          :style="'width:' + progress + '%'"
+          class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"
+        ></div>
+      </div>
     </div>
-    <div v-else class="w-full flex">
-      <span class="flex-1 mr-2"
-        >SwitchPortID {{ stateOfTask.result.switchportid }}</span
-      >
-      <span class="flex-1 mr-2"
-        >New SwitchPortID {{ stateOfTask.result.switchportid_new }}</span
-      >
-      <span class="flex-1 mr-2"
-        >UserPortID {{ stateOfTask.result.userportid }}</span
-      >
-      <span class="flex-1 mr-2"
-        >SwitchPortID {{ stateOfTask.result.userportid_new }}</span
-      >
+    <div v-else class="w-full grid grid-cols-3">
+      <span class="col-span-3 font-bold">SwitchPortID</span>
+      <span class=""> {{ stateOfTask.result.switchportid }}</span>
+      <span>→</span>
+      <span class="">{{ stateOfTask.result.switchportid_new }}</span>
+      <span class="col-span-3 font-bold mt-0.5">UserPortID</span>
+      <span class="">{{ stateOfTask.result.userportid }}</span>
+      <span>→</span>
+      <span class="">{{ stateOfTask.result.userportid_new }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent } from "vue";
+import { reactive, toRefs, defineComponent, computed } from "vue";
 import { useIntervalFn } from "@vueuse/core";
 import { getStateOfTask, StateOfTask } from "../api";
 
@@ -66,7 +75,11 @@ export default defineComponent({
       true
     );
 
-    return { stateOfTask, apName };
+    const progress = computed(
+      () => (Number.parseInt(stateOfTask.current) / stateOfTask.total) * 100
+    );
+
+    return { stateOfTask, apName, progress };
   },
 });
 </script>
diff --git a/src/views/RegisterAccessPoint.vue b/src/views/RegisterAccessPoint.vue
index bfd9448..0b35f26 100644
--- a/src/views/RegisterAccessPoint.vue
+++ b/src/views/RegisterAccessPoint.vue
@@ -2,20 +2,20 @@
   <div class="sm:w-3/4 md:w-1/3 w-full dark:text-white">
     <h1 class="font-hairline mb-6 text-center">Register Access Point</h1>
     <form
-      class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
+      class="border-yellow-300 pt-8 pb-8 pl-2.5 pr-2.5 border-t-8 bg-white mb-6 rounded-lg shadow-lg flex justify-between items-end"
       @submit.prevent="registerAccessPoint"
     >
-      <div class="mb-4">
-        <label class="font-bold text-gray-800 block mb-2"
+      <div class="mr-1.5">
+        <label class="font-bold text-gray-800"
           >AccessPoint Name aruba-ap-<input
             type="text"
-            class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
+            class="text-black appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
             v-model.trim="apName"
             placeholder="c01"
           />
         </label>
       </div>
-      <div class="flex items-center justify-between">
+      <div class="">
         <button
           class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
           type="submit"
@@ -69,7 +69,7 @@ export default defineComponent({
     async function registerAccessPoint() {
       try {
         const r = await apiRegisterAccessPoint(apName.value);
-        tasks.push({ apName: apName.value, taskID: r["task-id"] });
+        tasks.unshift({ apName: apName.value, taskID: r["task-id"] });
       } catch (e) {
         console.error(e);
       }