Compare commits
No commits in common. "ad82a5f6f027b411881650eab724057e97a27f53" and "1cd033204a93bfb7c5b811bc3611c789bd27e1d8" have entirely different histories.
ad82a5f6f0
...
1cd033204a
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue