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

Added backend!

Browse source
This commit is contained in:
Patrick Hatsune 2024-09-06 01:21:42 -07:00
parent 1cd033204a
commit c6d94af8e7
3 changed files with 100 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
package-lock.json generated
View file

@ -8,6 +8,7 @@
"name": "router-ui-frontend",
"version": "0.0.0",
"dependencies": {
"axios": "^1.7.7",
"axios": "^1.7.7",
"path": "^0.12.7",
"vue": "^3.4.37",
@ -854,6 +855,21 @@
"proxy-from-env": "^1.1.0"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.7.7",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
"integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -886,6 +902,17 @@
"node": ">= 0.8"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@ -994,6 +1021,14 @@
"node": ">=0.4.0"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@ -1104,9 +1139,9 @@
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"node_modules/follow-redirects": {
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
"integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
"version": "1.15.8",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.8.tgz",
"integrity": "sha512-xgrmBhBToVKay1q2Tao5LI26B83UhrB/vM1avwVSDzt8rx3rO6AizBAaF46EgksTVr+rFTQaqZZ9MVBfUe4nig==",
"funding": [
{
"type": "individual",
@ -1196,6 +1231,25 @@
"node": ">= 0.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@ -1306,6 +1360,11 @@
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/rollup": {
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",

63
src/pages/basicDashboard/Overview.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { shallowRef, onMounted, onUnmounted } from 'vue';
import { shallowRef, onMounted } from 'vue';
import axios from 'axios';
import internetIcon from '@/assets/overviewSvgs/Internet.svg'
@ -31,54 +31,71 @@
}
const backendOnline = shallowRef<boolean>(true);
const overviewItems = shallowRef<overviewItemsType[]>([]);
const internetMode = shallowRef<string | null>(null);
const wifiMode5Ghz = shallowRef<string | null>(null);
const wifiMode2Ghz = shallowRef<number | null>(null);
const devices = shallowRef<string | null>(null);
const fileShare = shallowRef<string | null>(null);
const qos = shallowRef<string | null>(null);
const guestNetwork = shallowRef<string | null>(null);
const fetchOverviewItems = async () => {
try {
const response = await axios.get('http://localhost:8080/overviewItems');
internetMode.value = response.data.internetMode;
wifiMode5Ghz.value = response.data.wifiMode5Ghz;
wifiMode2Ghz.value = response.data.wifiMode2Ghz;
devices.value = response.data.devices;
fileShare.value = response.data.fileShare;
qos.value = response.data.qos;
guestNetwork.value = response.data.guestNetwork
overviewItems.value = [
{
name: "Internet",
link: "/basic/internet",
icon: internetIcon,
statusColor: statusColors[response.data.internetStatus],
statusMessage: `${response.data.internetMode} ${response.data.internetPort}`,
statusColor: statusColors.goodStatus,
statusMessage: `Online: ${internetMode.value}`,
},
{
name: "Wifi",
link: "/basic/wireless",
icon: wifiIcon,
statusColor: statusColors[response.data.wifiModeStatus],
statusMessage: `5Ghz: ${response.data.wifiMode5Ghz} | 2.4Ghz: ${response.data.wifiMode2Ghz}`,
statusColor: statusColors.warningStatus,
statusMessage: `5Ghz: ${wifiMode5Ghz.value} | 2.4Ghz: ${wifiMode2Ghz.value}`,
},
{
name: "Devices",
link: "/basic/devices",
icon: devicesIcon,
statusColor: null,
statusMessage: `Online: ${response.data.devices}`,
},
{
name: "QoS",
link: "/basic/qos",
icon: qosIcon,
statusColor: statusColors[response.data.qosStatus],
statusMessage: `${response.data.qosMode}`,
statusMessage: `Online: ${devices.value}`,
},
{
name: "File Sharing",
link: "/basic/fileshare",
icon: fileSharingIcon,
statusColor: statusColors[response.data.fileShareStatus],
statusMessage: `${response.data.fileShareMode}`,
statusColor: statusColors.badStatus,
statusMessage: `${fileShare.value}`,
},
{
name: "QoS",
link: "/basic/qos",
icon: qosIcon,
statusColor: statusColors.goodStatus,
statusMessage: `${qos.value}`,
},
{
name: "Guest Network",
link: "/basic/guestnetwork",
icon: guestNetworkIcon,
statusColor: statusColors[response.data.guestNetworkStatus],
statusMessage: `${response.data.guestNetworkMode}`,
statusColor: statusColors.badStatus,
statusMessage: `${guestNetwork}`,
}
];
} catch (error) {
@ -86,24 +103,15 @@
}
};
let pollInterval: number;
onMounted(() => {
fetchOverviewItems();
pollInterval = window.setInterval(() => {
fetchOverviewItems();
}, 30000);
});
onUnmounted(() => {
clearInterval(pollInterval);
})
</script>
<template>
<div id="overviewComponent">
<h2 class="title">Overview</h2>
<ul v-if="backendOnline">
<ul v-if="backendOnline">
<RouterLink :to="overviewItem.link" v-for="overviewItem in overviewItems">
<li>
@ -114,6 +122,7 @@
</RouterLink>
</ul>
<p class="error" v-else>Backend offline or not available, please try again later.</p>
<p class="error" v-else>Backend offline or not available, please try again later.</p>
</div>
</template>

4
src/styles/basicDashboard.css
View file

@ -1,7 +1,7 @@
.error {
margin-top: 30px;
width: 100%;
text-align: center;
width: 100%;
margin-top: 30px;
font-size: 2rem;
}