diff views/bottledash_view.tpl @ 21:f730dd0bcf85

dynamic checking of the tile-status
author sean
date Thu, 13 Aug 2015 12:17:46 +0200
parents 1a13a4ecf931
children 3dfa9ed1dd8b
line wrap: on
line diff
--- a/views/bottledash_view.tpl	Wed Aug 12 13:45:58 2015 +0200
+++ b/views/bottledash_view.tpl	Thu Aug 13 12:17:46 2015 +0200
@@ -3,207 +3,202 @@
 License: GNU GPL >= v2. See LICENSE for details. -->
 
 <%
-    import math, os, sys, subprocess, html.parser
-    from datetime import date
-
-    PATH = os.path.abspath(os.path.dirname(sys.argv[0]))
-    sys.path.append(PATH + "/modules")
-    import web_view
-
-    #################
-    # settings      #
-    #################
-
-    show_top_bar = settings["show_top_bar"]
-
-    #################
-    # date and time #
-    #################
-
-    today = date.today()
-    weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag",
-                "Freitag", "Samstag", "Sonntag")[today.weekday()]
-    month_name = ("Januar", "Februar", "März", "Aprill", "Mai",
-                    "Juni", "Juli", "August", "September", "Oktober",
-                    "November", "Dezember")[today.month-1]
-
-    number_of_rows = 2
+  import math, os, sys, subprocess, html.parser
+  from datetime import date
 
-    #################
-    # viewport size #
-    #################
-    vp_size = "17px"
-    #if len(tiles) <= 2:
-    #    vp_size = "6vw"
-    #elif len(tiles) >2 and len(tiles) <=4 :
-    #    vp_size = "5vw"
-    #elif len(tiles) >4 and len(tiles) <=6 :
-    #    vp_size = "4vw"
-    #elif len(tiles) >6 and len(tiles) <=8 :
-    #    vp_size = "3vw"
-    #end
-%>
-<meta http-equiv="refresh" content="5" />
-<script type="text/javascript">
-
-    var global_width;
-    var global_height;
-    var tile_width;
-    var tile_height;
+  PATH = os.path.abspath(os.path.dirname(sys.argv[0]))
+  sys.path.append(PATH + "/modules")
+  import web_view
 
-    var tiles = document.getElementsByClassName("tile");
-    var border_width = 1;
-    var space_between_tiles = 8;
-
-    var space_lr_borders;
-    var space_lr_margin;
+  #################
+  # settings      #
+  #################
 
-    function calc_tile_with(){
-        var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}});
-        var distance = (space_between_tiles*2) + (border_width*2);
-        var tile_width = ((global_width / tiles_per_row ) - distance);
-        return tile_width;
-    }
+  show_top_bar = settings["show_top_bar"]
 
-    function calc_tile_height(){
-        var distance = (space_between_tiles*2) + (border_width*2);
-        var tile_height = ((global_height / {{number_of_rows}} ) - distance);
-        return tile_height;
-    }
+  #################
+  # date and time #
+  #################
 
-    function resize_content(){
-        global_width = document.getElementById("content").clientWidth;
-        global_height = document.getElementById("content").clientHeight;
+  today = date.today()
+  weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag",
+              "Freitag", "Samstag", "Sonntag")[today.weekday()]
+  month_name = ("Januar", "Februar", "März", "Aprill", "Mai",
+                  "Juni", "Juli", "August", "September", "Oktober",
+                  "November", "Dezember")[today.month-1]
+
+  number_of_rows = 2
+
+  #################
+  # viewport size #
+  #################
+  vp_size = "17px"
+  #if len(tiles) <= 2:
+  #    vp_size = "6vw"
+  #elif len(tiles) >2 and len(tiles) <=4 :
+  #    vp_size = "5vw"
+  #elif len(tiles) >4 and len(tiles) <=6 :
+  #    vp_size = "4vw"
+  #elif len(tiles) >6 and len(tiles) <=8 :
+  #    vp_size = "3vw"
+  #end
+%>
+
+<html>
+  <head>
+    <!-- <meta http-equiv="refresh" content="5" /> -->
+    <link rel="stylesheet" type="text/css" href="/static/dash_style.css">
+    <style>
+      #content{
+          min-width: 100%;
+          % if show_top_bar == "True":
+              height: 95%;
+          % else :
+              height: 100%;
+          %end
+      }
+
+      .statusmon{
+        color: white;
+        font-size: {{vp_size}};
+      }
+
+      .chart{
+        font-size: {{vp_size}};
+      }
+    </style>
+
+  </head>
+  <body>
 
 
-        tile_width = calc_tile_with();
-        tile_height = calc_tile_height();
-
-        for(var tile = 0; tile < tiles.length; tile++){
-            tiles[tile].style.width= tile_width + 'px';
-            tiles[tile].style.height= tile_height + 'px';
-        }
-    }
-
-    window.onresize = function(){
-        resize_content();
-    }
-
-    document.addEventListener("DOMContentLoaded", function(event) {
-        resize_content();
-    });
-
-</script>
-
-<style>
-    *{
-        margin: 0 auto;
-        padding: 0 auto;
-        font-family: "Lucida Console", Monaco, monospace;
-    }
-
-    body {
-        overflow: hidden;
-    }
-
-    #wrapper{
-        background-color: #F2F2F2;
-        color: black;
-        min-width: 100%;
-        min-height: 100%;
-    }
-
-    #topbar{
-        min-width: auto;
-        padding-left: 8px;
-        padding-top: 8px;
-        padding-bottom: 8px;
-        /*height: 5%;*/
-        font-family: Arial, Helvetica, sans-serif;
-    }
-
-    #content{
-        min-width: 100%;
-        % if show_top_bar == "True":
-            height: 95%;
-        % else :
-            height: 100%;
-        %end
-    }
+    <script type="text/javascript">
 
-    .tile{
-        float: left;
-        margin: 8px;
-        background-color: #FFFFFF;
-        border: 1px solid #999999;
-        border: none;
-        text-align:center;
-        vertical-align: middle;
-    }
-
-    .clear{
-        height: 0px;
-        clear: both;
-    }
-
-    /*tiles types*/
-
-    .statusmon{
-        color: white;
-        font-size: {{vp_size}};
-    }
-
-    .chart{
-        font-size: {{vp_size}};
-    }
-
-    .active{
-        border: 1px solid #00cc00;
-        background-color: #009900;
-    }
-
-    .dead{
-        border: 1px solid #cc0000;
-        background-color: #990000;
-    }
+      var global_width;
+      var global_height;
+      var tile_width;
+      var tile_height;
 
-</style>
-
-<div id = "wrapper">
-    % if show_top_bar == "True" :
-    <div id = "topbar">
-        <b>{{weekday}}</b> {{today.day}}. {{month_name}}
-    </div>
-    % end
-
-    <div id = "content">
-        <%
-            for tile in tiles :
-            type = ""
-            tile_content = ""
-            status = ""
+      var tiles = document.getElementsByClassName("tile");
+      var border_width = 1;
+      var space_between_tiles = 8;
 
-            if tile["type"] == "mon" :
-                type = "statusmon"
-                tile_content = tile["source"]
-                if tile["status"] == "up" :
-                    status = "active"
-                else :
-                    status = "dead"
-                end
+      var mon_tile_ips = [];
 
-            elif tile["type"] == "d3js" :
-                type = "chart"
-                status = tile["div_name"]
-                tile_content = web_view.make_chart(tile["script"], tile["div_name"])
-            end
-        %>
 
-        <div class = "tile {{type}} {{status}}">
-            {{!tile_content}}
+      //save the IPs if the mon-tiles
+      % for tile in tiles:
+      %   if tile["type"] == "mon":
+            mon_tile_ips.push('{{tile["source"]}}');
+      %   end
+      % end
+
+      var space_lr_borders;
+      var space_lr_margin;
+
+      function calc_tile_with(){
+          var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}});
+          var distance = (space_between_tiles*2) + (border_width*2);
+          var tile_width = ((global_width / tiles_per_row ) - distance);
+          return tile_width;
+      }
+
+      function calc_tile_height(){
+          var distance = (space_between_tiles*2) + (border_width*2);
+          var tile_height = ((global_height / {{number_of_rows}} ) - distance);
+          return tile_height;
+      }
+
+      function resize_content(){
+          global_width = document.getElementById("content").clientWidth;
+          global_height = document.getElementById("content").clientHeight;
+
+
+          tile_width = calc_tile_with();
+          tile_height = calc_tile_height();
+
+          for(var tile = 0; tile < tiles.length; tile++){
+              tiles[tile].style.width= tile_width + 'px';
+              tiles[tile].style.height= tile_height + 'px';
+          }
+      }
+
+      function set_mon_tile_status(ip, status){
+        document.getElementById(ip).className = "tile statusmon " + status;
+      }
+
+      //check current state of I
+      function check_server_state(ip){
+        var request = new XMLHttpRequest();
+        var params = "service=" + ip;
+        request.open('POST', "http://localhost:8080/ask-systemstate", false);
+        request.send(params);
+
+        // console.log(request.responseText);
+        return request.responseText
+
+      }
+
+      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 == "up") {
+            set_mon_tile_status(mon_tile_ips[i], "active")
+          } else {
+            set_mon_tile_status(mon_tile_ips[i], "dead")
+          }
+        }
+      }
+      setInterval(check_server_state_loop, 10000); // Time in milliseconds
+
+      window.onresize = function(){
+          resize_content();
+      }
+
+      document.addEventListener("DOMContentLoaded", function(event) {
+          resize_content();
+      });
+
+    </script>
+
+    <div id = "wrapper">
+        % if show_top_bar == "True":
+        <div id = "topbar">
+            <b>{{weekday}}</b> {{today.day}}. {{month_name}}
         </div>
-
         % end
 
+        <div id = "content">
+            <%
+                for tile in tiles :
+                type = ""
+                tile_content = ""
+                status = ""
+                uid = ""
+
+                if tile["type"] == "mon" :
+                    type = "statusmon"
+                    tile_content = tile["source"]
+                    uid = tile["source"]
+                    if tile["status"] == "up" :
+                        status = "active"
+                    else :
+                        status = "dead"
+                    end
+
+                elif tile["type"] == "d3js" :
+                    type = "chart"
+                    uid = tile["div_name"]
+                    tile_content = web_view.make_chart(tile["script"], tile["div_name"])
+                end
+            %>
+
+            <div class = "tile {{type}} {{status}}" id = {{uid}}>
+                {{!tile_content}}
+            </div>
+
+            % end
+        </div>
     </div>
-</div>
+  </body>
+</html>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)