Commit 65f5b03a authored by Qianwen Yuan's avatar Qianwen Yuan
Browse files

initial-web

parent 2342a1e7
Pipeline #421375 passed with stages
in 12 minutes and 43 seconds
This diff is collapsed.
body {
font-family: sans-serif;
html,body {
font-family: 'Lato', sans-serif;
/* height: 100%;
width:100%; */
padding: 0;
margin: 0;
}
.maincontainer {
display: flex;
height: 100%;
:root {
--primary-color: rgb(102,102,255);
--light-primary-color: #9696f3;
--background-primary-color: #dadaf8;
}
.sidebar {
width: 5cm;
height: 100%;
position: fixed;
overflow-y: scroll;
top: 1;
/* style of navbar */
.navbar {
font-size: 20px;
color: white !important ;
font-family: 'Lato', sans-serif;
height: 60px;
background-color:white;
}
.navbar-nav .nav-item {
border-radius: 5px;
}
.navbar-nav .nav-item .nav-link {
font-size: 20px;
color: var(--primary-color);
font-family: 'Lato', sans-serif;
}
.navbar-nav .nav-item .nav-link.active {
background-color: var(--light-primary-color);
color: white !important;
}
header >nav > ul> li:hover{
background-color:var(--light-primary-color);
color: var(--primary-color);
}
header >nav > ul> li > a {
text-align: center;
}
header {
height:60px;
position:absolute;
top:0;
left: 0;
background: rgb(230,230,230);
width: 100%;
}
.sidebar p {
padding: 2em 0em 0em 1em;
.modules {
visibility: hidden;
}
.sidebar ul {
top: 0;
.maincontainer {
position: relative;
display:flex;
left: 0;
list-style: none;
padding-left: 0;
top:60px;
height: 100%;
width:100%;
}
.sidebar ul li a {
color: rgb(0,0,0);
text-decoration: none;
display: block;
padding: 1em 0em 1em 1em;
background: rgb(222,222,222);
/* style of sidebar */
.sidebar {
display: flex;
flex-direction: column;
margin-top: 30px;
width: 100px;
background:white;
}
.sidebarcur {
background: rgb(215,215,215);
.sidebar .nav .nav-item {
width: 100px;
}
.sidebar ul li a:hover {
background-color: rgb(200,200,200);
.sidebar .nav .nav-item a {
color: var(--primary-color);
}
.sidebar img {
padding-top: 2em;
padding-left: 20%;
max-width: 60%;
height: auto;
.sidebar .nav .nav-item :hover {
background: rgb(240, 240, 240);
}
.contentcontainer {
margin-left: 5cm;
height: 100%;
display: block;
.sidebar .nav .nav-item .nav-link.active{
background: var(--background-primary-color)!important;
color:var(--primary-color);
font-weight: bold;
}
.contentheader {
/* display: block; */
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgb(102,102,255);
color: rgb(0,0,0);
/* style of contentcontainer */
.contentcontainer {
border-radius: 5px;
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
background-color: var(--background-primary-color);
}
.contentmenu {
width: 90%;
/* overview without agencies */
.empty-overview {
height:800px;
display: flex;
justify-content: space-between;
margin: 0.5em 1em;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--background-primary-color);
}
.modules {
display: none;
color: rgb(255,255,255);
.empty-overview > h1 {
padding-top: 100px;
color: var(--primary-color);
padding-bottom: 50px;
font-family: 'Lato', sans-serif;
font-weight:700;
}
.empty-overview > button {
height: 50px;
width: 200px;
}
/* overview with agencies */
.contenttitle {
margin: 3em 0em 1em 0em;
padding-top: 50px;
padding-bottom: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.content {
margin: 1em 0em 5em 0em;
.contenttitle .lefttitle {
padding-right:50px;
}
.contentbox {
margin: 0em 0em 5em 0em;
.card-header {
color: var(--primary-color);
}
textarea {
width: 100%;
height: 20em;
.config, #containers, #agents {
border: 2px solid var(--background-primary-color);
border-radius: 10px;
padding: 50px;
width: 1200px;
margin-top:50px;
margin-left: 100px;;
}
.footer {
display: none;
position: fixed;
margin: 0 0 0 -0.5em;
padding: 0.5em 1em;
bottom: 0;
background-color: rgb(150,150,150);
width: 100%;
/* #containers {
border: 2px solid var(--background-primary-color);
border-radius: 5px;
width: 1600px;
margin-top:50px
}
hr {
margin: 0em 1em 1em 1em;
#agents {
border: 2px solid var(--background-primary-color);
border-radius: 5px;
width: 1600px;
margin-top:50px;
}
*/
table {
width: 100%;
.my-row {
padding-bottom: 30px;
}
.my-btn {
background-color: var(--light-primary-color);
color: white;
}
th, td {
text-align: left;
padding: 0em 2em;
font-weight: normal;
.title {
padding-top: 100px;
padding-left: 100px;
}
.tablehead {
padding: 1em 5em;
}
\ No newline at end of file
......@@ -4,37 +4,78 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cloneMAP UI</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Nunito:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script type="module" src="js/main.js"></script>
</head>
<body>
<div class="maincontainer">
<div class="sidebar">
<a href="#" id="sideoverview"><img src="img/logo_tp.png" alt="cloneMAP"></a>
<hr>
<ul id="maslist">
<!-- <li><a href="#" class="masbutton" id="sidemas0">MAS0</a></li>
<li><a href="#" class="masbutton" id="sidemas1">MAS1</a></li> -->
<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light my-bg-primary ">
<a class="navbar-brand" href="#">
<img src="img/logo_tp.png" id="navoverview"s width="80" height="60" class="d-inline-block align-top" alt="cloneMAP" loading="lazy">
</a>
<ul class="navbar-nav nav-pills d-flex justify-content-between" style="width:100%;">
<li class="nav-item" style="width:150px;">
<a class="nav-link" id="overview" href="#" style="width:150px;">Overview</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="ams" href="#">AMS</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="logger" href="#">Logger</a>
</li>
<li class="nav-item flex-fill modules">
<a class="nav-link" id="df" href="#" >DF</a>
</li>
</ul>
</div>
<div class="contentcontainer">
<div class="contentheader">
<div class="contentmenu">
<div id="headertitle">Overview</div>
<a href="#" class="modules">AMS</a>
<a href="#" class="modules">Logger</a>
<a href="#" class="modules">DF</a>
</div>
</nav>
</header>
<div class="modal fade" id="agencyModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">New Agency</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<h2 class="contenttitle">Titel</h2>
<div class="content" id="textblock">
<div class="modal-body">
<div class="form-group">
<label for="newMAS">Uploaded Contents</label>
<textarea class="form-control" id="newMAS" rows="10"></textarea>
</div>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputMAS">
<label class="custom-file-label" for="inputMAS" aria-describedby="uploadMAS">Choose file</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn my-btn" id="uploadMAS">Upload</button>
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</div>
</div>
<div class="maincontainer">
<div class="sidebar">
<ul class="nav nav-pills" id="maslist">
<!-- <li class='nav-item'><a href=#\ class="nav-link"></a></li>< -->
</ul>
</div>
<div id="contentContainer" class="contentcontainer">
</div>
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
......@@ -2,26 +2,33 @@ import * as request from "./request.js";
// initial website present
$(document).ready(function(){
$("#sideoverview").click(sideoverview);
updateSidebar();
sideoverview();
$("#navoverview").click(navoverview);
$("#overview").click(navoverview);
$("#inputMAS").change(inputMAS);
$("#uploadMAS").click(uploadMAS);
navoverview();
});
// callback for Overview button
function sideoverview(){
$(".modules").hide();
$("#headertitle").text("Overview");
function navoverview(){
$(".modules").css("visibility","hidden");
$(".nav-link").removeClass("active");
$("#overview").addClass("active");
//$("#headertitle").text("Overview");
request.get('/api/overview',contentOverview);
updateSidebar();
request.get('/api/overview',contentOverview)
// fetch('/api/ams/mas').then(response => response.json()).then(data => console.log(data));
}
// callback for mas buttons
function sidemas(){
$(".modules").show();
var masID = this.id.split("sidemas")
$("#headertitle").text("MAS"+masID[1]);
contentAMS(parseInt(masID[1]))
$(".modules").css("visibility","visible");
$("#overview").removeClass("active");
$(".masbutton").removeClass("active");
$('#'+this.id).addClass("active");
var masID = this.id.split("sidemas");
contentAMS(parseInt(masID[1]));
}
// show sidebar and register callbacks for mas buttons
......@@ -31,40 +38,65 @@ function updateSidebar(){
// .then(data => JSON.parse(data))
.then(mas => {
$("#maslist").empty()
if (mas === null) {
return;
}
for (let i of mas) {
$("#maslist").append("<li><a href=\"#\" class=\"masbutton\" id=\"sidemas"+i.id.toString()+"\">MAS"+i.id.toString()+"</a></li>")
$("#maslist").append("<li class='nav-item'><a href=\"#\" class=\"nav-link masbutton\" id=\"sidemas"+i.id.toString()+"\">MAS"+i.id.toString()+"</a></li>")
}
$(".masbutton").click(sidemas);
})
}
// show content field for overview view
function contentOverview(mass) {
$(".contenttitle").replaceWith("<h2 class=\"contenttitle\">Overview</h2>");
clearContent();
$(".content").append("<div class=\"contentbox\" id=\"startbox\"></div>")
$("#startbox").append("<table id=\"startmas\"></table>");
$("#startmas").append("<tr><th><h3>Start new MAS:</h3></th></tr>")
$("#startbox").append("<hr>");
$("#startbox").append("<tr><th><input type=\"file\" id=\"inputMAS\" value=\"Import\" accept=\".json\"/></th><th><button id=\"uploadMAS\">Upload</button></th></tr>")
$("#inputMAS").change(inputMAS);
$("#uploadMAS").click(uploadMAS);
$("#startbox").append("<tr><th><textarea id=\"newMAS\"></textarea></th></tr>")
$(".content").append("<div class=\"contentbox\" id=\"massbox\"></div>")
$("#massbox").append("<table id=\"mass\"></table>");
$("#mass").append("<tr><th><h3>MASs:</h3></th><th>"+mass.length.toString()+"</th></tr>");
$("#massbox").append("<hr>");
for (let i of mass) {
let masID = "MAS"+i.id.toString()
$("#massbox").append("<table id=\""+masID+"\"></table>");
$("#"+masID).append("<tr><th>"+masID+"</th></tr>");
$("#"+masID).append("<tr><th></th><th>Name:</th><th>"+i.config.name+"</th></tr>");
$("#"+masID).append("<tr><th></th><th>Agents per agency:</th><th>"+i.config.agentsperagency.toString()+"</th></tr>");
$("#"+masID).append("<tr><th></th><th>DF:</th><th>"+i.config.df.active.toString()+"</th></tr>");
$("#"+masID).append("<tr><th></th><th>Logging:</th><th>"+i.config.logger.active.toString()+"</th></tr>");
$("#"+masID).append("<tr><th></th><th>MQTT:</th><th>"+i.config.mqtt.active.toString()+"</th></tr>");
$("#"+masID).append("<tr><th></th><th>Agents:</th><th>"+i.numagents.toString()+"</th></tr>");
if (mass === null) {
fetch("../snippets/empty-overview.html").then(response => {
return response.text();
}).then(emptyContent => {
insertHtml("#contentContainer", emptyContent);
}).catch(err => {
console.log(err);
})
return;
}
$("#contentContainer").css("background-color", "rgb(240,240,240)");
let startHtml = "<div class='contenttitle'><h2 class='lefttitle'>Overview</h2> \
<button type='button' class='btn my-btn '\
data-toggle='modal' data-target='#agencyModal'>\
+ New Agency</button></div> \
<div class='container' id='tables'></div> ";
insertHtml("#contentContainer", startHtml);
let finalhtml = "<div class='row'>";
fetch("../snippets/MAS-card.html").then(response => {
return response.text();
}).then(table => {
let cnt = 0;
for (let i of mass) {
cnt++;
let html = table;
html = insertProperty(html,"count", cnt.toString());
html = insertProperty(html,"name", i.config.name);
html = insertProperty(html,"agent-per-agency", i.config.agentsperagency.toString());
html = insertProperty(html,"DF", i.config.df.active.toString());
html = insertProperty(html,"Logging", i.config.logger.active.toString());
html = insertProperty(html,"MQTT", i.config.mqtt.active.toString());
html = insertProperty(html,"Agents", i.numagents.toString());
finalhtml += html;
}
finalhtml += "</div>";
insertHtml("#tables", finalhtml);
}).catch(error => {
console.log(error);
});
}
// callback for inputMAS input button
......@@ -87,8 +119,8 @@ function inputMAS() {
// callback for uploadMAS button
function uploadMAS() {
let masconfig = $("#newMAS").val();
request.post("/api/ams/mas", masconfig)
sideoverview()
request.post("/api/ams/mas", masconfig);
navoverview();
}
// request info about mas and call function to show content
......@@ -98,42 +130,61 @@ function contentAMS(masID){
// show content field for ams and specified mas
function showAMSContent(masInfo) {
$(".contenttitle").replaceWith("<h2 class=\"contenttitle\">MAS"+masInfo.id.toString()+"</h2>");
contentMasInfo(masInfo);
console.log(masInfo);
clearContent();
$(".modules").css("visibility","visible");
fetch("../snippets/MAS.html").then(response => {
return response.text();
}).then( html => {
html = insertProperty(html,"name", masInfo.config.name);
html = insertProperty(html,"agent-per-agency", masInfo.config.agentsperagency.toString());
html = insertProperty(html,"DF", masInfo.config.df.active.toString());
html = insertProperty(html,"Logging", masInfo.config.logger.active.toString());
html = insertProperty(html,"MQTT", masInfo.config.mqtt.active.toString());
insertHtml("#contentContainer", html);
let containersHtml = "<div class='row'>";
for (let i of masInfo.imagegroups.instances) {
containersHtml += "<div class='col-md-4 my-row'> <div class='card'>";
containersHtml += ("<h5 class='card-header'>"+i.id.toString()+"</h5><div class='card-body'>");
containersHtml += "<table class='table my-row'>";
containersHtml += ("<tr><th>Image</th><th>"+i.config.image+"</th></tr>");
containersHtml += ("<tr><th>Agencies:</th><th>"+i.agencies.counter.toString()+"</th></tr>");
containersHtml += "</table> </div></div></div>"
}
containersHtml += "</div>";
insertHtml("#containers", containersHtml);
let agentsHtml = "<div class='row'>";
for (let i of masInfo.agents.instances) {
agentsHtml += "<div class='col-md-4 my-row'> <div class='card'>";
containersHtml += ("<h5 class='card-header'>"+i.id.toString()+"</h5><div class='card-body'>");
agentsHtml += "<table class='table my-row'>";
agentsHtml += ("<tr><th>+Name:</th><th>"+i.spec.name+"</th></tr>");
agentsHtml += ("<tr><th>Type:</th><th>"+i.spec.type+"</th></tr>");
agentsHtml += ("<tr><th>Address:</th><th>"+i.address.agency+"</th></tr>");
agentsHtml += "</table> </div></div></div>";
}
agentsHtml += "</div>"
insertHtml("#agents", agentsHtml);
}).catch(error => {
console.log(error);
});
}
// clear content field
function clearContent() {
$(".content").empty();
$(".contentcontainer").empty();
}
// show content field for mas info
function contentMasInfo(masInfo) {
clearContent();
$(".content").append("<table id=\"masinfoid\"></table>");
$("#masinfoid").append("<tr><th>ID:</th><th>"+masInfo.id.toString()+"</th></tr>");
$(".content").append("<hr>");
$(".content").append("<table id=\"masinfoconfig\"></table>");
$("#masinfoconfig").append("<tr><th>Config</th></tr>");
$("#masinfoconfig").append("<tr><th></th><th>Name:</th><th>"+masInfo.config.name+"</th></tr>");
$("#masinfoconfig").append("<tr><th></th><th>Agents per agency:</th><th>"+masInfo.config.agentsperagency.toString()+"</th></tr>");
$("#masinfoconfig").append("<tr><th></th><th>DF:</th><th>"+masInfo.config.df.active.toString()+"</th></tr>");
$("#masinfoconfig").append("<tr><th></th><th>Logging:</th><th>"+masInfo.config.logger.active.toString()+"</th></tr>");
$("#masinfoconfig").append("<tr><th></th><th>MQTT:</th><th>"+masInfo.config.mqtt.active.toString()+"</th></tr>");
$(".content").append("<hr>");