|
16
|
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> |
