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

FileShare icon added, links added, indicator classes added

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-31 03:20:27 -07:00
parent c6df451e7d
commit ce6e3c9b70
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
3 changed files with 98 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,73 +2,94 @@
<div id="overviewComponent"> <div id="overviewComponent">
<h2 class="title">Overview</h2> <h2 class="title">Overview</h2>
<ul> <ul>
<li> <RouterLink to="/basic/wireless">
<svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg"> <li>
<g transform="translate(-2.1685 -3.7025)"> <svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
<g fill="none" stroke="#fff"> <g transform="translate(-2.1685 -3.7025)">
<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"/> <g fill="none" stroke="#fff">
<ellipse transform="rotate(90)" cx="58.967" cy="-60.126" rx="51.358" ry="28.519" stroke-width="7.198"/> <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 cx="60.126" cy="28.382" rx="36.141" ry="18.7" stroke-width="7.2368"/> <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="90.237" rx="36.119" ry="18.927" stroke-width="7.2342"/> <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> </g>
<rect x="56.527" y="8.3201" width="7.198" height="102.86" ry="0" fill="#fff" stroke-width="0"/> </svg>
</g> <h3>Internet</h3>
</svg> <span class="good-indicator">Online: LAN4</span>
<h3>Internet</h3> </li>
<span style="background-color: var(--good-indicator);">Online: LAN4</span> </RouterLink>
</li> <RouterLink to="/basic/wireless">
<li> <li>
<svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg"> <svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-2.0001 -17.685)"> <g transform="translate(-2.0001 -17.685)">
<circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/> <circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/>
<g fill="none" stroke="#fff" stroke-width="8.7977"> <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="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="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"/> <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>
</g> </svg>
</svg> <h3>Wifi</h3>
<h3>Wifi</h3> <span class="warning-indicator">
<span style="background-color: var(--warning-indicator);"> 5Ghz: On | 2.4Ghz: Off
5Ghz: On | 2.4Ghz: Off </span>
</span> </li>
</li> </RouterLink>
<li> <RouterLink to="/basic/devices">
<svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg"> <li>
<g transform="translate(-7.2896 -15.784)"> <svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)"> <g transform="translate(-7.2896 -15.784)">
<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 transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)">
<g fill="#fff" stroke-width="0"> <rect x="26.334" y="23.019" width="67.332" height="42.58" ry="4.3365" fill="none" stroke="#fff" stroke-width="5.834"/>
<rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/> <g fill="#fff" stroke-width="0">
<rect x="58.961" y="67.719" width="1.5653" height="3.0535"/> <rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/>
<rect x="41.291" y="78.287" width="37.419" height="5.8942" ry="2.5257"/> <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> </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>
</g> </svg>
</svg> <h3>
<h3> File Sharing
Devices </h3>
</h3> <span class="bad-indicator">Offline</span>
<span>Online: 0</span> </li>
</li> </RouterLink>
<li> <RouterLink to="/basic/QoS">
<h3> <li>
File Sharing <h3>
</h3> QoS
<span style="background-color: var(--bad-indicator);">Offline</span> </h3>
</li> <span class="good-indicator">Online</span>
<li> </li>
<h3> </RouterLink>
QoS <RouterLink to="/basic/guestnetwork">
</h3> <li>
<span style="background-color: var(--good-indicator);">Online</span> <h3>
</li> Guest Network
<li> </h3>
<h3> <span class="bad-indicator">Offline</span>
Guest Network </li>
</h3> </RouterLink>
<span style="background-color: var(--bad-indicator);">Offline</span>
</li>
</ul> </ul>
</div> </div>
</template> </template>

7
src/styles/basicDashboard.css
View file

@ -67,7 +67,7 @@
max-width: 730px; max-width: 730px;
li { li {
display: inherit; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -77,10 +77,6 @@
width: 230px; width: 230px;
border-radius: 20px; border-radius: 20px;
cursor: pointer; cursor: pointer;
transition: 0.3s background-color;
}
li:hover {
background-color: var(--dark-alt-highlight-color);
} }
img { img {
width: 80px; width: 80px;
@ -93,6 +89,7 @@
span { span {
width: 100%; width: 100%;
height: 30px; height: 30px;
margin-top: 5px;
background-color: var(--neutral-indicator); background-color: var(--neutral-indicator);
border-radius: var(--alt-border-radius); border-radius: var(--alt-border-radius);
text-align: center; text-align: center;

12
src/styles/main.css
View file

@ -109,3 +109,15 @@ a {
justify-content: center; justify-content: center;
flex-grow: 1; 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;
}