diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 5c6e565..396ff68 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -7,6 +7,7 @@ @back="onBack" @reboot="onModemReboot" @reset="onModemReset" + @disable="onModemDisable" /> { } }; -const initComponent = async (delay: number = 500, title: string = 'Fetching available modems') => { +const initLoad = (title: string = 'Fetching available modems') => { fetchAvailableModemTask.stop(); + selectedModem.value = null; + availableModems.value = []; opLoading.value = true; opDescription.value = title; - await fetchAvailableModems(); +} - /** Since this fetch is USUALLY fast we simulate a delay to avoid glitch */ - await sleep(delay); +const finishLoad = () => { opLoading.value = false; fetchAvailableModemTask.resume(); -}; +} -const initRebootComponent = async () => { - selectedModem.value = null; - availableModems.value = []; - initComponent(10000, "Rebooting modem"); -}; +const initComponent = async () => { + await initLoad(); + await fetchAvailableModems(); + + /** Since this fetch is USUALLY fast we simulate a delay to avoid glitch */ + await sleep(500); + await finishLoad(); +} + +const rebootModem = async (action: Promise, title: string = 'Rebooting modem') => { + await initLoad(title); + await action; + + await sleep(15000); + await fetchAvailableModems(); + await finishLoad(); +} /** Callbacks */ const onModemSelected = (modem: ModemDevice) => { selectedModem.value = modem; }; -const onBack = () => { - selectedModem.value = null; - initComponent(); +const onBack = async () => { + await initComponent(); }; const onModemReboot = async () => { @@ -107,9 +120,7 @@ const onModemReboot = async () => { } try { - await ModemManager.rebootById(selectedModem.value?.id); - - initRebootComponent(); + rebootModem(ModemManager.rebootById(selectedModem.value?.id)); } catch (error) { opError.value = String((error as any)?.message); } @@ -121,9 +132,19 @@ const onModemReset = async () => { } try { - await ModemManager.resetById(selectedModem.value?.id); + rebootModem(ModemManager.resetById(selectedModem.value?.id), 'Resetting modem'); + } catch (error) { + opError.value = String((error as any)?.message); + } +}; + +const onModemDisable = async () => { + if (selectedModem.value === null) { + return; + } - initRebootComponent(); + try { + rebootModem(ModemManager.disableById(selectedModem.value?.id), 'Disabling modem'); } catch (error) { opError.value = String((error as any)?.message); } @@ -134,6 +155,6 @@ const fetchAvailableModemTask = new OneMoreTime({ delay: 10000, disposeWith: thi /** Hooks */ onMounted(async () => { - initComponent(); + await initComponent(); }); diff --git a/frontend/src/components/device/DeviceDetailsTab.vue b/frontend/src/components/device/DeviceDetailsTab.vue index 29823d5..ec07936 100644 --- a/frontend/src/components/device/DeviceDetailsTab.vue +++ b/frontend/src/components/device/DeviceDetailsTab.vue @@ -4,7 +4,11 @@ - + @@ -20,12 +24,16 @@ import ModemDeviceDetails from './ModemDeviceDetails.vue'; defineProps<{ modem: ModemDevice; }>(); -const emit = defineEmits<(event: 'reset') => void>(); +const emit = defineEmits<(event: 'reset' | 'reboot') => void>(); /** Callbacks */ const onReset = () => { emit('reset'); }; + +const onReboot = () => { + emit('reboot'); +};