<!DOCTYPE html>
<html>

<head>
  <title></title>
  <!-- <link rel="stylesheet" type="text/css" href="/styles/main.css" /> -->
  <%include ../../partials/head%>
  <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="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 id="btnstartvsorc" type="button" name="button" onclick="startvsorc()">Iniciar VSoRC</button>
          <button id="btnstopvsorc" type="button" name="button" onclick="stopvsorc()">Detener VSoRC</button>
          <button id="btnstartcontroller" type="button" name="button" onclick="startcontroller()">Iniciar controlador Switching</button>
          <button id="btnstartcontrollerrouter" type="button" name="button" onclick="startcontrollerrouter()">Iniciar controlador REST Router</button>
          <button id="btnstopcontroller" 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 class="panel">
	<input type="text" id="vsorccommand" style="background-color: rgba(255,255,255,0.8); font-size: 12px;" placeholder="Enviar comandos a la terminal"></input>
       <!-- <textarea class="text" style="font-size: 12px;" rows="1" cols="20" id="vsorccommand" placeholder="Enviar comandos a la terminal"></textarea> -->
        <div class="buttons">
        <button type="button" name="button" onclick="sendcommand()" id="btnsend">Send</button>
      </div>
      </div>
    </div>

    <div class="side">

      <div class="panel">
        <textarea class="text" style="font-size: 12px;" disabled rows="20" cols="7" id="controllerout" placeholder="Salida del controlador SDN"></textarea>
      </div>
      <div class="panel">
        <textarea class="text" style="font-size: 12px;" disabled rows="16" cols="7" id="raspberrys" placeholder="Raspberry Pi UP!"></textarea>
      </div>


    </div>

    <script type="text/javascript">



      let topo = document.getElementById('comandos'); //Donde van escrito el DSL
      let comando = document.getElementById('vsorccommand'); //Donde va escrito el comando para la terminal
      let vsorcout = document.getElementById('vsorcout'); //salida del vsorc
      let controllerout = document.getElementById('controllerout'); //salida del controlador
      let raspberry = document.getElementById('raspberrys'); //monitor de las rpi disponibles

  comando.addEventListener('keypress', function(event) {
        if (event.keyCode == 13) {
            event.preventDefault();
		if(comando.value != ""){
	    document.getElementById('btnsend').click();
}
        }
    });



      let timeVsorc = 1000;
      let timeController = 1000;
      let timeping = 5000;
      //Estos time son para especificar cada cuantos ms se pedira leer la data de los archivos aichivo, controllerout y que raspberry estan activas

      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);
      setInterval(rpiping,timeping); //Para ver que rpi estan UP


      function rpiping() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/rpiping', true);
        xhr.onload = function() {
          if (xhr.status == 200) { //can use this.status instead
            //console.log(xhr.responseText);// para ver en la consola
            raspberry.value=xhr.response;
            console.log("getting controller data");
          }
        }
        xhr.send();

      }
      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 startcontrollerrouter() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/startcontrollerrouter', 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 router");
          }
        }
        xhr.send();
      }
      function cancel() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/cancel', true);
        //console.log(xhr); //para ver en la consola
        xhr.onload = function() {
          if (xhr.status == 200) { //can use this.status instead
            console.log("cancelled");
          }
        }
        xhr.send();

      }

      function stopcontroller() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/stopcontroller', true);
        xhr.onload = function() {
          if (xhr.status == 200) { //can use this.status instead
            //console.log(xhr.responseText);// para ver en la consola
            console.log("controller stoped");
          }
        }
        xhr.send();
        //clearInterval(intervalController);
        controllerout.value='';
      }
      function getcontrollerdata() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/getcontrollerdata', true);
        xhr.onload = function() {
          if (xhr.status == 200) { //can use this.status instead
            //console.log(xhr.responseText);// para ver en la consola

            let controllerstat = xhr.response.split('^'); //La data del controlador y el estado de este llegan separados por ^
            if(controllerstat[1] === "true"){
            document.getElementById('btnstopcontroller').disabled = false;
            document.getElementById('btnstartcontroller').disabled = true;
            document.getElementById('btnstartcontrollerrouter').disabled = true;
            }else{
              document.getElementById('btnstopcontroller').disabled = true;
              document.getElementById('btnstartcontroller').disabled = false;
              document.getElementById('btnstartcontrollerrouter').disabled = false;
            }
            controllerout.value=controllerstat[0];
            console.log("getting controller data");
            console.log(controllerstat);
          }
        }
        xhr.send();

        controllerout.scrollTop = controllerout.scrollHeight;
      }
      function sendcommand() {
        let xhr = new XMLHttpRequest();
        cmd = comando.value;
        xhr.open('GET', '/sendcommand?cmd=' + cmd, true);
        xhr.onload = function() {
          if (xhr.status == 200) { //can use this.status instead
            //console.log(xhr.responseText);// para ver en la consola
            console.log("command sended is "+cmd);
          }
        }
        xhr.send();

      }

      function startvsorc() {
        let xhr = new XMLHttpRequest();
        topology = JSON.stringify(topo.value)
        xhr.open('GET', '/startvsorc?topology=' + topology, true);
        xhr.onload = function() {
          if (xhr.status == 200) { //can use this.status instead
            //console.log(xhr.responseText);// para ver en la consola
            console.log("vsorc started");
          }
        }
        xhr.send();

      }

      function stopvsorc() {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '/stopvsorc', true);
        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='';
      }

      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

            //strip
            //cambiar boton con vaina[1]
            //vsorcout = vaina[0]
            let vsorcstat = xhr.response.split('^');
            if(vsorcstat[1] === "true"){
            document.getElementById('btnstopvsorc').disabled = false;
            document.getElementById('btnstartvsorc').disabled = true;
            }else{
              document.getElementById('btnstopvsorc').disabled = true;
              document.getElementById('btnstartvsorc').disabled = false;
            }

            vsorcout.value=vsorcstat[0];

            console.log("getting vsorc data");


          }
        }
        xhr.send();

        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("iperf");


          }
        }
        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', '/statusnodes', 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("statusnodes");


          }
        }
        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("interfaces");


          }
        }
        xhr.send();
      }

    </script>
  </main>
</body>
<footer>
  <%include ../../partials/footer%>
</footer>


</html>
