realtime_web Files · plotter/templates/home.html

New template, clean code, workig for realtime

Juan C. Espinoza - - Load All Authors

File last commit:

r21:dc5f8680b6e1


                r21:dc5f8680b6e1

Download file

             home.html
        
                    52 lines
            
             | 1.7 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 %}

      <div class="text-center p-2 text-igp">

        <h1>Realtime Experiments at JRO</h1>

      </div>

      {% include 'cartas.html' %}

      {% 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 +'/main/9999/none/');

          socket.onopen = function open() {

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

          };

          socket.onmessage = function message(event) {

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

            console.log(data);

            code =  data.code;

            value = data.value;

            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 %}
				<div class="text-center p-2 text-igp">
				<h1>Realtime Experiments at JRO</h1>
				</div>
				{% include 'cartas.html' %}
				{% 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 +'/main/9999/none/');
				socket.onopen = function open() {
				console.log('Main WebSockets connection created.');
				};

				socket.onmessage = function message(event) {
				var data = JSON.parse(event.data);
				console.log(data);
				code = data.code;
				value = data.value;
				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 %}