Merge pull request kit-ipe#158 from nicolaisi/master

updated virtual in status display

blueprint/status.html

@@ -162,7 +162,7 @@
         url: '/getdata/',
         type: 'GET',
         success: function (response) {
-            console.log(response);
+            //console.log(response);
             let currentTime = new Date();
             let currentUTCTime = currentTime.toUTCString();
 
@@ -181,7 +181,13 @@
                 //console.log("Looping calc");
                 //console.log(this.id);
                 parse_calc(this.id, response);
-                //console.log($(this).attr('data-formula'));
+            });
+
+            // Loop through virtual_
+            $('[id^=virtual_]').each(function( index ) {
+                //console.log("Looping calc");
+                //console.log(this.id);
+                parse_virtual(this.id, response);
             });
 
         },

js_plugins/calc.js

@@ -34,7 +34,7 @@ function parse_calc(key, response) {
     var finalstring = "";
     var pattern = /\[(.*?)\]/g;
     var teststring = myformula.split(/[\[\]]+/);
-    console.log("Test String");
+    //console.log("Test String");
     //console.log(teststring);
     //console.log(finalstring);
 

js_plugins/virtual.js

@@ -1,4 +1,108 @@
 $(function(){
 
     /** BORA-JS **/
+});
+
+/*
+var retval = eval( "parse_" + response[key]["widget"].replace(/-/g, "_") + "('" + key + "','" + response[key]["value"] + "','" + response[key]["timestamp"] +"','" + response[key]["invalid"] + "')" );
+*/
+
+function parse_virtual(id, response) {
+    //console.log(invalid); // invalid value is in milliseconds
+    //console.log("Inside parse_virtual()");
+    //console.log(id);
+
+    var key = $("#" + id).attr("data-virtual-id");
+    //console.log(key);
+    //console.log(response);
+    var value = response[key]["value"];
+    var timestamp = response[key]["timestamp"];
+    var invalid = response[key]["invalid"];
+
+    let currentTime = new Date();
+    let currentTimeMillis = currentTime.getTime();
+
+    var data_decimal_numbers = parseInt($("#" + id).attr("data-decimal-numbers"));
+    var data_smaller_than = $("#" + id).attr("data-smaller-than");
+    var data_larger_than = $("#" + id).attr("data-larger-than");
+
+    var delta = (currentTimeMillis - timestamp) / 1000.0;
+    // since delta is converted to seconds, we need to convert invalid to seconds as well
+    invalid = invalid / 1000.0;
+
+
+    if (data_decimal_numbers != undefined && data_decimal_numbers > 0) {
+        value = (Math.round(value * 100) / 100).toFixed(data_decimal_numbers);
+    }
+
+    if (data_smaller_than != undefined && value < data_smaller_than) {
+        $("#" + id + "> .value").css('color', 'red');
+        $("#" + id + "> .unit-name").css('color', 'red');
+    } else {
+        $("#" + id + "> .value").css('color', 'green');
+        $("#" + id + "> .unit-name").css('color', 'green');
+    }
+
+    if (data_larger_than != undefined && value > data_larger_than) {
+        $("#" + id + "> .value").css('color', 'red');
+        $("#" + id + "> .unit-name").css('color', 'red');
+    } else {
+        $("#" + id + "> .value").css('color', 'green');
+        $("#" + id + "> .unit-name").css('color', 'green');
+    }
+
+    if (data_exp != undefined && data_exp == "true") {
+        if (data_decimal_numbers != undefined && data_decimal_numbers > 0) {
+            value = parseFloat(value).toExponential(data_decimal_numbers);
+        } else {
+            value = parseFloat(value).toExponential();
+        }
+    }
+
+    if (invalid != undefined && invalid < delta) {
+        $("#" + id + "> .value").css('color', 'grey');
+        $("#" + id + "> .unit-name").css('color', 'grey');
+    }
+
+    $("#"+id).attr('tooltip',  key + "\nDeltaTime: " + parseFloat(delta).toFixed(3) + " s (" + parseFloat(delta / 60.0).toFixed(3) + " min)");
+
+    $("#" + id + " > .value").text(value);
+}
+
+var win_width = $(document).width();
+var win_height = $(document).height();
+
+$(".virtualbox").hover(function(){
+    var trend_time_end = Math.floor(Date.now() / 1000);
+    var trend_time_start = trend_time_end - 3600;
+    var key = $(this).attr('data-virtual-id');
+    var data_adei = "https://adei-katrin.kaas.kit.edu/adei/";
+    var data_query = $("#" + key).attr('data-query');
+
+    data_query = data_query.split("?")[1];
+
+    const urlParams = new URLSearchParams("?"+data_query);
+
+    var output_query = "db_server="+urlParams.get('db_server')+"&db_name="+urlParams.get('db_name')+"&db_group="+urlParams.get('db_group')+"&db_mask="+urlParams.get('db_mask'); 
+
+    if ($("#" + key).attr('data-trend') == "true") {
+        $('#'+key + '> .popup').remove();
+        $('#'+ key).append('<span class="popup" style="top:0; left:250px;"><img src="' + data_adei + 'services/getimage.php?' + output_query + '&window='+ trend_time_start.toString() +'-'+ trend_time_end.toString() + '&frame_width=600&frame_height=400" width="600px" height="400px"/></span>');
+        var key_left = parseInt($("#" + key).css("left"));
+	    var pos_left = key_left + 850;
+        var key_top = parseInt($("#" + key).css("top"));
+        var pos_top = key_top + 400;
+        if(pos_left > win_width) {
+            $("#" + key + " .popup").css({
+	        'right':'250px',
+	        'left': ''
+	    });
+        }
+        if(pos_top > win_height) {
+            $("#" + key + " .popup").css({
+                'bottom':'0px',
+                'top': ''
+            });
+        }
+    }
 });

template/adei.html

@@ -1,7 +1,20 @@
 {% if data['style'][key]['type'] == "adei" %}
-<div id='{{ key }}' onclick="open_adei_page('{{ key }}')" class="databox" tooltip="" data-query="{{ data['varname'][key]['url'] }}" data-type="{{ data['style'][key]['type'] }}" data-decimal-numbers="{{ data['style'][key]['div']['data-decimal-numbers'] }}" data-smaller-than="{{ data['style'][key]['div']['data-smaller-than'] }}" data-larger-than="{{ data['style'][key]['div']['data-larger-than'] }}" data-exp="{{ data['style'][key]['div']['data-exp'] }}" data-link-adei="{{ data['style'][key]['div']['data-link-adei'] }}" data-trend="{{ data['style'][key]['div']['data-trend'] }}" style='position: absolute; top: {{ data['style'][key]['top'] }}; left:{{
+<div 
+  id='{{ key }}' 
+  onclick="open_adei_page('{{ key }}')" 
+  class="databox" 
+  tooltip="" 
+  data-query="{{ data['varname'][key]['url'] }}" 
+  data-type="{{ data['style'][key]['type'] }}" 
+  data-decimal-numbers="{{ data['style'][key]['div']['data-decimal-numbers'] }}" 
+  data-smaller-than="{{ data['style'][key]['div']['data-smaller-than'] }}" 
+  data-larger-than="{{ data['style'][key]['div']['data-larger-than'] }}" 
+  data-exp="{{ data['style'][key]['div']['data-exp'] }}" 
+  data-link-adei="{{ data['style'][key]['div']['data-link-adei'] }}"
+  data-trend="{{ data['style'][key]['div']['data-trend'] }}" 
+  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; font-size:14px; font-weight: {{ data['style'][key]['div']['font-weight'] }}; background-color: {{ data['style'][key]['div']['background-color'] }};' data-type='adei'>
+    height:{{ data['style'][key]['height'] }}px; font-size:14px; font-weight: {{ data['style'][key]['div']['font-weight'] }}; background-color: {{ data['style'][key]['div']['background-color'] }};'>
 <span style='color: #000; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};' class='text-name'>{{ data['style'][key]['div']['text-name'] }}</span>
 <span style='color: #000; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};' class='value'>XXX.XX</span>
 <span style='color: #000; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};' class='unit-name'>{{ data['style'][key]['div']['unit-name'] }}</span>

template/virtual.html

@@ -1,7 +1,21 @@
 {% if data['style'][key]['type'] == "virtual" %}
-<div id='{{ key }}' data-type="{{ data['style'][key]['type'] }}" data-virtual-id="{{ data['style'][key]['div']['data-virtual-id'] }}" data-decimal-numbers="{{ data['style'][key]['div']['data-decimal-numbers'] }}" data-smaller-than="{{ data['style'][key]['div']['data-smaller-than'] }}" data-larger-than="{{ data['style'][key]['div']['data-larger-than'] }}" 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; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};'>
-    <span class='text_name'>{{ data['style'][key]['div']['text-name'] }}</span> <span class='value'>XXX.XX</span> <span class='unit_name'>{{ data['style'][key]['div']['unit-name'] }}</span>
+<div 
+  id='{{ key }}' 
+  onclick="open_adei_page('{{ data['style'][key]['div']['data-virtual-id'] }}')" 
+  class="virtualbox" 
+  tooltip="" 
+  data-virtual-id="{{ data['style'][key]['div']['data-virtual-id'] }}"
+  data-type="{{ data['style'][key]['type'] }}" 
+  data-decimal-numbers="{{ data['style'][key]['div']['data-decimal-numbers'] }}" 
+  data-smaller-than="{{ data['style'][key]['div']['data-smaller-than'] }}" 
+  data-larger-than="{{ data['style'][key]['div']['data-larger-than'] }}" 
+  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; font-size:14px; font-weight: {{ data['style'][key]['div']['font-weight'] }}; background-color: {{ data['style'][key]['div']['background-color'] }};'>
+<span style='color: #000; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};' class='text-name'>{{ data['style'][key]['div']['text-name'] }}</span>
+<span style='color: #000; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};' class='value'>XXX.XX</span>
+<span style='color: #000; font-size: {{ data['style'][key]['div']['font-size'] }}; font-weight: {{ data['style'][key]['div']['font-weight'] }};' class='unit-name'>{{ data['style'][key]['div']['unit-name'] }}</span>
 </div>
 {% else %}
 {% end %}
+

typedef/virtual.yaml

@@ -41,13 +41,27 @@
         "type": "select"
         "optional": "No"
         "data": "No"
-    "width":
+    "exp":
         "value": ""
-        "type": "string"
-        "optional": "No"
-        "data": "No"
-    "height":
+        "type": "bool"
+        "optional": "Yes"
+        "data": "Yes"
+    "link_adei":
         "value": ""
-        "type": "string"
+        "type": "bool"
+        "optional": "Yes"
+        "data": "Yes"
+    "trend":
+        "value": ""
+        "type": "bool"
+        "optional": "Yes"
+        "data": "Yes"
+    "background_color":
+        "value":
+            - 255
+            - 255
+            - 255
+            - 0
+        "type": "color"
         "optional": "No"
         "data": "No"