bora
/
vault


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
							<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Status display</title>
  <meta name="description" 
          content="Status display generated by BORA.">
  <link rel="stylesheet" href="{{ static_url("style.css") }}">
  <link rel="stylesheet" href="{{ static_url("jquery-ui.min.css") }}">
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>

<div id="page_info">CPS data monitoring. Last refreshed</div>
    
{% if data['style'] %}
{% for key in data['style'] %}

{% if data['style'][key]['type'] == "data" %}
<div tooltip="{{ key }}" class="databox" style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;' 
{% if data['style'][key]['condition'] %}
data-cond="{{ data['style'][key]['condition'] }}"
{% else%}
{% end%}
data-type="{{ data['style'][key]['type'] }}" data-lesser="{{ data['style'][key]['lesser'] }}" data-larger="{{ data['style'][key]['larger'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][key]}}&experiment=-&window=0&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" id="{{ key }}">
<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval"> XXX.XX </span><span class='unit_title'> {{ data['style'][key]['unit']['title'] }}</span></p>
</div>
{% else %}
{% end %}


{% if data['style'][key]['type'] == "ventil" %}
<div tooltip="{{ key }}" style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px; height:{{ data['style'][key]['height'] }}px;' data-type="{{ data['style'][key]['type'] }}" data-off="{{ data['style'][key]['off'] }}" data-on="{{ data['style'][key]['on'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][key]}}&experiment=-&window=0&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
<img width='100%' height='100%' src='{{ static_url("ventil_inactive.png") }}'></img>
</div>
{% else %}
{% end %}

{% if data['style'][key]['type'] == "integer-to-string" %}
<div tooltip="{{ key }}" style='position: absolute; top: {{
    data['style'][key]['top'] }}; left:{{ data['style'][key]['left'] }};
    width:{{ data['style'][key]['width'] }}px; height:{{
    data['style'][key]['height'] }}px;' data-cond="{{ data['style'][key]['cond'] }}" data-dict="{{ data['style'][key]['dict'] }}" data-type="{{ data['style'][key]['type'] }}" onclick="window.open('http://katrin.kit.edu/adei-katrin/#module=graph&{{ data['varname'][key]}}&experiment=-&window=0&module=graph&virtual=srctree&srctree=&infomod=legend', '_blank');" class='databox' id="{{ key }}">
<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span><br /><span style="color: #000; font-size: {{ data['style'][key]['unit']['size'] }}; font-weight: {{ data['style'][key]['unit']['weight'] }};" class="varval">??? </span></p>
</div>
{% else %}
{% end %}

{% if data['style'][key]['type'] == "header" %}
<div style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
    data['style'][key]['left'] }}; width:{{ data['style'][key]['width'] }}px;
    height:{{ data['style'][key]['height'] }}px;' data-type="{{
    data['style'][key]['type'] }}" class='databox' id="{{ key }}">
<p><span style="color: #000; font-size: {{ data['style'][key]['header']['size'] }}; font-weight: {{ data['style'][key]['header']['weight'] }};" class="title">{{ data['style'][key]['header']['title'] }} </span></p>
</div>
{% else %}
{% end %}


{% end %}
{% else %}
{% end %}

    
<img src="{{ static_url('background.png') }}"></img>    

   
<!-- java script -->
<script src="{{ static_url("jquery-1.12.3.min.js") }}"></script>
<script src="{{ static_url("jquery-ui.min.js") }}"></script>
<script>
jQuery(window).load(function () {

myTimer();
var myVar = setInterval(myTimer, 10000);

function myTimer() {
    var dataToSend = {};
    $.ajax({
        url: '/getdata/',
        type: 'GET',
        data: dataToSend,
        success: function (response) {
            //var objresponse = JSON.parse(response);
            console.log(response);
            for (var key in response) {
                //console.log(key, response[key]);
                data_type = $("#" + key).attr('data-type');
                if($("#" + key).length > 0) {
                    if (data_type == "data") {
                        var datavalue, set_color;
			if (response[key]) {
			    datavalue = parseFloat(response[key]).toFixed(2);
 		    	    set_color = "green";
			} else {
			    datavalue = "???";
			    set_color = "black";
			}
                        $(".varval", "#" + key).text(datavalue);
                    	var condition_attr = $("#" + key).attr('data-cond');
                    	var lesser_attr = $("#" + key).attr('data-lesser');
                    	var larger_attr = $("#" + key).attr('data-larger');
  		    	//console.log(condition_attr);
                    	if (typeof(condition_attr) !== 'undefined' && condition_attr !== false) {
 			    if (response[key] == condition_attr) {
 			    	set_color = "red";
      			    }
		    	}
 		    	if (typeof(lesser_attr) !== 'undefined' && lesser_attr !== false) {
 			    if (parseFloat(response[key]) < parseFloat(lesser_attr)) {
 			    	set_color = "red";
      			    }
		    	}
  		        if (typeof(larger_attr) !== 'undefined' && larger_attr !== false) {
 			    if (parseFloat(response[key]) > parseFloat(larger_attr)) {
 			    	set_color = "red";
      			    }
		    	}
		    	$(".varval", "#" + key).css("color", set_color);
		    	$(".unit_title", "#" + key).css("color", set_color);
                    
		    } else if (data_type == "ventil") {
                        var on_attr = $("#" + key).attr('data-on');
                        var off_attr = $("#" + key).attr('data-off');
 			if (parseFloat(response[key]) == parseFloat(on_attr)) {
 			    $("img", "#" + key).attr("src", "{{ static_url('ventil_green.png') }}");
      			}
 			if (parseFloat(response[key]) == parseFloat(off_attr)) {
 			    $("img", "#" + key).attr("src", "{{ static_url('ventil_red.png') }}");
      			}
		    } else if (data_type == "integer-to-string") {
                        var dict_attr = JSON.parse($("#" + key).attr('data-dict'));
                        var dict_cond;
                        if ($("#"+key).attr("data-cond")) {
                            dict_cond = JSON.parse($("#" + key).attr('data-cond'));
                        } else {
                            dict_cond = {};
                        }
                        var dict_color = "";
                        if (key in response) {
                            var token = response[key];
                            if (token in dict_cond) {
                                dict_color = dict_cond[token];
                            }
                        }
                        $(".varval", "#" + key).css("color", dict_color);
                        $(".varval", "#" + key).text(dict_attr[response[key]]);
		    }
		}
            }
	    var datetime = "CPS data monitoring page. Last Sync: " + response["time"];

            /*
	    var currentdate = new Date(); 
	    var datetime = "CPS data monitoring page. Last Sync: " + ( (currentdate.getDate()<10?'0':'').toString() + (currentdate.getDate()).toString() ) + "/"
                + ( ((currentdate.getMonth()+1)<10?'0':'').toString() + (currentdate.getMonth()+1)).toString()  + "/" 
                + ( (currentdate.getFullYear()<10?'0':'').toString() + (currentdate.getFullYear()).toString() ) + " @ "  
                + ( (currentdate.getHours()<10?'0':'').toString() + (currentdate.getHours()).toString() ) + ":"  
                + ( (currentdate.getMinutes()<10?'0':'').toString() + (currentdate.getMinutes()).toString() ) + ":" 
                + ( (currentdate.getSeconds()<10?'0':'').toString() + (currentdate.getSeconds()).toString() );
            */
   	    $("#page_info").text(datetime);
            console.log(datetime);
        },
        error: function () {
            console.log("Error.")
        }
    });
}

});


</script>
</body>
</html>