Mercurial > bottledash

comparison views/bottledash_view.tpl @ 21:f730dd0bcf85

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