Compare commits

..

No commits in common. "d26edb058ec9a180e199229750e869f2930bf37e" and "ced4dc88d5e94ca05117b86ad8a38867224fc5e1" have entirely different histories.

4 changed files with 31 additions and 46 deletions

View file

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

View file

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

View file

@ -2,44 +2,35 @@
<div <div
class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left" class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg text-left"
> >
<span class="block w-full text-3xl mb-4" v-text="apName" /> <span class="block w-full" v-text="apName" />
<div v-if="stateOfTask.result === undefined">
<div v-if="stateOfTask.result === undefined" class="relative pt-1"> <span class="block w-full" v-text="stateOfTask.state" />
<div class="flex mb-2 items-center justify-between"> <progress
<div> class="block w-full"
<span :max="stateOfTask.total"
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200" :value="stateOfTask.current"
v-text="stateOfTask.state" ></progress>
/> <span class="block w-full" v-text="stateOfTask.status" />
</div> </div>
<div class="text-right"> <div v-else class="w-full flex">
<span class="text-xs font-semibold inline-block text-yellow-600"> <span class="flex-1 mr-2"
{{ stateOfTask.current }}/{{ stateOfTask.total }} >SwitchPortID {{ stateOfTask.result.switchportid }}</span
</span> >
</div> <span class="flex-1 mr-2"
</div> >New SwitchPortID {{ stateOfTask.result.switchportid_new }}</span
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200"> >
<div <span class="flex-1 mr-2"
:style="'width:' + progress + '%'" >UserPortID {{ stateOfTask.result.userportid }}</span
class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500" >
></div> <span class="flex-1 mr-2"
</div> >SwitchPortID {{ stateOfTask.result.userportid_new }}</span
</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>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { reactive, toRefs, defineComponent, computed } from "vue"; import { reactive, toRefs, defineComponent } from "vue";
import { useIntervalFn } from "@vueuse/core"; import { useIntervalFn } from "@vueuse/core";
import { getStateOfTask, StateOfTask } from "../api"; import { getStateOfTask, StateOfTask } from "../api";
@ -75,11 +66,7 @@ export default defineComponent({
true true
); );
const progress = computed( return { stateOfTask, apName };
() => (Number.parseInt(stateOfTask.current) / stateOfTask.total) * 100
);
return { stateOfTask, apName, progress };
}, },
}); });
</script> </script>

View file

@ -2,20 +2,20 @@
<div class="sm:w-3/4 md:w-1/3 w-full dark:text-white"> <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> <h1 class="font-hairline mb-6 text-center">Register Access Point</h1>
<form <form
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" class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
@submit.prevent="registerAccessPoint" @submit.prevent="registerAccessPoint"
> >
<div class="mr-1.5"> <div class="mb-4">
<label class="font-bold text-gray-800" <label class="font-bold text-gray-800 block mb-2"
>AccessPoint Name aruba-ap-<input >AccessPoint Name aruba-ap-<input
type="text" type="text"
class="text-black appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow" class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
v-model.trim="apName" v-model.trim="apName"
placeholder="c01" placeholder="c01"
/> />
</label> </label>
</div> </div>
<div class=""> <div class="flex items-center justify-between">
<button <button
class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded" class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
type="submit" type="submit"
@ -69,7 +69,7 @@ export default defineComponent({
async function registerAccessPoint() { async function registerAccessPoint() {
try { try {
const r = await apiRegisterAccessPoint(apName.value); const r = await apiRegisterAccessPoint(apName.value);
tasks.unshift({ apName: apName.value, taskID: r["task-id"] }); tasks.push({ apName: apName.value, taskID: r["task-id"] });
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }