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

Added Checkboxes; Wireless Component; Seperators, Minor fixes

Browse source
This commit is contained in:
Patrick Hatsune 2024-09-14 00:41:05 -07:00
parent ec53bbd749
commit b5ecc91b32
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
7 changed files with 343 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/ActionFooter.vue Normal file
View file

@ -0,0 +1,40 @@
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { watch, shallowRef } from 'vue';
const {excludedPages} = defineProps<{
excludedPages?: string[]
}>();
const route = useRoute();
let showActionFooter = shallowRef(true);
const checkExluded = (path: string) => {
if(excludedPages){
for(let i = 0; i < excludedPages.length; i++) {
if(excludedPages[i] === path) {
showActionFooter.value = false;
break;
} else {
showActionFooter.value = true;
}
}
}
}
checkExluded(route.path);
watch(() => route.path, (newPath) => {
checkExluded(newPath);
});
</script>
<template>
<footer id="footer" v-if="showActionFooter">
<h2>Save Changes?</h2>
<div>
<button class="apply">Apply</button>
<button>Cancel</button>
</div>
</footer>
</template>

2
src/pages/BasicDashboard.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import Navbar from '@/components/Navbar.vue';
import ActionFooter from '@/components/ActionFooter.vue'
interface NavbarItem {
name: string;
@ -31,6 +32,7 @@
</div>
<div id="basicComponents">
<RouterView/>
<ActionFooter :excludedPages="['/basic']"/>
</div>
</div>
</template>

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

@ -3,61 +3,65 @@
<h2 class="title">Internet Setup</h2>
<section id="internetSetupLogin">
<h3>Does your internet connection require a login?</h3>
<!-- There will be no input (keyboard) for the time being because that requires backend to handle. -->
<!-- Backend required to finish -->
<form>
<label>
<label class="selectOption">
<input type="radio" name="internetLoginOption" value="1">
Yes
</label>
<label>
<label class="selectOption">
<input type="radio" name="internetLoginOption" value="2">
No
</label>
</form>
</section>
<div class="seperator"></div>
<section id="internetSetupIP">
<h3>Internet IP Address</h3>
<form>
<label>
<label class="selectOption">
<input type="radio" name="internetIPOption" value="1">
Dynamic IP from ISP
</label>
<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>
<label class="selectOption">
<input type="radio" name="internetDNSOption" value="1">
Automatic DNS from ISP
</label>
<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>
<label class="selectOption">
<input type="radio" name="internetMACOption" value="1">
Default Address
</label>
<label>
<label class="selectOption">
<input type="radio" name="internetMACOption" value="2">
Computer MAC Address
</label>
<label>
<label class="selectOption">
<input type="radio" name="internetMACOption" value="2">
Specific MAC Adress
</label>
</form>
</section>
<div class="seperator"></div>
</div>
</template>

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

@ -1,6 +1,169 @@
<template>
<div>
<div id="wirelessSettingsComponent">
<h2 class="title">Wireless Settings</h2>
<!-- Backend required to finish -->
<section>
<h3>General Setup</h3>
<form>
<label class="selectOption">
<input type="checkbox"/>
Enable AX (OFDMA Feature)
</label>
<label class="selectOption">
<input type="checkbox"/>
Enable OFDMA (2.4Ghz)
</label>
<label class="selectOption">
<input type="checkbox"/>
Enable OFDMA (5Ghz)
</label>
<label class="selectOption">
<input type="checkbox"/>
Enable automatic 2.4Ghz & 5Ghz switching
</label>
</form>
</section>
<div class="seperator"></div>
<section>
<h3>Wireless 2.4GHz</h3>
<form>
<label class="selectOption">
<input type="checkbox">
Enable SSID Broadcast
</label>
<label class="selectOption">
<input type="checkbox">
Enable 20/40 MHz Coexistence
</label>
<label class="inputName">
<input type="text" name="wirelessName" value="SomeRandomNetwork"/>
Name (SSID)
</label>
<label class="dropdownBox">
<select>
<option valie="Auto">Auto</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
Channel
</label>
<label class="dropdownBox">
<select>
<option value="54">54 Mbps</option>
<option value="289">289 Mbps</option>
<option value="600">600 Mbps</option>
</select>
Mode
</label>
<label class="subSelect">
<label class="selectOption">
<input type="radio" name="securityOption" value="1">
None
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="2">
WPA2-personal [AES]
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="3">
WPA-Personal [TKIP] + WPA2-Personal [AES]
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="4">
WPA3-Personal [SAE]
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="5">
WPA2-personal [AES] + WPA3-Personal
</label>
Security Options
</label>
<label class="inputName">
<input type="password" name="wirelessName" value="SomeRandomPassword"/>
Password (Network)
</label>
</form>
</section>
<div class="seperator"></div>
<section>
<h3>Wireless 5GHz</h3>
<form>
<label class="selectOption">
<input type="checkbox">
Enable SSID Broadcast
</label>
<label class="selectOption">
<input type="checkbox">
Enable 20/40 MHz Coexistence
</label>
<label class="inputName">
<input type="text" name="wirelessName" value="SomeRandomNetwork"/>
Name (SSID)
</label>
<label class="dropdownBox">
<select>
<option valie="Auto">Auto</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
Channel
</label>
<label class="dropdownBox">
<select>
<option value="54">54 Mbps</option>
<option value="289">289 Mbps</option>
<option value="600">600 Mbps</option>
</select>
Mode
</label>
<label class="subSelect">
<label class="selectOption">
<input type="radio" name="securityOption" value="1">
None
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="2">
WPA2-personal [AES]
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="3">
WPA-Personal [TKIP] + WPA2-Personal [AES]
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="4">
WPA3-Personal [SAE]
</label>
<label class="selectOption">
<input type="radio" name="securityOption" value="5">
WPA2-personal [AES] + WPA3-Personal
</label>
Security Options
</label>
<label class="inputName">
<input type="password" name="wirelessName" value="SomeRandomPassword"/>
Password (Network)
</label>
</form>
</section>
<div class="seperator"></div>
</div>
</template>

2
src/routes/router.ts
View file

@ -15,7 +15,7 @@ import BasicGuestNetwork from "../pages/basicDashboard/GuestNetwork.vue"
const routes = [
{
path: '/',
component: BasicDashboard,
redirect: '/basic'
},
{
path: '/advance',

78
src/styles/basicDashboard.css
View file

@ -109,45 +109,28 @@
}
}
#internetSetupComponent {
#internetSetupComponent, #wirelessSettingsComponent {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
max-width: 70%;
margin: auto;
section {
margin-bottom: 10px;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 400px;
}
input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 1.15em;
height:1.15em;
border: 0.15em solid #fff;
border-radius: 10%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
input[type="radio"]::before {
content: "";
width: 100%;
height: 100%;
border-radius: 10%;
transform: scale(0);
transition: 0.3s transform;
background-color: var(--dark-highlight-color);
}
input[type="radio"]:checked::before {
transform: scale(1);
form {
display: flex;
flex-direction: column;
gap: 10px;
}
label {
margin-top: 5px;
.selectOption {
display: flex;
align-items: center;
background-color: var(--dark-bg-alt-2-color);
@ -156,5 +139,46 @@
border-radius: 5px;
padding: 10px;
font-size: 1.2rem;
user-select: none;
cursor: pointer;
}
.inputName {
display: flex;
flex-direction: column-reverse;
input {
margin-top: 5px;
display: flex;
align-items: center;
background-color: var(--dark-bg-alt-2-color);
min-height: 50px;
width: 100%;
border-radius: 5px;
padding: 10px;
font-size: 1.2rem;
border: none;
color: #fff;
}
}
.dropdownBox {
display: flex;
flex-direction: column-reverse;
select {
margin-top: 5px;
display: flex;
align-items: center;
background-color: var(--dark-bg-alt-2-color);
min-height: 50px;
width: 100%;
border-radius: 5px;
padding: 10px;
font-size: 1.2rem;
border: none;
color: #fff;
}
}
.subSelect {
display: flex;
flex-direction: column-reverse;
gap: 5px;
}
}

71
src/styles/main.css
View file

@ -83,6 +83,40 @@ a {
}
}
#footer {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--dark-bg-alt-2-color);
width: 70%;
margin: 20px auto;
padding: 15px;
border-radius: 5px;
div {
display: flex;
gap: 10px;
float: right;
}
button {
color: inherit;
background-color: var(--dark-bg-alt-2-color);
border: none;
height: 40px;
width: 70px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
text-underline-offset: 2px;
}
button:hover {
text-decoration: underline;
}
.apply {
background-color: var(--dark-highlight-color);
}
}
.popup {
position: relative;
height: min-content;
@ -120,4 +154,41 @@ a {
.bad-indicator {
background-color: var(--bad-indicator) !important;
}
.seperator {
background-color: #4c4c4c;
height: 2px;
width: 100%;
}
input[type="radio"], input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 15px;
height:15px;
border: 2px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
input[type="radio"]::before, input[type="checkbox"]::before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
transform: scale(0);
transition: 0.3s transform;
background-color: var(--dark-highlight-color);
}
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before {
transform: scale(1);
}
input[type="checkbox"], input[type="checkbox"]::before {
border-radius: 10%;
}