Finished Overview for Basic Dashboard

Optimized overview.vue, added root '@'
QoS icon added; Finished dashboard UI
2024-08-31 23:25:15 -07:00 · 2024-08-31 23:22:00 -07:00 · 2024-08-31 17:55:09 -07:00 · 2024-08-31 03:20:27 -07:00 · 2024-08-31 00:22:08 -07:00
28 changed files with 531 additions and 56 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,13 +8,16 @@
      "name": "router-ui-frontend",
      "version": "0.0.0",
      "dependencies": {
+        "path": "^0.12.7",
        "vue": "^3.4.37",
        "vue-router": "^4.4.3"
      },
      "devDependencies": {
-        "@vitejs/plugin-vue": "^5.1.2",
+        "@types/node": "^22.5.1",
+        "@vitejs/plugin-vue": "^5.1.3",
        "typescript": "^5.5.3",
        "vite": "^5.4.1",
+        "vite-svg-loader": "^5.1.0",
        "vue-tsc": "^2.0.29"
      }
    },
@ -642,16 +645,34 @@
        "win32"
      ]
    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/@types/estree": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
      "dev": true
    },
+    "node_modules/@types/node": {
+      "version": "22.5.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
+      "integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.19.2"
+      }
+    },
    "node_modules/@vitejs/plugin-vue": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz",
-      "integrity": "sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.3.tgz",
+      "integrity": "sha512-3xbWsKEKXYlmX82aOHufFQVnkbMC/v8fLpWwh6hWOUrK5fbbtBh9Q/WWse27BFgSy2/e2c0fz5Scgya9h2GLhw==",
      "dev": true,
      "engines": {
        "node": "^18.0.0 || >=20.0.0"
@ -823,6 +844,12 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "dev": true
    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
    "node_modules/brace-expansion": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@ -832,12 +859,95 @@
        "balanced-match": "^1.0.0"
      }
    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/computeds": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
      "dev": true
    },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@ -849,6 +959,61 @@
      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
      "dev": true
    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -926,6 +1091,11 @@
        "he": "bin/he"
      }
    },
+    "node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
    "node_modules/magic-string": {
      "version": "0.30.11",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@ -934,6 +1104,12 @@
        "@jridgewell/sourcemap-codec": "^1.5.0"
      }
    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
    "node_modules/minimatch": {
      "version": "9.0.5",
      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@ -972,6 +1148,27 @@
        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
      }
    },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
    "node_modules/path-browserify": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
@ -1010,6 +1207,14 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/rollup": {
      "version": "4.21.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.21.0.tgz",
@ -1065,6 +1270,31 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
    "node_modules/to-fast-properties": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@ -1086,6 +1316,20 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true
+    },
+    "node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
    "node_modules/vite": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.1.tgz",
@ -1145,6 +1389,18 @@
        }
      }
    },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.0.tgz",
+      "integrity": "sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==",
+      "dev": true,
+      "dependencies": {
+        "svgo": "^3.0.2"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
    "node_modules/vscode-uri": {
      "version": "3.0.8",
      "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.8.tgz",
--- a/package.json
+++ b/package.json
@ -9,13 +9,16 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "path": "^0.12.7",
    "vue": "^3.4.37",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@types/node": "^22.5.1",
+    "@vitejs/plugin-vue": "^5.1.3",
    "typescript": "^5.5.3",
    "vite": "^5.4.1",
+    "vite-svg-loader": "^5.1.0",
    "vue-tsc": "^2.0.29"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@ -1,9 +1,4 @@
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'App',
-  });
+<script setup lang="ts">
 </script>

 <template>
--- a/src/assets/overviewSvgs/Devices.svg
+++ b/src/assets/overviewSvgs/Devices.svg
@ -0,0 +1,12 @@
+<svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-7.2896 -15.784)">
+    <g transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)">
+    <rect x="26.334" y="23.019" width="67.332" height="42.58" ry="4.3365" fill="none" stroke="#fff" stroke-width="5.834"/>
+    <g fill="#fff" stroke-width="0">
+      <rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/>
+      <rect x="58.961" y="67.719" width="1.5653" height="3.0535"/>
+      <rect x="41.291" y="78.287" width="37.419" height="5.8942" ry="2.5257"/>
+    </g>
+    </g>
+  </g>
+</svg>
--- a/src/assets/overviewSvgs/FileSharing.svg
+++ b/src/assets/overviewSvgs/FileSharing.svg
@ -0,0 +1,9 @@
+<svg version="1.1" viewBox="0 0 101.73 101.73" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-6.5281 -12.557)">
+    <g transform="matrix(.89724 -.89724 .73751 .73751 -43.308 62.468)">
+      <rect x="17.713" y="51.062" width="60.612" height="35.705" ry="1.493" fill="none" stroke="#fff" stroke-width="7.6729"/>
+      <rect x="78.329" y="58.538" width="21.201" height="20.755" ry="1.3525" fill="none" stroke="#fff" stroke-width="7.6729"/>
+      <rect x="29.763" y="52.955" width="6.9565" height="31.921" ry=".027657" fill="#fff" stroke-width="0"/>
+    </g>
+  </g>
+</svg>
--- a/src/assets/overviewSvgs/GuestNetwork.svg
+++ b/src/assets/overviewSvgs/GuestNetwork.svg
@ -0,0 +1,11 @@
+<svg version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <rect x="27.041" y="8.3281" width="65.918" height="103.34" ry="1.5063" fill="none" stroke="#fff" stroke-width="8.32"/>
+    <g transform="translate(1.903 -11.525)">
+      <circle cx="51.094" cy="81.91" r="6.3641" fill="#fff"/>
+      <path transform="rotate(225)" d="m-81.44-18.393a13.101 13.101 0 0 1-10.945 9.5983 13.101 13.101 0 0 1-13.056-6.4385" fill="none" stroke="#fff" stroke-width="8.32"/>
+      <path transform="rotate(225)" d="m-71.49-15.693a23.184 23.184 0 0 1-19.427 17.565 23.184 23.184 0 0 1-23.405-11.754" fill="none" stroke="#fff" stroke-width="8.32"/>
+    </g>
+  <rect x="52.402" y="11.847" width="15.195" height="4.8374" ry=".92591" fill="none" stroke="#fff" stroke-width="2.5323"/>
+  <rect x="66.448" y="12" width="25.935" height="5.9475" rx="0" ry="0" fill="#fff"/>
+  <rect x="29.744" y="12.003" width="23.803" height="5.9269" rx="0" ry="0" fill="#fff"/>
+</svg>
--- a/src/assets/overviewSvgs/Internet.svg
+++ b/src/assets/overviewSvgs/Internet.svg
@ -0,0 +1,11 @@
+<svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-2.1685 -3.7025)">
+    <g fill="none" stroke="#fff">
+      <ellipse transform="matrix(1.1232 0 0 1.1232 -7.2654 -7.4582)" cx="60" cy="59.554" rx="47.684" ry="45.701" stroke-width="7.833"/>
+      <ellipse transform="rotate(90)" cx="58.967" cy="-60.126" rx="51.358" ry="28.519" stroke-width="7.198"/>
+      <ellipse cx="60.126" cy="28.382" rx="36.141" ry="18.7" stroke-width="7.2368"/>
+      <ellipse cx="60.126" cy="90.237" rx="36.119" ry="18.927" stroke-width="7.2342"/>
+    </g>
+    <rect x="56.527" y="8.3201" width="7.198" height="102.86" ry="0" fill="#fff" stroke-width="0"/>
+  </g>
+</svg>
--- a/src/assets/overviewSvgs/QoS.svg
+++ b/src/assets/overviewSvgs/QoS.svg
@ -0,0 +1,15 @@
+<svg version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1.2433 0 0 1.2433 -14.308 -13.81)">
+    <circle cx="60" cy="60" r="34.221" fill="none" stroke="#fff" stroke-width="8.32"/>
+    <g fill="#fff">
+      <rect x="49.221" y="14.964" width="21.558" height="13.375"/>
+      <rect transform="rotate(135)" x="-10.773" y="-129.85" width="21.558" height="13.8"/>
+      <rect transform="rotate(225)" x="-95.638" y="-45" width="21.558" height="14.5"/>
+      <rect transform="rotate(45)" x="74.074" y="-44.999" width="21.558" height="14"/>
+      <rect transform="rotate(-45)" x="-10.782" y="39.851" width="21.558" height="14.4"/>
+      <rect transform="rotate(-90)" x="-70.211" y="15.034" width="21.558" height="14.243"/>
+      <rect transform="rotate(90)" x="48.769" y="-105.17" width="21.558" height="14.423"/>
+      <rect x="49.233" y="90.573" width="21.558" height="14.405"/>
+    </g>
+  </g>
+</svg>
--- a/src/assets/overviewSvgs/Wifi.svg
+++ b/src/assets/overviewSvgs/Wifi.svg
@ -0,0 +1,10 @@
+<svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(-2.0001 -17.685)">
+    <circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/>
+    <g fill="none" stroke="#fff" stroke-width="8.7977">
+      <path transform="scale(1,-1)" d="m84.282-73.026a28.038 28.038 0 0 1-24.282 14.019 28.038 28.038 0 0 1-24.282-14.019" style="paint-order:normal"/>
+      <path transform="scale(1,-1)" d="m100.02-63.652a46.214 46.214 0 0 1-40.023 23.107 46.214 46.214 0 0 1-40.023-23.107" style="paint-order:normal"/>
+      <path transform="scale(1,-1)" d="m114.19-53.37a62.574 62.574 0 0 1-54.19 31.287 62.574 62.574 0 0 1-54.19-31.287" style="paint-order:normal"/>
+    </g>
+  </g>
+</svg>
--- a/src/main.ts
+++ b/src/main.ts
@ -1,7 +1,7 @@
 import { createApp } from "vue";
-import App from "./App.vue";
-import router from './routes/router'
-import './styles/main.css'
+import App from "@/App.vue";
+import router from '@/routes/router.ts'
+import '@/styles/main.css'


 createApp(App)
--- a/src/pages/AdvancedDashboard.vue
+++ b/src/pages/AdvancedDashboard.vue
@ -1,11 +1,5 @@
-<script lang="ts">
-  import Navbar from '../components/Navbar.vue';
-
-  export default {
-    components: {
-      Navbar,
-    }
-  }
+<script setup lang="ts">
+  import Navbar from '@/components/Navbar.vue';
 </script>

 <template>
--- a/src/pages/BasicDashboard.vue
+++ b/src/pages/BasicDashboard.vue
@ -1,9 +1,9 @@
-<script lang="ts">
-  import Navbar from '../components/Navbar.vue';
+<script setup lang="ts">
+  import Navbar from '@/components/Navbar.vue';

  interface NavbarItem {
    name: string;
-    link: string
+    link: string;
  }

  const navbarItems: NavbarItem[] = [
@ -11,21 +11,11 @@
    { name: "Internet Setup", link: "/basic/internet" },
    { name: "Wireless Settings", link:"/basic/wireless" },
    { name: "Device List", link: "/basic/devices" },
-    { name: "QoS", link: "/basic/QoS" },
+    { name: "QoS", link: "/basic/qos" },
    { name: "File Sharing", link: "/basic/fileshare" },
    { name: "Guest Network", link: "/basic/guestnetwork" }
  ];

-  export default {
-    data() {
-      return {
-        navbarItems
-      };
-    },
-    components: {
-      Navbar,
-    }
-  }
 </script>

 <template>
@ -39,8 +29,10 @@
        </RouterLink>
      </ul>
    </div>
-    <RouterView id="basicComponents"/>
+    <div id="basicComponents">
+      <RouterView/>
+    </div>
  </div>
 </template>

-<style src="../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@ -13,4 +13,4 @@
  </div>
 </template>

-<style src="../styles/login.css" scoped></style>
+<style src="@/styles/login.css" scoped></style>
--- a/src/pages/basicDashboard/DeviceList.vue
+++ b/src/pages/basicDashboard/DeviceList.vue
@ -4,4 +4,4 @@
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/basicDashboard/FileShare.vue
+++ b/src/pages/basicDashboard/FileShare.vue
@ -4,4 +4,4 @@
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/basicDashboard/GuestNetwork.vue
+++ b/src/pages/basicDashboard/GuestNetwork.vue
@ -4,4 +4,4 @@
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/basicDashboard/InternetSetup.vue
+++ b/src/pages/basicDashboard/InternetSetup.vue
@ -4,4 +4,4 @@
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/basicDashboard/Overview.vue
+++ b/src/pages/basicDashboard/Overview.vue
@ -1,7 +1,90 @@
+<script setup lang="ts">
+  import internetIcon from '@/assets/overviewSvgs/Internet.svg'
+  import wifiIcon from '@/assets/overviewSvgs/Wifi.svg'
+  import devicesIcon from '@/assets/overviewSvgs/Devices.svg'
+  import fileSharingIcon from '@/assets/overviewSvgs/FileSharing.svg'
+  import qosIcon from '@/assets/overviewSvgs/QoS.svg'
+  import guestNetworkIcon from '@/assets/overviewSvgs/GuestNetwork.svg'
+
+  interface statusColorsType {
+    goodStatus: string;
+    warningStatus: string;
+    badStatus: string;
+  }
+
+  const statusColors: statusColorsType = {
+    goodStatus: "good-indicator",
+    warningStatus: "warning-indicator",
+    badStatus: "bad-indicator",
+  }
+
+  interface overviewItemsType {
+    name: string;
+    link: string;
+    icon: string;
+    statusColor: string | null;
+    statusMessage: string;
+  }
+
+  const overviewItems: overviewItemsType[] = [
+    { 
+      name: "Internet", 
+      link: "/basic/internet", 
+      icon: internetIcon, 
+      statusColor: statusColors.goodStatus, 
+      statusMessage: "Online: LAN4",
+    },
+    {
+      name: "Wifi",
+      link: "/basic/wireless",
+      icon: wifiIcon,
+      statusColor: statusColors.warningStatus,
+      statusMessage: "5Ghz: On | 2.4Ghz: Off",
+    }, 
+    {
+      name: "Devices",
+      link: "/basic/devices",
+      icon: devicesIcon,
+      statusColor: null,
+      statusMessage: "Online: 0",
+    }, 
+    {
+      name: "File Sharing",
+      link: "/basic/fileshare",
+      icon: fileSharingIcon,
+      statusColor: statusColors.badStatus,
+      statusMessage: "Offline",
+    },
+    {
+      name: "QoS",
+      link: "/basic/qos",
+      icon: qosIcon,
+      statusColor: statusColors.goodStatus,
+      statusMessage: "Online",
+    },
+    {
+      name: "Guest Network",
+      link: "/basic/guestnetwork",
+      icon: guestNetworkIcon,
+      statusColor: statusColors.badStatus,
+      statusMessage: "Offline",
+    }
+  ]
+</script>
+
 <template>
-  <div>
+  <div id="overviewComponent">
    <h2 class="title">Overview</h2>
+    <ul>
+      <RouterLink :to="overviewItem.link" v-for="overviewItem in overviewItems">
+        <li>
+          <component :is="overviewItem.icon"/>
+          <h3>{{ overviewItem.name }}</h3>
+          <span :class="overviewItem.statusColor">{{ overviewItem.statusMessage }}</span>
+        </li>
+      </RouterLink>
+    </ul>
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/basicDashboard/QoS.vue
+++ b/src/pages/basicDashboard/QoS.vue
@ -4,4 +4,4 @@
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/pages/basicDashboard/Wireless.vue
+++ b/src/pages/basicDashboard/Wireless.vue
@ -4,4 +4,4 @@
  </div>
 </template>

-<style src="../../styles/basicDashboard.css" scoped></style>
+<style src="@/styles/basicDashboard.css" scoped></style>
--- a/src/routes/router.ts
+++ b/src/routes/router.ts
@ -42,7 +42,7 @@ const routes = [
        component: BasicDevicesList,
      },
      {
-        path: 'QoS',
+        path: 'qos',
        component: BasicQoS,
      },
      {
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@ -14,6 +14,7 @@
  min-height: 100%;
  padding: var(--alt-padding);
  border-radius: var(--border-radius);
+  flex-shrink: 0;

  h2 {
    text-align: center;
@ -54,3 +55,45 @@
  border-radius: var(--border-radius);
  background-color: var(--dark-bg-alt-color);
 }
+
+#overviewComponent {
+  ul {
+    margin: 20px auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    list-style: none;
+    justify-content: center;
+    max-width: 730px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--dark-bg-alt-2-color);
+      height: 200px;
+      padding: var(--alt-padding);
+      width: 230px;
+      border-radius: 20px;
+      cursor: pointer;
+    }
+    img {
+      width: 80px;
+    }
+    svg {
+      height: 100px;
+      padding: 5px;
+      box-sizing: content-box;
+    }
+    span {
+      width: 100%;
+      height: 30px;
+      margin-top: 5px;
+      background-color: var(--neutral-indicator);
+      border-radius: var(--alt-border-radius);
+      text-align: center;
+      line-height: 30px;
+    }
+  }
+}
--- a/src/styles/main.css
+++ b/src/styles/main.css
@ -7,11 +7,16 @@
  --padding: 20px;
  --alt-padding: 10px;
  --border-radius: 20px;
+  --alt-border-radius: 5px;
  --dark-bg-color: #161616;
  --dark-bg-alt-color: #0f0f0f;
  --dark-bg-alt-2-color: #000;
  --dark-highlight-color: #0084ff;
  --dark-alt-highlight-color: #006bcf;
+  --neutral-indicator: #808080;
+  --good-indicator: #44c71c;
+  --warning-indicator: #b6b614;  
+  --bad-indicator: #ad1c1c;
 }

 * {
@ -104,3 +109,15 @@ a {
  justify-content: center;
  flex-grow: 1;
 }
+
+.good-indicator {
+  background-color: var(--good-indicator) !important;
+}
+
+.warning-indicator {
+  background-color: var(--warning-indicator) !important;
+}
+
+.bad-indicator {
+  background-color: var(--bad-indicator) !important;
+}
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -18,7 +18,13 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -3,5 +3,5 @@
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
-  ]
+  ],
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -16,7 +16,18 @@
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": "./",
+     "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
  },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,7 +1,14 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import path from 'path';
+import svgLoader from 'vite-svg-loader';

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
+  resolve : {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    }
+  }
 })
Author	SHA1	Message	Date
Patrick Hatsune	bd4b20705a	Finished Overview for Basic Dashboard	2024-08-31 23:25:15 -07:00
Patrick Hatsune	f54ff607e0	Optimized overview.vue, added root '@'	2024-08-31 23:22:00 -07:00
Patrick Hatsune	9b4a3e00c7	QoS icon added; Finished dashboard UI	2024-08-31 17:55:09 -07:00
Patrick Hatsune	ce6e3c9b70	FileShare icon added, links added, indicator classes added	2024-08-31 03:20:27 -07:00
Patrick Hatsune	c6df451e7d	Started on overview, 3 icons uploaded	2024-08-31 00:22:08 -07:00