xobs/farpatch-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source 
Signed-off-by: Sean Cross <sean@xobs.io>
This commit is contained in:
Sean Cross 2023-12-01 12:32:17 +08:00
commit 02e1556a65
2 changed files with 146 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
index.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/line-awesome.min.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/mobile.css">
<script src="main.js"></script>
</head>
<body>
<nav class="sidenav">
<ul class="sidenav-nav">
<li class="sidenav-item sidenav-item-active" id="dashboard-button">
<a class="sidenav-link">
<span class="las la-3x la-home icon"></span>
<span class="link-text">Dashboard</span>
</a>
</li>
<li class="sidenav-item" id="uart-button">
<a class="sidenav-link">
<span class="las la-3x la-keyboard icon">*</span>
<span class="link-text">UART</span>
</a>
</li>
<li class="sidenav-item" id="rtt-button">
<a class="sidenav-link">
<span class="las la-3x la-microchip icon"></span>
<span class="link-text">RTT</span>
</a>
</li>
<li class="sidenav-item" id="debug-button">
<a class="sidenav-link">
<span class="las la-3x la-scroll icon"></span>
<span class="link-text">Debug</span>
</a>
</li>
<li class="sidenav-item" id="settings-button">
<a class="sidenav-link">
<span class="las la-3x la-sliders-h icon"></span>
<span class="link-text">Settings</span>
</a>
</li>
<li class="sidenav-item-filler"></li>
<li class="sidenav-item sidenav-item-toggle" id="rail-toggle-button">
<a class="sidenav-link">
<span class="las la-3x la-bars icon"></span>
<span class="link-text">Hide</span>
</a>
</li>
</ul>
</nav>
<main>
<div class="main-content main-content-active" id="dashboard-view">
<div>Version: 1.0</div>
</div>
<div class="main-content" id="uart-view">
<div>[Terminal goes here]</div>
<img src="robot-background.png" width="100%" height="100%" />
</div>
<div class="main-content" id="rtt-view">
<div>[RTT goes here]</div>
</div>
<div class="main-content" id="debug-view">
<div>[Debug goes here]</div>
</div>
<div class="main-content" id="settings-view">
<div>[Settings goes here]</div>
</div>
</main>
</body>

68
main.js Normal file
View File

@ -0,0 +1,68 @@
function addTiggleSidebarListener(element) {
// Hide or show the sidebar. MaterialUI calls this toggling between
// a "rail" and a "sidebar".
element.addEventListener('click', function () {
// Hide or show the main content area
var main = document.getElementsByTagName("main")[0];
// Adjust the width of the sidebar as well
var sideNav = document.querySelectorAll(".sidenav")[0];
if (main.classList.contains("main-sidebar-rail")) {
main.classList.remove("main-sidebar-rail");
sideNav.classList.remove("sidenav-rail");
} else {
main.classList.add("main-sidebar-rail");
sideNav.classList.add("sidenav-rail");
}
}, false);
}
// On load, add a listener for mouse clicks on the navigation bar.
function addNavListener(element) {
// Hook "click" for each navigation item. The listener will:
// 1. Loop through each nav item and remove the "active" class for
// each inactive item and add it to the newly-clicked item.
// 2. Unhide the correct view to activate it
element.addEventListener('click', function () {
var navItems = document.querySelectorAll(".sidenav-item");
for (var i = 0; i < navItems.length; i++) {
var navItem = navItems[i];
if (navItem === element) {
if (!navItem.classList.contains("sidenav-item-active")) {
navItem.classList.add("sidenav-item-active");
}
} else {
navItem.classList.remove("sidenav-item-active");
}
}
var navItems = document.querySelectorAll(".main-content-active");
for (var i = 0; i < navItems.length; i++) {
var navItem = navItems[i];
navItem.classList.remove("main-content-active");
}
var elementBase = element.id.replace("-button", "");
var elementContent = document.getElementById(elementBase + "-view");
elementContent.classList.add("main-content-active");
}, false);
}
document.addEventListener('DOMContentLoaded', function () {
var navItems = document.querySelectorAll(".sidenav-item");
for (var i = 0; i < navItems.length; i++) {
// For the "toggle" button, don't add a listener. Instead, have it
// toggle the visibility of the sidebar.
if (navItems[i].classList.contains("sidenav-item-toggle")) {
addTiggleSidebarListener(navItems[i]);
} else {
addNavListener(navItems[i]);
}
}
// var navItems = document.querySelectorAll(".main-viewport");
// for (var i = 0; i < navItems.length; i++) {
// addNavListener(navItems[i]);
// }
}, false);