Mercurial > bottledash
comparison views/bottledash_view.tpl @ 16:f89ad628f831
adding the renamed files
| author | sean |
|---|---|
| date | Wed, 05 Aug 2015 13:33:15 +0200 |
| parents | |
| children | be6a1aaec717 |
comparison
equal
deleted
inserted
replaced
| 15:82d66f4488cd | 16:f89ad628f831 |
|---|---|
| 1 <!-- This tempalte is a part of bottledash | |
| 2 author: sean engelhardt >sean.engelhardt@intevation.de | |
| 3 License: GNU GPL >= v2. See LICENSE for details. --> | |
| 4 | |
| 5 <% | |
| 6 | |
| 7 | |
| 8 import math, os, sys, subprocess, html.parser | |
| 9 from datetime import date | |
| 10 | |
| 11 PATH = os.path.abspath(os.path.dirname(sys.argv[0])) | |
| 12 sys.path.append(PATH + "/modules") | |
| 13 import web_view | |
| 14 | |
| 15 ################# | |
| 16 # settings # | |
| 17 ################# | |
| 18 | |
| 19 show_top_bar = settings["show_top_bar"] | |
| 20 | |
| 21 ################# | |
| 22 # date and time # | |
| 23 ################# | |
| 24 | |
| 25 today = date.today() | |
| 26 weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag", | |
| 27 "Freitag", "Samstag", "Sonntag")[today.weekday()] | |
| 28 month_name = ("Januar", "Februar", "März", "Aprill", "Mai", | |
| 29 "Juni", "Juli", "August", "September", "Oktober", | |
| 30 "November", "Dezember")[today.month-1] | |
| 31 | |
| 32 number_of_rows = 1 | |
| 33 | |
| 34 ################# | |
| 35 # viewport size # | |
| 36 ################# | |
| 37 vp_size = "17px" | |
| 38 #if len(tiles) <= 2: | |
| 39 # vp_size = "6vw" | |
| 40 #elif len(tiles) >2 and len(tiles) <=4 : | |
| 41 # vp_size = "5vw" | |
| 42 #elif len(tiles) >4 and len(tiles) <=6 : | |
| 43 # vp_size = "4vw" | |
| 44 #elif len(tiles) >6 and len(tiles) <=8 : | |
| 45 # vp_size = "3vw" | |
| 46 #end | |
| 47 %> | |
| 48 | |
| 49 <script type="text/javascript"> | |
| 50 | |
| 51 var global_width; | |
| 52 var global_height; | |
| 53 var tile_width; | |
| 54 var tile_height; | |
| 55 | |
| 56 var tiles = document.getElementsByClassName("tile"); | |
| 57 var border_width = 1; | |
| 58 var space_between_tiles = 8; | |
| 59 | |
| 60 var space_lr_borders; | |
| 61 var space_lr_margin; | |
| 62 | |
| 63 function calc_tile_with(){ | |
| 64 var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); | |
| 65 var distance = (space_between_tiles*2) + (border_width*2); | |
| 66 var tile_width = ((global_width / tiles_per_row ) - distance); | |
| 67 return tile_width; | |
| 68 } | |
| 69 | |
| 70 function calc_tile_height(){ | |
| 71 var distance = (space_between_tiles*2) + (border_width*2); | |
| 72 var tile_height = ((global_height / {{number_of_rows}} ) - distance); | |
| 73 return tile_height; | |
| 74 } | |
| 75 | |
| 76 function resize_content(){ | |
| 77 global_width = document.getElementById("content").clientWidth; | |
| 78 global_height = document.getElementById("content").clientHeight; | |
| 79 | |
| 80 | |
| 81 tile_width = calc_tile_with(); | |
| 82 tile_height = calc_tile_height(); | |
| 83 | |
| 84 for(var tile = 0; tile < tiles.length; tile++){ | |
| 85 tiles[tile].style.width= tile_width + 'px'; | |
| 86 tiles[tile].style.height= tile_height + 'px'; | |
| 87 } | |
| 88 } | |
| 89 | |
| 90 window.onresize = function(){ | |
| 91 resize_content(); | |
| 92 } | |
| 93 | |
| 94 document.addEventListener("DOMContentLoaded", function(event) { | |
| 95 resize_content(); | |
| 96 }); | |
| 97 | |
| 98 </script> | |
| 99 | |
| 100 <style> | |
| 101 *{ | |
| 102 margin: 0 auto; | |
| 103 padding: 0 auto; | |
| 104 font-family: "Lucida Console", Monaco, monospace; | |
| 105 } | |
| 106 | |
| 107 body { | |
| 108 overflow: hidden; | |
| 109 } | |
| 110 | |
| 111 #wrapper{ | |
| 112 background-color: #F2F2F2; | |
| 113 color: black; | |
| 114 min-width: 100%; | |
| 115 min-height: 100%; | |
| 116 } | |
| 117 | |
| 118 #topbar{ | |
| 119 min-width: auto; | |
| 120 padding-left: 8px; | |
| 121 padding-top: 8px; | |
| 122 padding-bottom: 8px; | |
| 123 /*height: 5%;*/ | |
| 124 font-family: Arial, Helvetica, sans-serif; | |
| 125 } | |
| 126 | |
| 127 #content{ | |
| 128 min-width: 100%; | |
| 129 % if show_top_bar == "True": | |
| 130 height: 95%; | |
| 131 % else : | |
| 132 height: 100%; | |
| 133 %end | |
| 134 } | |
| 135 | |
| 136 .tile{ | |
| 137 float: left; | |
| 138 margin: 8px; | |
| 139 background-color: #FFFFFF; | |
| 140 border: 1px solid #999999; | |
| 141 border: none; | |
| 142 text-align:center; | |
| 143 vertical-align: middle; | |
| 144 } | |
| 145 | |
| 146 .clear{ | |
| 147 height: 0px; | |
| 148 clear: both; | |
| 149 } | |
| 150 | |
| 151 /*tiles types*/ | |
| 152 | |
| 153 .statusmon{ | |
| 154 color: white; | |
| 155 font-size: {{vp_size}}; | |
| 156 } | |
| 157 | |
| 158 .chart{ | |
| 159 font-size: {{vp_size}}; | |
| 160 } | |
| 161 | |
| 162 .active{ | |
| 163 border: 1px solid #00cc00; | |
| 164 background-color: #009900; | |
| 165 } | |
| 166 | |
| 167 .dead{ | |
| 168 border: 1px solid #cc0000; | |
| 169 background-color: #990000; | |
| 170 } | |
| 171 | |
| 172 </style> | |
| 173 | |
| 174 <div id = "wrapper"> | |
| 175 % if show_top_bar == "True" : | |
| 176 <div id = "topbar"> | |
| 177 <b>{{weekday}}</b> {{today.day}}. {{month_name}} | |
| 178 </div> | |
| 179 % end | |
| 180 | |
| 181 <div id = "content"> | |
| 182 <% | |
| 183 for tile in tiles : | |
| 184 type = "" | |
| 185 tile_content = "" | |
| 186 status = "" | |
| 187 if tile["type"] == "mon" : | |
| 188 type = "statusmon" | |
| 189 tile_content = tile["source"] | |
| 190 if tile["status"] == "up" : | |
| 191 status = "active" | |
| 192 elif tile["status"] == "down" : | |
| 193 status = "dead" | |
| 194 end | |
| 195 elif tile["type"] == "d3js" : | |
| 196 type = "chart" | |
| 197 status = tile["div_name"] | |
| 198 tile_content = web_view.make_chart(tile["script"], tile["div_name"]) | |
| 199 end | |
| 200 %> | |
| 201 | |
| 202 <div class = "tile {{type}} {{status}}"> | |
| 203 {{!tile_content}} | |
| 204 </div> | |
| 205 | |
| 206 % end | |
| 207 | |
| 208 </div> | |
| 209 </div> |