Mercurial > bottledash
diff views/bottledash_view.tpl @ 21:f730dd0bcf85
dynamic checking of the tile-status
| author | sean |
|---|---|
| date | Thu, 13 Aug 2015 12:17:46 +0200 |
| parents | 1a13a4ecf931 |
| children | 3dfa9ed1dd8b |
line wrap: on
line diff
--- a/views/bottledash_view.tpl Wed Aug 12 13:45:58 2015 +0200 +++ b/views/bottledash_view.tpl Thu Aug 13 12:17:46 2015 +0200 @@ -3,207 +3,202 @@ License: GNU GPL >= v2. See LICENSE for details. --> <% - import math, os, sys, subprocess, html.parser - from datetime import date - - PATH = os.path.abspath(os.path.dirname(sys.argv[0])) - sys.path.append(PATH + "/modules") - import web_view - - ################# - # settings # - ################# - - show_top_bar = settings["show_top_bar"] - - ################# - # date and time # - ################# - - today = date.today() - weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag", - "Freitag", "Samstag", "Sonntag")[today.weekday()] - month_name = ("Januar", "Februar", "März", "Aprill", "Mai", - "Juni", "Juli", "August", "September", "Oktober", - "November", "Dezember")[today.month-1] - - number_of_rows = 2 + import math, os, sys, subprocess, html.parser + from datetime import date - ################# - # viewport size # - ################# - vp_size = "17px" - #if len(tiles) <= 2: - # vp_size = "6vw" - #elif len(tiles) >2 and len(tiles) <=4 : - # vp_size = "5vw" - #elif len(tiles) >4 and len(tiles) <=6 : - # vp_size = "4vw" - #elif len(tiles) >6 and len(tiles) <=8 : - # vp_size = "3vw" - #end -%> -<meta http-equiv="refresh" content="5" /> -<script type="text/javascript"> - - var global_width; - var global_height; - var tile_width; - var tile_height; + PATH = os.path.abspath(os.path.dirname(sys.argv[0])) + sys.path.append(PATH + "/modules") + import web_view - var tiles = document.getElementsByClassName("tile"); - var border_width = 1; - var space_between_tiles = 8; - - var space_lr_borders; - var space_lr_margin; + ################# + # settings # + ################# - function calc_tile_with(){ - var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); - var distance = (space_between_tiles*2) + (border_width*2); - var tile_width = ((global_width / tiles_per_row ) - distance); - return tile_width; - } + show_top_bar = settings["show_top_bar"] - function calc_tile_height(){ - var distance = (space_between_tiles*2) + (border_width*2); - var tile_height = ((global_height / {{number_of_rows}} ) - distance); - return tile_height; - } + ################# + # date and time # + ################# - function resize_content(){ - global_width = document.getElementById("content").clientWidth; - global_height = document.getElementById("content").clientHeight; + today = date.today() + weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag", + "Freitag", "Samstag", "Sonntag")[today.weekday()] + month_name = ("Januar", "Februar", "März", "Aprill", "Mai", + "Juni", "Juli", "August", "September", "Oktober", + "November", "Dezember")[today.month-1] + + number_of_rows = 2 + + ################# + # viewport size # + ################# + vp_size = "17px" + #if len(tiles) <= 2: + # vp_size = "6vw" + #elif len(tiles) >2 and len(tiles) <=4 : + # vp_size = "5vw" + #elif len(tiles) >4 and len(tiles) <=6 : + # vp_size = "4vw" + #elif len(tiles) >6 and len(tiles) <=8 : + # vp_size = "3vw" + #end +%> + +<html> + <head> + <!-- <meta http-equiv="refresh" content="5" /> --> + <link rel="stylesheet" type="text/css" href="/static/dash_style.css"> + <style> + #content{ + min-width: 100%; + % if show_top_bar == "True": + height: 95%; + % else : + height: 100%; + %end + } + + .statusmon{ + color: white; + font-size: {{vp_size}}; + } + + .chart{ + font-size: {{vp_size}}; + } + </style> + + </head> + <body> - tile_width = calc_tile_with(); - tile_height = calc_tile_height(); - - for(var tile = 0; tile < tiles.length; tile++){ - tiles[tile].style.width= tile_width + 'px'; - tiles[tile].style.height= tile_height + 'px'; - } - } - - window.onresize = function(){ - resize_content(); - } - - document.addEventListener("DOMContentLoaded", function(event) { - resize_content(); - }); - -</script> - -<style> - *{ - margin: 0 auto; - padding: 0 auto; - font-family: "Lucida Console", Monaco, monospace; - } - - body { - overflow: hidden; - } - - #wrapper{ - background-color: #F2F2F2; - color: black; - min-width: 100%; - min-height: 100%; - } - - #topbar{ - min-width: auto; - padding-left: 8px; - padding-top: 8px; - padding-bottom: 8px; - /*height: 5%;*/ - font-family: Arial, Helvetica, sans-serif; - } - - #content{ - min-width: 100%; - % if show_top_bar == "True": - height: 95%; - % else : - height: 100%; - %end - } + <script type="text/javascript"> - .tile{ - float: left; - margin: 8px; - background-color: #FFFFFF; - border: 1px solid #999999; - border: none; - text-align:center; - vertical-align: middle; - } - - .clear{ - height: 0px; - clear: both; - } - - /*tiles types*/ - - .statusmon{ - color: white; - font-size: {{vp_size}}; - } - - .chart{ - font-size: {{vp_size}}; - } - - .active{ - border: 1px solid #00cc00; - background-color: #009900; - } - - .dead{ - border: 1px solid #cc0000; - background-color: #990000; - } + var global_width; + var global_height; + var tile_width; + var tile_height; -</style> - -<div id = "wrapper"> - % if show_top_bar == "True" : - <div id = "topbar"> - <b>{{weekday}}</b> {{today.day}}. {{month_name}} - </div> - % end - - <div id = "content"> - <% - for tile in tiles : - type = "" - tile_content = "" - status = "" + var tiles = document.getElementsByClassName("tile"); + var border_width = 1; + var space_between_tiles = 8; - if tile["type"] == "mon" : - type = "statusmon" - tile_content = tile["source"] - if tile["status"] == "up" : - status = "active" - else : - status = "dead" - end + var mon_tile_ips = []; - elif tile["type"] == "d3js" : - type = "chart" - status = tile["div_name"] - tile_content = web_view.make_chart(tile["script"], tile["div_name"]) - end - %> - <div class = "tile {{type}} {{status}}"> - {{!tile_content}} + //save the IPs if the mon-tiles + % for tile in tiles: + % if tile["type"] == "mon": + mon_tile_ips.push('{{tile["source"]}}'); + % end + % end + + var space_lr_borders; + var space_lr_margin; + + function calc_tile_with(){ + var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); + var distance = (space_between_tiles*2) + (border_width*2); + var tile_width = ((global_width / tiles_per_row ) - distance); + return tile_width; + } + + function calc_tile_height(){ + var distance = (space_between_tiles*2) + (border_width*2); + var tile_height = ((global_height / {{number_of_rows}} ) - distance); + return tile_height; + } + + function resize_content(){ + global_width = document.getElementById("content").clientWidth; + global_height = document.getElementById("content").clientHeight; + + + tile_width = calc_tile_with(); + tile_height = calc_tile_height(); + + for(var tile = 0; tile < tiles.length; tile++){ + tiles[tile].style.width= tile_width + 'px'; + tiles[tile].style.height= tile_height + 'px'; + } + } + + function set_mon_tile_status(ip, status){ + document.getElementById(ip).className = "tile statusmon " + status; + } + + //check current state of I + function check_server_state(ip){ + var request = new XMLHttpRequest(); + var params = "service=" + ip; + request.open('POST', "http://localhost:8080/ask-systemstate", false); + request.send(params); + + // console.log(request.responseText); + return request.responseText + + } + + function check_server_state_loop() { + for (var i = 0; i < mon_tile_ips.length; i++) { + var state = check_server_state(mon_tile_ips[i]) + if (state == "up") { + set_mon_tile_status(mon_tile_ips[i], "active") + } else { + set_mon_tile_status(mon_tile_ips[i], "dead") + } + } + } + setInterval(check_server_state_loop, 10000); // Time in milliseconds + + window.onresize = function(){ + resize_content(); + } + + document.addEventListener("DOMContentLoaded", function(event) { + resize_content(); + }); + + </script> + + <div id = "wrapper"> + % if show_top_bar == "True": + <div id = "topbar"> + <b>{{weekday}}</b> {{today.day}}. {{month_name}} </div> - % end + <div id = "content"> + <% + for tile in tiles : + type = "" + tile_content = "" + status = "" + uid = "" + + if tile["type"] == "mon" : + type = "statusmon" + tile_content = tile["source"] + uid = tile["source"] + if tile["status"] == "up" : + status = "active" + else : + status = "dead" + end + + elif tile["type"] == "d3js" : + type = "chart" + uid = tile["div_name"] + tile_content = web_view.make_chart(tile["script"], tile["div_name"]) + end + %> + + <div class = "tile {{type}} {{status}}" id = {{uid}}> + {{!tile_content}} + </div> + + % end + </div> </div> -</div> + </body> +</html>