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 intervalController = null;
  69       let intervalVsorc = null
  70
  71       function startcontroller() {
  72
  73         let xhr = new XMLHttpRequest();
  74         xhr.open('GET', '/startcontroller', true);
  75         //console.log(xhr); //para ver en la consola
  76         xhr.onload = function() {
  77           if (xhr.status == 200) { //can use this.status instead
  78             console.log("controller started");
  79           }
  80         }
  81         xhr.send();
  82         intervalController=setInterval(getcontrollerdata, 500);
  83       }
  84
  85       function stopcontroller() {
  86         let xhr = new XMLHttpRequest();
  87         xhr.open('GET', '/stopcontroller', true);
  88         xhr.onload = function() {
  89           if (xhr.status == 200) { //can use this.status instead
  90             //console.log(xhr.responseText);// para ver en la consola
  91             console.log("controller stoped");
  92           }
  93         }
  94         xhr.send();
  95         clearInterval(intervalController);
  96         controllerout.value='';
  97       }
  98       function getcontrollerdata() {
  99         let xhr = new XMLHttpRequest();
 100         xhr.open('GET', '/getcontrollerdata', true);
 101         xhr.onload = function() {
 102           if (xhr.status == 200) { //can use this.status instead
 103             //console.log(xhr.responseText);// para ver en la consola
 104             controllerout.value=xhr.response;
 105             console.log("getting controller data");
 106           }
 107         }
 108         xhr.send();
 109
 110         controllerout.scrollTop = controllerout.scrollHeight;
 111       }
 112
 113       function startvsorc() {
 114         let xhr = new XMLHttpRequest();
 115         topology = JSON.stringify(topo.value)
 116         xhr.open('GET', '/startvsorc?topology=' + topology, true);
 117         xhr.onload = function() {
 118           if (xhr.status == 200) { //can use this.status instead
 119             //console.log(xhr.responseText);// para ver en la consola
 120             console.log("vsorc started");
 121           }
 122         }
 123         xhr.send();
 124         intervalVsorc = setInterval(getvsorcdata, 2000);
 125       }
 126
 127       function stopvsorc() {
 128         let xhr = new XMLHttpRequest();
 129         xhr.open('GET', '/stopvsorc', true);
 130         xhr.onload = function() {
 131           if (xhr.status == 200) { //can use this.status instead
 132             //console.log(xhr.responseText);// para ver en la consola
 133
 134             console.log("vsorc stopped");
 135           }
 136         }
 137         xhr.send();
 138         clearInterval(intervalVsorc);
 139         vsorcout.value='';
 140       }
 141
 142       function getvsorcdata() {
 143         let xhr = new XMLHttpRequest();
 144         xhr.open('GET', '/getvsorcdata', true);
 145         xhr.onload = function() {
 146           if (xhr.status == 200) { //can use this.status instead
 147             //console.log(xhr.responseText);// para ver en la consola
 148             vsorcout.value=xhr.response;
 149             console.log("getting vsorc data");
 150
 151
 152           }
 153         }
 154         xhr.send();
 155
 156         vsorcout.scrollTop = vsorcout.scrollHeight;
 157       }
 158       function pingall() {
 159         let xhr = new XMLHttpRequest();
 160         xhr.open('GET', '/pingall', true);
 161         xhr.onload = function() {
 162           if (xhr.status == 200) { //can use this.status instead
 163             //console.log(xhr.responseText);// para ver en la consola
 164             vsorcout.value+=xhr.response;
 165             console.log("pingall");
 166
 167
 168           }
 169         }
 170         xhr.send();
 171       }
 172       function placement() {
 173         let xhr = new XMLHttpRequest();
 174         xhr.open('GET', '/placement', true);
 175         xhr.onload = function() {
 176           if (xhr.status == 200) { //can use this.status instead
 177             //console.log(xhr.responseText);// para ver en la consola
 178             vsorcout.value+=xhr.response;
 179             console.log("placement");
 180
 181
 182           }
 183         }
 184         xhr.send();
 185       }
 186     ///////////////////////////////////////////////////////////////////////CODIGO DE LA terminal
 187     // No idea what these are about. Just copied them from the demo code
 188      // Terminal.applyAddon(attach);
 189      // Terminal.applyAddon(fit);
 190      // Terminal.applyAddon(winptyCompat);
 191      // The terminal
 192
 193      // const fitAddon = new FitAddon();
 194      // term.loadAddon(fitAddon);
 195
 196
 197      const term = new Terminal();
 198      // No idea what this does
 199      // term.winptyCompatInit();
 200      // This kinda makes sense
 201      const container = document.getElementById('terminal');
 202      term.open(container);
 203      // Open the websocket connection to the backend
 204      const protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
 205      const port = location.port ? `:${location.port}` : '';
 206      const socketUrl = `${protocol}${location.hostname}${port}/shell`;
 207      const socket = new WebSocket(socketUrl);
 208      const attachAddon = new AttachAddon(socket);
 209      term.loadAddon(attachAddon);
 210      // Attach the socket to the terminal
 211      socket.onopen = (ev) => { term.attach(socket); };
 212      // Not going to worry about close/error for the websocket
 213      //////////////////////////////////////////////////////////////////////FIN DEL CODIGO DE LA TERMINAL
 214     </script>
 215   </main>
 216 </body>
 217 <footer>
 218   <%include ../../partials/footer%>
 219 </footer>
 220
 221
 222 </html>