Mercurial > bottledash > bottledash

<!-- This tempalte is a part of bottledash
author: sean engelhardt >sean.engelhardt@intevation.de
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 = settings["rows"]

  #################
  # viewport size #
  #################
  vp_size = "4vw"

  #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{
        font-size: {{vp_size}};
      }

      .chart{
        font-size: {{vp_size}};
      }
    </style>

  </head>
  <body>

    <script type="text/javascript">

      var global_width;
      var global_height;
      var tile_width;
      var tile_height;

      var tiles = document.getElementsByClassName("tile");
      var border_width = 2  ;
      var space_between_tiles = 8;

      var mon_tile_ips = [];


      //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 an IP
      function check_server_state(ip){
        var request = new XMLHttpRequest();
        var params = "service=" + ip;
        request.open('POST', window.location.href + "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 == "UPALERT" || state == "UP" || state == "wait") {
            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">
            <div id = "top_left">
              <b>{{weekday}}</b> {{today.day}}. {{month_name}}
            </div>

            <div id = "top_center">
              Webadresse: <script>document.write(window.location.href)</script>
            </div>

            <div id = "top_right">
              Synced: 0 Minutes Ago
            </div>


        </div>
        % end

        <div id = "content">
            <%
                for tile in tiles :
                type = ""
                tile_content = ""
                status = ""
                uid = ""
                add_style = ""

                if tile["type"] == "mon" :
                    type = "statusmon"
                    uid = tile["source"]
                    status = "unclear"
                    add_style = "display:table"

                    tile_content = """
                    <div class = "tilecontent">
                      {}
                    </div>
                    """.format(tile["source"])

                elif tile["type"] == "web_view" :
                    type = tile["type"]
                    uid = tile["div_name"]
                    tile_content = web_view.make_chart(tile["script"], tile["div_name"])
                end
            %>

            <div class = "tile {{type}} {{status}}" id = "{{uid}}" style = "{{add_style}}">
                {{!tile_content}}
            </div>

            % end
        </div>
    </div>
  </body>
</html>
author	Gernot Schulz <gernot@intevation.de>
date	Sun, 31 Jan 2016 15:22:52 +0100
parents	a43fa30655e9
children