src/views/starter.ejs

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