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_index.html.j2

@@ -7,6 +7,7 @@
 {% block content %}
   <div class="w3-row-padding w3-margin-bottom">
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-indigo w3-padding-16">
         <div class="w3-left"><i class="fa fa-upload w3-xxxlarge fa-rotate-180"></i></div>
         <div id = "server-cnt" class="w3-right">
@@ -16,8 +17,10 @@
         <h4>{{_('Server Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Established from device to proxy')}}</div>
       </div>
+      </div>
     </div>
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-purple w3-padding-16">
         <div class="w3-left"><i class="fa fa-download w3-xxxlarge fa-rotate-180"></i></div>
         <div id = "client-cnt" class="w3-right">
@@ -27,8 +30,10 @@
         <h4>{{_('Client Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Established from proxy to device')}}</div>
       </div>
+      </div>
     </div>
     <div class="w3-quarter">
+      <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-cloud w3-xxxlarge"></i></div>
         <div id = "proxy-cnt" class="w3-right">
@@ -38,8 +43,10 @@
         <h4>{{_('Proxy Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Forwarding data to cloud')}}</div>
       </div>
+      </div>
     </div>
     <div class="w3-quarter">
+      <div class="w3-card-4">
       <div class="w3-container w3-teal w3-padding-16">
         <div class="w3-left"><i class="fa fa-cloud-arrow-up-alt w3-xxxlarge"></i></div>
         <div id = "emulation-cnt" class="w3-right">
@@ -49,9 +56,12 @@
         <h4>{{_('Emu Mode')}}</h4>
         <div class="w3-hide-small w3-hide-medium" style="min-height:50px">{{_('Emulation sends data to cloud')}}</div>
       </div>
+      </div>
     </div>
   </div>
 
-  <div class="w3-container" id="notes-list"></div>
-  <div class="w3-container" id="conn-table"></div>
+  <div id="notes-list"></div>
+  <div id="conn-table"></div>
 {% endblock content%}
+
+{% block footer %}{% endblock footer %}