realtime_web Files · plotter/templates/home.html

Work with static images, fix styles, fix default values in forms

Juan C. Espinoza - - Load All Authors

File last commit:

r36:18bc7709d51a


                r36:18bc7709d51a

Download file

             home.html
        
                    63 lines
            
             | 2.0 KiB
            
                | text/html
            
             |
                HtmlDjangoLexer
            
             / plotter / templates / home.html
          
                    History
                
                 |
                  Annotation
                 | Raw
                 |Copy content
                 |Copy permalink

      {% extends 'base.html' %}

      {% load static%}

      {% block extra-header %}

      {% endblock %}

      {% block content %}

      {% include 'cartas.html' %}

      <div class="row">

        <ul class="legend">

          <li>

            <i class="fas fa-circle text-success"></i><span>Instrument online</span>

          </li>

          <li>

            <i class="fas fa-circle text-warning"></i><span>Instrument delayed</span>

          </li>

          <li>

            <i class="fas fa-circle text-danger"></i><span>Instrument offline</span>

          </li>

        </ul>

      </div>

      {% endblock content %}

      {% block script %}

      <script>

        function pad(num) {

          return ("0"+num).slice(-2);

        }

        function hhmmss(secs) {

          var minutes = Math.floor(secs / 60);

          secs = secs%60;

          var hours = Math.floor(minutes/60)

          minutes = minutes%60;

          return pad(hours)+":"+pad(minutes)+":"+pad(secs);

        }

        $("#loader").css("display", "none");

          /* This part create a new socket named "socket" to comunicate

             if there is new data we could be able to change some attributes of a class*/

          var socket = new WebSocket('ws://' + window.location.host +'/ws/main/');

          socket.onopen = function open() {

            console.log('Main WebSockets connection created.'); 

          };

          socket.onmessage = function(event) {

            var data = JSON.parse(event.data);

            // console.log(data);

            var code =  data['code'];

            console.log(code);

            var value = data['value'];

            var time = moment(new Date(data['time']*1000)).format('hh:mm:ss a');

          /*This conditional ask if value(send by server) is online, and if it is then

            change value to online in div with id="#alert_"+code*/  

            $("#date_"+code).text("Last data: "+time);

            $("#card_"+code).removeClass().addClass("card mb-4 box-shadow text-"+value+" border-"+value);

            $("#card_header_"+code).removeClass().addClass("card-header text-white bg-"+value);

            $("#card_body_"+code).find("a").removeClass().addClass("btn btn-outline-"+value);

          };

          if (socket.readyState == WebSocket.OPEN) {

            socket.onopen();

          };

      </script>

      {% endblock script %}

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages

				{% extends 'base.html' %}
				{% load static%}
				{% block extra-header %}
				{% endblock %}
				{% block content %}
				{% include 'cartas.html' %}
				<div class="row">
				<ul class="legend">
				<li>
				<i class="fas fa-circle text-success"></i><span>Instrument online</span>
				</li>
				<li>
				<i class="fas fa-circle text-warning"></i><span>Instrument delayed</span>
				</li>
				<li>
				<i class="fas fa-circle text-danger"></i><span>Instrument offline</span>
				</li>
				</ul>
				</div>
				{% endblock content %}
				{% block script %}
				<script>
				function pad(num) {
				return ("0"+num).slice(-2);
				}
				function hhmmss(secs) {
				var minutes = Math.floor(secs / 60);
				secs = secs%60;
				var hours = Math.floor(minutes/60)
				minutes = minutes%60;
				return pad(hours)+":"+pad(minutes)+":"+pad(secs);
				}
				$("#loader").css("display", "none");

				/* This part create a new socket named "socket" to comunicate
				if there is new data we could be able to change some attributes of a class*/
				var socket = new WebSocket('ws://' + window.location.host +'/ws/main/');
				socket.onopen = function open() {
				console.log('Main WebSockets connection created.');
				};

				socket.onmessage = function(event) {
				var data = JSON.parse(event.data);
				// console.log(data);
				var code = data['code'];
				console.log(code);
				var value = data['value'];
				var time = moment(new Date(data['time']*1000)).format('hh:mm:ss a');

				/*This conditional ask if value(send by server) is online, and if it is then
				change value to online in div with id="#alert_"+code*/

				$("#date_"+code).text("Last data: "+time);
				$("#card_"+code).removeClass().addClass("card mb-4 box-shadow text-"+value+" border-"+value);
				$("#card_header_"+code).removeClass().addClass("card-header text-white bg-"+value);
				$("#card_body_"+code).find("a").removeClass().addClass("btn btn-outline-"+value);
				};

				if (socket.readyState == WebSocket.OPEN) {
				socket.onopen();
				};
				</script>
				{% endblock script %}