<head>
<title></title>
- <!-- these are for the terminal -->
- <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
- <script src="node_modules/xterm/lib/xterm.js"></script>
+ <!-- <link rel="stylesheet" type="text/css" href="/styles/main.css" /> -->
<%include ../../partials/head%>
- <style media="screen">
- body {
- display: flex;
- flex-flow: row wrap;
- }
-
- main {
- width: 100%;
- flex-grow: 2;
- }
-
- aside {
- flex-grow: 1;
- }
-
- footer {
- position: absolute;
- top: 100%;
- }
-
- .buttons {
- display: flex;
- width: 100%;
- margin: 0;
- padding: 0;
- }
-
- button {
- flex-grow: 1;
- border: 0;
- border-bottom: 2px black solid;
- overflow: hidden;
- width: 15em;
- background-color: white;
- transition: background-color 0.3s ease-in, color 0.3s ease-in;
- }
-
- button:hover {
- background-color: darkgrey;
- color: white
- }
-
- textarea {
- width: 25%;
- font-size: 1.5em;
- overflow: auto;
- height: 15em;
- background-color: rgba(255, 255, 255, 0.8);
- padding: 0;
- margin: 0;
- }
- </style>
+ <link rel="stylesheet" type="text/css" href="/styles/starter.css" />
+ <link rel="stylesheet" href="/node_modules/xterm/css/xterm.css" />
+<!-- <link rel="stylesheet" href="/node_modules/xterm/dist/addons/fullscreen/fullscreen.css" /> -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
+<script src="/node_modules/xterm/lib/xterm.js"></script>
+<script src="/node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
+<script src="/node_modules/xterm-addon-attach/lib/xterm-addon-attach.js"></script>
+<!-- <script src="/node_modules/xterm/dist/addons/winptyCompat/winptyCompat.js"></script> -->
+
</head>
<header>
<%include ../../partials/header%>
+
</header>
<body>
<main>
- <div class="buttons">
- <button type="button" name="button" onclick="startvsorc()">Iniciar VsoRc</button>
- <button type="button" name="button" onclick="stopvsorc()">Detener VsoRc</button>
- <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
- <button type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
+ <div class="side">
+
+ <div class="panel">
+ <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: h1:s1"></textarea>
+ <div class="buttons">
+ <button type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
+ <button type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
+ <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
+ <button type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
+ </div>
+ </div>
+
+ <div class="panel">
+ <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del sistema de consola"></textarea>
+ <div class="buttons">
+ <button type="button" name="button" onclick="pingall()">Ping all</button>
+ <button type="button" name="button" onclick="placement()">Placement</button>
+ <button type="button" name="button" onclick="iperf()">Iperf3</button>
+ <button type="button" name="button" onclick="net()">Network</button>
+ <button type="button" name="button" onclick="nodes()">Nodes</button>
+ <button type="button" name="button" onclick="status()">Status</button>
+ <button type="button" name="button" onclick="intfs()">Interfaces</button>
+ </div>
+ </div>
+
</div>
- <textarea rows="20" cols="7" id="comandos"></textarea>
+
+ <div class="side">
+
+ <div class="panel">
+ <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador"></textarea>
+ </div>
+
+ <div class="terminal"></div>
+
+ </div>
+
<script type="text/javascript">
+
+
+
let topo = document.getElementById('comandos') //Donde van escrito el DSL
+ let vsorcout = document.getElementById('vsorcout') //salida del vsorc
+ let controllerout = document.getElementById('controllerout') //salida del controlador
+
+ let timeVsorc = 1000;
+ let timeController = 1000;
+ //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo y controllerout
+ let intervalController = null;//Para tener el id del interval para obtener data del controller
+ let intervalVsorc = null; //Para tener el id del interval para obtener data del vsorc
+ intervalVsorc = setInterval(getvsorcdata, timeVsorc);
+ intervalController=setInterval(getcontrollerdata, timeController);
+
+ function startcontroller() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/startcontroller', true);
+ //console.log(xhr); //para ver en la consola
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ console.log("controller started");
+ }
+ }
+ xhr.send();
+
+ }
function stopcontroller() {
let xhr = new XMLHttpRequest();
}
}
xhr.send();
-
+ //clearInterval(intervalController);
+ controllerout.value='';
}
-
- function startcontroller() {
+ function getcontrollerdata() {
let xhr = new XMLHttpRequest();
- xhr.open('GET', '/startcontroller', true);
- //console.log(xhr); //para ver en la consola
+ xhr.open('GET', '/getcontrollerdata', true);
xhr.onload = function() {
if (xhr.status == 200) { //can use this.status instead
-
- console.log("controller started");
+ //console.log(xhr.responseText);// para ver en la consola
+ controllerout.value=xhr.response;
+ console.log("getting controller data");
}
}
xhr.send();
+
+ controllerout.scrollTop = controllerout.scrollHeight;
}
function startvsorc() {
console.log("vsorc started");
}
}
-
xhr.send();
}
xhr.onload = function() {
if (xhr.status == 200) { //can use this.status instead
//console.log(xhr.responseText);// para ver en la consola
+
console.log("vsorc stopped");
}
}
xhr.send();
+ //clearInterval(intervalVsorc);
+ vsorcout.value='';
}
- </script>
- </main>
- <aside class="">
- <div class="terminal"></div>
- <script>
- var term = new Terminal();
- term.open(document.getElementById('terminal'));
- term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ');
- </script>
+ function getvsorcdata() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/getvsorcdata', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value=xhr.response;
+ console.log("getting vsorc data");
- <div class="statusproyect">
+ }
+ }
+ xhr.send();
- </div>
- </aside>
+ vsorcout.scrollTop = vsorcout.scrollHeight;
+ }
+ function pingall() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/pingall', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("pingall");
+
+
+ }
+ }
+ xhr.send();
+ }
+
+ function iperf() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/iperf', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("pingall");
+
+
+ }
+ }
+ xhr.send();
+ }
+ function placement() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/placement', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("placement");
+
+
+ }
+ }
+ xhr.send();
+ }
+
+ function net() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/net', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("net");
+
+
+ }
+ }
+ xhr.send();
+ }
+
+ function nodes() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/nodes', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("nodes");
+
+
+ }
+ }
+ xhr.send();
+ }
+
+ function status() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/status', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("placement");
+
+
+ }
+ }
+ xhr.send();
+ }
+
+ function intfs() {
+ let xhr = new XMLHttpRequest();
+ xhr.open('GET', '/intfs', true);
+ xhr.onload = function() {
+ if (xhr.status == 200) { //can use this.status instead
+ //console.log(xhr.responseText);// para ver en la consola
+ vsorcout.value+=xhr.response;
+ console.log("placement");
+
+
+ }
+ }
+ xhr.send();
+ }
+ ///////////////////////////////////////////////////////////////////////CODIGO DE LA terminal
+ // No idea what these are about. Just copied them from the demo code
+ // Terminal.applyAddon(attach);
+ // Terminal.applyAddon(fit);
+ // Terminal.applyAddon(winptyCompat);
+ // The terminal
+
+ // const fitAddon = new FitAddon();
+ // term.loadAddon(fitAddon);
+
+
+ const term = new Terminal();
+ // No idea what this does
+ // term.winptyCompatInit();
+ // This kinda makes sense
+ const container = document.getElementById('terminal');
+ term.open(container);
+ // Open the websocket connection to the backend
+ const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
+ const port = location.port ? `:${location.port}` : '';
+ const socketUrl = `${protocol}${location.hostname}${port}/shell`;
+ const socket = new WebSocket(socketUrl);
+ const attachAddon = new AttachAddon(socket);
+ term.loadAddon(attachAddon);
+ // Attach the socket to the terminal
+ socket.onopen = (ev) => { term.attach(socket); };
+ // Not going to worry about close/error for the websocket
+ //////////////////////////////////////////////////////////////////////FIN DEL CODIGO DE LA TERMINAL
+ </script>
+ </main>
</body>
<footer>
<%include ../../partials/footer%>
projects / VSoRC / .git / blobdiff