638 lines
20 KiB
Vue
638 lines
20 KiB
Vue
<template>
|
|
<q-dialog
|
|
persistent
|
|
v-model="show_dialog"
|
|
@before-hide="resetData"
|
|
@keydown="
|
|
(evt) => {
|
|
if (evt.keyCode == 27) {
|
|
show_dialog = false;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-card class="overflow-hidden" style="max-width: 60vw">
|
|
<q-form @submit="onSubmit">
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-auto text-h6">
|
|
{{ $t("advanced network setting") }}
|
|
</div>
|
|
<q-space />
|
|
<div>
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="close"
|
|
:disable="loading"
|
|
color="red"
|
|
v-close-popup
|
|
>
|
|
<q-tooltip>
|
|
{{ $t("close") }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section
|
|
class="scroll q-pa-xs q-ma-none"
|
|
style="width: 60vw; max-height: 75vh"
|
|
>
|
|
<q-card-section class="fit" v-if="false">
|
|
<q-card>
|
|
<q-card-section>
|
|
<q-item class="q-pa-none">
|
|
<q-item-section avatar class="header_label_2 text-left">{{
|
|
$t("host name") + ":"
|
|
}}</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="host_name"
|
|
maxlength="20"
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.length > 0) ||
|
|
$t('Please type something'),
|
|
(val) =>
|
|
isEnglishOrNum(val) ||
|
|
$t(
|
|
'Host names can only be numbers and letters and _-'
|
|
),
|
|
]"
|
|
lazy-rules
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-card-section>
|
|
<q-card-section>
|
|
<q-table
|
|
ref="advance_ip_table"
|
|
class="advance-ip-table"
|
|
:title="$t('ip address')"
|
|
:rows="advance_ip_rows"
|
|
:columns="advance_ip_columns"
|
|
row-key="uuid"
|
|
:hide-bottom="true"
|
|
selection="single"
|
|
virtual-scroll
|
|
:virtual-scroll-item-size="48"
|
|
:virtual-scroll-sticky-size-start="48"
|
|
:rows-per-page-options="[0]"
|
|
@row-click="
|
|
(evt, row, index) => {
|
|
if (advance_ip_table_selected.length) {
|
|
advance_ip_table_selected =
|
|
advance_ip_table_selected[0].uuid == row.uuid
|
|
? []
|
|
: [row];
|
|
} else {
|
|
advance_ip_table_selected = [row];
|
|
}
|
|
}
|
|
"
|
|
v-model:selected="advance_ip_table_selected"
|
|
>
|
|
<template v-slot:top="props">
|
|
<div class="col-2 q-table__title">{{ $t("ip address") }}</div>
|
|
|
|
<q-space />
|
|
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
no-caps
|
|
:label="$t('add row')"
|
|
class="col-2"
|
|
@click="advance_ip_addRow"
|
|
/>
|
|
<q-btn
|
|
:disable="advance_ip_table_selected.length == 0"
|
|
flat
|
|
no-caps
|
|
color="primary"
|
|
:label="$t('edit row')"
|
|
class="col-2"
|
|
@click="advance_ip_editRow"
|
|
/>
|
|
<q-btn
|
|
:disable="advance_ip_table_selected.length == 0"
|
|
flat
|
|
no-caps
|
|
color="primary"
|
|
:label="$t('delete row')"
|
|
class="col-2"
|
|
@click="
|
|
advance_ip_table_selected.length &&
|
|
(advance_ip_rows = advance_ip_rows.filter(
|
|
(element) =>
|
|
element && element != advance_ip_table_selected[0]
|
|
)) &&
|
|
(advance_ip_table_selected = [])
|
|
"
|
|
/>
|
|
</template>
|
|
</q-table>
|
|
</q-card-section>
|
|
<q-card-section class="q-py-none q-my-none">
|
|
<q-card>
|
|
<q-form>
|
|
<q-list class="q-pb-md">
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("http") }}{{ $t(" ") }}{{ $t("port") }}:
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
type="number"
|
|
v-model="http_port"
|
|
max="65535"
|
|
maxlength="5"
|
|
min="0"
|
|
:rules="[
|
|
(val) =>
|
|
(val != null &&
|
|
val != undefined &&
|
|
val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
(val) =>
|
|
(parseInt(val) >= 0 && parseInt(val) <= 65535) ||
|
|
$t('the port number must be between 0 and 65535'),
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
({{ $t($t("current real")) }}{{ $t(" ") }}{{ $t("http")
|
|
}}{{ $t(" ") }}{{ $t("port") }}: {{ real_http_port }})
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-btn
|
|
:disable="old_http_port == http_port"
|
|
no-caps
|
|
:label="$t('commit')"
|
|
@click="commitHttpPort"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("control") }}{{ $t(" ") }}{{ $t("port") }}:
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
maxlength="5"
|
|
type="number"
|
|
v-model="websocket_port"
|
|
max="65535"
|
|
min="0"
|
|
:rules="[
|
|
(val) =>
|
|
(val != null &&
|
|
val != undefined &&
|
|
val.toString().length > 0) ||
|
|
$t('Please type something'),
|
|
(val) =>
|
|
(parseInt(val) >= 0 && parseInt(val) <= 65535) ||
|
|
$t('the port number must be between 0 and 65535'),
|
|
]"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
({{ $t($t("current real")) }}{{ $t(" ")
|
|
}}{{ $t("control") }}{{ $t(" ") }}{{ $t("port") }}:
|
|
{{ real_websocket_port }})
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-btn
|
|
:disable="old_websocket_port == websocket_port"
|
|
no-caps
|
|
:label="$t('commit')"
|
|
@click="commitWebsocketPort"
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-form>
|
|
</q-card>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
flat
|
|
:label="$t('Cancel')"
|
|
no-caps
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
ref="accept"
|
|
flat
|
|
:label="$t('Accept')"
|
|
no-caps
|
|
type="submit"
|
|
color="primary"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
<advanced-ip-address-dialog
|
|
ref="advanced_ip_address_dialog"
|
|
:showDns="false"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header_label {
|
|
width: 20%;
|
|
}
|
|
.header_label_2 {
|
|
width: 20%;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
|
|
<style lang="sass">
|
|
.advance-ip-table
|
|
/* height or max-height is important */
|
|
max-height: 45vh
|
|
min-height: 30vh
|
|
|
|
.q-table__top,
|
|
.q-table__bottom,
|
|
thead tr:first-child th /* bg color is important for th; just specify one */
|
|
background-color: #fff
|
|
|
|
thead tr th
|
|
position: sticky
|
|
z-index: 1
|
|
/* this will be the loading indicator */
|
|
thead tr:last-child th
|
|
/* height of all previous header rows */
|
|
top: 48px
|
|
thead tr:first-child th
|
|
top: 0
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, Ref, reactive } from "vue";
|
|
import { useStore } from "src/store";
|
|
import { useQuasar, copyToClipboard, uid } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import AdvancedIpAddressDialog from "src/components/AdvancedIpAddressDialog.vue";
|
|
import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
|
|
import { api } from "src/boot/axios";
|
|
import { HttpProtocol } from "src/entities/HttpProtocol";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentSystenSettingAdvancedNetworkDialog",
|
|
components: { AdvancedIpAddressDialog },
|
|
setup() {
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
|
|
const advanced_ip_address_dialog: Ref<any> = ref(null);
|
|
|
|
let show_dialog = ref(false);
|
|
|
|
const advance_ip_table_selected: Ref<AdvancedIpAddressEntity[]> = ref([]);
|
|
const host_name = ref("player");
|
|
|
|
const old_http_port = ref(80);
|
|
const http_port = ref(80);
|
|
const real_http_port = ref(80);
|
|
const old_websocket_port = ref(GlobalData.kDefaultWebsocektPort);
|
|
const websocket_port = ref(GlobalData.kDefaultWebsocektPort);
|
|
const real_websocket_port = ref(80);
|
|
|
|
const advance_ip_columns = [
|
|
{
|
|
name: "ip_address",
|
|
required: true,
|
|
label: $t.t("ip address"),
|
|
align: "left",
|
|
field: "ip_address",
|
|
},
|
|
{
|
|
name: "netmask",
|
|
align: "left",
|
|
label: $t.t("netmask"),
|
|
field: "netmask",
|
|
},
|
|
{
|
|
name: "gateway",
|
|
align: "left",
|
|
label: $t.t("gateway"),
|
|
field: "gateway",
|
|
},
|
|
// {
|
|
// name: "dns1",
|
|
// align: "left",
|
|
// field: "dns1",
|
|
// label: $t.t("dns server") + " 1",
|
|
// },
|
|
// {
|
|
// name: "dns2",
|
|
// align: "left",
|
|
// field: "dns2",
|
|
// label: $t.t("dns server") + " 2",
|
|
// },
|
|
];
|
|
|
|
const advance_ip_rows: Ref<AdvancedIpAddressEntity[]> = ref([]);
|
|
|
|
const isIpAddress = (str: string) => {
|
|
return (
|
|
str == "localhost" ||
|
|
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
|
|
str
|
|
)
|
|
);
|
|
};
|
|
|
|
let _resolove: any = null;
|
|
|
|
return {
|
|
show_dialog,
|
|
advanced_ip_address_dialog,
|
|
advance_ip_columns,
|
|
advance_ip_rows,
|
|
advance_ip_table_selected,
|
|
host_name,
|
|
http_port,
|
|
old_http_port,
|
|
real_http_port,
|
|
websocket_port,
|
|
old_websocket_port,
|
|
real_websocket_port,
|
|
loga(a: any) {
|
|
console.log(a);
|
|
},
|
|
async showDialogAsync(_data: AdvancedIpAddressEntity[]) {
|
|
if (_resolove) {
|
|
_resolove();
|
|
_resolove = null;
|
|
}
|
|
return new Promise((resolove) => {
|
|
_resolove = resolove;
|
|
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.getSystemNetworkInfo()
|
|
.then((response) => {
|
|
if (response) {
|
|
host_name.value = (response.host_name ?? "player").trim();
|
|
}
|
|
});
|
|
|
|
if (Array.isArray(_data)) {
|
|
for (const item of _data) {
|
|
if (item) {
|
|
(<any>item).uuid = uid();
|
|
advance_ip_rows.value.push(item);
|
|
}
|
|
}
|
|
}
|
|
|
|
{
|
|
const port = parseInt(
|
|
GlobalData.getInstance().applicationConfig?.httpserver_port ??
|
|
"80"
|
|
);
|
|
if (!isNaN(port) && port != Infinity) {
|
|
http_port.value = port;
|
|
old_http_port.value = port;
|
|
} else {
|
|
http_port.value = 80;
|
|
old_http_port.value = 80;
|
|
}
|
|
}
|
|
|
|
{
|
|
const port = parseInt(
|
|
GlobalData.getInstance().applicationConfig?.websocket_port ??
|
|
GlobalData.kDefaultWebsocektPort.toString()
|
|
);
|
|
if (!isNaN(port) && port != Infinity) {
|
|
websocket_port.value = port;
|
|
old_websocket_port.value = port;
|
|
} else {
|
|
websocket_port.value = GlobalData.kDefaultWebsocektPort;
|
|
old_websocket_port.value = GlobalData.kDefaultWebsocektPort;
|
|
}
|
|
}
|
|
|
|
{
|
|
api
|
|
.get(HttpProtocol.RequestPathGetAllPort)
|
|
.then((response) => {
|
|
if (response && typeof response.data != "undefined") {
|
|
if (typeof response.data.http == "number") {
|
|
real_http_port.value = response.data.http;
|
|
} else if (typeof response.data.http == "string") {
|
|
const temp = parseInt(response.data.http);
|
|
if (!isNaN(temp) && temp != Infinity) {
|
|
real_http_port.value = temp;
|
|
}
|
|
}
|
|
|
|
if (typeof response.data.websocket == "number") {
|
|
real_websocket_port.value = response.data.websocket;
|
|
} else if (typeof response.data.websocket == "string") {
|
|
const temp = parseInt(response.data.websocket);
|
|
if (!isNaN(temp) && temp != Infinity) {
|
|
real_websocket_port.value = temp;
|
|
}
|
|
}
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
show_dialog.value = true;
|
|
});
|
|
},
|
|
resetData() {
|
|
if (_resolove) {
|
|
_resolove();
|
|
_resolove = null;
|
|
}
|
|
advance_ip_rows.value = [];
|
|
advance_ip_table_selected.value = [];
|
|
host_name.value = "player";
|
|
},
|
|
|
|
async onSubmit() {
|
|
// let success = false;
|
|
|
|
try {
|
|
if (_resolove) {
|
|
try {
|
|
_resolove({
|
|
ip_address_list: advance_ip_rows.value,
|
|
host_name: host_name.value,
|
|
});
|
|
} catch {
|
|
_resolove(null);
|
|
}
|
|
}
|
|
} catch {}
|
|
|
|
show_dialog.value = false;
|
|
|
|
// $q.notify({
|
|
// color: success ? "positive" : "negative",
|
|
// icon: success ? "done" : "warning",
|
|
// message:
|
|
// $t.t("set serialport") +
|
|
// (success ? $t.t("success") : $t.t("fail")) +
|
|
// "!",
|
|
// position: "top",
|
|
// timeout: 1500,
|
|
// });
|
|
},
|
|
async advance_ip_addRow() {
|
|
const data: any =
|
|
await advanced_ip_address_dialog.value.showDialogAsync(
|
|
"edit",
|
|
null,
|
|
advance_ip_rows.value.map((element: any) => element.ip_address)
|
|
);
|
|
if (data) {
|
|
const push_data = new AdvancedIpAddressEntity();
|
|
(<any>push_data).uuid = uid();
|
|
push_data.ip_address = data.ip_address;
|
|
push_data.gateway = data.gateway;
|
|
push_data.netmask = data.netmask;
|
|
// push_data.dns1= data.dns1
|
|
// push_data.dns2= data.dns2
|
|
|
|
advance_ip_rows.value.push(push_data);
|
|
}
|
|
},
|
|
async advance_ip_editRow() {
|
|
if (advance_ip_table_selected.value.length) {
|
|
const data: any =
|
|
await advanced_ip_address_dialog.value.showDialogAsync(
|
|
"edit",
|
|
advance_ip_table_selected.value[0],
|
|
advance_ip_rows.value.map((element: any) => element.ip_address)
|
|
);
|
|
if (data) {
|
|
advance_ip_table_selected.value[0].ip_address = data.ip_address;
|
|
advance_ip_table_selected.value[0].gateway = data.gateway;
|
|
advance_ip_table_selected.value[0].netmask = data.netmask;
|
|
// advance_ip_table_selected.value[0].dns1 = data.dns1;
|
|
// advance_ip_table_selected.value[0].dns2 = data.dns2;
|
|
}
|
|
}
|
|
},
|
|
commitHttpPort() {
|
|
$q.dialog({
|
|
title: $t.t("Confirm"),
|
|
message: $t.t("are you sure to change the http port") + "?",
|
|
ok: {
|
|
label: $t.t("ok"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
cancel: {
|
|
label: $t.t("cancel"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
persistent: true,
|
|
}).onOk(() => {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.setHttpPort(http_port.value);
|
|
$q.dialog({
|
|
title: $t.t("Confirm"),
|
|
message:
|
|
$t.t(
|
|
"the new http port takes effect after the software is restarted"
|
|
) +
|
|
"," +
|
|
$t.t("restart now") +
|
|
"?",
|
|
ok: {
|
|
label: $t.t("ok"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
cancel: {
|
|
label: $t.t("cancel"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
persistent: true,
|
|
}).onOk(() => {
|
|
GlobalData.getInstance().getCurrentClient()?.restartDevice();
|
|
});
|
|
});
|
|
},
|
|
commitWebsocketPort() {
|
|
$q.dialog({
|
|
title: $t.t("Confirm"),
|
|
message: $t.t("are you sure to change the control port") + "?",
|
|
ok: {
|
|
label: $t.t("ok"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
cancel: {
|
|
label: $t.t("cancel"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
persistent: true,
|
|
}).onOk(() => {
|
|
GlobalData.getInstance()
|
|
.getCurrentClient()
|
|
?.setWebsocketPort(websocket_port.value);
|
|
$q.dialog({
|
|
title: $t.t("Confirm"),
|
|
message:
|
|
$t.t(
|
|
"the new control port takes effect after the software is restarted"
|
|
) +
|
|
"," +
|
|
$t.t("restart now") +
|
|
"?",
|
|
ok: {
|
|
label: $t.t("ok"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
cancel: {
|
|
label: $t.t("cancel"),
|
|
noCaps: true,
|
|
flat: true,
|
|
},
|
|
persistent: true,
|
|
}).onOk(() => {
|
|
GlobalData.getInstance().getCurrentClient()?.restartDevice();
|
|
});
|
|
});
|
|
},
|
|
isEnglishOrNum(str: string) {
|
|
return /^[0-9a-zA-Z_\-]+$/.test(str);
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|