Mercurial > bottledash
annotate views/bottledash_view.tpl @ 28:af280057d5fa
enhanced the design
| author | sean |
|---|---|
| date | Fri, 14 Aug 2015 13:11:34 +0200 |
| parents | 05e5441c5160 |
| children | a43fa30655e9 |
| 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 |
| 74 | |
| 21 | 75 <script type="text/javascript"> |
| 16 | 76 |
| 21 | 77 var global_width; |
| 78 var global_height; | |
| 79 var tile_width; | |
| 80 var tile_height; | |
| 16 | 81 |
| 21 | 82 var tiles = document.getElementsByClassName("tile"); |
| 28 | 83 var border_width = 2 ; |
| 21 | 84 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
|
85 |
| 21 | 86 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
|
87 |
| 16 | 88 |
| 21 | 89 //save the IPs if the mon-tiles |
| 90 % for tile in tiles: | |
| 91 % if tile["type"] == "mon": | |
| 92 mon_tile_ips.push('{{tile["source"]}}'); | |
| 93 % end | |
| 94 % end | |
| 95 | |
| 96 var space_lr_borders; | |
| 97 var space_lr_margin; | |
| 98 | |
| 99 function calc_tile_with(){ | |
| 100 var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); | |
| 101 var distance = (space_between_tiles*2) + (border_width*2); | |
| 102 var tile_width = ((global_width / tiles_per_row ) - distance); | |
| 103 return tile_width; | |
| 104 } | |
| 105 | |
| 106 function calc_tile_height(){ | |
| 107 var distance = (space_between_tiles*2) + (border_width*2); | |
| 108 var tile_height = ((global_height / {{number_of_rows}} ) - distance); | |
| 109 return tile_height; | |
| 110 } | |
| 111 | |
| 112 function resize_content(){ | |
| 113 global_width = document.getElementById("content").clientWidth; | |
| 114 global_height = document.getElementById("content").clientHeight; | |
| 115 | |
| 116 | |
| 117 tile_width = calc_tile_with(); | |
| 118 tile_height = calc_tile_height(); | |
| 119 | |
| 120 for(var tile = 0; tile < tiles.length; tile++){ | |
| 121 tiles[tile].style.width= tile_width + 'px'; | |
| 122 tiles[tile].style.height= tile_height + 'px'; | |
| 123 } | |
| 124 } | |
| 125 | |
| 126 function set_mon_tile_status(ip, status){ | |
| 127 document.getElementById(ip).className = "tile statusmon " + status; | |
| 128 } | |
| 129 | |
| 22 | 130 //check current state of an IP |
| 21 | 131 function check_server_state(ip){ |
| 132 var request = new XMLHttpRequest(); | |
| 133 var params = "service=" + ip; | |
| 23 | 134 request.open('POST', window.location.href + "ask-systemstate", false); |
| 21 | 135 request.send(params); |
| 136 // console.log(request.responseText); | |
| 137 return request.responseText | |
| 138 } | |
| 139 | |
| 140 function check_server_state_loop() { | |
| 141 for (var i = 0; i < mon_tile_ips.length; i++) { | |
| 142 var state = check_server_state(mon_tile_ips[i]) | |
| 28 | 143 if (state == "UPALERT" || state == "UP" || state == "wait") { |
| 21 | 144 set_mon_tile_status(mon_tile_ips[i], "active") |
| 145 } else { | |
| 146 set_mon_tile_status(mon_tile_ips[i], "dead") | |
| 147 } | |
| 148 } | |
| 149 } | |
| 150 setInterval(check_server_state_loop, 10000); // Time in milliseconds | |
| 151 | |
| 152 window.onresize = function(){ | |
| 153 resize_content(); | |
| 154 } | |
| 155 | |
| 156 document.addEventListener("DOMContentLoaded", function(event) { | |
| 157 resize_content(); | |
| 158 }); | |
| 159 | |
| 160 </script> | |
| 161 | |
| 162 <div id = "wrapper"> | |
| 163 % if show_top_bar == "True": | |
| 164 <div id = "topbar"> | |
| 165 <b>{{weekday}}</b> {{today.day}}. {{month_name}} | |
| 16 | 166 </div> |
| 167 % end | |
| 168 | |
| 21 | 169 <div id = "content"> |
| 170 <% | |
| 171 for tile in tiles : | |
| 172 type = "" | |
| 173 tile_content = "" | |
| 174 status = "" | |
| 175 uid = "" | |
| 28 | 176 add_style = "" |
| 21 | 177 |
| 178 if tile["type"] == "mon" : | |
| 179 type = "statusmon" | |
| 180 uid = tile["source"] | |
| 28 | 181 status = "unclear" |
| 182 add_style = "display:table" | |
| 183 | |
| 184 tile_content = """ | |
| 185 <div class = "tilecontent"> | |
| 186 {} | |
| 187 </div> | |
| 188 """.format(tile["source"]) | |
| 21 | 189 |
| 25 | 190 elif tile["type"] == "web_view" : |
| 191 type = tile["type"] | |
| 21 | 192 uid = tile["div_name"] |
| 193 tile_content = web_view.make_chart(tile["script"], tile["div_name"]) | |
| 194 end | |
| 195 %> | |
| 196 | |
| 28 | 197 <div class = "tile {{type}} {{status}}" id = {{uid}} style = {{add_style}}> |
| 21 | 198 {{!tile_content}} |
| 199 </div> | |
| 200 | |
| 201 % end | |
| 202 </div> | |
| 16 | 203 </div> |
| 21 | 204 </body> |
| 205 </html> |