Completes basic functionality for UI configuration

public/conf.yml

@@ -1,165 +1,33 @@
 ---
 pageInfo:
-  title: Networking Services
+  title: Dashy
+  navLinks:
+  - title: Home
+    path: /
+  - title: About
+    path: /about
+  - title: Source Code
+    path: https://github.com/Lissy93/dashy
+appConfig:
+  theme: colorful
+  fontAwesomeKey: 0821c65656
 sections:
-- name: Firewall
+- name: Getting Started
   items:
-  - title: OPNsense
-    description: Firewall Central Management
-    icon: networking/opnsense.png
-    target: iframe
-    url: https://192.168.1.1
-  - title: NetData
-    description: System resource usage on firewall
-    icon: networking/netdata.png
-    url: http://192.168.1.1:19999/
-  - title: MalTrail
-    description: Malicious traffic detection system
-    icon: networking/maltrail.png
-    url: http://192.168.1.1:8338
-  - title: Ntopng
-    description: Network traffic probe and network use monitor
-    icon: networking/ntop.png
-    url: http://192.168.1.1:3001
-  - title: Sensei
-    description: Additional data features
-    icon: networking/sensei.png
-    url: https://192.168.1.1/ui/sensei/
-  - title: Monit
-    description: Status of firewall system alerts
-    icon: networking/monit.png
-    url: https://192.168.1.1/ui/monit/status
-  - title: Firewall Logs
-    description: Real-time view of firewall data and logs
-    icon: networking/logs.png
-    url: https://192.168.1.1/ui/diagnostics/firewall/log
-  - title: WireGuard
-    description: Manage WireGuard client and server on firewall
-    icon: networking/wireguard.png
-    url: https://192.168.1.1/ui/wireguard/general
-- name: DNS Device
-  displayData:
-    collapsed: false
-    rows: 2
-  items:
-  - title: Pi-Hole
-    description: DNS settings for ad & tracker blocking
-    icon: networking/pihole.png
-    url: http://192.168.130.2/admin
-  - title: PiAlert
-    description: Presence monitoring and ARP scanning
-    icon: networking/pialert.png
-    url: http://192.168.130.2/pialert/
-  - title: SmokePing
-    description: Network latency monitoring
-    icon: networking/smokeping.png
-    url: http://192.168.130.2:8086/
-  - title: StatPing
-    description: Up-time monitoring for local service
-    icon: networking/statping.png
-    url: http://192.168.130.2:8083/
-  - title: LibreSpeed
-    description: Local network speed and latency test
-    icon: networking/librespeed.png
-    url: http://192.168.130.2:49154/
-  - title: NetData
-    description: Real-time system resource usage
-    icon: networking/netdata.png
-    url: http://192.168.130.2:19999
-  - title: Portainer
-    description: Docker container management
-    icon: networking/portainer.png
-    url: http://192.168.130.2:9000/
-  - title: cAdvisor
-    description: Container monitoring
-    icon: networking/cadvisor.png
-    url: http://192.168.130.2:8084/
-  - title: Glances
-    description: Simple resource usage
-    icon: networking/glances.png
-    url: http://192.168.130.2:61208
-  - title: Dozzle
-    description: Docker container web log viewer
-    icon: networking/dozzle.png
-    url: http://192.168.130.2:8093
-  - title: Prometheus
-    description: System Statistics Aggregation with PromQL
-    icon: networking/prometheus.png
-    url: http://192.168.130.2:8090/
-  - title: Grafana
-    description: Data visualised on dashboards
-    icon: networking/grafana.png
-    url: http://192.168.130.2:8091/
-- name: External Services
-  items:
-  - title: DuckDNS
-    description: Dynamic DNS for fixed public IP
-    icon: networking/duckdns.png
-    url: https://www.duckdns.org/
-  - title: BorgBase
-    description: Off-site system Borg backups
-    icon: networking/borgbase.png
-    url: https://www.borgbase.com/repositories
-  - title: Mullvad
-    description: Hosted VPN provider
-    icon: networking/mullvad.png
-    url: https://mullvad.net/en/account/
-  - title: ZeroTier
-    description: Secure networks between devices
-    icon: networking/zeroteir.png
-    url: https://my.zerotier.com/
-  - title: HealthChecks
-    description: Cron Job Monitoring
-    icon: networking/healthchecks.png
-    url: https://healthchecks.io/checks/
-  - title: ISP - Vodafone
-    description: Broadband internet provider
-    icon: networking/vodafone.png
-    url: https://myaccount.vodafone.co.uk/
-  - title: Digital Ocean
-    description: Cloud Hosting
-    icon: networking/digital-ocean.png
-    url: https://cloud.digitalocean.com/
-  - title: CloudFlare
-    description: Domain and DNS Management
-    icon: networking/cloudflare.png
-    url: https://dash.cloudflare.com/
-- name: Other Devices
-  items:
-  - title: Modem
-    description: ISP Router Modem Combo
-    icon: ''
-    url: http://192.168.1.5
-  - title: Wireless Access Point
-    description: View clients connected to WiFi
-    icon: ''
-    url: http://192.168.1.109/info.php
-  - title: Fing
-    description: Monitor connectivity issues, ISP quality, health checks and troubleshooting
-    provider: Fing
-    icon: ''
-    url: https://app.fing.com/
-  - title: Switch
-    description: Manage VLANs on Ubiquity Ethernet switch
-    icon: ''
-    url: "#"
-- name: External Utilities
-  displayData:
-    collapsed: true
-  items:
-  - title: Public IP
-    description: Check public IP and associated data
-    icon: ''
-    url: https://www.whatismyip.com/
-  - title: Who Is Lookup
-    description: Check ICAN info for a given IP address or domain
-    icon: ''
-    url: https://whois.domaintools.com/
-  - title: Speed Test
-    description: Upload + download speeds and latency
-    icon: ''
-    url: https://speed.cloudflare.com/
-  - title: Mullvad Check
-    description: Confirms a secure connection to Mullvad's WireGuard servers
-    icon: ''
-    url: https://mullvad.net/check
+  - title: Source
+    description: Source code and documentation on GitHub
+    icon: fab fa-github
+    url: https://github.com/Lissy93/dashy
+  - title: Issues
+    description: View currently open issues, or raise a new one
+    icon: fas fa-bug
+    url: https://github.com/Lissy93/dashy/issues
+  - title: Demo 1
+    description: 'Live Demo #1'
+    icon: far fa-rocket
+    url: https://dashy-demo-1.netlify.app 
+  - title: Demo 2
+    description: 'Live Demo #2'
+    icon: fad fa-planet-ringed
+    url: https://dashy-demo-2.netlify.app 
+  

src/App.vue

@@ -27,7 +27,13 @@ export default {
     /* Returns either page info from the config, or default values */
     getPageInfo(pageInfo) {
       const defaults = Defaults.pageInfo;
-      const localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
+
+      let localPageInfo;
+      try {
+        localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
+      } catch (e) {
+        localPageInfo = {};
+      }
       if (pageInfo) {
         return {
           title: localPageInfo.title || pageInfo.title || defaults.title,

src/components/Configuration/EditSiteMeta.vue

@@ -36,6 +36,7 @@ export default {
       pageInfo.footerText = this.formElements.footerText;
       localStorage.setItem(localStorageKeys.PAGE_INFO, JSON.stringify(pageInfo));
       this.$toasted.show('Changes seved succesfully');
+      setTimeout(() => { location.reload(); }, 1500); // eslint-disable-line no-restricted-globals
     },
   },
   data() {

src/router.js

@@ -2,11 +2,17 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './views/Home.vue';
 import conf from '../public/conf.yml'; // Main site configuration
-import { pageInfo as defaultPageInfo } from './utils/defaults';
+import { pageInfo as defaultPageInfo, localStorageKeys } from './utils/defaults';
 
 Vue.use(Router);
 
 const { sections, pageInfo, appConfig } = conf;
+let localPageInfo;
+try {
+  localPageInfo = JSON.parse(localStorage[localStorageKeys.PAGE_INFO]);
+} catch (e) {
+  localPageInfo = undefined;
+}
 
 const router = new Router({
   routes: [
@@ -16,7 +22,7 @@ const router = new Router({
       component: Home,
       props: {
         sections: sections || [],
-        pageInfo: pageInfo || defaultPageInfo,
+        pageInfo: localPageInfo || pageInfo || defaultPageInfo,
         appConfig: appConfig || {},
       },
       meta: {