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

Made internet setup reactive

Browse source
This commit is contained in:
Patrick Hatsune 2024-09-17 02:28:54 -07:00
parent 1cd033204a
commit 5b6763be4c
2 changed files with 108 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

3
src/styles/basicDashboard.css
View file

@ -130,6 +130,9 @@
gap: 10px; gap: 10px;
} }
.seperator {
margin-top: 20px;
}
.selectOption { .selectOption {
display: flex; display: flex;
align-items: center; align-items: center;