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   <style media="screen">
   9     body {
  10       display: flex;
  11       flex-flow: row wrap;
  12     }
  13
  14     main {
  15       width: 100%;
  16       flex-grow: 2;
  17     }
  18
  19     aside {
  20       flex-grow: 1;
  21     }
  22
  23     footer {
  24       position: absolute;
  25       top: 100%;
  26     }
  27
  28     .buttons {
  29       display: flex;
  30       width: 100%;
  31       margin: 0;
  32       padding: 0;
  33     }
  34
  35     button {
  36       flex-grow: 1;
  37       border: 0;
  38       border-bottom: 2px black solid;
  39       overflow: hidden;
  40       width: 15em;
  41       background-color: white;
  42       transition: background-color 0.3s ease-in, color 0.3s ease-in;
  43     }
  44
  45     button:hover {
  46       background-color: darkgrey;
  47       color: white
  48     }
  49
  50     textarea {
  51       width: 25%;
  52       font-size: 1.5em;
  53       overflow: auto;
  54       height: 15em;
  55       background-color: rgba(255, 255, 255, 0.8);
  56       padding: 0;
  57       margin: 0;
  58     }
  59   </style>
  60 </head>
  61 <header>
  62   <%include ../../partials/header%>
  63 </header>
  64
  65 <body>
  66
  67   <main>
  68     <div class="buttons">
  69       <button type="button" name="button" onclick="startvsorc()">Iniciar VsoRc</button>
  70       <button type="button" name="button" onclick="stopvsorc()">Detener VsoRc</button>
  71       <button type="button" name="button" onclick="startcontroller()">Iniciar controlador</button>
  72       <button type="button" name="button" onclick="stopcontroller()">Detener controlador</button>
  73     </div>
  74     <textarea rows="20" cols="7" id="comandos"></textarea>
  75     <script type="text/javascript">
  76       let topo = document.getElementById('comandos') //Donde van escrito el DSL
  77
  78
  79
  80       function stopcontroller() {
  81         let xhr = new XMLHttpRequest();
  82         xhr.open('GET', '/stopcontroller', true);
  83         xhr.onload = function() {
  84           if (xhr.status == 200) { //can use this.status instead
  85             //console.log(xhr.responseText);// para ver en la consola
  86             console.log("controller stoped");
  87           }
  88         }
  89         xhr.send();
  90
  91       }
  92
  93       function startcontroller() {
  94         let xhr = new XMLHttpRequest();
  95         xhr.open('GET', '/startcontroller', true);
  96         //console.log(xhr); //para ver en la consola
  97         xhr.onload = function() {
  98           if (xhr.status == 200) { //can use this.status instead
  99
 100             console.log("controller started");
 101           }
 102         }
 103         xhr.send();
 104       }
 105
 106       function startvsorc() {
 107         let xhr = new XMLHttpRequest();
 108         topology = JSON.stringify(topo.value)
 109         xhr.open('GET', '/startvsorc?topology=' + topology, true);
 110         xhr.onload = function() {
 111           if (xhr.status == 200) { //can use this.status instead
 112             //console.log(xhr.responseText);// para ver en la consola
 113             console.log("vsorc started");
 114           }
 115         }
 116
 117         xhr.send();
 118
 119       }
 120
 121       function stopvsorc() {
 122         let xhr = new XMLHttpRequest();
 123         xhr.open('GET', '/stopvsorc', true);
 124         xhr.onload = function() {
 125           if (xhr.status == 200) { //can use this.status instead
 126             //console.log(xhr.responseText);// para ver en la consola
 127             console.log("vsorc stopped");
 128           }
 129         }
 130         xhr.send();
 131       }
 132     </script>
 133   </main>
 134   <aside class="">
 135     <div class="statuscontroller">
 136
 137     </div>
 138     <div class="statusproyect">
 139
 140     </div>
 141   </aside>
 142 </body>
 143 <footer>
 144   <%include ../../partials/footer%>
 145 </footer>
 146
 147
 148 </html>