Initial bones for #37
This commit is contained in:
Logan Cusano
142
Server/public/res/css/main.css
Normal file
142
Server/public/res/css/main.css
Normal file
@@ -0,0 +1,142 @@
|
||||
.node-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: #fff;
|
||||
background-clip: border-box;
|
||||
border: 1px solid #eff0f2;
|
||||
border-radius: 1rem;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 3px #e4e8f0;
|
||||
}
|
||||
|
||||
.avatar-md {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.img-thumbnail {
|
||||
padding: 0.25rem;
|
||||
background-color: #f1f3f7;
|
||||
border: 1px solid #eff0f2;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.avatar-title {
|
||||
align-items: center;
|
||||
background-color: #3b76e1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
font-weight: 500;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bg-soft-primary {
|
||||
background-color: rgba(59, 118, 225, .25) !important;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.badge-soft-danger {
|
||||
color: #f56e6e !important;
|
||||
background-color: rgba(245, 110, 110, .1);
|
||||
}
|
||||
|
||||
.badge-soft-success {
|
||||
color: #63ad6f !important;
|
||||
background-color: rgba(99, 173, 111, .1);
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.6em;
|
||||
font-size: 75%;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
/* Info Card Section */
|
||||
.info-card {
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0.46875rem 2.1875rem rgba(90, 97, 105, 0.1), 0 0.9375rem 1.40625rem rgba(90, 97, 105, 0.1), 0 0.25rem 0.53125rem rgba(90, 97, 105, 0.12), 0 0.125rem 0.1875rem rgba(90, 97, 105, 0.1);
|
||||
}
|
||||
|
||||
.info-card .card-statistic .card-icon-large .bi {
|
||||
font-size: 110px;
|
||||
}
|
||||
|
||||
.info-card .card-statistic .card-icon {
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
margin-left: 15px;
|
||||
color: #000;
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: 20px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
/* Info Card Background Colors */
|
||||
|
||||
.l-bg-cherry {
|
||||
background: linear-gradient(to right, #493240, #f09) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.l-bg-blue-dark {
|
||||
background: linear-gradient(to right, #373b44, #4286f4) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.l-bg-green-dark {
|
||||
background: linear-gradient(to right, #0a504a, #38ef7d) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.l-bg-orange-dark {
|
||||
background: linear-gradient(to right, #a86008, #ffba56) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.l-bg-cyan {
|
||||
background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.l-bg-green {
|
||||
background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.l-bg-orange {
|
||||
background: linear-gradient(to right, #f9900e, #ffba56) !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Global Section */
|
||||
.sidebar-container {
|
||||
min-height: 94.2vh;
|
||||
}
|
||||
3
Server/public/res/js/controller.js
Normal file
3
Server/public/res/js/controller.js
Normal file
@@ -0,0 +1,3 @@
|
||||
function sendNodeHeartbeat(nodeId) {
|
||||
console.log(nodeId);
|
||||
}
|
||||
@@ -1,11 +1,12 @@
|
||||
const libCore = require("../libCore");
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
|
||||
const { getAllNodes, getNodeInfoFromId } = require("../utilities/mysqlHandler");
|
||||
|
||||
/* GET home page. */
|
||||
router.get('/', (req, res) => {
|
||||
var sources = libCore.getSources();
|
||||
//res.render('index', { "sources": sources });
|
||||
//var sources = libCore.getSources();
|
||||
return res.render('index');
|
||||
|
||||
var htmlOutput = "";
|
||||
|
||||
@@ -28,4 +29,24 @@ router.get('/', (req, res) => {
|
||||
res.send(htmlOutput);
|
||||
});
|
||||
|
||||
/* GET node controller page. */
|
||||
router.get('/controller', async (req, res) => {
|
||||
var nodes = await new Promise((recordResolve, recordReject) => {
|
||||
getAllNodes((nodeRows) => {
|
||||
recordResolve(nodeRows);
|
||||
});
|
||||
});
|
||||
|
||||
//var sources = libCore.getSources();
|
||||
return res.render('controller', {'nodes' : nodes});
|
||||
});
|
||||
|
||||
/* GET individual node page. */
|
||||
router.get('/node/:id', async (req, res) => {
|
||||
var node = await getNodeInfoFromId(req.params.id);
|
||||
|
||||
//var sources = libCore.getSources();
|
||||
return res.render('node', {'node' : node});
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
|
||||
11
Server/views/controller.ejs
Normal file
11
Server/views/controller.ejs
Normal file
@@ -0,0 +1,11 @@
|
||||
<%- include('partials/htmlHead.ejs') %>
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
|
||||
<% for(const node of nodes) {%>
|
||||
<%- include('partials/nodeCard.ejs', {'node': node}) %>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('partials/bodyEnd.ejs') %>
|
||||
<script src="/res/js/controller.js"></script>
|
||||
<%- include('partials/htmlFooter.ejs') %>
|
||||
@@ -1,11 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title><%= title %></title>
|
||||
<link rel='stylesheet' href='/stylesheets/style.css' />
|
||||
</head>
|
||||
<body>
|
||||
<h1><%= title %></h1>
|
||||
<p>Welcome to <%= title %></p>
|
||||
</body>
|
||||
</html>
|
||||
<%- include('partials/htmlHead.ejs') %>
|
||||
<div class="container">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="info-card l-bg-cherry">
|
||||
<div class="card-statistic p-4">
|
||||
<div class="card-icon card-icon-large"><i class="bi bi-cart"></i></div>
|
||||
<div class="mb-4">
|
||||
<h5 class="card-title mb-0">New Orders</h5>
|
||||
</div>
|
||||
<div class="row align-items-center mb-2 d-flex">
|
||||
<div class="col-8">
|
||||
<h2 class="d-flex align-items-center mb-0">
|
||||
3,243
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
<span>12.5% <i class="fa fa-arrow-up"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress mt-1 " data-height="8" style="height: 8px;">
|
||||
<div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-lg-6">
|
||||
<div class="info-card l-bg-blue-dark">
|
||||
<div class="card-statistic p-4">
|
||||
<div class="card-icon card-icon-large"><i class="bi bi-cart"></i></div>
|
||||
<div class="mb-4">
|
||||
<h5 class="card-title mb-0">New Orders</h5>
|
||||
</div>
|
||||
<div class="row align-items-center mb-2 d-flex">
|
||||
<div class="col-8">
|
||||
<h2 class="d-flex align-items-center mb-0">
|
||||
3,243
|
||||
</h2>
|
||||
</div>
|
||||
<div class="col-4 text-right">
|
||||
<span>12.5% <i class="fa fa-arrow-up"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress mt-1 " data-height="8" style="height: 8px;">
|
||||
<div class="progress-bar l-bg-cyan" role="progressbar" data-width="25%" aria-valuenow="25"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width: 25%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card node-card">
|
||||
<div class="card-body">
|
||||
<div class="dropdown float-end">
|
||||
<a class="text-muted dropdown-toggle font-size-16" href="#" role="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"><i
|
||||
class="bx bx-dots-horizontal-rounded"></i></a>
|
||||
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Edit</a><a
|
||||
class="dropdown-item" href="#">Action</a><a class="dropdown-item"
|
||||
href="#">Remove</a></div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div><img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""
|
||||
class="avatar-md rounded-circle img-thumbnail" /></div>
|
||||
<div class="flex-1 ms-3">
|
||||
<h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Phyllis Gatlin</a></h5>
|
||||
<span class="badge badge-soft-success mb-0">Full Stack Developer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-1">
|
||||
<p class="text-muted mb-0"><i
|
||||
class="mdi mdi-phone font-size-15 align-middle pe-2 text-primary"></i> 070 2860 5375
|
||||
</p>
|
||||
<p class="text-muted mb-0 mt-2"><i
|
||||
class="mdi mdi-email font-size-15 align-middle pe-2 text-primary"></i>
|
||||
PhyllisGatlin@spy.com</p>
|
||||
<p class="text-muted mb-0 mt-2"><i
|
||||
class="mdi mdi-google-maps font-size-15 align-middle pe-2 text-primary"></i> 52
|
||||
Ilchester MYBSTER 9WX</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card node-card">
|
||||
<div class="card-body">
|
||||
<div class="dropdown float-end">
|
||||
<a class="text-muted dropdown-toggle font-size-16" href="#" role="button"
|
||||
data-bs-toggle="dropdown" aria-haspopup="true"><i
|
||||
class="bx bx-dots-horizontal-rounded"></i></a>
|
||||
<div class="dropdown-menu dropdown-menu-end"><a class="dropdown-item" href="#">Edit</a><a
|
||||
class="dropdown-item" href="#">Action</a><a class="dropdown-item"
|
||||
href="#">Remove</a></div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div><img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt=""
|
||||
class="avatar-md rounded-circle img-thumbnail" /></div>
|
||||
<div class="flex-1 ms-3">
|
||||
<h5 class="font-size-16 mb-1"><a href="#" class="text-dark">Diana Owens</a></h5>
|
||||
<span class="badge badge-soft-danger mb-0">UI/UX Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-1">
|
||||
<p class="text-muted mb-0"><i
|
||||
class="mdi mdi-phone font-size-15 align-middle pe-2 text-primary"></i> 087 6321 3235
|
||||
</p>
|
||||
<p class="text-muted mb-0 mt-2"><i
|
||||
class="mdi mdi-email font-size-15 align-middle pe-2 text-primary"></i>
|
||||
DianaOwens@spy.com</p>
|
||||
<p class="text-muted mb-0 mt-2"><i
|
||||
class="mdi mdi-google-maps font-size-15 align-middle pe-2 text-primary"></i> 52
|
||||
Ilchester MYBSTER 9WX</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2 pt-4">
|
||||
<button type="button" class="btn btn-soft-primary btn-sm w-50"><i
|
||||
class="bx bx-user me-1"></i> Profile</button>
|
||||
<button type="button" class="btn btn-primary btn-sm w-50"><i
|
||||
class="bx bx-message-square-dots me-1"></i> Contact</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<%- include('partials/bodyEnd.ejs') %>
|
||||
|
||||
<%- include('partials/htmlFooter.ejs') %>
|
||||
41
Server/views/node.ejs
Normal file
41
Server/views/node.ejs
Normal file
@@ -0,0 +1,41 @@
|
||||
<%- include('partials/htmlHead.ejs') %>
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
Account Details
|
||||
<% if(node.online){%> <span class="badge badge-soft-success mb-0">Online</span>
|
||||
<% } else {%> <span class="badge badge-soft-danger mb-0">Offline</span>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label class="small mb-1" for="nodeId">Node ID (this is the assigned Node ID and cannot be changed)</label>
|
||||
<input class="form-control" id="nodeId" type="text" value="<%=node.id%>" disabled>
|
||||
</div>
|
||||
<div class="row gx-3 mb-3">
|
||||
<div class="col-md-12">
|
||||
<label class="small mb-1" for="inputNodeName">Node Name</label>
|
||||
<input class="form-control" id="inputNodeName" type="text" value="<%=node.name%>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gx-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<label class="small mb-1" for="inputNodeIp">Node IP Address (that the server can contact)</label>
|
||||
<input class="form-control" id="inputNodeIp" type="text" value="<%=node.ip%>">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label class="small mb-1" for="inputOrgName">Node Port (with the API)</label>
|
||||
<input class="form-control" id="inputOrgName" type="number" value="<%=node.port%>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="small mb-1" for="inputNodeLocation">Node Location (physical location)</label>
|
||||
<input class="form-control" id="inputNodeLocation" type="location" value="<%=node.location%>">
|
||||
</div>
|
||||
<!-- Save changes button-->
|
||||
<button class="btn btn-primary" type="button">Save changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<%- include('partials/bodyEnd.ejs') %>
|
||||
<%- include('partials/htmlFooter.ejs') %>
|
||||
11
Server/views/partials/bodyEnd.ejs
Normal file
11
Server/views/partials/bodyEnd.ejs
Normal file
@@ -0,0 +1,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
|
||||
integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
|
||||
9
Server/views/partials/head.ejs
Normal file
9
Server/views/partials/head.ejs
Normal file
@@ -0,0 +1,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Bootstrap demo</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="/res/css/main.css">
|
||||
</head>
|
||||
1
Server/views/partials/htmlFooter.ejs
Normal file
1
Server/views/partials/htmlFooter.ejs
Normal file
@@ -0,0 +1 @@
|
||||
</html>
|
||||
6
Server/views/partials/htmlHead.ejs
Normal file
6
Server/views/partials/htmlHead.ejs
Normal file
@@ -0,0 +1,6 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-bs-theme="auto">
|
||||
<%- include('head.ejs') %>
|
||||
<body>
|
||||
<%- include('navbar.ejs') %>
|
||||
<%- include('sidebar.ejs') %>
|
||||
40
Server/views/partials/navbar.ejs
Normal file
40
Server/views/partials/navbar.ejs
Normal file
@@ -0,0 +1,40 @@
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex" role="search">
|
||||
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
57
Server/views/partials/nodeCard.ejs
Normal file
57
Server/views/partials/nodeCard.ejs
Normal file
@@ -0,0 +1,57 @@
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card node-card">
|
||||
<div class="card-body">
|
||||
<div class="dropdown float-end">
|
||||
<a class="text-muted dropdown-toggle font-size-16" href="#" role="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true">
|
||||
<i class="bx bx-dots-horizontal-rounded"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<a class="dropdown-item node-action" href="/node/<%=node.id%>" >Edit</a>
|
||||
<a class="dropdown-item node-action" href="#" onclick="sendNodeHeartbeat('<%=node.id%>')">Send Heartbeat</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div>
|
||||
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""
|
||||
class="avatar-md rounded-circle img-thumbnail" />
|
||||
</div>
|
||||
<div class="flex-1 ms-3">
|
||||
<h5 class="font-size-16 mb-1"><a href="/node/<%=node.id%>" class="text-dark">
|
||||
<%= node.name %>
|
||||
</a></h5>
|
||||
<% if(node.online){%> <span class="badge badge-soft-success mb-0">Online</span>
|
||||
<% } else {%> <span class="badge badge-soft-danger mb-0">Offline</span>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 pt-1">
|
||||
<p class="text-muted mb-0">
|
||||
<i class="bi bi-geo font-size-15 align-middle pe-2 text-primary"></i>
|
||||
<%= node.location %>
|
||||
</p>
|
||||
<p class="text-muted mb-0">
|
||||
<i class="bi bi-phone font-size-15 align-middle pe-2 text-primary"></i>
|
||||
<a href="#" target="_blank">
|
||||
<%= node.ip %>:<%= node.port %>
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-muted mb-0">
|
||||
<div class="dropdown">
|
||||
<i class="bi bi-broadcast-pin font-size-15 align-middle pe-2 text-primary"></i>
|
||||
<a class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Nearby Systems
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<% for(const system in node.nearbySystems){ %>
|
||||
<li>
|
||||
<%= system %>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
83
Server/views/partials/sidebar.ejs
Normal file
83
Server/views/partials/sidebar.ejs
Normal file
@@ -0,0 +1,83 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row flex-nowrap">
|
||||
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
|
||||
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white sidebar-container">
|
||||
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link align-middle px-0">
|
||||
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
|
||||
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span>
|
||||
</a>
|
||||
<ul class="collapse nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
|
||||
<li class="w-100">
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1 </a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0 align-middle">
|
||||
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
|
||||
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
|
||||
<ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
|
||||
<li class="w-100">
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Item</span> 2</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
|
||||
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
|
||||
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
|
||||
<li class="w-100">
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 1</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 2</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 3</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0"> <span class="d-none d-sm-inline">Product</span> 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link px-0 align-middle">
|
||||
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="dropdown pb-4 fixed-bottom px-3">
|
||||
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
|
||||
id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30"
|
||||
class="rounded-circle">
|
||||
<span class="d-none d-sm-inline mx-1">loser</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
|
||||
<li><a class="dropdown-item" href="#">New project...</a></li>
|
||||
<li><a class="dropdown-item" href="#">Settings</a></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li>
|
||||
<hr class="dropdown-divider">
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col py-3">
|
||||
Reference in New Issue
Block a user