RouterUI/router-ui-frontend
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added labels, made options optional, default selected option

Browse source
This commit is contained in:
Patrick Hatsune 2024-09-26 17:30:18 -07:00
parent c9b752f8e2
commit ad82a5f6f0
Signed by: keyemail
GPG key ID: A03C1F76E54247A0
3 changed files with 99 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/pages/basicDashboard/InternetSetup.vue
View file

@ -2,95 +2,148 @@
import { shallowRef } from 'vue'
const pageTitle="Internet Setup"
interface sectionsType {
title: string,
ID: string,
forms: {
name: string,
interface Sections {
title?: string,
id: string,
selectedRadio?: number,
forms?: {
name?: string,
class: string,
option: string,
label: string
label?: string,
}[]
}
const sections = shallowRef<sectionsType[]>([]);
const sections = shallowRef<Sections[]>([]);
sections.value = [
{
title: "Does your internet require a login?",
ID: "internetSetupLogin",
id: "internetSetupLogin",
selectedRadio: 0,
forms: [
{
name: "internetLoginOption",
class: "selectOption",
option: "radio",
label: "Yes"
label: "Yes",
},
{
name: "internetLoginOption",
class: "selectOption",
option: "radio",
label: "No"
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",
id: "internetSetupIP",
selectedRadio: 0,
forms: [
{
name: "internetIPOption",
class: "selectOption",
option: "radio",
label: "Dynamic IP from ISP"
label: "Dynamic IP from ISP",
},
{
name: "internetIPOption",
class: "selectOption",
option: "radio",
label: "Static IP from ISP"
}
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",
id: "internetSetupDNS",
selectedRadio: 0,
forms: [
{
name: "internetDNSOption",
class: "selectOption",
option: "radio",
label: "Automatic DNS from ISP"
label: "Automatic DNS from ISP",
},
{
name: "internetDNSOption",
class: "selectOption",
option: "radio",
label: "Select DNS Servers"
}
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",
id: "internetSetupMAC",
selectedRadio: 0,
forms: [
{
name: "internetMACOption",
class: "selectOption",
option: "radio",
label: "Default Address"
label: "Default Address",
},
{
name: "internetMACOption",
class: "selectOption",
option: "radio",
label: "Computer MAC Address"
label: "Computer MAC Address",
},
{
name: "internetMACOption",
class: "selectOption",
option: "radio",
label: "Specific MAC Adress"
}
label: "Specific MAC Address",
},
{
name: "internetMACInput",
class: "inputOption",
option: "text",
label: "MAC Address",
},
]
}
]
@ -99,14 +152,28 @@
<template>
<div id="internetSetupComponent">
<h2 class="title">{{ pageTitle }}</h2>
<section v-for="section in sections" :id="section.ID" :key="section.ID">
<section
v-for="section in sections"
:id="section.id"
:key="section.id"
>
<h3>{{ section.title }}</h3>
<form>
<label :class="form.class" v-for="(form, index) in section.forms">
<input :type="form.option" :name="form.name" :value="index + 1" :key="form.label">
<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>

8
src/pages/basicDashboard/Wireless.vue
View file

@ -35,7 +35,7 @@
<input type="checkbox">
Enable 20/40 MHz Coexistence
</label>
<label class="inputName">
<label class="inputOption">
<input type="text" name="wirelessName" value="SomeRandomNetwork"/>
Name (SSID)
</label>
@ -87,7 +87,7 @@
</label>
Security Options
</label>
<label class="inputName">
<label class="inputOption">
<input type="password" name="wirelessName" value="SomeRandomPassword"/>
Password (Network)
</label>
@ -105,7 +105,7 @@
<input type="checkbox">
Enable 20/40 MHz Coexistence
</label>
<label class="inputName">
<label class="inputOption">
<input type="text" name="wirelessName" value="SomeRandomNetwork"/>
Name (SSID)
</label>
@ -157,7 +157,7 @@
</label>
Security Options
</label>
<label class="inputName">
<label class="inputOption">
<input type="password" name="wirelessName" value="SomeRandomPassword"/>
Password (Network)
</label>

2
src/styles/basicDashboard.css
View file

@ -145,7 +145,7 @@
user-select: none;
cursor: pointer;
}
.inputName {
.inputOption {
display: flex;
flex-direction: column-reverse;
input {