Layout verbeteren #912

dennissiemensma · dennissiemensma · commit d6900a60c32c · 2020-03-02T20:53:17.000+01:00
diff --git a/dsmr_frontend/static/dsmr_frontend/css/dsmr-reader/global.css b/dsmr_frontend/static/dsmr_frontend/css/dsmr-reader/global.css
@@ -78,4 +78,13 @@ div.search_help {
     clear: left;
     color: gray;
     font-size: xx-small;
+}
+
+tr > th {
+    /* Remove weird duplicate border on top. */
+    border-top: none !important;
+}
+
+tr.live-header > th {
+    padding-bottom: 30px !important;
 }
diff --git a/dsmr_frontend/static/dsmr_frontend/js/dsmr-reader/consumption-header.js b/dsmr_frontend/static/dsmr_frontend/js/dsmr-reader/consumption-header.js
@@ -0,0 +1,20 @@
+function update_consumption_header()
+{
+    $("#header-loader").show();
+
+    $.ajax({
+        dataType: "json",
+        url: xhr_consumption_header_url,
+    }).done(function(response) {
+        $("#header-loader").hide();
+        $("#latest_timestamp").html(response.timestamp);
+        $("#latest_electricity").html(response.currently_delivered);
+        $("#latest_electricity_returned").html(response.currently_returned);
+        $("#tariff_name").html(response.tariff_name);
+
+        if (response.cost_per_hour)
+        {
+            $("#cost_per_hour").html(response.cost_per_hour).show();
+        }
+    });
+}
diff --git a/dsmr_frontend/static/dsmr_frontend/js/dsmr-reader/global.js b/dsmr_frontend/static/dsmr_frontend/js/dsmr-reader/global.js
@@ -4,4 +4,4 @@ $('a').click(function (event) {
         event.preventDefault();
         location.href = $(this).attr('href');
     }
-});
+});
diff --git a/dsmr_frontend/templates/dsmr_frontend/dashboard.html b/dsmr_frontend/templates/dsmr_frontend/dashboard.html
@@ -16,24 +16,20 @@
     </div>
     {% endif %}
 
-        <div class="row">
-            <div class="col-sm-8">
-                {% if notification_count > 0 %}
-                    <div class="panel header-panel">
-                        <header class="panel-heading">
-                            {% trans "Unread notifications" %} &nbsp; <span
-                                class="badge bg-blue">{{ notification_count }}</span>
-                        </header>
-                        <div class="panel-body">
-                            <a class="btn btn-sm btn-primary" href="{% url 'frontend:notifications' %}"><i
-                                    class="fas fa-external-link-alt"></i> {% trans "Go to notification overview" %}</a>
-                        </div>
-                    </div>
-                {% endif %}
+    {% if notification_count > 0 %}
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="panel header-panel">
+                <header class="panel-heading">
+                    {% trans "Unread notifications" %} &nbsp; <span class="badge bg-blue">{{ notification_count }}</span>
+                </header>
+                <div class="panel-body">
+                    <a class="btn btn-sm btn-primary" href="{% url 'frontend:notifications' %}"><i class="fas fa-external-link-alt"></i> {% trans "Go to notification overview" %}</a>
+                </div>
             </div>
-
-    {% include "dsmr_frontend/includes/xhr-consumption-header.html" %}
+        </div>
     </div>
+    {% endif %}
 
     {% if capabilities.electricity or capabilities.electricity_returned or capabilities.gas %}
     <div class="row consumption-block">
@@ -44,15 +40,34 @@
                     &nbsp;&nbsp;&nbsp;
                     <div class="pull-right">
                         <a class="btn btn-sm btn-primary" href="{% url 'frontend:live-graphs' %}"><i class="fas fa-chart-line"></i></a>
-                    </div>
                 </header>
                 <div class="panel-body">
                     <table class="table table-hover">
+                        <tr class="live-header">
+                            <th class="col-sm-6">
+                                <span id="latest_timestamp"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span> <span class="unit" id="tariff_name"></span>
+                            </th>
+                            <th class="col-sm-2">
+                                {% 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="unit">{% trans "W" %}</span>
+                                {% endif %}
+                            </th>
+                            <th class="col-sm-2">
+                                {% if capabilities.electricity_returned %}
+                                    <span class="badge bg-green" id="latest_electricity_returned"></span> <span class="unit">{% trans "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;{% trans '/hour' %}</span>
+                                {% endif %}
+                            </th>
+                        </tr>
                         <tr>
-                            <th class="col-sm-6"></th>
-                            <th class="col-sm-2">{% if capabilities.electricity %}{% trans "Consumed" %}{% endif %}</th>
-                            <th class="col-sm-2">{% if capabilities.electricity_returned %}{% trans "Returned" %}{% endif %}</th>
-                            <th class="col-sm-2">{% trans "Costs" %} <span class="unit">&euro;</span></th>
+                            <td></td>
+                            <td>{% if capabilities.electricity %}{% trans "Consumed" %}{% endif %}</td>
+                            <td>{% if capabilities.electricity_returned %}{% trans "Returned" %}{% endif %}</td>
+                            <td>{% trans "Costs" %} <span class="unit">&euro;</span></td>
                         </tr>
                         {% if frontend_settings.merge_electricity_tariffs %}<tr>
                             <td>{% if capabilities.electricity %}{% trans "Electricity (single tariff)" %} <span class="unit">{% trans "kWh" noop %}</span>{% endif %}</td>
@@ -170,34 +185,16 @@
 {% block javascript %}
     {{ block.super }}
 
+    <script type="text/javascript" src="{% static 'dsmr_frontend/js/dsmr-reader/consumption-header.js' %}?r=v{{ dsmr_version }}"></script>
     <script type="text/javascript">
+        var xhr_consumption_header_url = "{% url 'frontend:xhr-consumption-header' %}";
+
         $(document).ready(function(){
-            setInterval(function(){ update_header(); }, 1000);
+            setInterval(function(){ update_consumption_header(); }, 1000);
 
             /* Reload entire page after 5 minutes. */
             setInterval(function(){ location.reload(); }, 5 * 60 * 1000)
         });
-
-        function update_header()
-        {
-            $("#header-loader").show();
-
-            $.ajax({
-                dataType: "json",
-                url: "{% url 'frontend:xhr-consumption-header' %}",
-            }).done(function(response) {
-                $("#header-loader").hide();
-                $("#latest_timestamp").html('(' + response.timestamp + ')');
-                $("#latest_electricity").html(response.currently_delivered);
-                $("#latest_electricity_returned").html(response.currently_returned);
-                $("#tariff_name").html(response.tariff_name);
-
-                if (response.cost_per_hour)
-                {
-                    $("#cost_per_hour").html(response.cost_per_hour + " &euro;{% trans '/hour' %}").show();
-                }
-            });
-        }
     </script>
 
 {% endblock %}
diff --git a/dsmr_frontend/templates/dsmr_frontend/includes/xhr-consumption-header.html b/dsmr_frontend/templates/dsmr_frontend/includes/xhr-consumption-header.html
diff --git a/dsmr_frontend/templates/dsmr_frontend/live-graphs.html b/dsmr_frontend/templates/dsmr_frontend/live-graphs.html
@@ -16,11 +16,6 @@
     </div>
     {% endif %}
 
-    <div class="row">
-        <div class="col-sm-8"></div>
-        {% include "dsmr_frontend/includes/xhr-consumption-header.html" %}
-    </div>
-
     {% if capabilities.electricity %}
     <div class="row">
         <div class="col-sm-12">
@@ -29,6 +24,29 @@
                     {% trans "Recent electricity consumption" %}
                 </header>
                 <div class="panel-body">
+                    <table class="table table-hover">
+                        <tr class="live-header">
+                            <th class="col-sm-6">
+                                <span id="latest_timestamp"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span> <span class="unit" id="tariff_name"></span>
+                            </th>
+                            <th class="col-sm-2">
+                                {% 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="unit">{% trans "W" %}</span>
+                                {% endif %}
+                            </th>
+                            <th class="col-sm-2">
+                                {% if capabilities.electricity_returned %}
+                                    <span class="badge bg-green" id="latest_electricity_returned"></span> <span class="unit">{% trans "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;{% trans '/hour' %}</span>
+                                {% endif %}
+                            </th>
+                        </tr>
+                    </table>
+
                     <div id="echarts-electricity-graph" style="width: 100%; height: 300px;"></div>
                     <div class="graph_controls_help">{% blocktrans %}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.{% endblocktrans %}</div>
                 </div>
@@ -208,34 +226,16 @@
     <script type="text/javascript" src="{% static 'dsmr_frontend/js/dsmr-reader/live/temperature.js' %}?r=v{{ dsmr_version }}"></script>
 {% endif %}
  
+    <script type="text/javascript" src="{% static 'dsmr_frontend/js/dsmr-reader/consumption-header.js' %}?r=v{{ dsmr_version }}"></script>
     <script type="text/javascript">
+        var xhr_consumption_header_url = "{% url 'frontend:xhr-consumption-header' %}";
+
         $(document).ready(function(){
-            setInterval(function(){ update_header(); }, 1000);
+            setInterval(function(){ update_consumption_header(); }, 1000);
 
             /* Reload entire page after 15 minutes. */
             setInterval(function(){ location.reload(); }, 15 * 60 * 1000)
         });
-
-        function update_header()
-        {
-            $("#header-loader").show();
-
-            $.ajax({
-                dataType: "json",
-                url: "{% url 'frontend:xhr-consumption-header' %}",
-            }).done(function(response) {
-                $("#header-loader").hide();
-                $("#latest_timestamp").html('(' + response.timestamp + ')');
-                $("#latest_electricity").html(response.currently_delivered);
-                $("#latest_electricity_returned").html(response.currently_returned);
-                $("#tariff_name").html(response.tariff_name);
-
-                if (response.cost_per_hour)
-                {
-                    $("#cost_per_hour").html(response.cost_per_hour + " &euro;{% trans '/hour' %}").show();
-                }
-            });
-        }
     </script>
 
 {% endblock %}
diff --git a/dsmrreader/locales/nl/LC_MESSAGES/django.po b/dsmrreader/locales/nl/LC_MESSAGES/django.po
@@ -1165,6 +1165,12 @@ msgstr "Ongelezen notificaties"
 msgid "Go to notification overview"
 msgstr "Ga naar notificatieoverzicht"
 
+msgid "W"
+msgstr "W"
+
+msgid "/hour"
+msgstr "/uur"
+
 msgid "Consumed"
 msgstr "Verbruikt"
 
@@ -1192,9 +1198,6 @@ msgstr "tot en met gisteren"
 msgid "The totals for the current month are currently not (yet) available. Check again tomorrow."
 msgstr "De totalen voor de huidige maand zijn momenteel (nog) niet beschikbaar. Probeer het morgen nogmaals."
 
-msgid "/hour"
-msgstr "/uur"
-
 msgid "Please note that the data displayed here only includes the energy price and is likely to differ from the bill of your energy supplier."
 msgstr "N.B.: De gegevens die hier getoond worden zijn alleen gebaseerd op de energieprijzen en verschillen zeer waarschijnlijk van je energierekening."
 
@@ -1276,9 +1279,6 @@ msgstr "Gem"
 msgid "Difference"
 msgstr "Verschil"
 
-msgid "W"
-msgstr "W"
-
 msgid "Recent electricity consumption"
 msgstr "Recent elektriciteitsverbruik"
 

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ $('a').click(function (event) {`
`4`	`4`	`event.preventDefault();`
`5`	`5`	`location.href = $(this).attr('href');`
`6`	`6`	`}`
`7`		`-});`
	`7`	`+});`