{% 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 %}
|