Made Basic Components into component, Wireless Settings more reactive
This commit is contained in:
parent
ad82a5f6f0
commit
864b93ef82
GPG key ID:
A03C1F76E54247A0
80
src/components/basicDashboard/BasicComponents.vue
Normal file
80
src/components/basicDashboard/BasicComponents.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
const {pageTitle} = defineProps<{
|
||||||
|
pageTitle: string,
|
||||||
|
pageID: string,
|
||||||
|
sections: Sections[],
|
||||||
|
}>();
|
||||||
|
|
||||||
|
interface Sections {
|
||||||
|
title?: string,
|
||||||
|
id: string,
|
||||||
|
selectedRadio?: number,
|
||||||
|
forms?: {
|
||||||
|
name?: string,
|
||||||
|
class: string,
|
||||||
|
option: string,
|
||||||
|
label?: string,
|
||||||
|
dropdown?: string[],
|
||||||
|
subOptions?: {
|
||||||
|
name?: string,
|
||||||
|
class: string,
|
||||||
|
option: string,
|
||||||
|
label?: string,
|
||||||
|
selectedRadio?: number,
|
||||||
|
}[]
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :id="pageID">
|
||||||
|
<h2 class="title">{{ pageTitle }}</h2>
|
||||||
|
<section
|
||||||
|
v-for="section in sections"
|
||||||
|
:id="section.id"
|
||||||
|
:key="section.id"
|
||||||
|
>
|
||||||
|
<h3>{{ section.title }}</h3>
|
||||||
|
<form v-if="section.forms">
|
||||||
|
<label
|
||||||
|
:class="form.class"
|
||||||
|
v-for="(form, index) in section.forms"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
v-if="!(form.dropdown)"
|
||||||
|
:type="form.option"
|
||||||
|
:name="form.name"
|
||||||
|
:checked="section.selectedRadio === index"
|
||||||
|
:key="form.name"
|
||||||
|
>
|
||||||
|
<template v-else/>
|
||||||
|
<select
|
||||||
|
v-if="form.dropdown"
|
||||||
|
>
|
||||||
|
<option v-for="option in form.dropdown">{{ option }}</option>
|
||||||
|
</select>
|
||||||
|
<template v-else/>
|
||||||
|
<label
|
||||||
|
:class="subform.class"
|
||||||
|
v-if="form.subOptions"
|
||||||
|
v-for="(subform, index) in form.subOptions"
|
||||||
|
:key="subform.name"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
:type="subform.option"
|
||||||
|
:name="subform.name"
|
||||||
|
:checked="subform.selectedRadio === index"
|
||||||
|
/>
|
||||||
|
{{ subform.label }}
|
||||||
|
</label>
|
||||||
|
<template v-else/>
|
||||||
|
{{ form.label }}
|
||||||
|
</label>
|
||||||
|
</form>
|
||||||
|
<template v-else></template>
|
||||||
|
<div class="seperator"></div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style src="@/styles/basicDashboard.css" scoped></style>
|
||||||
134
src/data/basicDashboard/InternetSetup.ts
Normal file
134
src/data/basicDashboard/InternetSetup.ts
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
const internetSetup = [
|
||||||
|
{
|
||||||
|
title: "Does your internet require a login?",
|
||||||
|
id: "internetSetupLogin",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "internetLoginOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Yes",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetLoginOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "No",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetLoginInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "Username/Email",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetLoginInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "password",
|
||||||
|
label: "Password",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Internet IP Address",
|
||||||
|
id: "internetSetupIP",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "internetIPOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Dynamic IP from ISP",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetIPOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Static IP from ISP",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetIPInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "IP Address"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetIPInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "IP Subnet Mask"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetIPInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "Gateway IP Address"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "DNS (Domain Name Server) Address",
|
||||||
|
id: "internetSetupDNS",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "internetDNSOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Automatic DNS from ISP",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetDNSOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Select DNS Servers",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetDNSInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "Primary DNS"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetDNSInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "Secondary DNS"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Router MAC Address",
|
||||||
|
id: "internetSetupMAC",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "internetMACOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Default Address",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetMACOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Computer MAC Address",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetMACOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "Specific MAC Address",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetMACInput",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "text",
|
||||||
|
label: "MAC Address",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default internetSetup;
|
||||||
236
src/data/basicDashboard/Wireless.ts
Normal file
236
src/data/basicDashboard/Wireless.ts
Normal file
|
|
@ -0,0 +1,236 @@
|
||||||
|
const Wireless = [
|
||||||
|
{
|
||||||
|
title: "General Setup",
|
||||||
|
id: "wirelessGeneral",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "internetLoginOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable AX (OFDMA Feature)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetLoginOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable OFDMA (2.4Ghz)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetLoginOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable OFDMA (5Ghz)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "internetLoginOption",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable automatic 2.4Ghz & 5Ghz switching",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Wireless 2.4GHz",
|
||||||
|
id: "wireless2",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "wireless2General",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable SSID Broadcast",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2General",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable 20/40 MHz Coexistence",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2SSID",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "input",
|
||||||
|
label: "Name (SSID)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Channels",
|
||||||
|
class: "dropdownBox",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Channel",
|
||||||
|
dropdown: [
|
||||||
|
"Auto",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Mode",
|
||||||
|
class: "dropdownBox",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Mode",
|
||||||
|
dropdown: [
|
||||||
|
"54 Mbps",
|
||||||
|
"389 Mbps",
|
||||||
|
"600 Mbps",
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Security",
|
||||||
|
class: "subSelect",
|
||||||
|
option: "hidden",
|
||||||
|
label: "Security Options",
|
||||||
|
subOptions: [
|
||||||
|
{
|
||||||
|
name: "wireless2Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA2-personal [AES] + WPA3-Personal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA3-Personal [SAE]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA-Personal [TKIP] + WPA2-Personal [AES]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA2-personal [AES]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "None"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless2Password",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "input",
|
||||||
|
label: "Password (Network Key)",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Wireless 5GHz",
|
||||||
|
id: "wireless5",
|
||||||
|
selectedRadio: 0,
|
||||||
|
forms: [
|
||||||
|
{
|
||||||
|
name: "wireless5General",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable SSID Broadcast",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5General",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Enable 20/40 MHz Coexistence",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5SSID",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "input",
|
||||||
|
label: "Name (SSID)",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Channels",
|
||||||
|
class: "dropdownBox",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Channel",
|
||||||
|
dropdown: [
|
||||||
|
"Auto",
|
||||||
|
"01",
|
||||||
|
"02",
|
||||||
|
"03",
|
||||||
|
"04",
|
||||||
|
"05",
|
||||||
|
"06",
|
||||||
|
"07",
|
||||||
|
"08",
|
||||||
|
"09",
|
||||||
|
"10",
|
||||||
|
"11",
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Mode",
|
||||||
|
class: "dropdownBox",
|
||||||
|
option: "checkbox",
|
||||||
|
label: "Mode",
|
||||||
|
dropdown: [
|
||||||
|
"450 Mbps",
|
||||||
|
"900 Mbps",
|
||||||
|
"1800 Mbps",
|
||||||
|
"3600 Mbps",
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Security",
|
||||||
|
class: "subSelect",
|
||||||
|
option: "hidden",
|
||||||
|
label: "Security Options",
|
||||||
|
subOptions: [
|
||||||
|
{
|
||||||
|
name: "wireless5Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA2-personal [AES] + WPA3-Personal"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA3-Personal [SAE]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA-Personal [TKIP] + WPA2-Personal [AES]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "WPA2-personal [AES]"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Security",
|
||||||
|
class: "selectOption",
|
||||||
|
option: "radio",
|
||||||
|
label: "None"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "wireless5Password",
|
||||||
|
class: "inputOption",
|
||||||
|
option: "input",
|
||||||
|
label: "Password (Network Key)",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default Wireless;
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { shallowRef } from 'vue'
|
import { shallowRef } from 'vue'
|
||||||
|
import BasicDashboard from '@/components/basicDashboard/BasicComponents.vue';
|
||||||
|
import internetSetup from '@/data/basicDashboard/InternetSetup.ts';
|
||||||
const pageTitle="Internet Setup"
|
const pageTitle="Internet Setup"
|
||||||
|
const pageID="internetSetupComponent"
|
||||||
|
|
||||||
interface Sections {
|
interface Sections {
|
||||||
title?: string,
|
title?: string,
|
||||||
|
|
@ -11,172 +14,23 @@
|
||||||
class: string,
|
class: string,
|
||||||
option: string,
|
option: string,
|
||||||
label?: string,
|
label?: string,
|
||||||
|
dropdown?: string[],
|
||||||
|
subOptions?: {
|
||||||
|
name?: string,
|
||||||
|
class: string,
|
||||||
|
option: string,
|
||||||
|
label?: string,
|
||||||
|
}[]
|
||||||
}[]
|
}[]
|
||||||
}
|
}
|
||||||
|
|
||||||
const sections = shallowRef<Sections[]>([]);
|
const sections = shallowRef<Sections[]>([]);
|
||||||
|
|
||||||
sections.value = [
|
sections.value = internetSetup;
|
||||||
{
|
|
||||||
title: "Does your internet require a login?",
|
|
||||||
id: "internetSetupLogin",
|
|
||||||
selectedRadio: 0,
|
|
||||||
forms: [
|
|
||||||
{
|
|
||||||
name: "internetLoginOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Yes",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetLoginOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "No",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetLoginInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "Username/Email",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetLoginInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "password",
|
|
||||||
label: "Password",
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Internet IP Address",
|
|
||||||
id: "internetSetupIP",
|
|
||||||
selectedRadio: 0,
|
|
||||||
forms: [
|
|
||||||
{
|
|
||||||
name: "internetIPOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Dynamic IP from ISP",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetIPOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Static IP from ISP",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetIPInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "IP Address"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetIPInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "IP Subnet Mask"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetIPInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "Gateway IP Address"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "DNS (Domain Name Server) Address",
|
|
||||||
id: "internetSetupDNS",
|
|
||||||
selectedRadio: 0,
|
|
||||||
forms: [
|
|
||||||
{
|
|
||||||
name: "internetDNSOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Automatic DNS from ISP",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetDNSOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Select DNS Servers",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetDNSInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "Primary DNS"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetDNSInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "Secondary DNS"
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
title: "Router MAC Address",
|
|
||||||
id: "internetSetupMAC",
|
|
||||||
selectedRadio: 0,
|
|
||||||
forms: [
|
|
||||||
{
|
|
||||||
name: "internetMACOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Default Address",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetMACOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Computer MAC Address",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetMACOption",
|
|
||||||
class: "selectOption",
|
|
||||||
option: "radio",
|
|
||||||
label: "Specific MAC Address",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "internetMACInput",
|
|
||||||
class: "inputOption",
|
|
||||||
option: "text",
|
|
||||||
label: "MAC Address",
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="internetSetupComponent">
|
<BasicDashboard :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
|
||||||
<h2 class="title">{{ pageTitle }}</h2>
|
|
||||||
<section
|
|
||||||
v-for="section in sections"
|
|
||||||
:id="section.id"
|
|
||||||
:key="section.id"
|
|
||||||
>
|
|
||||||
<h3>{{ section.title }}</h3>
|
|
||||||
<form v-if="section.forms">
|
|
||||||
<label
|
|
||||||
:class="form.class"
|
|
||||||
v-for="(form, index) in section.forms"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
:type="form.option"
|
|
||||||
:name="form.name"
|
|
||||||
:value="form.option === 'radio' ? index : ''"
|
|
||||||
:checked="section.selectedRadio === index"
|
|
||||||
:key="form.label"
|
|
||||||
>
|
|
||||||
{{ form.label }}
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
<template v-else></template>
|
|
||||||
<div class="seperator"></div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style src="@/styles/basicDashboard.css" scoped></style>
|
<style src="@/styles/basicDashboard.css" scoped></style>
|
||||||
|
|
@ -1,170 +1,36 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { shallowRef } from 'vue'
|
||||||
|
import BasicDashboard from '@/components/basicDashboard/BasicComponents.vue';
|
||||||
|
import wirelessSettings from '@/data/basicDashboard/Wireless.ts';
|
||||||
|
const pageTitle="Wireless Settings"
|
||||||
|
const pageID="wirelessSettingsComponent"
|
||||||
|
|
||||||
|
interface Sections {
|
||||||
|
title?: string,
|
||||||
|
id: string,
|
||||||
|
selectedRadio?: number,
|
||||||
|
forms?: {
|
||||||
|
name?: string,
|
||||||
|
class: string,
|
||||||
|
option: string,
|
||||||
|
label?: string,
|
||||||
|
dropdown?: string[],
|
||||||
|
subOptions?: {
|
||||||
|
name?: string,
|
||||||
|
class: string,
|
||||||
|
option: string,
|
||||||
|
label?: string,
|
||||||
|
}[]
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const sections = shallowRef<Sections[]>([]);
|
||||||
|
|
||||||
|
sections.value = wirelessSettings;
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="wirelessSettingsComponent">
|
<BasicDashboard :pageTitle="pageTitle" :pageID="pageID" :sections="sections"/>
|
||||||
<h2 class="title">Wireless Settings</h2>
|
|
||||||
<!-- Backend required to finish -->
|
|
||||||
<section>
|
|
||||||
<h3>General Setup</h3>
|
|
||||||
<form>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox"/>
|
|
||||||
Enable AX (OFDMA Feature)
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox"/>
|
|
||||||
Enable OFDMA (2.4Ghz)
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox"/>
|
|
||||||
Enable OFDMA (5Ghz)
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox"/>
|
|
||||||
Enable automatic 2.4Ghz & 5Ghz switching
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<div class="seperator"></div>
|
|
||||||
<section>
|
|
||||||
<h3>Wireless 2.4GHz</h3>
|
|
||||||
<form>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox">
|
|
||||||
Enable SSID Broadcast
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox">
|
|
||||||
Enable 20/40 MHz Coexistence
|
|
||||||
</label>
|
|
||||||
<label class="inputOption">
|
|
||||||
<input type="text" name="wirelessName" value="SomeRandomNetwork"/>
|
|
||||||
Name (SSID)
|
|
||||||
</label>
|
|
||||||
<label class="dropdownBox">
|
|
||||||
<select>
|
|
||||||
<option valie="Auto">Auto</option>
|
|
||||||
<option value="01">01</option>
|
|
||||||
<option value="02">02</option>
|
|
||||||
<option value="03">03</option>
|
|
||||||
<option value="04">04</option>
|
|
||||||
<option value="05">05</option>
|
|
||||||
<option value="06">06</option>
|
|
||||||
<option value="07">07</option>
|
|
||||||
<option value="08">08</option>
|
|
||||||
<option value="09">09</option>
|
|
||||||
<option value="10">10</option>
|
|
||||||
<option value="11">11</option>
|
|
||||||
</select>
|
|
||||||
Channel
|
|
||||||
</label>
|
|
||||||
<label class="dropdownBox">
|
|
||||||
<select>
|
|
||||||
<option value="54">54 Mbps</option>
|
|
||||||
<option value="289">289 Mbps</option>
|
|
||||||
<option value="600">600 Mbps</option>
|
|
||||||
</select>
|
|
||||||
Mode
|
|
||||||
</label>
|
|
||||||
<label class="subSelect">
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="1">
|
|
||||||
None
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="2">
|
|
||||||
WPA2-personal [AES]
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="3">
|
|
||||||
WPA-Personal [TKIP] + WPA2-Personal [AES]
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="4">
|
|
||||||
WPA3-Personal [SAE]
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="5">
|
|
||||||
WPA2-personal [AES] + WPA3-Personal
|
|
||||||
</label>
|
|
||||||
Security Options
|
|
||||||
</label>
|
|
||||||
<label class="inputOption">
|
|
||||||
<input type="password" name="wirelessName" value="SomeRandomPassword"/>
|
|
||||||
Password (Network)
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<div class="seperator"></div>
|
|
||||||
<section>
|
|
||||||
<h3>Wireless 5GHz</h3>
|
|
||||||
<form>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox">
|
|
||||||
Enable SSID Broadcast
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="checkbox">
|
|
||||||
Enable 20/40 MHz Coexistence
|
|
||||||
</label>
|
|
||||||
<label class="inputOption">
|
|
||||||
<input type="text" name="wirelessName" value="SomeRandomNetwork"/>
|
|
||||||
Name (SSID)
|
|
||||||
</label>
|
|
||||||
<label class="dropdownBox">
|
|
||||||
<select>
|
|
||||||
<option valie="Auto">Auto</option>
|
|
||||||
<option value="01">01</option>
|
|
||||||
<option value="02">02</option>
|
|
||||||
<option value="03">03</option>
|
|
||||||
<option value="04">04</option>
|
|
||||||
<option value="05">05</option>
|
|
||||||
<option value="06">06</option>
|
|
||||||
<option value="07">07</option>
|
|
||||||
<option value="08">08</option>
|
|
||||||
<option value="09">09</option>
|
|
||||||
<option value="10">10</option>
|
|
||||||
<option value="11">11</option>
|
|
||||||
</select>
|
|
||||||
Channel
|
|
||||||
</label>
|
|
||||||
<label class="dropdownBox">
|
|
||||||
<select>
|
|
||||||
<option value="54">54 Mbps</option>
|
|
||||||
<option value="289">289 Mbps</option>
|
|
||||||
<option value="600">600 Mbps</option>
|
|
||||||
</select>
|
|
||||||
Mode
|
|
||||||
</label>
|
|
||||||
<label class="subSelect">
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="1">
|
|
||||||
None
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="2">
|
|
||||||
WPA2-personal [AES]
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="3">
|
|
||||||
WPA-Personal [TKIP] + WPA2-Personal [AES]
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="4">
|
|
||||||
WPA3-Personal [SAE]
|
|
||||||
</label>
|
|
||||||
<label class="selectOption">
|
|
||||||
<input type="radio" name="securityOption" value="5">
|
|
||||||
WPA2-personal [AES] + WPA3-Personal
|
|
||||||
</label>
|
|
||||||
Security Options
|
|
||||||
</label>
|
|
||||||
<label class="inputOption">
|
|
||||||
<input type="password" name="wirelessName" value="SomeRandomPassword"/>
|
|
||||||
Password (Network)
|
|
||||||
</label>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
<div class="seperator"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style src="@/styles/basicDashboard.css" scoped></style>
|
<style src="@/styles/basicDashboard.css" scoped></style>
|
||||||
Loading…
Reference in a new issue