sean@16: <!-- This tempalte is a part of bottledash
sean@16: author: sean engelhardt >sean.engelhardt@intevation.de
sean@16: License: GNU GPL >= v2. See LICENSE for details. -->
sean@16: 
sean@16: <%
sean@16:     import math, os, sys, subprocess, html.parser
sean@16:     from datetime import date
sean@16: 
sean@16:     PATH = os.path.abspath(os.path.dirname(sys.argv[0]))
sean@16:     sys.path.append(PATH + "/modules")
sean@16:     import web_view
sean@16: 
sean@16:     #################
sean@16:     # settings      #
sean@16:     #################
sean@16: 
sean@16:     show_top_bar = settings["show_top_bar"]
sean@16: 
sean@16:     #################
sean@16:     # date and time #
sean@16:     #################
sean@16: 
sean@16:     today = date.today()
sean@16:     weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag",
sean@16:                 "Freitag", "Samstag", "Sonntag")[today.weekday()]
sean@16:     month_name = ("Januar", "Februar", "März", "Aprill", "Mai",
sean@16:                     "Juni", "Juli", "August", "September", "Oktober",
sean@16:                     "November", "Dezember")[today.month-1]
sean@16: 
sean@19:     number_of_rows = 2
sean@16: 
sean@16:     #################
sean@16:     # viewport size #
sean@16:     #################
sean@16:     vp_size = "17px"
sean@16:     #if len(tiles) <= 2:
sean@16:     #    vp_size = "6vw"
sean@16:     #elif len(tiles) >2 and len(tiles) <=4 :
sean@16:     #    vp_size = "5vw"
sean@16:     #elif len(tiles) >4 and len(tiles) <=6 :
sean@16:     #    vp_size = "4vw"
sean@16:     #elif len(tiles) >6 and len(tiles) <=8 :
sean@16:     #    vp_size = "3vw"
sean@16:     #end
sean@16: %>
sean@16: 
sean@16: <script type="text/javascript">
sean@16: 
sean@16:     var global_width;
sean@16:     var global_height;
sean@16:     var tile_width;
sean@16:     var tile_height;
sean@16: 
sean@16:     var tiles = document.getElementsByClassName("tile");
sean@16:     var border_width = 1;
sean@16:     var space_between_tiles = 8;
sean@16: 
sean@16:     var space_lr_borders;
sean@16:     var space_lr_margin;
sean@16: 
sean@16:     function calc_tile_with(){
sean@16:         var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}});
sean@16:         var distance = (space_between_tiles*2) + (border_width*2);
sean@16:         var tile_width = ((global_width / tiles_per_row ) - distance);
sean@16:         return tile_width;
sean@16:     }
sean@16: 
sean@16:     function calc_tile_height(){
sean@16:         var distance = (space_between_tiles*2) + (border_width*2);
sean@16:         var tile_height = ((global_height / {{number_of_rows}} ) - distance);
sean@16:         return tile_height;
sean@16:     }
sean@16: 
sean@16:     function resize_content(){
sean@16:         global_width = document.getElementById("content").clientWidth;
sean@16:         global_height = document.getElementById("content").clientHeight;
sean@16: 
sean@16: 
sean@16:         tile_width = calc_tile_with();
sean@16:         tile_height = calc_tile_height();
sean@16: 
sean@16:         for(var tile = 0; tile < tiles.length; tile++){
sean@16:             tiles[tile].style.width= tile_width + 'px';
sean@16:             tiles[tile].style.height= tile_height + 'px';
sean@16:         }
sean@16:     }
sean@16: 
sean@16:     window.onresize = function(){
sean@16:         resize_content();
sean@16:     }
sean@16: 
sean@16:     document.addEventListener("DOMContentLoaded", function(event) {
sean@16:         resize_content();
sean@16:     });
sean@16: 
sean@16: </script>
sean@16: 
sean@16: <style>
sean@16:     *{
sean@16:         margin: 0 auto;
sean@16:         padding: 0 auto;
sean@16:         font-family: "Lucida Console", Monaco, monospace;
sean@16:     }
sean@16: 
sean@16:     body {
sean@16:         overflow: hidden;
sean@16:     }
sean@16: 
sean@16:     #wrapper{
sean@16:         background-color: #F2F2F2;
sean@16:         color: black;
sean@16:         min-width: 100%;
sean@16:         min-height: 100%;
sean@16:     }
sean@16: 
sean@16:     #topbar{
sean@16:         min-width: auto;
sean@16:         padding-left: 8px;
sean@16:         padding-top: 8px;
sean@16:         padding-bottom: 8px;
sean@16:         /*height: 5%;*/
sean@16:         font-family: Arial, Helvetica, sans-serif;
sean@16:     }
sean@16: 
sean@16:     #content{
sean@16:         min-width: 100%;
sean@16:         % if show_top_bar == "True":
sean@16:             height: 95%;
sean@16:         % else :
sean@16:             height: 100%;
sean@16:         %end
sean@16:     }
sean@16: 
sean@16:     .tile{
sean@16:         float: left;
sean@16:         margin: 8px;
sean@16:         background-color: #FFFFFF;
sean@16:         border: 1px solid #999999;
sean@16:         border: none;
sean@16:         text-align:center;
sean@16:         vertical-align: middle;
sean@16:     }
sean@16: 
sean@16:     .clear{
sean@16:         height: 0px;
sean@16:         clear: both;
sean@16:     }
sean@16: 
sean@16:     /*tiles types*/
sean@16: 
sean@16:     .statusmon{
sean@16:         color: white;
sean@16:         font-size: {{vp_size}};
sean@16:     }
sean@16: 
sean@16:     .chart{
sean@16:         font-size: {{vp_size}};
sean@16:     }
sean@16: 
sean@16:     .active{
sean@16:         border: 1px solid #00cc00;
sean@16:         background-color: #009900;
sean@16:     }
sean@16: 
sean@16:     .dead{
sean@16:         border: 1px solid #cc0000;
sean@16:         background-color: #990000;
sean@16:     }
sean@16: 
sean@16: </style>
sean@16: 
sean@16: <div id = "wrapper">
sean@16:     % if show_top_bar == "True" :
sean@16:     <div id = "topbar">
sean@16:         <b>{{weekday}}</b> {{today.day}}. {{month_name}}
sean@16:     </div>
sean@16:     % end
sean@16: 
sean@16:     <div id = "content">
sean@16:         <%
sean@16:             for tile in tiles :
sean@16:             type = ""
sean@16:             tile_content = ""
sean@16:             status = ""
sean@16:             if tile["type"] == "mon" :
sean@16:                 type = "statusmon"
sean@16:                 tile_content = tile["source"]
sean@16:                 if tile["status"] == "up" :
sean@16:                     status = "active"
sean@16:                 elif tile["status"] == "down" :
sean@16:                     status = "dead"
sean@16:                 end
sean@16:             elif tile["type"] == "d3js" :
sean@16:                 type = "chart"
sean@16:                 status = tile["div_name"]
sean@16:                 tile_content = web_view.make_chart(tile["script"], tile["div_name"])
sean@16:             end
sean@16:         %>
sean@16: 
sean@16:         <div class = "tile {{type}} {{status}}">
sean@16:             {{!tile_content}}
sean@16:         </div>
sean@16: 
sean@16:         % end
sean@16: 
sean@16:     </div>
sean@16: </div>