--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/views/bottledash_view.tpl	Wed Aug 05 13:33:15 2015 +0200
@@ -0,0 +1,209 @@
+<!-- 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 = 1
+
+    #################
+    # 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
+%>
+
+<script type="text/javascript">
+
+    var global_width;
+    var global_height;
+    var tile_width;
+    var tile_height;
+
+    var tiles = document.getElementsByClassName("tile");
+    var border_width = 1;
+    var space_between_tiles = 8;
+
+    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';
+        }
+    }
+
+    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
+    }
+
+    .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;
+    }
+
+</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 = ""
+            if tile["type"] == "mon" :
+                type = "statusmon"
+                tile_content = tile["source"]
+                if tile["status"] == "up" :
+                    status = "active"
+                elif tile["status"] == "down" :
+                    status = "dead"
+                end
+            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}}
+        </div>
+
+        % end
+
+    </div>
+</div>