Browse Source

initial commit

master
Benjamin Hodges 4 years ago
commit
7fffa8905b
  1. 82
      index.html
  2. BIN
      index_files/apple-touch-icon.png
  3. 1
      index_files/autoComplete.min.js
  4. 30
      index_files/autocomplete.css
  5. 97
      index_files/autocomplete.js
  6. 203
      index_files/c3.css
  7. 4
      index_files/c3.js
  8. 1
      index_files/css.css
  9. 2
      index_files/d3.js
  10. 397
      index_files/dcl-load.js
  11. 449
      index_files/dcl-move.js
  12. 1082
      index_files/dcl-vis.js
  13. 260
      index_files/dcl.css
  14. 742
      index_files/dcl.js
  15. BIN
      index_files/favicon.ico
  16. 20
      index_files/jquery.js
  17. 55
      index_files/math.js
  18. 1274
      index_files/schema.json
  19. 23
      index_files/site.json
  20. BIN
      index_files/vi4io.png

82
index.html

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html dir="ltr" class="js desktop" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>✎ Data Center List [Virtual Institute for I/O]</title>
<script>
(function(H) {
H.className = H.className.replace(/\bno-js\b/, 'js')
})(document.documentElement)
</script>
<meta name="robots" content="noindex,nofollow">
<link rel="stylesheet" type="text/css" href="index_files/autocomplete.css">
<link rel="stylesheet" type="text/css" href="index_files/css.css">
<link rel="stylesheet" type="text/css" href="index_files/c3.css">
<link rel="stylesheet" type="text/css" href="index_files/dcl.css">
<!--[if gte IE 9]><!-->
<script type="text/javascript" charset="utf-8" src="index_files/jquery.js"></script>
<script type="text/javascript" src="index_files/autocomplete.js"></script>
<script type="text/javascript" src="index_files/d3.js"></script>
<script type="text/javascript" src="index_files/c3.js"></script>
<script type="text/javascript" src="index_files/math.js"></script>
<script type="text/javascript" src="index_files/dcl-move.js"></script>
<script type="text/javascript" src="index_files/dcl.js"></script>
<script type="text/javascript" src="index_files/dcl-load.js"></script>
<script type="text/javascript" src="index_files/dcl-vis.js"></script>
<!--<![endif]-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="index_files/favicon.ico">
<link rel="apple-touch-icon" href="index_files/apple-touch-icon.png">
</head>
<body>
<!--[if lte IE 8 ]><div id="IE8"><![endif]-->
<div id="dokuwiki__site">
<div id="dokuwiki__top" class="site dokuwiki mode_edit tpl_vi4io loggedIn hasSidebar">
<!-- ********** HEADER ********** -->
<div id="dokuwiki__header">
<div class="pad group">
<div class="headings group">
<h1>
<a href="https://www.vi4io.org/start" accesskey="h" title="[H]">
<img src="index_files/vi4io.png" alt="logo">
<span>
<div class="blue">Virtual Institute</div>
<div class="black"> for </div>
<div class="red">I/O</div>
</span>
</a>
</h1>
</div>
</div>
</div>
<!-- /header -->
<div class="wrapper group">
<div class="page group">
<div id="dcl_wrap">
</div>
<script type="text/javascript">
/*<![CDATA[*/
draw_graph = true;
draw_table = false;
draw_toolbar = false;
draw_aggregation = false;
global_readonly = false;
dcl_startup() /*!]]>*/
</script>
</div>
<hr class="a11y">
</div>
</div>
</div>
<!-- /wrapper -->
</body>
</html>

BIN
index_files/apple-touch-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

1
index_files/autoComplete.min.js

File diff suppressed because one or more lines are too long

30
index_files/autocomplete.css

@ -0,0 +1,30 @@
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}

97
index_files/autocomplete.js

@ -0,0 +1,97 @@
function autocomplete(name,load) {
var type = name.split("_")[1]
var model = jQuery("#" + name + "").val()
var payload = { "field" : type, "value" : model, "type" : load }
var inp = document.getElementById(name);
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
inp.parentNode.insertBefore(a, inp.nextSibling);
jQuery.ajax({
type: "POST",
url: window.location.protocol + "//" + host + "/ajax-model.php",
data: JSON.stringify(payload),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
arr = data['complete'];
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
b = document.createElement("DIV");
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}
},
failure: function(errMsg) {
addError("Error " + errMsg)
printError()
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Server Error: \"" + errorThrown + "\"")
}
});
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
currentFocus++;
addActive(x);
} else if (e.keyCode == 38) { //up
currentFocus--;
addActive(x);
} else if (e.keyCode == 13) {
e.preventDefault();
if (currentFocus > -1) {
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
if (!x) return false;
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}

203
index_files/c3.css

@ -0,0 +1,203 @@
/*-- Chart --*/
.c3 svg {
font: 10px sans-serif;
}
.c3 path, .c3 line {
fill: none;
stroke: #000;
}
.c3 text {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
shape-rendering: crispEdges;
}
.c3-chart-arc path {
stroke: #fff;
}
.c3-chart-arc text {
fill: #fff;
font-size: 13px;
}
/*-- Axis --*/
.c3-axis-x .tick {
}
.c3-axis-x-label {
}
.c3-axis-y .tick {
}
.c3-axis-y-label {
}
.c3-axis-y2 .tick {
}
.c3-axis-y2-label {
}
/*-- Grid --*/
.c3-grid line {
stroke: #aaa;
}
.c3-grid text {
fill: #aaa;
}
.c3-xgrid, .c3-ygrid {
stroke-dasharray: 3 3;
}
.c3-xgrid-focus {
}
/*-- Text on Chart --*/
.c3-text {
}
.c3-text.c3-empty {
fill: #808080;
font-size: 2em;
}
/*-- Line --*/
.c3-line {
stroke-width: 1px;
}
/*-- Point --*/
.c3-circle._expanded_ {
stroke-width: 1px;
stroke: white;
}
.c3-selected-circle {
fill: white;
stroke-width: 2px;
}
/*-- Bar --*/
.c3-bar {
stroke-width: 0;
}
.c3-bar._expanded_ {
fill-opacity: 0.75;
}
/*-- Arc --*/
.c3-chart-arcs-title {
font-size: 1.3em;
}
/*-- Focus --*/
.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
stroke-width: 2px;
}
/*-- Region --*/
.c3-region {
fill: steelblue;
fill-opacity: .1;
}
/*-- Brush --*/
.c3-brush .extent {
fill-opacity: .1;
}
/*-- Select - Drag --*/
.c3-dragarea {
}
/*-- Legend --*/
.c3-legend-item {
font-size: 12px;
}
.c3-legend-background {
opacity: 0.75;
fill: white;
stroke: lightgray;
stroke-width: 1
}
/*-- Tooltip --*/
.c3-tooltip {
border-collapse:collapse;
border-spacing:0;
background-color:#fff;
empty-cells:show;
-webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
box-shadow: 7px 7px 12px -9px rgb(119,119,119);
opacity: 0.9;
}
.c3-tooltip tr {
border:1px solid #CCC;
}
.c3-tooltip th {
background-color: #aaa;
font-size:14px;
padding:2px 5px;
text-align:left;
color:#FFF;
}
.c3-tooltip td {
font-size:13px;
padding: 3px 6px;
background-color:#fff;
border-left:1px dotted #999;
}
.c3-tooltip td > span {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
}
.c3-tooltip td.value{
text-align: right;
}
.c3-area {
stroke-width: 0;
opacity: 0.2;
}
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;
font-size: 16px;
}
.c3-chart-arcs .c3-chart-arcs-gauge-max {
fill: #777;
}
.c3-chart-arcs .c3-chart-arcs-gauge-min {
fill: #777;
}
.c3-chart-arc .c3-gauge-value {
fill: #000;
font-size: 28px;
}

4
index_files/c3.js

File diff suppressed because one or more lines are too long

1
index_files/css.css

File diff suppressed because one or more lines are too long

2
index_files/d3.js

File diff suppressed because one or more lines are too long

397
index_files/dcl-load.js

@ -0,0 +1,397 @@
var loadCompleteFunctions = []
var system = null
var prevent_edit_name = true
var draw_graph = true
var draw_toolbar = true
var draw_table = true
var draw_aggregation = true
var dcl_query = null
var header = null
var copy = null
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
function addLoadFunction(func){
loadCompleteFunctions.push(func)
}
function walkAvailableFields(schema, parents, callback){
for (var s in schema) {
var sub = schema[s]
if(sub instanceof Object && "dtype" in sub){
callback(sub, s, parents)
continue
}
if (s == "SCHEMES" || s == "SCHEMES_multi"){
for(var op in sub){
var scheme_name = sub[op]
var scheme_data = schemes[scheme_name]
parents.push(scheme_name)
walkAvailableFields(scheme_data, parents, callback)
parents.pop()
}
}else{
parents.push(s)
walkAvailableFields(sub, parents, callback)
parents.pop()
}
}
}
//function prepareAvailableFields(){
// walkAvailableFields(schema, [], function(child, tag, parents){
// schema_fields.push([])
// console.log(parents + ":" + tag + ":" + child["dtype"])
// });
//}
function deparam( params, coerce ) {
var obj = {},
coerce_types = { 'true': !0, 'false': !1, 'null': null };
// If params is an empty string or otherwise falsy, return obj.
if (!params) {
return obj;
}
// Iterate over all name=value pairs.
params.replace(/\+/g, ' ').split('&').forEach(function(v){
var param = v.split( '=' ),
key = decodeURIComponent( param[0] ),
val,
cur = obj,
i = 0,
// If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
// into its component parts.
keys = key.split( '][' ),
keys_last = keys.length - 1;
// If the first keys part contains [ and the last ends with ], then []
// are correctly balanced.
if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
// Remove the trailing ] from the last keys part.
keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
// Split first keys part into two parts on the [ and add them back onto
// the beginning of the keys array.
keys = keys.shift().split('[').concat( keys );
keys_last = keys.length - 1;
} else {
// Basic 'foo' style key.
keys_last = 0;
}
// Are we dealing with a name=value pair, or just a name?
if ( param.length === 2 ) {
val = decodeURIComponent( param[1] );
// Coerce values.
if ( coerce ) {
val = val && !isNaN(val) && ((+val + '') === val) ? +val // number
: val === 'undefined' ? undefined // undefined
: coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
: val; // string
}
if ( keys_last ) {
// Complex key, build deep object structure based on a few rules:
// * The 'cur' pointer starts at the object top-level.
// * [] = array push (n is set to array length), [n] = array if n is
// numeric, otherwise object.
// * If at the last keys part, set the value.
// * For each keys part, if the current level is undefined create an
// object or array based on the type of the next keys part.
// * Move the 'cur' pointer to the next level.
// * Rinse & repeat.
for ( ; i <= keys_last; i++ ) {
key = keys[i] === '' ? cur.length : keys[i];
cur = cur[key] = i < keys_last
? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
: val;
}
} else {
// Simple key, even simpler rules, since only scalars and shallow
// arrays are allowed.
if ( Object.prototype.toString.call( obj[key] ) === '[object Array]' ) {
// val is already an array, so push on the next value.
obj[key].push( val );
} else if ( {}.hasOwnProperty.call(obj, key) ) {
// val isn't an array, but since a second value has been specified,
// convert val into an array.
obj[key] = [ obj[key], val ];
} else {
// val is a scalar.
obj[key] = val;
}
}
} else if ( key ) {
// No value was defined, so set something meaningful.
obj[key] = coerce
? undefined
: '';
}
});
return obj;
};
function exportURL(){
if(! opt_export_URL){
return
}
//console.log("EXPORT")
var params = jQuery.param({"showNames" : showNames,
"dataTableRows" : dataTableRows,
"dataTableRowsGraph" : dataTableRowsGraph,
"graphShowColumn" : graphShowColumn,
"aggregateByName" : aggregateByName,
"siteAggregationOperatorGraph" : siteAggregationOperatorGraph,
"orderlistBy" : orderlistBy,
"siteAggregationOperator" : siteAggregationOperator,
"equation" : equation,
"equation_unit" : equation_unit,
"sort_list_by" : sort_list_by,
"sort_list_asc" : sort_list_asc,
"sort_by" : sort_by,
"sort_asc" : sort_asc,
"dataTableLimit" : dataTableLimit})
window.history.pushState({"pageTitle": document.title},"", window.location.protocol + "//" + window.location.host + window.location.pathname + "?" + params)
//console.log(params)
}
function dcl_parseURL(){
//query = "?year=" + year + "&site=" + site + "&subsection=" + subsection
var str = window.location.href
var pos = str.indexOf("?")
if (pos > -1 || dcl_query != null){
var updateQuery = false
if (query == null){
query = ""
updateQuery = true
}
if(pos > -1){
str = str.substr(pos + 1, str.length)
}else{
str = dcl_query
}
var arr = str.split("&")
for(var a in arr){
var d = arr[a].split("=")
if(updateQuery && (d[0] == "site" || d[0] == "year" || d[0] == "subsection" || d[0] == "name")){
query = query + d[0] + "=" + d[1] + "&"
}else if(d[0] == "readonly"){
global_readonly = d[1] == "true"
}else if(d[0] == "graph"){
draw_graph = d[1] == "true"
}else if(d[0] == "table"){
draw_table = d[1] == "true"
}else if(d[0] == "toolbar"){
draw_toolbar = d[1] == "true"
}
}
// now parse the rest
var p = deparam(str)
showNames = p["showNames"] == "true"
if("dataTableRows" in p) dataTableRows = p["dataTableRows"]
if("graphShowColumn" in p) graphShowColumn = p["graphShowColumn"]
if("dataTableRowsGraph" in p) dataTableRowsGraph = p["dataTableRowsGraph"]
if("aggregateByName" in p) aggregateByName = p["aggregateByName"]
if("siteAggregationOperatorGraph" in p) siteAggregationOperatorGraph = p["siteAggregationOperatorGraph"]
if("orderlistBy" in p) orderlistBy = p["orderlistBy"]
if("siteAggregationOperator" in p) siteAggregationOperator = p["siteAggregationOperator"]
if("equation" in p) equation = p["equation"]
if("equation_unit" in p) equation_unit = p["equation_unit"]
if("sort_list_by" in p) sort_list_by = p["sort_list_by"]
if("sort_list_asc" in p) sort_list_asc = p["sort_list_asc"] == "true"
if("sort_by" in p) sort_by = p["sort_by"]
if("sort_asc" in p) sort_asc = p["sort_asc"] == "true"
if("dataTableLimit" in p) dataTableLimit = parseInt(p["dataTableLimit"])
}else if (query == null){
query = ""
}
}
function edit_individual(){
button_list = []
calc_button_list = []
buttons = 0
var outwrap = jQuery("#data_fields_wrap"); //Fields wrapper
scope_list = globals["scope"]
if( scope_list == "list"){
jQuery(outwrap).html()
for (var site in repository){
str = recursive_create(repository[site]["DATA"], "global", system, true)
jQuery(outwrap).append(str).fadeIn(500)
}
}else{
if (repository instanceof Array){
jQuery(outwrap).html()
for (var d in repository){
//console.log(repository[site])
str = recursive_create(repository[d], "global", system, true)
jQuery(outwrap).append(str).fadeIn(500)
}
}else{
str = recursive_create(repository, "global", system, true)
jQuery(outwrap).html(str).fadeIn(500)
}
}
// now add buttons
for( i in button_list ){
attach_add_btn(i)
}
jQuery("#1_remove").hide()
component_added()
}
function loadData(){
errfunc = function(jqXHR, textStatus, errorThrown){
jQuery("#dcl_wrap").html("error " + textStatus + "\nServer:" + jqXHR.responseText)
}
//console.log("Query: " + query)
jQuery.ajax({
url: "index_files/schema.json",
dataType: 'json',
success: function(data) {
header = data
},
error: errfunc,
}).then(function(){
jQuery.ajax({
url: "index_files/site.json",
dataType: 'json',
success: function(data) {
loadDataJSON(data);
},
error: errfunc,
}
)})
}
function loadDataJSON(data){
copy = JSON.parse(JSON.stringify(data));
var str
system = header["SYSTEM"]
units = header["UNITS"]
repository = data; //JSON.parse
if (repository == null){
jQuery("#dcl_list").hide()
return;
}
connecting_graphs = header["CONNECT"]
schemes = header["SCHEMES"]
if ("GRAPH" in repository){
graphData = repository["GRAPH"]
repository = repository["DATA"]
}
globals = header["GLOBALS"]
var scope = globals["scope"]
if(scope != "site" && scope != "list"){
var tmp = system["site"][scope]
system = { }
system[scope] = tmp
repository = repository[0]
var name = repository["att"]["name"]
if(jQuery(".editbutton_plugin_cdcl").length){
var form = jQuery(".editbutton_plugin_cdcl").find("form")
var params = jQuery.param({"scope" : scope, "name" : name})
form.attr("action", form.attr("action") + "?" + params)
}
}
if("readonly" in globals && globals["readonly"]){
global_readonly = globals["readonly"]
}
provide_hooks()
if(document.getElementById("data_fields_wrap") != null){
edit_individual();
}
for(f in loadCompleteFunctions){
loadCompleteFunctions[f]()
}
}
function dcl_startup(){
dcl_parseURL()
addLoadFunction(prepareAvailableFields)
addLoadFunction(prepareUnits)
addLoadFunction(parseEquation)
if (draw_table){
jQuery("#dcl_list").append('<table id="dcl_tbl"></table>')
addLoadFunction(loadNameMaps)
addLoadFunction(updateDataTableRows)
addLoadFunction(computeSitesValues)
addLoadFunction(updateTable)
if (draw_toolbar){
jQuery("#dcl_list").append('<div id="dcl_toolbar"></div>')
addLoadFunction(addToolbar)
}
}
if(draw_aggregation){
jQuery("#dcl_list").append('<div id="dcl_pie"></div>' +
'<table id="dcl_aggregated_tbl"></table>')
addLoadFunction(loadNameMaps)
addLoadFunction(updateGraphRows)
addLoadFunction(aggregateGraphValues)
addLoadFunction(updateAggregatedTable)
addLoadFunction(showGraphs)
if (draw_toolbar){
jQuery("#dcl_list").append('<div id="dcl_toolbar_graph"></div>')
addLoadFunction(addToolbar_graph)
}
}
if (draw_graph){
addLoadFunction(resetGraphs)
addLoadFunction(update_names)
addLoadFunction(load_graph)
addLoadFunction(redraw_graph)
addLoadFunction(check_unnecessary_graphs)
}else{
addLoadFunction(update_names)
}
loadData()
replacestylesheet()
}
function replacestylesheet(){
var links = Array.from(document.getElementsByTagName("link"));
links.forEach(function(l){
if(l.rel == "stylesheet"){
fetch(l.href).then(data=>data.text()).then(
function(data){
var styler = document.createElement("style");
styler.innerHTML = data
document.head.append(styler,l);
l.outerHTML = ''
}
)
}
});
}

449
index_files/dcl-move.js

@ -0,0 +1,449 @@
var mousePosition;
var offset = [0,0];
var selected_obj = null;
var isDown = false;
var canvas_old = {};
var edges = {}
var last_selected_edge = {}
var last_clicked_time = 0
var selected_graph = null
function add_draw_listener(id, g, readonly){
var elem = jQuery( "#" + id)
var cv = jQuery( "#" + g + "_draw" ).offset()
// Eichung
elem.css( { position: "absolute", left: "0px", top: "0px"} )
var eo = elem.offset()
elem.css( { left: cv.left - eo.left + "px", top: cv.top - eo.top + "px"} )
elem = document.getElementById(id)
if(readonly){
return
}
elem.addEventListener('mousedown', function(e) {
isDown = true;
selected_obj = elem;
selected_graph = g
offset = [
elem.offsetLeft - e.clientX,
elem.offsetTop - e.clientY
];
}, true);
jQuery("#" + id).click(function(e){ //on add input button click
e.preventDefault();
var d = new Date();
var time = d.getTime();
if (time - last_clicked_time > 3000){
last_selected_edge[g] = null
}
last_clicked_time = time
if (id == last_selected_edge[g]){
return;
}else if(last_selected_edge[g] != null){
var tuple
tuple = [id, last_selected_edge[g]]
if (tuple in edges[g] || [last_selected_edge[g], id] in edges[g]){
delete edges[g][tuple]
delete edges[g][[last_selected_edge[g], id]]
}else{
edges[g][tuple] = true
}
redraw_one_graph(g)
last_selected_edge[g] = null
}else{
last_selected_edge[g] = id
}
})
}
function find_edge_id(name){
var d = name.split(":")
if (global_readonly){
return jQuery('span[class="value entity_name"]').filter(function(index){
var parent_id = "h" + jQuery(this).attr('id').split("_")[0]
var parentType = document.getElementById(parent_id).textContent;
parentType = parentType.replace("[-]","")
return jQuery(this).text() === d[1] && parentType == d[0]
}).attr("id")
}else{
return jQuery('input[value="' + d[1] + '"]').filter(function(i) {
var parent_id = "h" + jQuery(this).attr('id').split("_")[0]
var parentType = document.getElementById(parent_id).textContent;
parentType = parentType.replace("[-]","")
return parentType == d[0]
}).attr("id");
}
}
function load_graph(){
if(graphData == null){
return
}
for (var g in connecting_graphs){
var data = graphData[g]
var c = jQuery( "#" + g + "_draw" )
var rect = c.offset()
if (data == null){
continue
}
var positions = data["pos"]
var sedges = data["edges"]
canvas_old[g] = rect
if(! global_readonly){
for(var name in positions){
var id = find_edge_id(name) // todo find a better way of doing this
var elem = jQuery( "#c" + g + id)
// calibrate coordinate system
elem.css( { position: "absolute", left: "0px", top: "0px"} )
var eo = elem.offset()
if (elem.length){
var poss = positions[name]
elem.css( { left: poss[0] + rect.left - eo.left + "px", top: poss[1] + rect.top - eo.top + "px"} )
}
}
}
for(e in sedges){
var id1 = find_edge_id(sedges[e][0])
var id2 = find_edge_id(sedges[e][1])
edges[g][["c" + g + id1, "c" + g + id2]] = ""
}
}
}
function resetGraphs(){
selected_graph = null
selected_obj = null
jQuery("#dcl_graph_fields").html("")
for (var g in connecting_graphs){
var o = connecting_graphs[g]
jQuery("#dcl_graph_fields").append('<div id="g' + g + '"><h2>' + g + '</h2><div id="' + g + '_border"><canvas id="' + g + '_draw" width="'+ o["width"]+ '" height="'+ o["height"]+ '" style="width:' + o["width"] + 'px;height:' + o["height"] + 'px"> </canvas></div><form id="' + g + '_connections" class="connections"></form></div>')
edges[g] = {}
last_selected_edge[g] = null
}
}
// the link is used, when read-only
function link_reference(txt, parentType){
return parentType + "-" + txt
}
function add_element(id, elem, txt){
elem.data('oldVal', txt);
// find parent
var parent_id = "h" + id.split("_")[0]
var parentType = document.getElementById(parent_id).textContent;
parentType = parentType.replace("[-]","")
elem.data('parentType', parentType);
var grapa = document.getElementById(id.split("_")[0]).parentNode.id.split("_")[0]
var grapaTyp = ""
if(grapa != "data"){
grapaTyp = document.getElementById("h" + grapa).textContent;
}
// add it to all graphs
for(var g in connecting_graphs){
var wrap = jQuery('#' + g + '_connections')
//console.log(parentType in connecting_graphs[g]["source"])
//console.log(connecting_graphs[g])
if (! (connecting_graphs[g]["source"].indexOf(parentType) != -1 || connecting_graphs[g]["target"].indexOf(parentType) != -1)){
continue
}
var name = "c" + g + id
//console.log(name + " " + wrap)
// create dummy nodes
var readonly = (global_readonly || ("readonly" in connecting_graphs[g] && connecting_graphs[g]["readonly"]))
var link = "#"
if (readonly){
link = link_reference(txt, parentType)
}
jQuery(wrap).append('<span id="' + name + '" class="' + parentType + " grapa_" + grapaTyp + '">' + parentType + ":" + txt + '</span>')
add_draw_listener(name, g, readonly)
}
if (! global_readonly){
// Look for changes in the value
elem.bind("propertychange change click keyup input paste", function(event){
// If value has changed...
if (elem.data('oldVal') != elem.val()) {
// Updated stored value
//console.log(name)
elem.data('oldVal', elem.val());
jQuery("#h" + id).text(elem.val())
for(var g in connecting_graphs){
var name = "c" + g + elem.attr('id')
jQuery("#" + name).text(elem.data('parentType') +":" + elem.val())
}
}
});
}
}
function update_names(){
if(connecting_graphs == null || connecting_graphs.length == 0 || ! jQuery("#dcl_graph_fields").length){
return;
}
// move items
var used = {}
for(var g in connecting_graphs){
var wrap = jQuery('#' + g + '_connections')
var rect = jQuery( "#" + g + "_draw" ).offset()
if ( ! (g in canvas_old)){
canvas_old[g] = rect
}
var delta = [rect.left - canvas_old[g].left, rect.top - canvas_old[g].top]
canvas_old[g] = rect
jQuery('.entity_name').each(function() {
var elem = jQuery(this);
var name = "c" + g + elem.attr('id')
used[name] = true
// Save current value of element
if ("oldVal" in elem.data()){
var t = document.getElementById(name);
if(t){
t.style.left = Math.round(parseInt(t.style.left) + delta[0]) + "px";
t.style.top = Math.round(parseInt(t.style.top) + delta[1]) + "px";
}
}
});
}
// remove unused items
for(var g in connecting_graphs){
var parent = document.getElementById(g + "_connections")
if(parent == null){
continue
}
var childs = parent.childNodes
//console.log(used)
for(var i=0; i < childs.length; i++){
var id = childs[i].getAttribute("id")
if (! (id in used)){
//console.log("removing: " + id)
parent.removeChild(childs[i])
}
}
}
// add new elements
jQuery('.entity_name').each(function() {
var elem = jQuery(this);
var txt
if(global_readonly){
txt = elem.text()
}else{
txt = elem.val()
}
var id = elem.attr('id')
jQuery("#h" + id).text(txt)
if(global_readonly){
txt = elem.text()
}
// Save current value of element
if (! ("oldVal" in elem.data())){
add_element(id, elem, txt)
}
});
}
function check_unnecessary_graphs(){
if(global_readonly){
for(var g in connecting_graphs){
if(Object.keys(edges[g]).length < 1){
jQuery("#g" + g).hide()
}else{
jQuery("#g" + g).show()
}
}
}
}
function store_graph(){
var map = {}
for (var g in connecting_graphs){
var c = jQuery( "#" + g + "_draw" )
var rect = c.offset()
var positions = {}
jQuery('.entity_name').each(function() {
var elem = jQuery(this)
var name = "#c" + g + elem.attr('id')
var t = jQuery( name)
if( t.length ){
var pos = t.offset()
var name = elem.data('parentType') + ":" + elem.val()
positions[name] = [pos.left - rect.left, pos.top - rect.top]
}
});
var g_edges = []
for(e in edges[g]){
e = e.split(",")
if(document.getElementById(e[0]) == null){
continue
}
// purge the type of the node
var e1 = document.getElementById(e[0]).textContent;
var e2 = document.getElementById(e[1]).textContent;
g_edges.push([e1, e2])
}
map[g] = {"pos" : positions, "edges" : g_edges}
}
return map
}
function redraw_one_graph(g){
//console.log(edges)
var c = jQuery( "#" + g + "_draw" )
var ctx = c[0].getContext('2d')
var rect = c.offset()
var scale = 1
if(global_readonly && graphData){
var max = [0,0]
var data = graphData[g]
var positions = data["pos"]
for(var name in positions){
var pos = positions[name].slice()
var id = find_edge_id(name) // todo find a better way of doing this
var elem = jQuery( "#c" + g + id)
pos[0] = pos[0] + elem.outerWidth()
pos[1] = pos[1] + elem.outerHeight()
if( pos[0] > max[0]){
max[0] = pos[0]
}
if( pos[1] > max[1]){
max[1] = pos[1]
}
}
max = [max[0], max[1]]
jQuery("#" + g + "_draw").css({width : max[0], height: max[1]})
ctx = jQuery("#" + g + "_draw")[0].getContext('2d');
var box = jQuery("#" + g + '_border')
if (box.width() < max[0]){
scale = box.width() / max[0]
}
if(box.height() < max[1]){
var tmp = box.height() / max[1]
if(tmp < scale){
scale = tmp
}
}
max[1] = max[1] * scale
max[0] = max[0] * scale
ctx.canvas.height = max[1]
ctx.canvas.width = max[0]
c.css({width: max[0], height: max[1]})
// move all objects to the proper position
for(var name in positions){
var id = find_edge_id(name) // todo find a better way of doing this
var elem = jQuery( "#c" + g + id)
// calibrate coordinate system
elem.css( { position: "absolute", left: "0px", top: "0px"} )
var eo = elem.offset()
if (elem.length){
var poss = positions[name]
elem.css( { left: poss[0] * scale + (rect.left - eo.left) + "px", top: poss[1] * scale + (rect.top - eo.top) + "px"} )
}
}
}
ctx.clearRect(0, 0, c.width(), c.height())
ctx.scale(1, 1)
for(e in edges[g]){
e = e.split(",");
if(jQuery( "#" + e[0]).length > 0){
var e1o = jQuery( "#" + e[0]);
var e2o = jQuery( "#" + e[1]);
if(! e1o.length || ! e2o.length){
delete edges[g][e]
continue
}
var e1 = e1o.offset()
var e2 = e2o.offset()
ctx.beginPath();
ctx.moveTo((e1.left - rect.left + e1o.width()/2), (e1.top - rect.top + e1o.height()/2));
ctx.lineTo((e2.left - rect.left + e2o.width()/2), (e2.top - rect.top + e2o.height()/2));
ctx.stroke();
}
}
}
function redraw_graph(){
for( var g in connecting_graphs ){
redraw_one_graph(g)
}
}
jQuery(document).ready(function() {
if(! draw_graph){
return
}
jQuery ( window ).resize(function() {
redraw_graph()
});
//if(global_readonly){
// setInterval(function() {
// redraw_graph()
// }, 1000);
//}
document.addEventListener('mouseup', function() {
isDown = false;
selected_obj = null;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown && selected_obj != null) {
var cv = document.getElementById(selected_graph + "_draw").getBoundingClientRect()
mousePosition = {x : event.clientX, y : event.clientY};
// check if mouse position is outside the canvas
if(mousePosition.x < cv.left || mousePosition.x > cv.width + cv.left){
if(mousePosition.x < cv.left){
selected_obj.style.left = cv.left
}else{
selected_obj.style.left = cv.width + cv.left
}
return
}
if(mousePosition.y < cv.top || mousePosition.y > cv.height + cv.top){
if(mousePosition.y < cv.top){
selected_obj.style.top = cv.top
}else{
selected_obj.style.top = cv.height + cv.top
}
return
}
selected_obj.style.left = (mousePosition.x + offset[0]) + 'px';
selected_obj.style.top = (mousePosition.y + offset[1]) + 'px';
redraw_one_graph(selected_graph)
}
}, true);
});

1082
index_files/dcl-vis.js

File diff suppressed because it is too large

260
index_files/dcl.css

@ -0,0 +1,260 @@
div#status {
font-size: x-large;
font-weight: bolder;
}
div#dcl_wrap{
margin-bottom:10px;
}
div.dcl_pie{
}
div#dcl_list td{
text-align: right;
}
div#dcl_list td.str{
text-align: left;
}
div.entity {
border:1px solid black;
padding-left: 2px;
padding-right: 2px;
max-width: 500px;
}
div.entity input{
width: 30%;
}
div.entity div.entity{
margin:8px;
width: 96%;
background-color: #eeeeee;
}
div.entity div.schema{
margin-top:6px;
}
div.schema {
border:1px solid blue;
padding-left: 2px;
padding-right: 2px;
background-color: #ddddff;
}
div.entity div.nodes{ /* type nodes */
background-color: #ddeedd;
margin-bottom: 15px;
margin-top: 15px;
}
tr.dcl_units {
font-style: italic;
}
div.component_list a{
color: #a00;
}
div.schema_list a{
color: #a00;
}
div#dcl_toolbar {
margin:1em;
padding:2px;
border: 1px solid black;
width:80%;
}
table#dcl_tbl{
overflow: auto;
display: block;
overflow-x: auto;
border:none;
}
input#dcl_siteequation{
width: 70%;
}
div.entity div.storagesystem{
background-color: #FFBBBB;
}
div.entity div.localstorage{
background-color: #FF8888;
}
div.schema div.localstorage div.head{
color: black;
}
table#dcl_aggregated_tbl{
overflow: auto;
display: block;
overflow-x: auto;
border:none;
}
div#dcl_toolbar label{
margin-right:2em;
}
div#dcl_toolbar_graph {
margin:1em;
padding:2px;
border: 1px solid black;
width:80%;
}
div#dcl_toolbar_graph label{
margin-right:2em;
}
div.head{
font-weight: bolder;
font-style: italic;
}
div.head span.name{
font-style: normal;
}
div.entity hr{
margin: 1px;
margin-bottom: 2px;
}
div.schema hr{
margin: 1px;
margin-bottom: 2px;
}
div.schema div.head{
color: darkblue;
}
div.schema input{
background-color: #ddddff;
}
div.error {
color: darkred;
font-weight: bolder;
overflow:scroll;
}
div.entity div{
}
div.entity label {
width:200px;
display:block;
float:left;
}
div.entity span.label {
width:200px;
display:block;
float:left;
}
div.entity span.value{
}
div.entity input {
}
div.entity span.head{
font-size: larger;
color: #555555;
}
div.entity span.name{
margin-left: 5px;
}
div.entity span.navigation{
margin-right: 5px;
position: relative;
color: black;
float:right;
}
div.entity span.navigation a{
text-decoration:none;
font-size: small;
color: #a00;
}
div.entity div.body{
clear:both;
}
div.schema span.head { font-size: larger; }
div div.char {width: 200px; display:block; float:left}
div div.input { margin-left: 50px}
div div.help { font-size: small; font-style:italic;}
form.connections a {
background-color: lightgray;
color: brown;
border: 1px solid black;
display: inline;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
display:block;
min-width: 5em;
margin: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
form.connections .network{
background-color: white;
border: 5px solid white;
color: black;
font-weight: bolder;
}
form.connections span {
background-color: lightgray;
border: 1px solid black;
display: inline;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
display:block;
min-width: 5em;
margin: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
overflow: hidden;
}
div#dcl_graph_fields h2{
margin-bottom: 5px;
margin-top:15px;
}
form#Network_connections span.grapa_storage{
color: black;
background-color: #FFBBBB;
}
form#Network_connections span.grapa_supercomputer{
color: black;
background-color: lightgray;
}
canvas{
background-color: lightblue;
}
canvas#Building_draw{
background-color: lightgray;
}

742
index_files/dcl.js

@ -0,0 +1,742 @@
var repository = [] // Array that will contain all sites
var schemes = []
var button_list = []
var calc_button_list = []
var load_button_list = []
var units = []
var buttons = 0
var status_msgs = []
var connecting_graphs = []
var global_readonly = true
var scope_list = "site"
var graphData = null
var query = null;
var host = "localhost:8080";
function getGraphData(){
return graphData
}
function createType_read_only(label, map, name, value, unit_selected){
var str2 = ""
if (label == "name"){
str2 = 'style="display:none;"'
}
var str = '<div class="value" ' + str2 + '><span class="label">' + label + '</span><span id="' + name + '" class="value'
if (label == "name"){
str = str + ' entity_name'
}
var unit = map["unit"]
if (unit){
value = value + " " + unit_selected
}
return str + '">' + value + "</span></div>"
}
function createType(label, map, name, value, unit_selected){
var type = map["dtype"]
if(("enabled" in map && ! map["enabled"]) || global_readonly){
if(value == ""){
return ""
}
return createType_read_only(label, map, name, value, unit_selected);
}
var default_unit = map["default-unit"]
var str = '<label for="' + name +'">' + label + "</label>"
var attr = 'id="' + name + '"'
if (label == "name"){
if(pr