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

internetsetup #6

Merged
keyemail merged 2 commits from internetsetup into master 2024-09-27 00:29:52 +00:00
Conversation 0 Commits 2 Files changed 3 +181 -64
3 changed files with 181 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,67 +1,181 @@
<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>
<div id="internetSetupComponent">
<h2 class="title">Internet Setup</h2>
<section id="internetSetupLogin">
<h3>Does your internet connection require a login?</h3>
<!-- Backend required to finish -->
<form>
<label class="selectOption">
<input type="radio" name="internetLoginOption" value="1">
Yes
</label>
<label class="selectOption">
<input type="radio" name="internetLoginOption" value="2">
No
<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 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>
</template>

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>

5
src/styles/basicDashboard.css
View file

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