garionion/radiator-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

reformat registered AP status

Browse source 
show nicer progressbar
make registering more mobilefriendly
This commit is contained in:
garionion 2021-04-08 14:21:30 +02:00
parent ced4dc88d5
commit d4dfa09345
Signed by: garionion
GPG key ID: 53352FA607FA681A
2 changed files with 43 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/components/VTaskState.vue
View file

@ -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 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 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 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>

12
src/views/RegisterAccessPoint.vue
View file

@ -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);
}