S allius/issue393 (#403)

* display proxy version on dashboard

* add MQTT page

* styles adjusted on the different pages

- use same colors
- add bordered shadow to all cards and tables

* fix unit tests

* migrate the conn table to a general table

- rename the template file
- get headline from table description

* remove footer from index page

* make version string translateable

* cleanup

* remove stripped table rows

* add mqtt info table

* translate mqtt page

* don't fetch notes list for the log-page

* fix Mqtt init call for unit tests

* add mqtt-fetch test

* check received counter in unit test

app/src/web/templates/page_mqtt.html.j2

@@ -0,0 +1,51 @@
+{% extends 'base.html.j2' %}
+
+{% block title %} TSUN Proxy - MQTT Status {% endblock title%}
+{% block menu2_class %}w3-blue{% endblock %}
+{% block headline %}<i class="fa fa-database"></i>  {{_('MQTT Overview')}}{% endblock headline %}
+{% block content %}
+  <div class="w3-row-padding w3-margin-bottom">
+    <div class="w3-third">
+      <div class="w3-card-4">
+      <div class="w3-container w3-indigo w3-padding-16">
+        <div class="w3-left"><i class="fa fa-link w3-xxxlarge"></i></div>
+        <div id = "mqtt-ctime" class="w3-right">
+          <h3>-</h3>
+        </div>
+        <div class="w3-clear"></div>
+        <h4>{{_('Connection Time')}}</h4>
+        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Time at which the connection was established')}}</div>
+      </div>
+      </div>
+    </div>
+    <div class="w3-third">
+      <div class="w3-card-4">
+      <div class="w3-container w3-purple w3-padding-16">
+        <div class="w3-left"><i class="fa fa-server w3-xxxlarge"></i></div>
+        <div id = "mqtt-tx" class="w3-right">
+          <h3>-</h3>
+        </div>
+        <div class="w3-clear"></div>
+        <h4>{{_('Published Topics')}}</h4>
+        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Number of published topics')}}</div>
+      </div>
+      </div>
+    </div>
+    <div class="w3-third">
+      <div class="w3-card-4">
+      <div class="w3-container w3-orange w3-text-white w3-padding-16">
+        <div class="w3-left"><i class="fa fa-user w3-xxxlarge"></i></div>
+        <div id = "mqtt-rx" class="w3-right">
+          <h3>-</h3>
+        </div>
+        <div class="w3-clear"></div>
+        <h4>{{_('Received Topics')}}</h4>
+        <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Number of topics received')}}</div>
+      </div>
+      </div>
+    </div>
+  </div>
+  <div id="mqtt-table"></div>
+{% endblock content%}
+
+{% block footer %}{% endblock footer %}