Reworked dashboard GUI and templating a bit more #1160 / #1291

dsmrreader · Mar 7, 2021 · 82fb9bc · 82fb9bc
1 parent 4f53a32
commit 82fb9bc
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 65 deletions.
diff --git a/dsmr_frontend/templates/dsmr_frontend/dashboard.html b/dsmr_frontend/templates/dsmr_frontend/dashboard.html
@@ -16,20 +16,8 @@
     </div>
     {% endif %}
 
-    {% if capabilities.electricity or capabilities.electricity_returned or capabilities.gas %}
-    <div class="row">
-        <div class="col-sm-12">
-            <div class="panel">
-                <div class="panel-body" style="padding: 0;">
-                    <table class="table table-hover">
-                        <tr class="live-header" style="padding-bottom: 0;">
-                            {% include "dsmr_frontend/fragments/live-header-include.html" with capabilities=capabilities %}
-                        </tr>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
+    {% if capabilities.electricity %}
+    {% include "dsmr_frontend/fragments/live-header-include.html" with capabilities=capabilities %}
     {% endif %}
 
     {% if notification_count > 0 %}
@@ -49,7 +37,7 @@
 
     {% if capabilities.any %}
         {% include "dsmr_frontend/fragments/dashboard-period-include.html" with data=period_totals.today date_formatter=today_date_format capabilities=capabilities day=period_totals.day %}
-        {% include "dsmr_frontend/fragments/dashboard-period-include.html" with archive_link=True data=period_totals.month date_formatter=month_date_format capabilities=capabilities day=period_totals.day %}
+        {% include "dsmr_frontend/fragments/dashboard-period-include.html" with data=period_totals.month date_formatter=month_date_format capabilities=capabilities day=period_totals.day %}
         {% include "dsmr_frontend/fragments/dashboard-period-include.html" with data=period_totals.year date_formatter=year_date_format capabilities=capabilities day=period_totals.day %}
     {% endif %}
 

diff --git a/dsmr_frontend/templates/dsmr_frontend/fragments/dashboard-period-include.html b/dsmr_frontend/templates/dsmr_frontend/fragments/dashboard-period-include.html
@@ -6,32 +6,18 @@
 <div class="row consumption-block">
     <div class="col-sm-12">
         <div class="panel">
-            <header class="panel-heading">
-                {{ day|date:date_formatter }}
-
-                {% if archive_link %}
-                <div class="pull-right">
-                    <a class="btn btn-sm btn-primary" href="{% url 'frontend:archive' %}"><i class="fas fa-history"></i></a>
-                </div>
-                {% endif %}
-            </header>
             <div class="panel-body">
                 {% if data %}
                 <table class="table table-hover">
                     <tr>
-                        <th class="col-sm-6"></th>
+                        <th class="col-sm-6">
+                            {{ day|date:date_formatter }}
+                        </th>
                         <th class="col-sm-2">{% if capabilities.electricity %}{% translate "Consumed" %}{% endif %}</th>
                         <th class="col-sm-2">{% if capabilities.electricity_returned %}{% translate "Returned" %}{% endif %}</th>
                         <th class="col-sm-2">{% translate "Costs" %} <span class="unit">&euro;</span></th>
                     </tr>
-                    {% if frontend_settings.merge_electricity_tariffs %}
-                    <tr>
-                        <td>{% if capabilities.electricity %}{% translate "Electricity (single tariff)" %} <span class="unit">{% translate "kWh" noop %}</span>{% endif %}</td>
-                        <td>{% if capabilities.electricity %}<span class="badge bg-red">{{ data.electricity_merged|default:'-'|floatformat:2 }} </span>{% endif %}</td>
-                        <td>{% if capabilities.electricity_returned %}<span class="badge bg-green">{{ data.electricity_returned_merged|default:'-'|floatformat:2 }}</span>{% endif %}</td>
-                        <td>{% if capabilities.electricity %}<span class="badge bg-black">{{ data.electricity_cost_merged|default:'-' }}</span>{% endif %}</td>
-                    </tr>
-                    {% else %}
+                    {% if not frontend_settings.merge_electricity_tariffs %}
                     <tr>
                         <td>{% if capabilities.electricity %}{{ frontend_settings.tariff_1_delivered_name }} <span class="unit">{% translate "kWh" noop %}</span>{% endif %}</td>
                         <td>{% if capabilities.electricity %}<span class="badge bg-red">{{ data.electricity1|default:'-'|floatformat:2 }}</span>{% endif %}</td>
@@ -45,6 +31,14 @@
                         <td>{% if capabilities.electricity %}<span class="badge bg-black">{{ data.electricity2_cost|default:'-' }}</span>{% endif %}</td>
                     </tr>
                     {% endif %}
+
+                    <tr>
+                        <td>{% if capabilities.electricity %}{% translate "Electricity" %} {% if not frontend_settings.merge_electricity_tariffs %}{% translate "(combined)" %}{% else %}{% translate "(single tariff)" %}{% endif %} <span class="unit">{% translate "kWh" noop %}</span>{% endif %}</td>
+                        <td>{% if capabilities.electricity %}<span class="badge bg-red">{{ data.electricity_merged|default:'-'|floatformat:2 }} </span>{% endif %}</td>
+                        <td>{% if capabilities.electricity_returned %}<span class="badge bg-green">{{ data.electricity_returned_merged|default:'-'|floatformat:2 }}</span>{% endif %}</td>
+                        <td>{% if capabilities.electricity %}<span class="badge bg-black">{{ data.electricity_cost_merged|default:'-' }}</span>{% endif %}</td>
+                    </tr>
+
                     {% if capabilities.gas %}
                     <tr>
                         <td>{% translate "Gas" %} <span class="unit">{% translate "m<sup>3</sup>" noop %}</span></td>
@@ -61,9 +55,7 @@
                     {% endif %}
 
                     <tr>
-                        <td style="font-weight: bold;">{% translate "Total" %}</td>
-                        <td>{% if capabilities.electricity %}<span class="badge bg-red">{{ data.electricity_merged|default:'-'|floatformat:2 }}</span>{% endif %}</td>
-                        <td>{% if capabilities.electricity_returned %}<span class="badge bg-green">{{ data.electricity_returned_merged|default:'-'|floatformat:2 }}</span>{% endif %}</td>
+                        <td colspan="3" style="font-weight: bold;">{% translate "Total costs" %}</td>
                         <td><span class="badge bg-black">{{ data.total_cost|default:'-' }}</span></td>
                     </tr>
                 </table>

diff --git a/dsmr_frontend/templates/dsmr_frontend/fragments/live-header-include.html b/dsmr_frontend/templates/dsmr_frontend/fragments/live-header-include.html
@@ -1,27 +1,40 @@
 {% load i18n %}
 {% load l10n %}
 
-<th class="col-sm-6">
-    <span id="tariff_name"></span>
-    <br>
 
-    <span>
-        <a class="help-trigger" href="#"><small><i class="fas fa-question-circle"></i></small></a>
-        <small class="xhr-hidden">
-            {% blocktranslate %}Based on the latest telegram received, no matter if it's still unprocessed.{% endblocktranslate %}
-        </small>
-    </span>
-    <span class="unit" id="latest_timestamp"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span>
-</th>
-<th class="col-sm-4">
-    {% if capabilities.electricity %}
-        <span class="badge bg-red" id="latest_electricity"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span>
-        <span class="badge bg-green" id="latest_electricity_returned"></span>
-        <span class="unit">{% translate "W" %}</span>
-    {% endif %}
-</th>
-<th class="col-sm-2">
-    {% if capabilities.electricity %}
-        <span class="xhr-hidden badge bg-black" id="cost_per_hour"></span>  <span class="unit">&euro;{% translate '/hour' %}</span>
-    {% endif %}
-</th>
+<div class="row">
+    <div class="col-sm-12">
+        <div class="panel">
+            <div class="panel-body">
+                <table class="table table-hover">
+                    <tr class="live-header">
+                        <th class="col-sm-6">
+                            <span id="tariff_name"></span>
+                            <br>
+
+                            <span>
+                                <a class="help-trigger" href="#"><small><i class="fas fa-question-circle"></i></small></a>
+                                <small class="xhr-hidden">
+                                    {% blocktranslate %}Based on the latest telegram received, no matter if it's still unprocessed.{% endblocktranslate %}
+                                </small>
+                            </span>
+                            <span class="unit" id="latest_timestamp"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span>
+                        </th>
+                        <th class="col-sm-4">
+                            {% if capabilities.electricity %}
+                                <span class="badge bg-red" id="latest_electricity"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span>
+                                <span class="badge bg-green" id="latest_electricity_returned"></span>
+                                <span class="unit">{% translate "W" %}</span>
+                            {% endif %}
+                        </th>
+                        <th class="col-sm-2">
+                            {% if capabilities.electricity %}
+                                <span class="xhr-hidden badge bg-black" id="cost_per_hour"></span>  <span class="unit">&euro;{% translate '/hour' %}</span>
+                            {% endif %}
+                        </th>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/dsmr_frontend/templates/dsmr_frontend/live-graphs.html b/dsmr_frontend/templates/dsmr_frontend/live-graphs.html
@@ -17,19 +17,15 @@
     {% endif %}
 
     {% if capabilities.electricity %}
+    {% include "dsmr_frontend/fragments/live-header-include.html" with capabilities=capabilities %}
+
     <div class="row" data-graph-type="electricity">
         <div class="col-sm-12">
             <div class="panel">
                 <header class="panel-heading">
                     {% translate "Recent electricity consumption" %}
                 </header>
                 <div class="panel-body">
-                    <table class="table table-hover">
-                        <tr class="live-header">
-                            {% include "dsmr_frontend/fragments/live-header-include.html" with capabilities=capabilities %}
-                        </tr>
-                    </table>
-
                     <div id="echarts-electricity-graph" style="width: 100%; height: 300px;"></div>
                     <div class="graph_controls_help">
                         {% blocktranslate %}Scroll or pinch the graph to zoom in and out. To change the current point in time, drag the graph sideways, or use the scrollbar/control below the graph.{% endblocktranslate %}