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