Mercurial > bottledash
annotate views/bottledash_view.tpl @ 31:a43fa30655e9
better alignment of the top-bar
| author | sean |
|---|---|
| date | Tue, 18 Aug 2015 13:05:55 +0200 |
| parents | af280057d5fa |
| children | b47fc5eb9e01 |
| rev | line source |
|---|---|
| 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 <% | |
| 21 | 6 import math, os, sys, subprocess, html.parser |
| 7 from datetime import date | |
| 16 | 8 |
| 21 | 9 PATH = os.path.abspath(os.path.dirname(sys.argv[0])) |
| 10 sys.path.append(PATH + "/modules") | |
| 11 import web_view | |
| 16 | 12 |
| 21 | 13 ################# |
| 14 # settings # | |
| 15 ################# | |
| 16 | 16 |
| 21 | 17 show_top_bar = settings["show_top_bar"] |
| 16 | 18 |
| 21 | 19 ################# |
| 20 # date and time # | |
| 21 ################# | |
| 16 | 22 |
| 21 | 23 today = date.today() |
| 24 weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag", | |
| 25 "Freitag", "Samstag", "Sonntag")[today.weekday()] | |
| 26 month_name = ("Januar", "Februar", "März", "Aprill", "Mai", | |
| 27 "Juni", "Juli", "August", "September", "Oktober", | |
| 28 "November", "Dezember")[today.month-1] | |
| 29 | |
| 28 | 30 number_of_rows = settings["rows"] |
| 21 | 31 |
| 32 ################# | |
| 33 # viewport size # | |
| 34 ################# | |
| 28 | 35 vp_size = "4vw" |
| 36 | |
| 21 | 37 #if len(tiles) <= 2: |
| 38 # vp_size = "6vw" | |
| 39 #elif len(tiles) >2 and len(tiles) <=4 : | |
| 40 # vp_size = "5vw" | |
| 41 #elif len(tiles) >4 and len(tiles) <=6 : | |
| 42 # vp_size = "4vw" | |
| 43 #elif len(tiles) >6 and len(tiles) <=8 : | |
| 44 # vp_size = "3vw" | |
| 45 #end | |
| 46 %> | |
| 47 | |
| 48 <html> | |
| 49 <head> | |
| 50 <!-- <meta http-equiv="refresh" content="5" /> --> | |
| 51 <link rel="stylesheet" type="text/css" href="/static/dash_style.css"> | |
| 52 <style> | |
| 53 #content{ | |
| 54 min-width: 100%; | |
| 55 % if show_top_bar == "True": | |
| 56 height: 95%; | |
| 57 % else : | |
| 58 height: 100%; | |
| 59 %end | |
| 60 } | |
| 61 | |
| 62 .statusmon{ | |
| 63 font-size: {{vp_size}}; | |
| 64 } | |
| 65 | |
| 66 .chart{ | |
| 67 font-size: {{vp_size}}; | |
| 68 } | |
| 69 </style> | |
| 70 | |
| 71 </head> | |
| 72 <body> | |
| 16 | 73 |
| 21 | 74 <script type="text/javascript"> |
| 16 | 75 |
| 21 | 76 var global_width; |
| 77 var global_height; | |
| 78 var tile_width; | |
| 79 var tile_height; | |
| 16 | 80 |
| 21 | 81 var tiles = document.getElementsByClassName("tile"); |
| 28 | 82 var border_width = 2 ; |
| 21 | 83 var space_between_tiles = 8; |
|
20
1a13a4ecf931
can not recive post-requests wich should deliver if a server is up or down. Updated after a refresh of the webpage, wich will automatically done after 5 seconds
sean
parents:
19
diff
changeset
|
84 |
| 21 | 85 var mon_tile_ips = []; |
|
20
1a13a4ecf931
can not recive post-requests wich should deliver if a server is up or down. Updated after a refresh of the webpage, wich will automatically done after 5 seconds
sean
parents:
19
diff
changeset
|
86 |
| 16 | 87 |
| 21 | 88 //save the IPs if the mon-tiles |
| 89 % for tile in tiles: | |
| 90 % if tile["type"] == "mon": | |
| 91 mon_tile_ips.push('{{tile["source"]}}'); | |
| 92 % end | |
| 93 % end | |
| 94 | |
| 95 var space_lr_borders; | |
| 96 var space_lr_margin; | |
| 97 | |
| 98 function calc_tile_with(){ | |
| 99 var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); | |
| 100 var distance = (space_between_tiles*2) + (border_width*2); | |
| 101 var tile_width = ((global_width / tiles_per_row ) - distance); | |
| 102 return tile_width; | |
| 103 } | |
| 104 | |
| 105 function calc_tile_height(){ | |
| 106 var distance = (space_between_tiles*2) + (border_width*2); | |
| 107 var tile_height = ((global_height / {{number_of_rows}} ) - distance); | |
| 108 return tile_height; | |
| 109 } | |
| 110 | |
| 111 function resize_content(){ | |
| 112 global_width = document.getElementById("content").clientWidth; | |
| 113 global_height = document.getElementById("content").clientHeight; | |
| 114 | |
| 115 | |
| 116 tile_width = calc_tile_with(); | |
| 117 tile_height = calc_tile_height(); | |
| 118 | |
| 119 for(var tile = 0; tile < tiles.length; tile++){ | |
| 120 tiles[tile].style.width= tile_width + 'px'; | |
| 121 tiles[tile].style.height= tile_height + 'px'; | |
| 122 } | |
| 123 } | |
| 124 | |
| 125 function set_mon_tile_status(ip, status){ | |
| 126 document.getElementById(ip).className = "tile statusmon " + status; | |
| 127 } | |
| 128 | |
| 22 | 129 //check current state of an IP |
| 21 | 130 function check_server_state(ip){ |
| 131 var request = new XMLHttpRequest(); | |
| 132 var params = "service=" + ip; | |
| 23 | 133 request.open('POST', window.location.href + "ask-systemstate", false); |
| 21 | 134 request.send(params); |
| 135 // console.log(request.responseText); | |
| 136 return request.responseText | |
| 137 } | |
| 138 | |
| 139 function check_server_state_loop() { | |
| 140 for (var i = 0; i < mon_tile_ips.length; i++) { | |
| 141 var state = check_server_state(mon_tile_ips[i]) | |
| 28 | 142 if (state == "UPALERT" || state == "UP" || state == "wait") { |
| 21 | 143 set_mon_tile_status(mon_tile_ips[i], "active") |
| 144 } else { | |
| 145 set_mon_tile_status(mon_tile_ips[i], "dead") | |
| 146 } | |
| 147 } | |
| 148 } | |
| 149 setInterval(check_server_state_loop, 10000); // Time in milliseconds | |
| 150 | |
| 151 window.onresize = function(){ | |
| 152 resize_content(); | |
| 153 } | |
| 154 | |
| 155 document.addEventListener("DOMContentLoaded", function(event) { | |
| 156 resize_content(); | |
| 157 }); | |
| 158 | |
| 159 </script> | |
| 160 | |
| 161 <div id = "wrapper"> | |
| 162 % if show_top_bar == "True": | |
| 163 <div id = "topbar"> | |
| 31 | 164 <div id = "top_left"> |
| 165 <b>{{weekday}}</b> {{today.day}}. {{month_name}} | |
| 166 </div> | |
| 167 | |
| 168 <div id = "top_center"> | |
| 169 Webadresse: <script>document.write(window.location.href)</script> | |
| 170 </div> | |
| 171 | |
| 172 <div id = "top_right"> | |
| 173 Synced: 0 Minutes Ago | |
| 174 </div> | |
| 175 | |
| 176 | |
| 16 | 177 </div> |
| 178 % end | |
| 179 | |
| 21 | 180 <div id = "content"> |
| 181 <% | |
| 182 for tile in tiles : | |
| 183 type = "" | |
| 184 tile_content = "" | |
| 185 status = "" | |
| 186 uid = "" | |
| 28 | 187 add_style = "" |
| 21 | 188 |
| 189 if tile["type"] == "mon" : | |
| 190 type = "statusmon" | |
| 191 uid = tile["source"] | |
| 28 | 192 status = "unclear" |
| 193 add_style = "display:table" | |
| 194 | |
| 195 tile_content = """ | |
| 196 <div class = "tilecontent"> | |
| 197 {} | |
| 198 </div> | |
| 199 """.format(tile["source"]) | |
| 21 | 200 |
| 25 | 201 elif tile["type"] == "web_view" : |
| 202 type = tile["type"] | |
| 21 | 203 uid = tile["div_name"] |
| 204 tile_content = web_view.make_chart(tile["script"], tile["div_name"]) | |
| 205 end | |
| 206 %> | |
| 207 | |
| 28 | 208 <div class = "tile {{type}} {{status}}" id = {{uid}} style = {{add_style}}> |
| 21 | 209 {{!tile_content}} |
| 210 </div> | |
| 211 | |
| 212 % end | |
| 213 </div> | |
| 16 | 214 </div> |
| 21 | 215 </body> |
| 216 </html> |