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

Compare commits

base: RouterUI:ad82a5f6f027b411881650eab724057e97a27f53
Branches Tags
RouterUI:master
..
compare: RouterUI:1cd033204a93bfb7c5b811bc3611c789bd27e1d8
Branches Tags
RouterUI:master

No commits in common. "ad82a5f6f027b411881650eab724057e97a27f53" and "1cd033204a93bfb7c5b811bc3611c789bd27e1d8" have entirely different histories.
ad82a5f6f0 ... 1cd033204a

3 changed files with 64 additions and 181 deletions
Show stats Expand all files Collapse all files

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

@ -1,181 +1,67 @@
<script lang="ts" setup>
import { shallowRef } from 'vue'
const pageTitle="Internet Setup"
interface Sections {
title?: string,
id: string,
selectedRadio?: number,
forms?: {
name?: string,
class: string,
option: string,
label?: string,
}[]
}
const sections = shallowRef<Sections[]>([]);
sections.value = [
{
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>
<template> <template>
<div id="internetSetupComponent"> <div id="internetSetupComponent">
<h2 class="title">{{ pageTitle }}</h2> <h2 class="title">Internet Setup</h2>
<section <section id="internetSetupLogin">
v-for="section in sections" <h3>Does your internet connection require a login?</h3>
:id="section.id" <!-- Backend required to finish -->
:key="section.id" <form>
> <label class="selectOption">
<h3>{{ section.title }}</h3> <input type="radio" name="internetLoginOption" value="1">
<form v-if="section.forms"> Yes
<label </label>
:class="form.class" <label class="selectOption">
v-for="(form, index) in section.forms" <input type="radio" name="internetLoginOption" value="2">
> No
<input
:type="form.option"
:name="form.name"
:value="form.option === 'radio' ? index : ''"
:checked="section.selectedRadio === index"
:key="form.label"
>
{{ form.label }}
</label> </label>
</form> </form>
<template v-else></template>
<div class="seperator"></div>
</section> </section>
<div class="seperator"></div>
<section id="internetSetupIP">
<h3>Internet IP Address</h3>
<form>
<label class="selectOption">
<input type="radio" name="internetIPOption" value="1">
Dynamic IP from ISP
</label>
<label class="selectOption">
<input type="radio" name="internetIPOption" value="2">
Static IP from ISP
</label>
</form>
</section>
<div class="seperator"></div>
<section>
<h3>DNS (Domain Name Server) Address</h3>
<form>
<label class="selectOption">
<input type="radio" name="internetDNSOption" value="1">
Automatic DNS from ISP
</label>
<label class="selectOption">
<input type="radio" name="internetDNSOption" value="2">
Select DNS Servers
</label>
</form>
</section>
<div class="seperator"></div>
<section>
<h3>Router MAC Address</h3>
<form>
<label class="selectOption">
<input type="radio" name="internetMACOption" value="1">
Default Address
</label>
<label class="selectOption">
<input type="radio" name="internetMACOption" value="2">
Computer MAC Address
</label>
<label class="selectOption">
<input type="radio" name="internetMACOption" value="2">
Specific MAC Adress
</label>
</form>
</section>
<div class="seperator"></div>
</div> </div>
</template> </template>

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

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

5
src/styles/basicDashboard.css
View file

@ -130,9 +130,6 @@
gap: 10px; gap: 10px;
} }
.seperator {
margin-top: 20px;
}
.selectOption { .selectOption {
display: flex; display: flex;
align-items: center; align-items: center;
@ -145,7 +142,7 @@
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
} }
.inputOption { .inputName {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
input { input {