changeset 28:af280057d5fa

enhanced the design
author sean
date Fri, 14 Aug 2015 13:11:34 +0200
parents 030352fbf3ab
children 140c9023df7a
files dash.py static/dash_style.css views/bottledash_view.tpl
diffstat 3 files changed, 36 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/dash.py	Fri Aug 14 11:33:13 2015 +0200
+++ b/dash.py	Fri Aug 14 13:11:34 2015 +0200
@@ -134,17 +134,17 @@
 [tile1]
 type=mon
 source=red2.rgb.intevation.de
-status="dynamic"
+status=wait
 
 [tile2]
 type=mon
 source=192.168.2.3
-status="dynamic"
+status=wait
 
 [tile3]
 type=mon
 source=192.168.4.3
-status="dynamic"
+status=wait
 
 [tile4]
 type=web_view
--- a/static/dash_style.css	Fri Aug 14 11:33:13 2015 +0200
+++ b/static/dash_style.css	Fri Aug 14 13:11:34 2015 +0200
@@ -9,7 +9,7 @@
 }
 
 #wrapper{
-    background-color: #F2F2F2;
+    background-color: #0b1480;
     color: black;
     min-width: 100%;
     min-height: 100%;
@@ -27,10 +27,13 @@
     float: left;
     margin: 8px;
     background-color: #FFFFFF;
-    border: 1px solid #999999;
-    border: none;
-    text-align:center;
-    vertical-align: middle;
+    border: 2px solid #999999;
+}
+
+.tilecontent{
+  display: table-cell;
+  vertical-align: middle;
+  text-align:center;
 }
 
 .clear{
@@ -39,11 +42,19 @@
 }
 
 .active{
-    border: 1px solid #00cc00;
+    border: 2px solid #00cc00;
     background-color: #009900;
+    color: #FFFFFF;
+}
+
+.unclear{
+    border: 2px solid #ffffd7;
+    background-color: #FFFF66;
+    color: #000000;
 }
 
 .dead{
-    border: 1px solid #cc0000;
+    border: 2px solid #cc0000;
     background-color: #990000;
+    color: #FFFFFF;
 }
--- a/views/bottledash_view.tpl	Fri Aug 14 11:33:13 2015 +0200
+++ b/views/bottledash_view.tpl	Fri Aug 14 13:11:34 2015 +0200
@@ -27,12 +27,13 @@
                   "Juni", "Juli", "August", "September", "Oktober",
                   "November", "Dezember")[today.month-1]
 
-  number_of_rows = 2
+  number_of_rows = settings["rows"]
 
   #################
   # viewport size #
   #################
-  vp_size = "17px"
+  vp_size = "4vw"
+
   #if len(tiles) <= 2:
   #    vp_size = "6vw"
   #elif len(tiles) >2 and len(tiles) <=4 :
@@ -59,7 +60,6 @@
       }
 
       .statusmon{
-        color: white;
         font-size: {{vp_size}};
       }
 
@@ -80,7 +80,7 @@
       var tile_height;
 
       var tiles = document.getElementsByClassName("tile");
-      var border_width = 1;
+      var border_width = 2  ;
       var space_between_tiles = 8;
 
       var mon_tile_ips = [];
@@ -140,7 +140,7 @@
       function check_server_state_loop() {
         for (var i = 0; i < mon_tile_ips.length; i++) {
           var state = check_server_state(mon_tile_ips[i])
-          if (state == "UPALERT" || state == "UP") {
+          if (state == "UPALERT" || state == "UP" || state == "wait") {
             set_mon_tile_status(mon_tile_ips[i], "active")
           } else {
             set_mon_tile_status(mon_tile_ips[i], "dead")
@@ -173,16 +173,19 @@
                 tile_content = ""
                 status = ""
                 uid = ""
+                add_style = ""
 
                 if tile["type"] == "mon" :
                     type = "statusmon"
-                    tile_content = tile["source"]
                     uid = tile["source"]
-                    if tile["status"] == "up" :
-                        status = "active"
-                    else :
-                        status = "dead"
-                    end
+                    status = "unclear"
+                    add_style = "display:table"
+
+                    tile_content = """
+                    <div class = "tilecontent">
+                      {}
+                    </div>
+                    """.format(tile["source"])
 
                 elif tile["type"] == "web_view" :
                     type = tile["type"]
@@ -191,7 +194,7 @@
                 end
             %>
 
-            <div class = "tile {{type}} {{status}}" id = {{uid}}>
+            <div class = "tile {{type}} {{status}}" id = {{uid}} style = {{add_style}}>
                 {{!tile_content}}
             </div>
 
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)