Fetch and display weather data.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

242 lines
6.8 KiB
Raw

{% extends 'layout.html' %}
{% block title %}{{title}}{% endblock %}
{% block head %}
{{ super() }}
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
<style>
table{
border-collapse: collapse;
}
td,th:not(:first-child){
border: 1px solid black;
padding: 5px;
}
th,td:first-child,.windGust{
font-weight: bold;
}
td:nth-child(2n+1):not(:first-child){
background-color: #e0e0e0;
}
.value, .windAverage, .windGust, .windDirectionLetter{
font-size: 20px;
}
.unit,th,td:first-child{
font-size: 20px;
}
.weatherCell{
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(2,2fr) auto;
}
.weatherImage{
grid-column: 1;
grid-row: 1/3;
justify-self: center;
}
.weatherImage,.temperature,.humidity{
align-self: center;
}
.temperature{
grid-column: 2;
grid-row: 1;
}
.humidity{
grid-column: 2;
grid-row: 2;
}
.wind,.rain,.freezingLevel{
grid-column: 1/3;
justify-self: center;
}
.wind{
margin-top: 5px;
}
.negative{
color: blue;
}
#helpImage,#dayMode,#nightMode{
cursor: pointer;
}
.unselectable{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.nightBorder{
border-color: #FF0000!important;
}
.nightColor{
color: #FF0000;
}
.nightFilter{
filter: invert(16%) sepia(100%) saturate(5458%) hue-rotate(358deg) brightness(111%) contrast(124%);
}
.nightBackground{
background-color: #000000;
}
.nightAlternateBackground{
background-color: #5a5a5a!important;
}
#nightModeInput{
display: none;
}
#commandCell{
display: grid;
grid-auto-flow: column;
align-items: center;
justify-items: center;
}
</style>
{% endblock %}
{% block body %}
{{ super() }}
{% if ui %}
{% include 'help.html' %}
{% block help %}{% endblock %}
{% endif %}
<table>
<thead>
<tr>
<th>
{% if ui %}
<div id="commandCell">
<img id="helpImage" class="unselectable" src="{{ url_for('static', filename='img/help.svg') }}" />
<label for="nightModeInput">
<img id="dayMode" class="unselectable" src="{{ url_for('static', filename='img/sun.svg') }}" />
<img id="nightMode" class="unselectable" src="{{ url_for('static', filename='img/moon.svg') }}" />
</label>
<input type="checkbox" name="nightModeInput" id="nightModeInput" {% if night %}checked=checked{% endif %}>
</div>
{% endif %}
</th>
{% for d in date %}
<th>{{d}}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for h in hour %}
<tr>
<td>{% if h < 10 %}{% set h="0"+h|string() %}{% endif %}{{h}}H00</td>
{% for dt in datetime %}
{% if h|string() in dt.split(" ")[1].split(":")[0] %}
<td>
{% if dt in weatherData %}
<div class="weatherCell">
{% set img="skc.svg" %}
{% if weatherData[dt]["risque_neige"]=="oui" %}
{% if weatherData[dt]["pluie"]>0 %}
{% if weatherData[dt]["pluie"] > 30 %}
{% set img="rasn.svg" %}
{% else %}
{% set img="rasn1.svg" %}
{% endif %}
{% else %}
{% set img="sn.svg" %}
{% endif %}
{% elif weatherData[dt]["pluie"]>0 %}
{% set img="hi_shwrs.svg" %}
{% if weatherData[dt]["nebulosite"]["totale"]>=25 and weatherData[dt]["nebulosite"]["totale"] < 50 %}
{% set img="shra.svg" %}
{% endif %}
{% if weatherData[dt]["nebulosite"]["totale"]>=50 %}
{% if weatherData[dt]["pluie"] > 30 %}
{% set img="ra.svg" %}
{% else %}
{% set img="ra1.svg" %}
{% endif %}
{% endif %}
{% else %}
{% if weatherData[dt]["nebulosite"]["totale"]>=10 and weatherData[dt]["nebulosite"]["totale"] < 25 %}
{% set img="few.svg" %}
{% endif %}
{% if weatherData[dt]["nebulosite"]["totale"]>=25 and weatherData[dt]["nebulosite"]["totale"] < 50 %}
{% set img="sct.svg" %}
{% endif %}
{% if weatherData[dt]["nebulosite"]["totale"]>=50 and weatherData[dt]["nebulosite"]["totale"] < 75 %}
{% set img="bkn.svg" %}
{% endif %}
{% if weatherData[dt]["nebulosite"]["totale"]>=75 %}
{% set img="ovc.svg" %}
{% endif %}
{% endif %}
<img class="weatherImage unselectable" src="{{ url_for('static', filename='img/'+img) }}" />
<div class="temperature">
{% if weatherData[dt]["temperature"]["2m"]-273.15<=0 %}
<span class="value negative">{{(weatherData[dt]["temperature"]["2m"]-273.15)|round(1)}}</span>
{% else %}
<span class="value">{{(weatherData[dt]["temperature"]["2m"]-273.15)|round(1)}}</span>
{% endif %}
<span class="unit">°C</span>
</div>
<div class="humidity">
<span class="value">{{weatherData[dt]["humidite"]["2m"]}}</span>
<span class="unit">%</span>
</div>
<div class="wind">
<span class="windAverage">{{weatherData[dt]["vent_moyen"]["10m"]}}</span>
{% if weatherData[dt]["vent_rafales"]["10m"]>weatherData[dt]["vent_moyen"]["10m"] %}
| <span class="windGust">{{weatherData[dt]["vent_rafales"]["10m"]}}</span>
{% endif %}
<span class="unit">km/h</span>
<span class="windDirection">
<span class="windDirectionLetter">
{% set dir=weatherData[dt]["vent_direction"]["10m"] %}
{% if dir > 360 %}
{% set dir=dir-360 %}
{% endif %}
{% if dir < 22.5 or dir >= 337.5 %}
N
{% endif %}
{% if dir >= 22.5 and dir < 67.5 %}
NE
{% endif %}
{% if dir >= 67.5 and dir < 112.5 %}
E
{% endif %}
{% if dir >= 112.5 and dir < 157.5 %}
SE
{% endif %}
{% if dir >= 157.5 and dir < 202.5 %}
S
{% endif %}
{% if dir >= 202.5 and dir < 247.5 %}
SW
{% endif %}
{% if dir >= 247.5 and dir < 292.5 %}
W
{% endif %}
{% if dir >= 292.5 and dir < 337.5 %}
NW
{% endif %}
</span>
<span class="windDirectionDegree">({{dir}}°)</span>
</span>
</div>
{% if weatherData[dt]["pluie"]>0 %}
<div class="rain">
<span class="value">{{weatherData[dt]["pluie"]}}</span>
<span class="unit">mm/3h rain</span>
</div>
{% endif %}
{% if weatherData[dt]["risque_neige"]=="oui" %}
<div class="freezingLevel">
<span class="value">{{weatherData[dt]["iso_zero"]}}</span>
<span class="unit">m freezing level</span>
</div>
{% endif %}
</div>
{% endif %}
</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<div class="status">
<span class="run">Model run: {{weatherData["model_run"]}}</span>
<span class="fetchTime"> fetched {{fetchTime}} ago</span>
</div>
{% endblock %}