base.html 12 KB
<!DOCTYPE html>
<html lang="en">
<head>

    {% load staticfiles %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Control center for the SVOM French GFT">
    <meta name="author" content="CNRS-IRAP">
    
    
    <title >Colibri Control Center</title>

    <!-- Bootstrap core CSS -->
    <link href={% static "bootstrap/css/bootstrap.css" %} rel="stylesheet">

    <link href={% static "bootstrap/css/sb-admin.css" %} rel="stylesheet">
    <link rel="stylesheet" href={% static "bootstrap/font-awesome/css/font-awesome.min.css" %}>

    <!-- Page Specific CSS -->
    <!--    <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"> -->
    
    <!-- JsTree -->
    <link rel="stylesheet" href={% static "bootstrap/dist/themes/default/style.min.css" %}>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
	
	{% block head %}
	<style> 
  #title {
    font-family: 'Montserra', sans-serif; 
    font-size: 50px;
  }
  </style>
	{% endblock %}

</head>

<body>
<style>

#page-wrapper {
  padding: 15px 60px;
}

#wrapper {
  padding-left: 10%;
  
}

.side-nav {
  margin-left: -200px;
  left: 200px;
  width: 125px;
}

a {
  font-family: 'Montserra', sans-serif;

}

#fas {
  size: 18px;
}

#profile
{
    font-size: 17px;
}

#hour
{
    color: black;
    font-size: 14px;
}

#plc_state
{
    color: black;
    font-size: 18px;
}

#signout {
    color: black;
}

.nav>li>a:focus, .nav>li>a:hover {
        text-decoration: none;
        background-color: transparent !important;
}

#topbar {
    -webkit-transition: background-color 800ms linear;
    -ms-transition: background-color 800ms linear;
    transition: background-color 800ms linear;
}
</style>

{% load tags %}
<div id="wrapper">

      <!-- Sidebar -->
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href={% url "index" %} style="color: black;">Colibri Control Center</a>
        </div>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- #f9ff93 #6b69f3-->
        <div id="topbar" class="collapse navbar-collapse navbar-ex1-collapse navbar-dark bg-primary">
        <ul class="nav navbar-nav side-nav navbar-dark bg-primary" id="navbar_list">
            <li><a href="{% url "weather" %}">Weather</a></li>
            {% if request.user.user_level.priority >= 3 %}
                <li><a href="{% url "site" %}">State</a></li>
                <li><a href="{% url "site" %}">Observatory</a></li>
            {% else %}
                <li><a href="{% url "site" %}">Observatory</a></li>
            {% endif %}
            {% if request.user.user_level.priority >= 3 %}
                <li><a href="{% url "observation_status" %}">Tel & Inst</a></li>
            {% endif %}
            <li><a href="#">Webcams</a></li>
            {% if request.user.user_level.priority >= 2 %}
                <li><a href="{% url "proposal" %}">Proposal</a></li>
            {% endif %}
            <li><a href="{% url "requests_list" %}">Request</a></li>
            <li><a href="{% url "alerts_list" %}">Alerts</a></li>
            <li><a href="{% url "current_schedule" %}">Schedule</a></li>
            <li><a href="#">Images</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right navbar-user">
              <li><a id="plc_state"></a></li>
            <li><a class="nav-brand" id="hour">Sun elevation :</a></li>
            <li><a class="nav-brand" id="day_night" href="{% url "weather" %}"><img id="day_night_img"></a></li>
            <li><a class="nav-brand" id="wind" href="{% url "weather" %}"><img id="wind_img"></a></li>
            <li><a class="nav-brand" id="weather" href="{% url "weather" %}"><img id="weather_img"></a></li>
            <li><a class="nav-brand" id="globalmode" style="color: black;"> {% global_mode  request %} </a>              

            <li>
                <a class="nav-brand" href="{% url "profile" %}" style="color: black;"><i id="profile" class="fas fa-cog "></i></a>              
            </li>
            <li>
              <a id="signout" href="{% url "user_logout" %}" ><i class="fa fa-power-off"></i> Log Out</a>             
            </li>

          </ul>
            <script>
              var TOO_STRONG_WIND = 60; //Totally arbitrary values, just for demonstration
              var MAX_CLOUD_VALUE = 1;
              var REFRESH_ICONS_FREQUENCE_MILLISECONDS = 1000;
              var MAX_RAIN_RATE = 10;

              var check_change = true;

              $( document ).ready(function() {
              //get_hour();
              //setInterval(function() {get_hour();}, 900);

              function set_elev(sun_elev)
              {
                  $("#hour").text("Sun elevation : " + sun_elev);
              }

              function change_color(elevation, elev_threshold)
              {
                  var color = "";
                  if (elevation >= elev_threshold)
                    color = "#f9ff93";
                  else
                    color = "#6b69f3";
                $("#topbar").css("background-color", color);
              }
              function info_plc(is_safe, mode, ack, timeout, max_plc_timeout)
              {
                  var safe = "UNSAFE";
                  if (is_safe)
                      safe = "SAFE";

                  if (ack) {
                      ack = "STAFF ACK: OK";
                      if (!check_change)
                          window.location.reload(true);
                      check_change = true;
                  }
                  else
                  {
                      ack = "STAFF ACK: KO";
                      $("#plc_state").css("background-color", "red");
                      check_change = false;
                  }

                  $("#plc_state").text("PLC: " + mode + " " + safe + " " + ack);
                   $("#plc_state").css("color", "black");
                   if (timeout > max_plc_timeout)
                  {
                      $("#plc_state").text("Connection to PLC LOST");
                      $("#plc_state").css("color", "red");
                  }
              }

              ajax_request();
              interval = setInterval(function() {ajax_request();}, REFRESH_ICONS_FREQUENCE_MILLISECONDS);

              function ajax_request() {
                  $.get("{% url 'retrieve_env_navbar' %}", function (weather_status) {
                    if (weather_status)
                      {
                          /*
                          *** totally arbitrary method for day/night cycle, just for demonstration
                           */
                          //var hour = new Date().getTime();
                          //var site_time = new Date(hour - 9 * 3600 * 1000).getHours();

                          var sunelev = parseInt(weather_status[0]['sunelev']);
                          var max_sunelev = parseInt(weather_status[0]['max_sunelev']);

                          set_elev(sunelev);
                          change_color(sunelev, max_sunelev);

                          var _img_day_night =document.createElement('img');
                          if (sunelev >= max_sunelev)
                              _img_day_night.src ="{% static 'media/rising_sun.png' %}";
                          else
                              _img_day_night.src ="{% static 'media/moon.png' %}";
                          _img_day_night.width = 18;
                          _img_day_night.height = 18;
                          _img_day_night.id ="day_night_img";
                          _img_day_night.alt="html5";
                          $("#day_night_img").replaceWith(_img_day_night);

                          var _img = document.createElement('img');
                          _img.width = 18;
                          _img.height = 18;
                          _img.id ="weather_img";
                          if (parseInt(weather_status[0]["plc_timeout"]) > parseInt(weather_status[0]["max_plc_timeout"]))
                               _img.src = "{% static 'media/rain_no_plc.png' %}";
                          else if(parseInt(weather_status[0]['fields']['rain']) > MAX_RAIN_RATE)
                              _img.src = "{% static 'media/rain.png' %}";
                          else if (parseInt(weather_status[0]['fields']['cloud']) > MAX_CLOUD_VALUE)
                              _img.src = "{% static 'media/cloud.png' %}";
                          else
                              _img.src = "{% static 'media/sun.png' %}";
                              _img.width = 18;
                              _img.height = 18;
                              _img.alt = "html5";
                          $("#weather_img").replaceWith(_img);

                          var _im = document.createElement('img');
                          _im.width = 18;
                          _im.height = 18;
                          _im.id="wind_img";
                          if (parseInt(weather_status[0]["plc_timeout"]) > parseInt(weather_status[0]["max_plc_timeout"]))
                              _im.src = "{% static 'media/wind_no_plc.png' %}";
                          else if (parseInt(weather_status[0]['fields']['wind']) >= TOO_STRONG_WIND)
                            _im.src = "{% static 'media/wind.png' %}";
                          else
                            _im.src= "{% static 'media/windsock_nowind.png' %}";
                          $("#wind_img").replaceWith(_im);

                          info_plc(weather_status[0]["is_safe"], weather_status[0]["plc_mode"],
                              weather_status[0]["ACK"], parseInt(weather_status[0]["plc_timeout"]),
                              parseInt(weather_status[0]["max_plc_timeout"]) );
                      }
                  }, 'json')
                      .fail(function () {
                          console.log('Ajax error: GET request failed\n');
                      })
              }});
          </script>

        </div><!-- /.navbar-collapse -->

      </nav>

      <div id="page-wrapper">
      
      
      	<div class="row">      	
			<center><h2 id="title">{% block title %}  {% endblock %}</h2></center>
		</div>
	
		{% block content %}
		   
		   
		{% endblock %}
        

      </div><!-- /#page-wrapper -->

    </div><!-- /#wrapper -->

        <!-- Javascript function refreshing weather icons on the navbar -->


    
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script  src="{% static "/js/moment.min.js" %}"></script>
    <script  src="{% static "/js/moment-timezone.min.js" %}"></script>
    <script  src="{% static "/js/moment-timezone-with-data.min.js" %}"></script>


    <script src={% static "bootstrap/js/bootstrap.min.js" %}></script>

    <!-- JavaScript -->
{#    <script src={% static "bootstrap/js/jquery-1.10.2.js" %}></script>#}
{#    <script src={% static "bootstrap/js/bootstrap.js" %}></script>#}
        <script src={% static "bootstrap/js/jquery.formset.js" %}></script>

    <!-- Page Specific Plugins -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <!--    <script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>    -->
    <script src={% static "bootstrap/js/morris/chart-data-morris.js" %}></script>
    <script src={% static "bootstrap/js/tablesorter/jquery.tablesorter.js" %}></script>
    <script src={% static "bootstrap/js/tablesorter/tables.js" %}></script>
    
    
</body>
</html>