New, updated version of web. Might contain customizations

This commit is contained in:
2019-08-21 15:44:49 +02:00
parent c3850b6e19
commit 47326ed774
11 changed files with 600 additions and 536 deletions

View File

@@ -4,40 +4,50 @@
<div class="col"></div>
<main class="pt-4 col-10">
<h1>Weather Dashboard</h1>
<h5>{timestamp} UTC</h5>
<h5><span id="timestamp">{_timestamp}</span> UTC</h5>
<section class="row text-center placeholders">
<div class="col-md-4 placeholder col-sm-6">
<img src="{w_speed_icon}" width="50" class="img-fluid" alt="Wind Speed">
<h4>{w_speed_km} [km/h]</h4>
<div class="text-muted">{w_speed_ms} [m/s]</div>
<img src="{_w_speed_icon}" width="50" class="img-fluid" alt="Wind Speed">
<h4><span id="w_speed_km">{_w_speed_km}</span> [km/h]</h4>
<div class="text-muted">
<span id="w_speed_ms">{_w_speed_ms}</span> [m/s]
</div>
</div>
<div class="col-md-4 placeholder col-sm-6">
<img src="{w_gust_icon}" width="50" class="img-fluid" alt="Wind Gusts">
<h4>{w_gust_km} [km/h]</h4>
<div class="text-muted">{w_gust_ms} [m/s]</div>
<img src="{_w_gust_icon}" width="50" class="img-fluid" alt="Wind Gusts">
<h4><span id="w_gust_km">{_w_gust_km} [km/h]</h4>
<div class="text-muted">
<span id="w_gust_ms">{_w_gust_ms}</span> [m/s]
</div>
</div>
<div class="col-md-4 placeholder col-sm-6">
<img src="{w_dir_icon}" width="50" class="img-fluid" alt="Wind Direction">
<h4>{w_dir_name}</h4>
<div class="text-muted">{w_dir_deg} &deg;</div>
<img src="{_w_dir_icon}" width="50" class="img-fluid" alt="Wind Direction">
<h4><span id="w_dir_name">{_w_dir_name}</h4>
<div class="text-muted"><span id="w_dir">{_w_dir_deg}</span> &deg;</div>
</div>
</section>
<section class="row text-center placeholders">
<div class="col-md-4 placeholder col-sm-6">
<img src="{out_temp_icon}" width="50" class="img-fluid" alt="Outside Temperature">
<h4>{out_temp} &deg;C</h4>
<div class="col-md-3 placeholder col-sm-6">
<img src="{_out_temp_icon}" width="30" class="img-fluid" alt="Outside Temperature">
<h4><span id="out_temp">{_out_temp}</span> &deg;C</h4>
<div class="text-muted">[Outside]</div>
</div>
<div class="col-md-4 placeholder col-sm-6">
<img src="{in_temp_icon}" width="50" class="img-fluid" alt="Inside Temperature">
<h4>{in_temp} &deg;C</h4>
<div class="col-md-3 placeholder col-sm-6">
<img src="{_in_temp_icon}" width="30" class="img-fluid" alt="Inside Temperature">
<h4><span id="in_temp">{_in_temp}</span> &deg;C</h4>
<div class="text-muted">[Inside]</div>
</div>
<div class="col-md-4 placeholder col-sm-6">
<img src="{pressure_icon}" width="50" class="img-fluid" alt="Atmospheric pressure">
<h4>{pressure} [hPa]</h4>
<div class="text-muted">{raw_pressure} [hPa] raw</div>
<div class="col-md-3 placeholder col-sm-6">
<img src="{_pressure_icon}" width="30" class="img-fluid" alt="Atmospheric pressure">
<h4><span id="current_pressure">{_pressure}</span> [hPa]</h4>
<div class="text-muted">{_raw_pressure} [hPa] raw</div>
</div>
<div class="col-md-3 placeholder col-sm-6">
<img src="{_rrate_icon}" width="30" class="img-fluid" alt="Rain rate">
<h4><span id="current_rrate">{_rrate}</span></h4>
<div class="text-muted">[mm/h]</div>
</div>
</section>
@@ -56,6 +66,7 @@
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('4320','wind_monitor')">6Mo</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('8640','wind_monitor')">Year</button>
<button type="button" class="btn btn-secondary" onclick="setForth('wind_monitor')">&gt;&gt;</button>
<h6><span id="g_tstamp_wind_monitor">{_timestamp}</span> UTC</h6>
</div></div>
</div>
</section>
@@ -74,6 +85,7 @@
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('4320','temphumi_monitor')">6Mo</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('8640','temphumi_monitor')">Year</button>
<button type="button" class="btn btn-secondary" onclick="setForth('temphumi_monitor')">&gt;&gt;</button>
<h6><span id="g_tstamp_temphumi_monitor">{_timestamp}</span> UTC</h6>
</div>
</section>
<section class="row text-center placeholders">
@@ -88,6 +100,22 @@
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('4320','pressure_monitor')">6Mo</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('8640','pressure_monitor')">Year</button>
<button type="button" class="btn btn-secondary" onclick="setForth('pressure_monitor')">&gt;&gt;</button>
<h6><span id="g_tstamp_pressure_monitor">{_timestamp}</span> UTC</h6>
</div>
</section>
<section class="row text-center placeholders">
<div class="col">
<div id="rrate_labels"></div>
<div id="rrate" class="container-fluid" style="width:100%;height:200px;"></div>
<button type="button" class="btn btn-secondary" onclick="setBack('rrate_monitor')">&lt;&lt;</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('12','rrate_monitor')">12h</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('24','rrate_monitor')">24h</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('168','rrate_monitor')">Week</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('720','rrate_monitor')">Month</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('4320','rrate_monitor')">6Mo</button>
<button type="button" class="btn btn-secondary btn-sm" onclick="setHours('8640','rrate_monitor')">Year</button>
<button type="button" class="btn btn-secondary" onclick="setForth('rrate_monitor')">&gt;&gt;</button>
<h6><span id="g_tstamp_rrate_monitor">{_timestamp}</span> UTC</h6>
</div>
<script type="text/javascript" src="../static/js/weather_graph.js"></script>
</section>