{% extends "base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block extra_assets %}

<style>
  body{margin-top: 50px;}
  h1 {margin: 50px auto 30px;}
  .side-by-side{display: inline-block;vertical-align: middle;position: relative; text-align: center;}
  .humidity-icon{background-color: #349800;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}
  .humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}
  .humidity{font-weight: 300;font-size: 60px;color: #ff98db;}
  .temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}
  .temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}
  .temperature{font-weight: 300;font-size: 60px;color: #f39c12;}
  .superscript{font-size: 17px;font-weight: 600;position: relative;right: -20px;top: -10px;}
  .data{padding: 10px;}
</style>

<script src= {% static "rmap/libs/jquery/2.1.1/jquery.min.js" %}></script>

<script>

  function hideNodata() {
      $("#data").hide(); //nascondo i dati
      loadData();
  }
  
  function loadData() {
      $.getJSON('http://{{ object.slug }}.local/data.json', function(json){
          //do nothing here
      })
          .done(function(json){
              $.each(json, function(key,val){
                  $('#'+key).text(val);
                  //console.log( "json: " + key, val );
              });
              $("#nodata").hide(); //nascondo il warning
              $("#data").show(); //mostro i dati
          })
          .fail(function( jqxhr, textStatus, error ) {
              //var err = textStatus + ", " + error;
              //console.log( "Request Failed: " + err, jqxhr );
              $("#nodata").show(); //mostro il warning
              $("#data").hide(); //nascondo i dati
          });

      getLocation();      
  };
  window.onload = hideNodata;
  setInterval(loadData,10000);


  // browser location starts when this function is called
  function getLocation() {
      
      // check to make sure geolocation is possible
      if (navigator.geolocation) {
	  var options = {
	      enableHighAccuracy: true,
	      timeout: 5000,
	      maximumAge: 0
	  };
	  navigator.geolocation.getCurrentPosition(success, error, options);
      } else {
	  console.log('Geolocation is not supported');
      }
  }
  
  function error(err) {
      console.warn(`ERROR(${err.code}): ${err.message}`);
  }

  function success(pos) {
      
      console.log('lat: ' + pos.coords.latitude + '  lon: ' + pos.coords.longitude);
      console.log('accuracy: ' + pos.coords.accuracy + ' meters.');
      
      // now we have coordinates, it is time to use them to
      var request_url = 'http://{{ object.slug }}.local/geo'
	  + '?'
	  + 'lat=' + encodeURIComponent(pos.coords.latitude)
	  + '&lon=' + encodeURIComponent(pos.coords.longitude);
      
      var request = new XMLHttpRequest();
      request.open('GET', request_url, true);

      request.onload = function() {
	  // see full list of possible response codes:
	  // https://opencagedata.com/api#codes
	  
	  if (request.status === 200){  // Success!
	      console.log(request.responseText);	      
	  } else if (request.status <= 500){
	      // We reached our target server, but it returned an error
	      console.log("unable to send geo information to station! Response code: " + request.status);
	  } else {
	      console.log("server error");
	  }
      };
      request.onerror = function() {
	  // There was a connection error of some sort
	  console.log("unable to connect to station");
      };
      request.send();  // make the request
  }
  
</script>

{% endblock %}

{% block content %}

<section id="main_content">

  <h2>{% trans 'Station name' %}: {{ object.name }}</h2>
  <h2>{% trans 'Comunication status with server' %}: <span id='STAT'></span>;  {% trans 'WiFi RSSI' %}: <span id='RSSI'></span></h2>

  <div class="table-responsive">
    <table class="table">
      <tr>
	<th> {% trans 'Active' %}         </th>
	<th> {% trans 'User' %}           </th>
	<th> {% trans 'Lat' %}            </th>
	<th> {% trans 'Lon' %}            </th>
	<th> {% trans 'Category' %}       </th>
	<th> {% trans 'Type' %}           </th>
	<th> {% trans 'View on the map' %}</th>
      </tr>
      
      <tr>
	<td> 
	  {% if object.active %}
	  <i class="fa fa-check "></i>
	  {% else %}
	  <i class="fa fa-times "></i>
	  {% endif %}
	</td>
	<td> {{ object.user }}    </td>
	<td> {{ object.lat }}     </td>
	<td> {{ object.lon }}     </td>
	<td> {{ object.get_category_display }}</td>
	<td> {{ object.get_type_display }}    </td>
	<td> <a href="{% url 'stationsonmap' object.user object.slug %}">{{ object.slug }}</a></td>
      </tr>
    </table>
  </div>

  <div class="container-fluid">
    <div class="inner cover">
      <h1 id="striped-rows">{% trans 'Last local station data' %}</h1>
      
      <div id="nodata">
	<h1>No local comunication with station</h1>
      </div>
      
      <div id="data">
	<div class="data">
	  <div class="side-by-side temperature-icon">
	    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 width="9.915px" height="22px" viewBox="0 0 9.915 22" enable-background="new 0 0 9.915 22" xml:space="preserve">
	      <path fill="#FFFFFF" d="M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z"></path>
	    </svg>
	  </div>
	  <div class="side-by-side temperature-text">Temperature</div>
	  <div class="side-by-side temperature"><span id='TEMP'>None</span><span class="superscript">°C</span></div>
	</div>
	<div class="data">
	  <div class="side-by-side humidity-icon">
	    <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="12px" height="17.955px" viewBox="0 0 13 17.955" enable-background="new 0 0 13 17.955" xml:space="preserve">
	      <path fill="#FFFFFF" d="M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217"></path>
	    </svg>
	  </div>
	  <div class="side-by-side humidity-text">Humidity</div>
	  <div class="side-by-side humidity"><span id='HUMID'>None</span><span class="superscript">%</span></div>
	</div>
	<div class="data">
	  <div class="side-by-side temperature-text">PM2.5</div>
	  <div class="side-by-side temperature"><span id='PM2'>None</span><span class="superscript">ug/m^3</span></div>
	</div>
	<div class="data">
	  <div class="side-by-side temperature-text">PM10</div>
	  <div class="side-by-side temperature"><span id='PM10'>None</span><span class="superscript">ug/m^3</span></div>
	</div>
	<div class="data">
	  <div class="side-by-side temperature-text">CO2</div>
	  <div class="side-by-side temperature"><span id='CO2'>None</span><span class="superscript">ppm</span></div>
	</div>
	<!--
	<div class="data">		
	  <div class="side-by-side temperature-text">Precipitation</div>
	  <div class="side-by-side temperature"><span id='PREC'>None</span><span class="superscript">Kg/m2</span></div>
	</div>
	-->
	
      </div>
    </div>
    
  </div>

  <h3><a href="http://{{ object.slug }}.local/archive.dat">{% trans 'Download archive data file' %}</a></h3>
  <h3><a href="http://{{ object.slug }}.local/info.dat">{% trans 'Download archive info file' %}</a></h3>
  
</section>

{% endblock %}