afonso/core-extra
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
core-extra/webapp/templates/index.html

241 lines
9.7 KiB
HTML
Raw Normal View History

initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CORE</title>
<link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="static/vis.min.css">
<link rel="stylesheet" type="text/css" href="static/core.css">
</head>
<body>
<div class="container-fluid d-flex flex-column p-0">
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
<nav class="navbar navbar-expand navbar-dark bg-dark mb-2">
<div class="navbar-brand mb-0 h1">
<img src="static/core-icon.png" />
<span>CORE</span>
</div>
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nb-content"
aria-controls="nb-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="nb-content">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nb-file" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
File
</a>
<div class="dropdown-menu" aria-labelledby="nb-file">
<a class="dropdown-item" href="#">Open File</a>
<a class="dropdown-item" href="#">Save File</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nb-session" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Sessions
</a>
<div class="dropdown-menu" aria-labelledby="nb-session">
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#sessions-modal">View</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nb-help" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="nb-help">
<a class="dropdown-item" href="https://github.com/coreemu/core">GitHub</a>
<a class="dropdown-item" href="http://coreemu.github.io/core/">Documentation</a>
</div>
</li>
</ul>
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
<span id="session-id" class="navbar-text p-2 mr-3">Session #</span>
<span id="node-display" class="navbar-text p-2">Node: Default</span>
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
</div>
</nav>
<div class="row col">
<div class="col-2 col-xl-1">
<div class="btn-group-vertical w-100" role="group" aria-label="Side Menu">
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
<button id="run-button" type="button" class="btn btn-success">Start</button>
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
<button id="link-button" type="button" class="btn btn-secondary" data-toggle="button">Link Mode</button>
<div class="btn-group dropright node-buttons" role="group">
<button id="menu-nodes" type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Nodes
</button>
<div class="dropdown-menu" aria-labelledby="menu-nodes">
<a class="dropdown-item" href="#" data-node="0" data-model="router">Router</a>
<a class="dropdown-item" href="#" data-node="0" data-model="host">Host</a>
<a class="dropdown-item" href="#" data-node="0" data-model="PC">PC</a>
<a class="dropdown-item" href="#" data-node="0" data-model="mdr">MDR</a>
</div>
</div>
<div class="btn-group dropright node-buttons" role="group">
<button id="menu-devices" type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Devices
</button>
<div class="dropdown-menu" aria-labelledby="menu-devices">
<a class="dropdown-item" href="#" data-node="5">Hub</a>
<a class="dropdown-item" href="#" data-node="4">Switch</a>
<a class="dropdown-item" href="#" data-node="6">WLAN</a>
</div>
</div>
</div>
</div>
<div id="core-network" class="col">
</div>
</div>
{% include 'sessions_modal.html' %}
</div>
<script src="static/jquery-3.3.1.min.js"></script>
<script src="static/popper.min.js"></script>
<script src="static/bootstrap.min.js"></script>
<script src="static/vis.min.js"></script>
<script src="static/socket.io.js"></script>
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
<script src="static/coreip.js"></script>
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
<script src="static/corerest.js"></script>
<script src="static/corenetwork.js"></script>
<script>
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
const $linkButton = $('#link-button');
const $nodeButtons = $('.node-buttons a');
const $sessionId = $('#session-id');
const $nodeDisplay = $('#node-display');
const $sessionsModel = $('#sessions-modal');
const $sessionsTable = $('#sessions-table');
const $runButton = $('#run-button');
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
function setRunButton(start) {
const $runButton = $('#run-button');
$runButton.removeClass('btn-danger btn-success');
if (start) {
$runButton.text('Start');
$runButton.addClass('btn-success');
} else {
$runButton.text('Stop');
$runButton.addClass('btn-danger');
}
}
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
// initial core setup
const coreRest = new CoreRest();
coreRest.retrieveSession()
.then(function (session) {
console.log('get session: ', session);
$sessionId.text(`Session: ${session.id}`);
if (session.state === SessionStates.runtime) {
setRunButton(false);
}
return coreRest.getSession();
})
.then(function(response) {
console.log('session: ', response);
const nodes = response.nodes;
coreNetwork.joinedSessions(nodes);
})
.catch(function (err) {
console.log('get session error: ', err);
});
const coreNetwork = new CoreNetwork('core-network', coreRest);
// page interactions
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
$linkButton.click(function () {
const linkMode = !$(this).hasClass('active');
coreNetwork.linkMode(linkMode);
$(this).blur();
});
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
$runButton.click(function () {
const $this = $(this);
const start = $this.text() === 'Start';
if (start) {
coreNetwork.start()
.then(function() {
setRunButton(false);
})
.catch(function(err) {
console.log('start error: ', err);
});
} else {
coreRest.shutdownSession()
.then(function (response) {
console.log('shutdown session: ', response);
setRunButton(true);
})
.catch(function (err) {
console.log('shutdown error: ', err);
});
}
});
$nodeDisplay.text(`Node: ${coreNetwork.nodeModel}`);
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
$nodeButtons.click(function () {
const $this = $(this);
const nodeType = $this.data('node');
const model = $this.data('model');
console.log('node creation: ', nodeType, model);
console.log('clicked: ', this);
coreNetwork.setNodeMode(nodeType, model);
first initial working link for ptp and joining back and drawing the edge, also making use of old core icons to provide a basic look and feel, updated coloring to dark mode instead of info, seems to fit better
2018-05-07 23:04:54 +01:00
const currentType = getNodeType(coreNetwork.nodeType);
const defaultType = getNodeType(0);
let nodeDisplay = currentType.display;
if (currentType.display === defaultType.display) {
nodeDisplay = coreNetwork.nodeModel;
}
$nodeDisplay.text(`Node: ${nodeDisplay}`);
});
// show sessions
$sessionsModel.on('shown.bs.modal', function () {
console.log('show sessions');
$sessionsTable.find('tbody tr').remove();
coreRest.getSessions()
.then(function (response) {
const sessions = response.sessions;
for (let session of sessions) {
console.log('show sessions: ', session);
const $idCell = $('<th>', {scope: 'row', text: session.id});
const $nodeCell = $('<td>', {text: session.nodes});
const stateName = coreRest.getStateName(session.state);
const $stateCell = $('<td>', {text: stateName});
const $row = $('<tr>').append([$idCell, $nodeCell, $stateCell]);
$sessionsTable.find('tbody').append($row);
}
})
.catch(function (err) {
console.log('error getting sessions: ', err);
});
initial basic mockup on gui layout before integrating with api calls
2018-05-04 04:28:00 +01:00
});
console.log('connecting to ws');
const ws = io.connect();
ws.on('connection', function () {
console.log('connected!');
});
ws.on('error', function (error) {
console.log(error);
});
ws.on('info', function (data) {
console.log(data.message);
});
ws.on('node', function (data) {
console.log(data);
});
</script>
</body>
</html>
Reference in a new issue Copy permalink