81 lines
2.7 KiB
Vue
81 lines
2.7 KiB
Vue
<template>
|
|
<q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
<q-card flat class="q-dialog-plugin">
|
|
<div class="q-pa-md q-gutter-md">
|
|
<q-card-section v-if="visible" align="center">
|
|
<div><q-circular-progress indeterminate size="50px" color="primary" class="q-ma-md"></q-circular-progress></div>
|
|
<div>Scanning WiFi...</div>
|
|
</q-card-section>
|
|
<q-card-section v-else>
|
|
<q-table title="WiFi networks" :flat="true" :wrap-cells="true" :rows="scandata.wifi_scan_res" :columns="columns" row-key="ssid"
|
|
:rows-per-page-options="[0]" :pagination="pagination" @row-click="ClickOnRaw" />
|
|
</q-card-section>
|
|
<q-card-actions align="center">
|
|
<q-btn flat class="btn" label="Cancel" @click="onDialogCancel" />
|
|
</q-card-actions>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useDialogPluginComponent } from 'quasar'
|
|
import { PostData } from "components/webguicomp/network";
|
|
import { reactive, ref } from 'vue';
|
|
import { useQuasar } from 'quasar'
|
|
import { ShowDelayDialog } from "./helpers";
|
|
|
|
const $q = useQuasar();
|
|
|
|
defineEmits([
|
|
// REQUIRED; need to specify some events that your
|
|
// component will emit through useDialogPluginComponent()
|
|
...useDialogPluginComponent.emits
|
|
])
|
|
|
|
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
|
|
// dialogRef - Vue ref to be applied to QDialog
|
|
// onDialogHide - Function to be used as handler for @hide on QDialog
|
|
// onDialogOK - Function to call to settle dialog with "ok" outcome
|
|
// example: onDialogOK() - no payload
|
|
// example: onDialogOK({ /*...*/ }) - with payload
|
|
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
|
|
|
|
|
|
function ClickOnRaw(evt, row, index) {
|
|
$q.dialog({
|
|
title: 'Enter network key',
|
|
message: `Enter key for "${row.ssid}" network`,
|
|
prompt: {
|
|
model: '',
|
|
isValid: val => val.length > 2, // << here is the magic
|
|
type: 'text' // optional
|
|
},
|
|
cancel: true,
|
|
persistent: true
|
|
}).onOk(data => {
|
|
PostData({ wifi_sta_key: data, wifi_sta_ssid: row.ssid }, 1, 2, ShowDelayDialog('Data saving and reboot...', 10000, null))
|
|
onDialogOK();
|
|
})
|
|
}
|
|
|
|
function onDataReady() {
|
|
visible.value = false;
|
|
}
|
|
let visible = ref(true);
|
|
const scandata = reactive({ wifi_scan_res: 10 });
|
|
PostData({ wifi_scan: 1 }, 2, 0, () => { });
|
|
setTimeout(() => { PostData(scandata, 2, 0, () => onDataReady()) }, 7000);
|
|
|
|
const pagination = {
|
|
page: 1,
|
|
rowsPerPage: 0
|
|
}
|
|
|
|
const columns = [
|
|
{ name: 'ssid', label: 'SSID', align: 'left', field: 'ssid', sortable: true },
|
|
{ name: 'rssi', label: 'RSSI', field: 'rssi', sortable: true },
|
|
{ name: 'ch', label: 'CH', field: 'ch', sortable: true },
|
|
]
|
|
</script>
|