From ce6e3c9b702c54f73aab8402adbf77d7f3465a4a Mon Sep 17 00:00:00 2001
From: Keyemail <hatsunepatrick@gmail.com>
Date: Sat, 31 Aug 2024 03:20:27 -0700
Subject: [PATCH] FileShare icon added, links added, indicator classes added

---
 src/pages/basicDashboard/Overview.vue | 147 +++++++++++++++-----------
 src/styles/basicDashboard.css         |   7 +-
 src/styles/main.css                   |  12 +++
 3 files changed, 98 insertions(+), 68 deletions(-)

diff --git a/src/pages/basicDashboard/Overview.vue b/src/pages/basicDashboard/Overview.vue
index 40d650c..2625b73 100644
--- a/src/pages/basicDashboard/Overview.vue
+++ b/src/pages/basicDashboard/Overview.vue
@@ -2,73 +2,94 @@
   <div id="overviewComponent">
     <h2 class="title">Overview</h2>
     <ul>
-      <li>
-        <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"/>
+      <RouterLink to="/basic/wireless">
+        <li>
+          <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>
-            <rect x="56.527" y="8.3201" width="7.198" height="102.86" ry="0" fill="#fff" stroke-width="0"/>
-          </g>
-        </svg>
-        <h3>Internet</h3>
-        <span style="background-color: var(--good-indicator);">Online: LAN4</span>
-      </li>
-      <li>
-        <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"/>
+          </svg>
+          <h3>Internet</h3>
+          <span class="good-indicator">Online: LAN4</span>
+        </li>
+      </RouterLink>
+      <RouterLink to="/basic/wireless">
+        <li>
+          <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>
-          </g>
-        </svg>
-        <h3>Wifi</h3>
-        <span style="background-color: var(--warning-indicator);">
-          5Ghz: On | 2.4Ghz: Off
-        </span>
-      </li>
-      <li>
-        <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"/>
+          </svg>
+          <h3>Wifi</h3>
+          <span class="warning-indicator">
+            5Ghz: On | 2.4Ghz: Off
+          </span>
+        </li>
+      </RouterLink>
+      <RouterLink to="/basic/devices">
+        <li>
+          <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>
+          <h3>
+            Devices
+          </h3>
+          <span>Online: 0</span>
+        </li>
+      </RouterLink>
+      <RouterLink to="/basic/fileshare">
+        <li>
+          <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>
-          </g>
-        </svg>
-        <h3>
-          Devices
-        </h3>
-        <span>Online: 0</span>
-      </li>
-      <li>
-        <h3>
-          File Sharing
-        </h3>
-        <span style="background-color: var(--bad-indicator);">Offline</span>
-      </li>
-      <li>
-        <h3>
-          QoS
-        </h3>
-        <span style="background-color: var(--good-indicator);">Online</span>
-      </li>
-      <li>
-        <h3>
-          Guest Network
-        </h3>
-        <span style="background-color: var(--bad-indicator);">Offline</span>
-      </li>
+          </svg>
+          <h3>
+            File Sharing
+          </h3>
+          <span class="bad-indicator">Offline</span>
+        </li>
+      </RouterLink>
+      <RouterLink to="/basic/QoS">
+        <li>
+          <h3>
+            QoS
+          </h3>
+          <span class="good-indicator">Online</span>
+        </li>
+      </RouterLink>
+      <RouterLink to="/basic/guestnetwork">
+        <li>
+          <h3>
+            Guest Network
+          </h3>
+          <span class="bad-indicator">Offline</span>
+        </li>
+      </RouterLink>
     </ul>
   </div>
 </template>
diff --git a/src/styles/basicDashboard.css b/src/styles/basicDashboard.css
index 34959a9..f789bb8 100644
--- a/src/styles/basicDashboard.css
+++ b/src/styles/basicDashboard.css
@@ -67,7 +67,7 @@
     max-width: 730px;
 
     li {
-      display: inherit;
+      display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
@@ -77,10 +77,6 @@
       width: 230px;
       border-radius: 20px;
       cursor: pointer;
-      transition: 0.3s background-color;
-    }
-    li:hover {
-      background-color: var(--dark-alt-highlight-color);
     }
     img {
       width: 80px;
@@ -93,6 +89,7 @@
     span {
       width: 100%;
       height: 30px;
+      margin-top: 5px;
       background-color: var(--neutral-indicator);
       border-radius: var(--alt-border-radius);
       text-align: center;
diff --git a/src/styles/main.css b/src/styles/main.css
index 64ddbf9..296e52c 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -108,4 +108,16 @@ a {
   align-items: center;
   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;
 }
\ No newline at end of file