src/views/starter.ejs

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5   <title></title>
   6   <!-- <link rel="stylesheet" type="text/css" href="/styles/main.css" /> -->
   7   <%include ../../partials/head%>
   8   <link rel="stylesheet" type="text/css" href="/styles/starter.css" />
   9   <link rel="stylesheet" href="/node_modules/xterm/css/xterm.css" />
  10 <!-- <link rel="stylesheet" href="/node_modules/xterm/dist/addons/fullscreen/fullscreen.css" /> -->
  11 <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  12 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
  13 <script src="/node_modules/xterm/lib/xterm.js"></script>
  14 <script src="/node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
  15 <script src="/node_modules/xterm-addon-attach/lib/xterm-addon-attach.js"></script>
  16 <!-- <script src="/node_modules/xterm/dist/addons/winptyCompat/winptyCompat.js"></script> -->
  17
  18 </head>
  19 <header>
  20   <%include ../../partials/header%>
  21
  22 </header>
  23
  24 <body>
  25   <main>
  26     <div class="side">
  27
  28       <div class="panel">
  29         <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: h1:s1"></textarea>
  30         <div class="buttons">
  31           <button id="btnstartvsorc" type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
  32           <button id="btnstopvsorc" type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
  33           <button id="btnstartcontroller" type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
  34           <button id="btnstopcontroller" type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
  35         </div>
  36       </div>
  37
  38       <div class="panel">
  39         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del sistema de consola"></textarea>
  40         <div class="buttons">
  41           <button type="button" name="button" onclick="pingall()">Ping all</button>
  42           <button type="button" name="button" onclick="placement()">Placement</button>
  43           <button type="button" name="button" onclick="iperf()">Iperf3</button>
  44           <button type="button" name="button" onclick="net()">Network</button>
  45           <button type="button" name="button" onclick="nodes()">Nodes</button>
  46           <button type="button" name="button" onclick="status()">Status</button>
  47           <button type="button" name="button" onclick="intfs()">Interfaces</button>
  48         </div>
  49       </div>
  50       <div class="panel">
  51         <textarea class="text" style="font-size: 12px;" rows="20" cols="7" id="vsorccommand" placeholder="Enviar comandos a la terminal"></textarea>
  52         <div class="buttons">
  53         <button type="button" name="button" onclick="sendcommand()">Send</button>
  54         <!-- <button type="button" name="button" onclick="cancel()">Cancel</button> -->
  55       </div>
  56       </div>
  57     </div>
  58
  59     <div class="side">
  60
  61       <div class="panel">
  62         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador"></textarea>
  63       </div>
  64       <div class="panel">
  65         <textarea class="text" style="font-size: 12px;" disabled rows="16" cols="7" id="raspberrys" placeholder="Raspberry Pi UP!"></textarea>
  66       </div>
  67
  68
  69     </div>
  70
  71     <script type="text/javascript">
  72
  73
  74
  75       let topo = document.getElementById('comandos'); //Donde van escrito el DSL
  76       let comando = document.getElementById('vsorccommand'); //Donde va escrito el comando para la terminal
  77       let vsorcout = document.getElementById('vsorcout'); //salida del vsorc
  78       let controllerout = document.getElementById('controllerout'); //salida del controlador
  79       let raspberry = document.getElementById('raspberrys'); //monitor de las rpi disponibles
  80
  81       let timeVsorc = 1000;
  82       let timeController = 1000;
  83       let timeping = 5000;
  84       //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo, controllerout y que raspberry estan activas
  85
  86       let intervalController = null;//Para tener el id del interval para obtener data del controller
  87       let intervalVsorc = null; //Para tener el id del interval para obtener data del vsorc
  88
  89       intervalVsorc = setInterval(getvsorcdata, timeVsorc);
  90       intervalController=setInterval(getcontrollerdata, timeController);
  91       setInterval(rpiping,timeping);
  92       function rpiping() {
  93         let xhr = new XMLHttpRequest();
  94         xhr.open('GET', '/rpiping', true);
  95         xhr.onload = function() {
  96           if (xhr.status == 200) { //can use this.status instead
  97             //console.log(xhr.responseText);// para ver en la consola
  98             raspberry.value=xhr.response;
  99             console.log("getting controller data");
 100           }
 101         }
 102         xhr.send();
 103
 104       }
 105       function startcontroller() {
 106         let xhr = new XMLHttpRequest();
 107         xhr.open('GET', '/startcontroller', true);
 108         //console.log(xhr); //para ver en la consola
 109         xhr.onload = function() {
 110           if (xhr.status == 200) { //can use this.status instead
 111             console.log("controller started");
 112           }
 113         }
 114         xhr.send();
 115
 116       }
 117       function cancel() {
 118         let xhr = new XMLHttpRequest();
 119         xhr.open('GET', '/cancel', true);
 120         //console.log(xhr); //para ver en la consola
 121         xhr.onload = function() {
 122           if (xhr.status == 200) { //can use this.status instead
 123             console.log("cancelled");
 124           }
 125         }
 126         xhr.send();
 127
 128       }
 129
 130       function stopcontroller() {
 131         let xhr = new XMLHttpRequest();
 132         xhr.open('GET', '/stopcontroller', true);
 133         xhr.onload = function() {
 134           if (xhr.status == 200) { //can use this.status instead
 135             //console.log(xhr.responseText);// para ver en la consola
 136             console.log("controller stoped");
 137           }
 138         }
 139         xhr.send();
 140         //clearInterval(intervalController);
 141         controllerout.value='';
 142       }
 143       function getcontrollerdata() {
 144         let xhr = new XMLHttpRequest();
 145         xhr.open('GET', '/getcontrollerdata', true);
 146         xhr.onload = function() {
 147           if (xhr.status == 200) { //can use this.status instead
 148             //console.log(xhr.responseText);// para ver en la consola
 149             let controllerstat = xhr.response.split('^');
 150             if(controllerstat[1] === "true"){
 151             document.getElementById('btnstopcontroller').disabled = false;
 152             document.getElementById('btnstartcontroller').disabled = true;
 153             }else{
 154               document.getElementById('btnstopcontroller').disabled = true;
 155               document.getElementById('btnstartcontroller').disabled = false;
 156             }
 157             controllerout.value=controllerstat[0];
 158             console.log("getting controller data");
 159           }
 160         }
 161         xhr.send();
 162
 163         controllerout.scrollTop = controllerout.scrollHeight;
 164       }
 165       function sendcommand() {
 166         let xhr = new XMLHttpRequest();
 167         cmd = JSON.stringify(comando.value);
 168         xhr.open('GET', '/sendcommand?cmd=' + cmd, true);
 169         xhr.onload = function() {
 170           if (xhr.status == 200) { //can use this.status instead
 171             //console.log(xhr.responseText);// para ver en la consola
 172             console.log("command sended is "+cmd);
 173           }
 174         }
 175         xhr.send();
 176
 177       }
 178
 179       function startvsorc() {
 180         let xhr = new XMLHttpRequest();
 181         topology = JSON.stringify(topo.value)
 182         xhr.open('GET', '/startvsorc?topology=' + topology, true);
 183         xhr.onload = function() {
 184           if (xhr.status == 200) { //can use this.status instead
 185             //console.log(xhr.responseText);// para ver en la consola
 186             console.log("vsorc started");
 187           }
 188         }
 189         xhr.send();
 190
 191       }
 192
 193       function stopvsorc() {
 194         let xhr = new XMLHttpRequest();
 195         xhr.open('GET', '/stopvsorc', true);
 196         xhr.onload = function() {
 197           if (xhr.status == 200) { //can use this.status instead
 198             //console.log(xhr.responseText);// para ver en la consola
 199
 200             console.log("vsorc stopped");
 201           }
 202         }
 203         xhr.send();
 204         //clearInterval(intervalVsorc);
 205         vsorcout.value='';
 206       }
 207
 208       function getvsorcdata() {
 209         let xhr = new XMLHttpRequest();
 210         xhr.open('GET', '/getvsorcdata', true);
 211         xhr.onload = function() {
 212           if (xhr.status == 200) { //can use this.status instead
 213             //console.log(xhr.responseText);// para ver en la consola
 214
 215             //strip
 216             //cambiar boton con vaina[1]
 217             //vsorcout = vaina[0]
 218             let vsorcstat = xhr.response.split('^');
 219             if(vsorcstat[1] === "true"){
 220             document.getElementById('btnstopvsorc').disabled = false;
 221             document.getElementById('btnstartvsorc').disabled = true;
 222             }else{
 223               document.getElementById('btnstopvsorc').disabled = true;
 224               document.getElementById('btnstartvsorc').disabled = false;
 225             }
 226
 227             vsorcout.value=vsorcstat[0];
 228
 229             console.log("getting vsorc data");
 230
 231
 232           }
 233         }
 234         xhr.send();
 235
 236         vsorcout.scrollTop = vsorcout.scrollHeight;
 237       }
 238
 239
 240       function pingall() {
 241         let xhr = new XMLHttpRequest();
 242         xhr.open('GET', '/pingall', true);
 243         xhr.onload = function() {
 244           if (xhr.status == 200) { //can use this.status instead
 245             //console.log(xhr.responseText);// para ver en la consola
 246             vsorcout.value+=xhr.response;
 247             console.log("pingall");
 248
 249
 250           }
 251         }
 252         xhr.send();
 253       }
 254
 255       function iperf() {
 256         let xhr = new XMLHttpRequest();
 257         xhr.open('GET', '/iperf', true);
 258         xhr.onload = function() {
 259           if (xhr.status == 200) { //can use this.status instead
 260             //console.log(xhr.responseText);// para ver en la consola
 261             vsorcout.value+=xhr.response;
 262             console.log("iperf");
 263
 264
 265           }
 266         }
 267         xhr.send();
 268       }
 269
 270       function placement() {
 271         let xhr = new XMLHttpRequest();
 272         xhr.open('GET', '/placement', true);
 273         xhr.onload = function() {
 274           if (xhr.status == 200) { //can use this.status instead
 275             //console.log(xhr.responseText);// para ver en la consola
 276             vsorcout.value+=xhr.response;
 277             console.log("placement");
 278
 279
 280           }
 281         }
 282         xhr.send();
 283       }
 284
 285       function net() {
 286         let xhr = new XMLHttpRequest();
 287         xhr.open('GET', '/net', true);
 288         xhr.onload = function() {
 289           if (xhr.status == 200) { //can use this.status instead
 290             //console.log(xhr.responseText);// para ver en la consola
 291             vsorcout.value+=xhr.response;
 292             console.log("net");
 293
 294
 295           }
 296         }
 297         xhr.send();
 298       }
 299
 300       function nodes() {
 301         let xhr = new XMLHttpRequest();
 302         xhr.open('GET', '/nodes', true);
 303         xhr.onload = function() {
 304           if (xhr.status == 200) { //can use this.status instead
 305             //console.log(xhr.responseText);// para ver en la consola
 306             vsorcout.value+=xhr.response;
 307             console.log("nodes");
 308
 309
 310           }
 311         }
 312         xhr.send();
 313       }
 314
 315       function status() {
 316         let xhr = new XMLHttpRequest();
 317         xhr.open('GET', '/statusnodes', true);
 318         xhr.onload = function() {
 319           if (xhr.status == 200) { //can use this.status instead
 320             //console.log(xhr.responseText);// para ver en la consola
 321             vsorcout.value+=xhr.response;
 322             console.log("statusnodes");
 323
 324
 325           }
 326         }
 327         xhr.send();
 328       }
 329
 330       function intfs() {
 331         let xhr = new XMLHttpRequest();
 332         xhr.open('GET', '/intfs', true);
 333         xhr.onload = function() {
 334           if (xhr.status == 200) { //can use this.status instead
 335             //console.log(xhr.responseText);// para ver en la consola
 336             vsorcout.value+=xhr.response;
 337             console.log("interfaces");
 338
 339
 340           }
 341         }
 342         xhr.send();
 343       }
 344
 345     </script>
 346   </main>
 347 </body>
 348 <footer>
 349   <%include ../../partials/footer%>
 350 </footer>
 351
 352
 353 </html>