source: OpenRLabs-Git/web2py/applications/rlabs/views/show/ous.html

main
Last change on this file was 89c64f4, checked in by David Fuertes <dfuertes@…>, 4 years ago

Ajax chequeo Reservas y status equipos
  • Property mode set to 100644
File size: 13.9 KB
Line 
1{{extend 'layout.html'}}
2<link href="{{=URL('static', 'css/ous.css')}}" rel="stylesheet" type="text/css" />
3
4
5<script src="{{=URL('static','js/bootstrap.min.js')}}"></script>
6<!--
7<script src="{{=URL('static','js/rlabs/rlabs-utils.js')}}" type="text/javascript"></script>
8<script src="{{=URL('static','js/rlabs/rlabs-ajax.js')}}" type="text/javascript"></script>
9<script src="{{=URL('static','js/rlabs/rlabs-progress-bar.js')}}" type="text/javascript"></script>
10<script src="{{=URL('static','js/rlabs/rlabs-lab.js')}}" type="text/javascript"></script>
11<script src="{{=URL('static','js/rlabs/rlabs-os-images.js')}}" type="text/javascript"></script>
12<script src="{{=URL('static','js/rlabs/rlabs-disponibles-pc.js')}}" type="text/javascript"></script>
13<script src="{{=URL('static','js/rlabs/rlabs-pc.js')}}" type="text/javascript"></script>
14<script src="{{=URL('static','js/rlabs/rlabs-footer.js')}}" type="text/javascript"></script>
15<script src="{{=URL('static','js/rlabs/rlabs-modal.js')}}" type="text/javascript"></script>
16<script src="{{=URL('static','js/rlabs/rlabs-status.js')}}" type="text/javascript"></script>
17<script src="{{=URL('static','js/rlabs/rlabs-reserves.js')}}" type="text/javascript"></script>
18
19 -->
20 <script src="{{=URL('static','js/rlabs-min.js')}}" type="text/javascript"></script>
21
22
23
24
25 
26<script type="text/javascript">
27
28var labs_showed = 0;
29
30function get_Labs_ON(event) {
31        labs_showed = 0;
32       
33        var table_id = "table_ou_" + event.target.getAttribute('data-ou');
34        document.getElementById(table_id).setAttribute("style", "background : #bfbfbf;");
35
36        requestAJAX('{{=URL("show", "labs")}}',
37                                                'ou_id=' + event.target.getAttribute('data-ou'),
38                                                show_Labs);
39               
40}
41
42function cursor_wait(state){
43        document.getElementById('container').setAttribute("style","cursor:" + state + ";");
44        tables = document.getElementsByTagName("table");
45        for (i = 0; i < tables.length; i++) {
46                tables[i].setAttribute("style","cursor:" + state + ";");
47        }
48
49}
50
51
52function get_remotePCs(event) {
53        if (labs_showed !== event.target.getAttribute('data-lab_id')) {
54                labs_showed = event.target.getAttribute('data-lab_id');
55                table_lab_id = event.target.getAttribute('data-lab_id');
56                table_lab = event.target.getAttribute("style", "background : #bfbfbf;display:block;");
57               
58                cursor_wait('wait');
59               
60                requestAJAX('{{=URL("show", "clients")}}',
61                                        'ou_id=' + event.target.getAttribute('data-ou') +
62                                        '&lab_id=' + event.target.getAttribute('data-lab_id'),
63                                        show_PCs);     
64        }               
65}
66
67
68/* parametros = tomados desde modal seran añadios a la peticion de
69*  reserva en do_reserve.
70*/
71var parametros = null;
72
73function select_mode_connect(ou_id, image_id, lab_id){                 
74       
75        parametros = 'ou_id=' + ou_id +
76                                         '&image_id=' +image_id +
77                                         '&lab_id=' + lab_id
78               
79        $("#modalSelectMode").modal();                 
80}
81
82
83function add_text_console(text) {
84        document.getElementById("text_consolelog").value = document.getElementById("text_consolelog").value +
85        text;   
86}
87
88/*
89 *  Do Unreserve
90 */
91
92function unreserve(event){
93        var button = event.target;
94       
95        parametros = 'reserve_id=' + button.getAttribute('data-reserve_id') +
96                                        '&pc_id=' + button.getAttribute('data-pc_id') +
97                                        '&lab_id=' + button.getAttribute('data-lab_id') +
98                                        '&ou_id=' + button.getAttribute('data-ou_id');
99       
100        requestAJAX('{{=URL("show", "unreserve")}}', parametros, refresh_reserves);
101
102}
103
104function refresh_reserves(){
105        let reservesObserver = new ReservesObserver('{{=URL("show", "get_reserves")}}', '{{=URL("show", "check_status_clients")}}',
106                                                                                                document.getElementById('table_active_reserves'));
107
108        reservesObserver.set_reserves();
109}
110 
111function refresh_page(){
112        window.location.reload(true);
113}
114
115 /*
116 * Get connection parameters from modal window 
117 */
118 
119var animator;
120
121function do_reserve(event){
122
123        var maxtime_string = document.getElementById("maxtime_input").value;
124        var maxtime = Number(maxtime_string);
125       
126        if ( maxtime > {{=maxtime_reserve}} ) {
127                alert("Tiempo máximo de reserva es (horas): " + {{=maxtime_reserve}})           
128        } else {
129                if ( Number.isInteger(maxtime) ) {
130                        document.getElementById("maxtime_input").value = document.getElementById("maxtime_input").defaultValue;
131                       
132                        select_service = document.getElementById("service");
133                        select_service_option = select_service.options[select_service.selectedIndex];
134                        parametros = parametros + '&maxtime=' + maxtime +
135                                                                        '&client_type=' + event.target.getAttribute('data-client') +
136                                                                        '&protocol=' + select_service_option.text +
137                                                                        '&port=' + select_service_option.value;                 
138                       
139                        $("#modalSelectMode").modal("hide");
140                       
141                        requestAJAX('{{=URL("connect", "do_reserve")}}', parametros, check_status_client);
142                        /* Show modal here to disable actions in main page*/
143                        $("#modalConsoleLog").modal();
144                        animator = show__progress_bar();               
145                } else {
146                        alert("El número de horas debe ser un número entero.")
147                }
148        }
149       
150}
151
152function do_assign_reserve(event){
153        var button = event.target;
154       
155        let parametros = 'ou_id=' + button.getAttribute('data-ou_id') +
156                                         '&image_id=' + button.getAttribute('data-image_id') +
157                                         '&lab_id=' + button.getAttribute('data-lab_id')                                               
158
159        requestAJAX('{{=URL("connect", "do_assing_reserve")}}', parametros, check_assigned);
160}
161
162function check_assigned(respuesta) {
163        console.log(respuesta);
164        if (respuesta.pc_id === undefined){
165                select_mode_connect(respuesta.ou_id, respuesta.image_id, respuesta.lab_id);
166        } else {
167                refresh_page();
168        }
169
170
171
172}
173/********
174 *  Call next stage of connection pc and show results in console.
175 *  When finished, call fucntion to either connect a PC or do port forwarding.
176 *****/
177function check_status_client(respuesta) {       
178        // console.log(respuesta)
179         
180        add_text_console(respuesta.status);
181        var parametros_status = '';     
182        for (param in respuesta.equipo_reservado) {
183                parametros_status = parametros_status + "&" + param + "=" + respuesta.equipo_reservado[param];
184        }
185       
186        if (respuesta.finalizado === undefined) {               
187                if (typeof(respuesta.error) === "undefined"){
188                        window.setTimeout(function(){ requestAJAX('{{=URL("connect", "check_pc_status")}}',
189                                                                                        parametros_status, check_status_client); },
190                                                                                        (respuesta.wait_to_check * 1000) );
191                } else {
192                        alert(respuesta.error);
193                }
194        } else {               
195                if (typeof(respuesta.error) === "undefined"){
196                        document.getElementById("buttonConsole").style.display = 'block';
197                        stop_progress_bar();                   
198                        if (respuesta.client_type === "browser") {
199                                refresh_page();
200                        } else {
201                                /*
202                                parametros = "&ip_remote=" + respuesta.ip +
203                                                         "&port_remote="+ document.getElementById("service").value +
204                                                         "&pc_name=" + respuesta.pc_name +
205                                                         "&maxtime= " + respuesta.maxtime;
206                                */
207                                requestAJAX('{{=URL("connect", "openport")}}', parametros_status, add_message_port);                   
208                        }
209                } else {
210                        alert(respuesta.error);
211                }       
212        }
213}
214
215function add_message_port(respuesta) { 
216        add_text_console('\n Puerto a utilizar para la conexión: ' + respuesta.port);
217}
218
219/****
220 *  Set form with connection parameters and send it.
221 */
222 
223function show_remote_desktop(connect_data){     
224        if (typeof(connect_data.error) === "undefined"){
225                if (connect_data.client_type === "browser") {
226                        document.getElementById("ip_remotePC").value=connect_data.ip;
227                        document.getElementById("protocol_remotePC").value=connect_data.protocol;
228                        document.getElementById("port_remotePC").value=connect_data.port;
229                        document.getElementById("pc_id_remotePC").value=connect_data.pc_id;
230                        document.getElementById("pc_name_remotePC").value=connect_data.pc_name;
231                        document.getElementById("lab_id_remotePC").value=connect_data.lab_id;
232                        document.getElementById("ou_id_remotePC").value=connect_data.ou_id;             
233                        document.getElementById("sound_remotePC").value=connect_data.sound;
234                        document.form.submit();
235                }
236        } else {
237                alert(connect_data.error);
238        }
239       
240}
241
242/****
243 * switch between sound state: ON-OFF
244 */
245function swicht_sound(event){
246        var button = event.target;
247        if (button.getAttribute('data-sound') == "off") {
248                button.setAttribute('data-sound',"on");
249                button.setAttribute('src',"../static/images/sound_on.png");
250                document.getElementById("btn_connect_reserve_" + button.getAttribute('data-reserve')).setAttribute('data-sound',"on");
251        } else {
252                button.setAttribute('data-sound',"off");
253                button.setAttribute('src',"../static/images/sound_off.png");
254                document.getElementById("btn_connect_reserve_" + button.getAttribute('data-reserve')).setAttribute('data-sound',"off");
255        }
256 }
257
258/*
259 * Connect reserved pc
260 */
261 function connect_remotePC(event){
262                var button = event.target;
263               
264                var connect_data = {client_type : "browser",
265                                                        pc_name : button.getAttribute('data-pc_name'),
266                                                        pc_id : button.getAttribute('data-pc_id'),
267                                                        lab_id : button.getAttribute('data-lab_id'),
268                                                        ou_id : button.getAttribute('data-ou_id'),
269                                                        ip : button.getAttribute('data-ip'),
270                                                        protocol : button.getAttribute('data-protocol'),
271                                                        port : button.getAttribute('data-port'),
272                                                        sound : button.getAttribute('data-sound')
273                                                };
274
275                show_remote_desktop(connect_data);
276}
277       
278 window.onload = function () {
279
280                var reservesObserver = new ReservesObserver('{{=URL("show", "get_reserves")}}', '{{=URL("show", "check_status_clients")}}',
281                                                                                                document.getElementById('table_active_reserves'));
282
283                reservesObserver.run();
284                                                                               
285                document.addEventListener("visibilitychange", onchangePage);
286
287                function onchangePage(event) {
288                        if (document.visibilityState == 'hidden') {
289                                reservesObserver.stop();
290                        }
291
292                        if (document.visibilityState == 'visible') {
293                                reservesObserver.run();                         
294                        }
295                       
296                }               
297}
298
299
300
301</script>
302
303<div id='container'>
304
305<table id="table_ous" class="nivel0">
306        <thead>
307                <tr>
308                    <th>Unidades Organizativas</th>
309                </tr>
310        </thead>
311        <tbody>
312        {{if ous:}}
313                {{for ou in ous:}}
314                <tr class="pointer" id="ou_{{=ou['id']}}" style="display:block;">
315                        <td width="16">
316                        <img src="{{=URL('static','images/centros.gif')}}" data-ou={{=ou['id']}} onClick="get_Labs_ON(event)">
317                        </td>                   
318                    <td>
319                            <table id="table_ou_{{=ou['id']}}">
320                                <tbody>
321                                        <tr>
322                                                <td>
323                                                <span data-ou={{=ou['id']}} onClick="get_Labs_ON(event)">{{=ou['name']}}</span>
324                                                </td>
325                                        </tr>
326                                </tbody>
327                            </table>
328                    </td>                   
329                </tr>
330                {{pass}}
331        {{pass}}
332        </tbody>
333</table>
334<div id='central_space'></div>
335<table id='table_active_reserves'>
336        <thead>
337                <tr>
338                        <th style="text-align: center;">Reservas Activas</th>
339                </tr>
340        </thead>       
341        <tbody>
342                <tr class="active_reserves_tr"></tr>
343        </tbody>       
344</table>
345</div> <!--  End Container -->
346 <!-- - Storage data remotePC to submit-->
347
348 <form name=form action={{=URL("connect", "desktop")}} target="_blank"  method="post">
349        <input id="ip_remotePC" type="hidden" name="ip" value="X">
350        <input id="protocol_remotePC" type="hidden" name="protocol" value="X">
351        <input id="port_remotePC" type="hidden" name="port" value="X"> 
352        <input id="pc_id_remotePC" type="hidden" name="pc_id" value="X">
353        <input id="pc_name_remotePC" type="hidden" name="pc_name" value="X">
354        <input id="lab_id_remotePC" type="hidden" name="lab_id" value="X">
355        <input id="ou_id_remotePC" type="hidden" name="ou_id" value="X">
356        <input id="sound_remotePC" type="hidden" name="sound" value="X">
357</form>
358
359<!-- Console Modal -->
360<div class="modal fade" id="modalConsoleLog" tabindex="-1" role="dialog" data-backdrop="static"
361                                        aria-labelledby="exampleModalLongTitle" aria-hidden="true">
362  <div class="modal-dialog modal-dialog-centered" role="document" style="height: 100%;">
363    <div class="modal-content" style="height: 80%;">
364      <div class="modal-header">
365        <h5 class="modal-title" id="exampleModalLongTitle">Proceso de Arranque</h5>
366        <!--
367           <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
368          <span aria-hidden="true">&times;</span>
369        </button>
370        -->
371      </div>
372      <div class="modal-body">
373                <div id="progress_bar_container">
374                                <span>Arrancando equipo e iniciando sistema operativo...</span><br>
375                                <progress id="progress_bar" max="100" value="0" data-time="{{=check_time}}"></progress>
376                                <span id="progress_value" class="progress_value">0%</span>
377                </div>
378                <div id="consolelog" style="height: 100%;">
379                        <textarea id="text_consolelog" class="form-control z-depth-1" readonly="True"
380                                                style="background: black;color: grey;height: 90%;">
381                        </textarea>
382                </div>   
383      </div>
384      <div class="modal-footer">
385        <button id="buttonConsole" type="button" onclick="refresh_page()" style="display: none;"
386                        class="btn btn-secondary" data-dismiss="modal">Close</button>
387        <!--  <button type="button" class="btn btn-primary">Save changes</button>  -->
388      </div>
389    </div>
390  </div>
391</div>
392
393<!-- Select Modal -->
394<div class="modal" id="modalSelectMode" tabindex="-1" role="dialog" data-backdrop="static"
395                                        data-keyboard="false" aria-labelledby="modalSelectMode" aria-hidden="true">
396  <div class="modal-dialog modal-dialog-centered" role="document">
397    <div class="modal-content" style="width: 50%;">
398      <div class="modal-header">
399        <h5 class="modal-title" id="modalSelectMode">Parametros</h5>
400      </div>
401      <div class="modal-body">
402        <div>           
403                        <span>Tiempo máximo de reserva (horas):</span>
404                        <input id="maxtime_input" value="{{=maxtime_reserve}}">
405                </div>
406                <div>
407                        <span>Aplicación:</span>
408                        {{if services:}}
409                        <select id="service">                           
410                                        {{for service in services:}}
411                                        <option value="{{=service['port']}}">{{=service['name']}}</option>
412                                        {{pass}}                                                       
413                        </select>
414                        {{pass}}                       
415                </div>
416      </div>     
417      <div class="modal-footer">
418        <span>Conectar mediante: </span>
419                <button type="button" onclick="do_reserve(event)" class="btn btn-primary" data-client="browser">Navegador (solo RDP)</button>
420                <!--     
421                <button type="button" onclick="connect_remotePC(event)" class="btn btn-primary" data-client="browser">Navegador (solo RDP)</button>             
422        <button type="button" onclick="connect_remotePC(event)" class="btn btn-secondary" data-dismiss="modal" data-client="desktop">Aplicación de Escritorio</button>
423        -->
424        <button type="button" onclick="reset_modal()" class="btn btn-secondary" data-dismiss="modal" data-client="desktop">Cancel</button>       
425      </div>
426    </div>
427  </div>
428</div>
Note: See TracBrowser for help on using the repository browser.