-
Notifications
You must be signed in to change notification settings - Fork 0
/
MMM-Growatt-Flow.njk
38 lines (38 loc) · 1.76 KB
/
MMM-Growatt-Flow.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!--
Use ` | safe` to allow html tags within the text string.
https://mozilla.github.io/nunjucks/templating.html#autoescaping
-->
<div>
{% if growatt == null %}
<p>Connecting to Growatt...</p>
{% else %}
<div class="stats">
<p>Production: {{growatt.production}}W</p>
<p>Consumption: {{growatt.consumption}}W</p>
<p>Grid: {{growatt.grid}}W</p>
<p>Electricity price:
{% if electricityPrice == null %}
Loading...
{% else %}
{{electricityPrice}} kr
{% endif %}
</p>
</div>
<p class="profit {{"negative" if hourlyProfitOrCost < 0}}">
{% if hourlyProfitOrCost == null %}
Loading...
{% else %}
{{"+" if hourlyProfitOrCost > 0}}{{hourlyProfitOrCost}} kr / h
{% endif %}
</p>
<div class="growatt-flow">
<img class="icon solar" src="/MMM-Growatt-Flow/solar.png" />
<div class="line solar"><div class="pipeline south"><div class="flow" style="animation-duration: {{growatt.speed.production}}"></div></div></div>
<img class="icon grid" src="/MMM-Growatt-Flow/grid.png" />
<div class="line grid"><div class="pipeline {{"east" if growatt.grid > 0 else "west"}}"><div class="flow" style="animation-duration: {{growatt.speed.grid}}"></div></div></div>
<img class="icon base" src="/MMM-Growatt-Flow/base.png" />
<div class="line house"><div class="pipeline east"><div class="flow" style="animation-duration: {{growatt.speed.consumption}}"></div></div></div>
<img class="icon house" src="/MMM-Growatt-Flow/house.png" />
</div>
{% endif %}
</div>