add prettier check to ci/cd run

show nicer progressbar
make registering more mobilefriendly

.drone.yml

@@ -6,4 +6,5 @@ steps:
     image: node
     commands:
       - npm install
+      - npm run check
       - npm run build

package.json

@@ -5,7 +5,8 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
-    "format": "npx prettier --write ."
+    "format": "npx prettier --write ./src/*",
+    "check": "prettier --check ./src/*"
   },
   "dependencies": {
     "@vueuse/core": "^4.7.0",

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" />
+    <span class="block w-full text-3xl mb-4" v-text="apName" />
-    <div v-if="stateOfTask.result === undefined">
+
-      <span class="block w-full" v-text="stateOfTask.state" />
+    <div v-if="stateOfTask.result === undefined" class="relative pt-1">
-      <progress
+      <div class="flex mb-2 items-center justify-between">
-        class="block w-full"
+        <div>
-        :max="stateOfTask.total"
+          <span
-        :value="stateOfTask.current"
+            class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200"
-      ></progress>
+            v-text="stateOfTask.state"
-      <span class="block w-full" v-text="stateOfTask.status" />
+          />
         </div>
-    <div v-else class="w-full flex">
+        <div class="text-right">
-      <span class="flex-1 mr-2"
+          <span class="text-xs font-semibold inline-block text-yellow-600">
-        >SwitchPortID {{ stateOfTask.result.switchportid }}</span
+            {{ stateOfTask.current }}/{{ stateOfTask.total }}
-      >
+          </span>
-      <span class="flex-1 mr-2"
+        </div>
-        >New SwitchPortID {{ stateOfTask.result.switchportid_new }}</span
+      </div>
-      >
+      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
-      <span class="flex-1 mr-2"
+        <div
-        >UserPortID {{ stateOfTask.result.userportid }}</span
+          :style="'width:' + progress + '%'"
-      >
+          class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"
-      <span class="flex-1 mr-2"
+        ></div>
-        >SwitchPortID {{ stateOfTask.result.userportid_new }}</span
+      </div>
-      >
+    </div>
+    <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>

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">
+      <div class="mr-1.5">
-        <label class="font-bold text-gray-800 block mb-2"
+        <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);
       }