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
  26   <main>
  27     <div class="side">
  28
  29       <div class="panel">
  30         <textarea class="text" rows="20" cols="7" id="comandos" placeholder="Definicion de la red como: h1:s1"></textarea>
  31         <div class="buttons">
  32           <button type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
  33           <button type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
  34           <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
  35           <button type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
  36         </div>
  37       </div>
  38
  39       <div class="panel">
  40         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="vsorcout" placeholder="Salida del sistema de consola"></textarea>
  41         <div class="buttons">
  42           <button type="button" name="button" onclick="pingall()">Ping all</button>
  43           <button type="button" name="button" onclick="placement()">Placement</button>
  44           <button type="button" name="button" onclick="iperf()">Iperf3</button>
  45         </div>
  46       </div>
  47
  48     </div>
  49
  50     <div class="side">
  51
  52       <div class="panel">
  53         <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador"></textarea>
  54       </div>
  55
  56       <div class="terminal"></div>
  57
  58     </div>
  59
  60     <script type="text/javascript">
  61
  62
  63
  64       let topo = document.getElementById('comandos') //Donde van escrito el DSL
  65       let vsorcout = document.getElementById('vsorcout') //salida del vsorc
  66       let controllerout = document.getElementById('controllerout') //salida del controlador
  67
  68       let timeVsorc = 1000;
  69       let timeController = 1000;
  70       //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo y controllerout
  71
  72       let intervalController = null;//Para tener el id del interval para obtener data del controller
  73       let intervalVsorc = null; //Para tener el id del interval para obtener data del vsorc
  74
  75       function startcontroller() {
  76         let xhr = new XMLHttpRequest();
  77         xhr.open('GET', '/startcontroller', true);
  78         //console.log(xhr); //para ver en la consola
  79         xhr.onload = function() {
  80           if (xhr.status == 200) { //can use this.status instead
  81             console.log("controller started");
  82           }
  83         }
  84         xhr.send();
  85         intervalController=setInterval(getcontrollerdata, timeController);
  86       }
  87
  88       function stopcontroller() {
  89         let xhr = new XMLHttpRequest();
  90         xhr.open('GET', '/stopcontroller', true);
  91         xhr.onload = function() {
  92           if (xhr.status == 200) { //can use this.status instead
  93             //console.log(xhr.responseText);// para ver en la consola
  94             console.log("controller stoped");
  95           }
  96         }
  97         xhr.send();
  98         clearInterval(intervalController);
  99         controllerout.value='';
 100       }
 101       function getcontrollerdata() {
 102         let xhr = new XMLHttpRequest();
 103         xhr.open('GET', '/getcontrollerdata', true);
 104         xhr.onload = function() {
 105           if (xhr.status == 200) { //can use this.status instead
 106             //console.log(xhr.responseText);// para ver en la consola
 107             controllerout.value=xhr.response;
 108             console.log("getting controller data");
 109           }
 110         }
 111         xhr.send();
 112
 113         controllerout.scrollTop = controllerout.scrollHeight;
 114       }
 115
 116       function startvsorc() {
 117         let xhr = new XMLHttpRequest();
 118         topology = JSON.stringify(topo.value)
 119         xhr.open('GET', '/startvsorc?topology=' + topology, true);
 120         xhr.onload = function() {
 121           if (xhr.status == 200) { //can use this.status instead
 122             //console.log(xhr.responseText);// para ver en la consola
 123             console.log("vsorc started");
 124           }
 125         }
 126         xhr.send();
 127         intervalVsorc = setInterval(getvsorcdata, timeVsorc);
 128       }
 129
 130       function stopvsorc() {
 131         let xhr = new XMLHttpRequest();
 132         xhr.open('GET', '/stopvsorc', 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
 137             console.log("vsorc stopped");
 138           }
 139         }
 140         xhr.send();
 141         clearInterval(intervalVsorc);
 142         vsorcout.value='';
 143       }
 144
 145       function getvsorcdata() {
 146         let xhr = new XMLHttpRequest();
 147         xhr.open('GET', '/getvsorcdata', true);
 148         xhr.onload = function() {
 149           if (xhr.status == 200) { //can use this.status instead
 150             //console.log(xhr.responseText);// para ver en la consola
 151             vsorcout.value=xhr.response;
 152             console.log("getting vsorc data");
 153
 154
 155           }
 156         }
 157         xhr.send();
 158
 159         vsorcout.scrollTop = vsorcout.scrollHeight;
 160       }
 161       function pingall() {
 162         let xhr = new XMLHttpRequest();
 163         xhr.open('GET', '/pingall', true);
 164         xhr.onload = function() {
 165           if (xhr.status == 200) { //can use this.status instead
 166             //console.log(xhr.responseText);// para ver en la consola
 167             vsorcout.value+=xhr.response;
 168             console.log("pingall");
 169
 170
 171           }
 172         }
 173         xhr.send();
 174       }
 175
 176       function iperf() {
 177         let xhr = new XMLHttpRequest();
 178         xhr.open('GET', '/iperf', true);
 179         xhr.onload = function() {
 180           if (xhr.status == 200) { //can use this.status instead
 181             //console.log(xhr.responseText);// para ver en la consola
 182             vsorcout.value+=xhr.response;
 183             console.log("pingall");
 184
 185
 186           }
 187         }
 188         xhr.send();
 189       }
 190       function placement() {
 191         let xhr = new XMLHttpRequest();
 192         xhr.open('GET', '/placement', true);
 193         xhr.onload = function() {
 194           if (xhr.status == 200) { //can use this.status instead
 195             //console.log(xhr.responseText);// para ver en la consola
 196             vsorcout.value+=xhr.response;
 197             console.log("placement");
 198
 199
 200           }
 201         }
 202         xhr.send();
 203       }
 204     ///////////////////////////////////////////////////////////////////////CODIGO DE LA terminal
 205     // No idea what these are about. Just copied them from the demo code
 206      // Terminal.applyAddon(attach);
 207      // Terminal.applyAddon(fit);
 208      // Terminal.applyAddon(winptyCompat);
 209      // The terminal
 210
 211      // const fitAddon = new FitAddon();
 212      // term.loadAddon(fitAddon);
 213
 214
 215      const term = new Terminal();
 216      // No idea what this does
 217      // term.winptyCompatInit();
 218      // This kinda makes sense
 219      const container = document.getElementById('terminal');
 220      term.open(container);
 221      // Open the websocket connection to the backend
 222      const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
 223      const port = location.port ? `:${location.port}` : '';
 224      const socketUrl = `${protocol}${location.hostname}${port}/shell`;
 225      const socket = new WebSocket(socketUrl);
 226      const attachAddon = new AttachAddon(socket);
 227      term.loadAddon(attachAddon);
 228      // Attach the socket to the terminal
 229      socket.onopen = (ev) => { term.attach(socket); };
 230      // Not going to worry about close/error for the websocket
 231      //////////////////////////////////////////////////////////////////////FIN DEL CODIGO DE LA TERMINAL
 232     </script>
 233   </main>
 234 </body>
 235 <footer>
 236   <%include ../../partials/footer%>
 237 </footer>
 238
 239
 240 </html>