initial commit

master
Benjamin Hodges 2019-08-23 15:40:40 +01:00
commit 7fffa8905b
20 changed files with 4722 additions and 0 deletions

82
index.html 100644
View File

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

File diff suppressed because one or more lines are too long

View File

@ -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;
}

View File

@ -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 100644
View File

@ -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;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
index_files/d3.js vendored 100644

File diff suppressed because one or more lines are too long

View File

@ -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 = ''
}
)
}
});
}

View File

@ -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);
});

File diff suppressed because it is too large Load Diff

260
index_files/dcl.css 100644
View File

@ -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 100644
View File

@ -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(prevent_edit_name){
if(name == "1_name"){
attr = attr + ' disabled="disabled"'
}
}
attr = attr + ' class="entity_name"'
}
if("required" in map){
attr = attr + " required"
}
if("maxlength" in map){
attr = attr + " maxlength=" + map["maxlength"]
}
if("desc" in map){
//str = str + '<div class="help">' + map["desc"] +'</div>'
if("pattern" in map){
attr = attr + ' title="' + map["desc"] +'\nPattern:' + map["pattern"] + '"'
}else{
attr = attr + ' title="' + map["desc"] +'"'
}
}else{
if("pattern" in map){
attr = attr + ' title="Pattern: ' + map["pattern"] +'"'
}
}
if("pattern" in map){
//str = str + '<div class="help">' + map["desc"] +'</div>'
attr = attr + ' pattern="^' + map["pattern"] +'$"'
}
if(type == "number" || type == "integer"){
attr = attr + ' min="0"'
}
if (type == "choice"){
str = str + "<select " + attr + '> <option></option>'
for (v in map["choice"]){
var option = map["choice"][v]
var sel = ""
if (option == value){
sel=' selected="selected"'
}
str = str + "<option" + sel + ">" + option + "</option>"
}
str = str + "</select>"
}else if(type == "number"){
str = str + '<input type="number" value="' + value + '"' + attr + ' step="0.01">'
}else if(type == "integer"){
str = str + '<input type="number" value="' + value + '"' + attr + '>'
}else{
str = str + '<input type="' + type + '" value="' + value + '"' + attr + '>'
}
var unit = map["unit"]
if (unit){
// support unit selector
available = units[unit]
str = str + '<select id="' + name + '_unit">' // <option></option>
for (v in available){
var metric = available[v][0]
if (unit_selected == metric || (unit_selected == null && default_unit == metric) ){
str = str + '<option selected="selected">' + metric + "</option>"
}else{
str = str + "<option>" + metric + "</option>"
}
}
str = str + "</select>"
}
var aggregate = map["aggregate"]
if(aggregate){
str = str + '<a href="#" id="' + name + '_calc" class="dcl_recalc">[recalc]</a>'
calc_button_list.push([name, aggregate])
}
var load = map["load"]
if(load){
str = str + '<a href="#" id="' + name + '_load" class="dcl_load">[load from db]</a>'
str = str + '<a href="#" id="' + name + '_store" class="dcl_store">[store]</a>'
load_button_list.push([name, load])
}
return '<div class="value">' + str + '</div>' //'<span class="error" id="'+ name + '_err"></span>
}
function create_component(data, s, n, parent, schema, schema_btn_id = -1){
buttons = buttons + 1
var pos = buttons
var hidden = ""
var cls = "entity"
if(schema_btn_id > 0){
cls = "schema"
}
if(parent != "global" && cls == "entity"){
hidden='style="display:none;"'
}
var tls = ""
tls = tls + '<a href="#" id="' + pos + '_rollup" class="rollup">&gt;</a>'
if(! global_readonly){
tls = tls + '<a href="#" id="' + pos + '_remove"> - </a>'
}
button_list[buttons] = [s, n, parent, schema, schema_btn_id]
cls = cls + " " + s.replaceAll(" ", "")
str = "<div class='" + cls + "' id='" + pos + "'><div class='head'><span id='h" + pos + "'>" + s + '</span><span id="h'+ pos +'_name" class="name"/><span class="navigation">' + tls + "</span></div><div class='body' id='" + pos + "_b'" + hidden + "><hr>"
//str = str + '<input type="hidden" name="type" value="'+ pos + "_" + s + '"/>'
str = str + recursive_create(data, pos, schema, false) // data[s]
str = str + "</div></div>"
return str
}
function create_component_header(s, n, parent, schema){
buttons = buttons + 1
button_list[buttons] = [s, n, parent, schema, -1]
str = '<a href="#" class="' + buttons + '_add">[' + s + '+]</a> '
return str
}
function create_schema_header(s, n, parent, schema, hidden=false, multi=false){
buttons = buttons + 1
button_list[buttons] = [s, n, parent, schema, buttons, hidden, multi]
str = ' <a href="#" class="' + buttons + '_add">' + s + '</a> '
return str
}
function recursive_create(data, name, schema, top_level){
var str = ""
var re = new RegExp(" ", 'g')
var n
var s
var attr_str = ""
var append_str = ""
var schema_str = ""
var scheme_value_str = ""
for (var s in schema) {
if (s == "SCHEMES" || s == "SCHEMES_multi"){
// append all schemes!
for (n in schema[s]){
var scheme_name = schema[s][n]
var scheme_data = schemes[scheme_name]
// check if childs contains any of this scheme
var used_scheme = false
if (data != null){
for(i in data.childs){
c = data.childs[i]
if(c.type == scheme_name){
// found schema
var button_id = buttons + 1;
if(! used_scheme){
schema_str = schema_str + create_schema_header(scheme_name, n, name, scheme_data, s == "SCHEMES", s == "SCHEMES_multi")
}
used_scheme = true
scheme_value_str = scheme_value_str + create_component(c, scheme_name, n, name, scheme_data, button_id)
}
}
}
if (! used_scheme){
schema_str = schema_str + create_schema_header(scheme_name, n, name, scheme_data, false, s == "SCHEMES_multi")
}
}
continue
}
n = name + "_" + s // + data["name"]
n = n.replace(re, '')
if(schema[s] instanceof Object && "dtype" in schema[s]){
// this is the final object
value = ""
unit = null
if ( data != null && "att" in data ){
value = data["att"][s]
if ("undefined" === typeof value) {
value = ""
}else if (value instanceof Array){
unit = value[1]
value = value[0]
}
}
attr_str = attr_str + createType(s, schema[s], n, value, unit)
continue
}else if(schema[s] instanceof Object){
if (top_level){
str = str + create_component(data, s, n, name, schema[s])
}else if(data != null ){
// check all matching entities according to the schema
for(c in data.childs){
if (data.childs[c]["type"] == s){
var child = data.childs[c]
str = str + create_component(child, s, n, name, schema[s])
}
}
}
append_str = append_str + create_component_header(s, n, name, schema[s])
}
//console.log(data[s]);
}
if (top_level){
return str
}else if(global_readonly){
return attr_str + scheme_value_str + str
}else{
return attr_str + '<div class="schema_list">' + schema_str + "</div>" + '<div class="component_list">' + append_str + "</div>" + scheme_value_str + str
}
}
function find_calc_childs(parent, terms, depth, result){
if( depth == terms.length - 1){
if(terms[depth] in parent["att"]){
var val = parent["att"][terms[depth]]
if (val instanceof Array){
result.push(parseFloat(val[0]) * unitValueMap[val[1]][0])
}else{
result.push(parseFloat(val))
}
}else{
result.push(NaN)
}
return
}
for(var i in parent["childs"]){
var c = parent["childs"][i]
if (c["type"] && c["type"] == terms[depth]){
find_calc_childs(c, terms, depth + 1, result)
}
}
}
function find_suitable_unit(unit, val){
var baseunit = unitValueMap[unit][1]
var a = units[baseunit]
for(var i in a){
var u = a[i]
if(val < u[1]){
// take the unit one before
if(i == 0){
return u
}
if(val / a[i-1][1] < 10){
if(i < 2){
return a[0]
}else{
return a[i-2]
}
}else{
return a[i-1]
}
}
}
return a[a.length -1]
}
function add_calc_button(name, aggregates){
jQuery("#" + name + "_calc").unbind()
jQuery("#" + name + "_calc").click(function(e){ //on add input button click
e.preventDefault()
var data = traverse_elements_to_obj(document.getElementById(name.split("_")[0],0), 0);
var sum = 0
for (var a in aggregates){
var eq = aggregates[a]
var terms = eq.split("*") // only * supported
var all_values = []
for (var n in terms){
var term = terms[n].trim().split(".")
var values = []
find_calc_childs(data, term, 0, values)
all_values.push(values)
}
for(var c in all_values[0]){
var tmp = 1
for(var n in terms){
tmp = tmp * all_values[n][c]
}
if (! isNaN(tmp)){
sum = sum + tmp
}
}
}
// based on unit
var unit = jQuery("#" + name + "_unit")
if(unit.length){
var unit_scale = find_suitable_unit(unit.val(), sum)
unit.val(unit_scale[0])
sum = sum / unit_scale[1]
}
jQuery("#" + name).val(sum.toFixed(2))
});
}
function update_element(model, name, data){
if("childs" in data){
var p = document.getElementById(name.split("_")[0], 0)
insert_data(p, data)
}else{
alert("Could not find a template for: " + model)
}
}
function hasClass(txt, cls) {
return (' ' + txt + ' ').indexOf(' ' + cls + ' ') > -1;
}
function insert_data(el, data){
for(var i=0; i< el.children.length; i++) {
var c = el.children[i]
if (c.nodeName == "DIV"){
if (c.className == "body"){
for(var p=0; p < c.children.length; p++) {
var cc = c.children[p]
if(cc.nodeName == "DIV"){
if(hasClass(cc.className, "entity") || hasClass(cc.className, "schema")){
// find matching child in the data
var type = cc.firstChild.firstChild.innerText
for(var f in data.childs){
if ("type" in data.childs[f] && data.childs[f]["type"] == type){
insert_data(cc, data.childs[f]);
}
}
}else if (cc.className == "value"){
var label = ""
for(var q=0; q < cc.children.length; q++) {
var ccc = cc.children[q]
if (ccc.nodeName == "LABEL"){
label = ccc.firstChild.nodeValue
}else if (ccc.nodeName == "INPUT" || ccc.nodeName == "SELECT"){
var id = ccc.id
if(label in data["att"]){
var val = data["att"][label]
if (val instanceof Array){
if(id.endsWith("_unit")){
val = val[1]
}else{
val = val[0]
}
}
jQuery("#" + id).val(val)
jQuery("#" + id).css({background: "lightgreen"})
}else{
jQuery("#" + id).css({background: "inherit"})
}
}
}
}
}
}
}
}
}
}
function add_load_button(name, load){
var type = name.split("_")[1]
jQuery("#" + name + "_load").unbind()
jQuery("#" + name + "_load").click(function(e){ //on add input button click
e.preventDefault()
var model = jQuery("#" + name + "").val()
payload = { "field" : type, "value" : model, "type" : load }
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){
update_element(model, name, data)
},
failure: function(errMsg) {
addError("Error " + errMsg)
printError()
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Server Error: \"" + errorThrown + "\"")
}
});
});
jQuery("#" + name + "_store").unbind()
jQuery("#" + name + "_store").click(function(e){ //on add input button click
e.preventDefault()
var model = jQuery("#" + name + "").val()
var p = document.getElementById(name.split("_")[0], 0)
var data = traverse_elements_to_obj(p, 0);
payload = { "field" : type, "value" : model, "type" : load, "data" : data }
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){
},
failure: function(errMsg) {
addError("Error " + errMsg)
printError()
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Server Error: \"" + errorThrown + "\"")
}
});
});
}
function component_added(){
for(var c in calc_button_list){
var name = calc_button_list[c][0]
var aggregates = calc_button_list[c][1]
add_calc_button(name, aggregates)
}
for(var c in load_button_list){
var name = load_button_list[c][0]
var load = load_button_list[c][1]
autocomplete(name,load);
add_load_button(name, load)
}
}
function attach_add_btn(i){
var s = button_list[i][0]
var n = button_list[i][1]
var parent = button_list[i][2]
var schema = button_list[i][3]
var pos_add_btn = button_list[i][4]
var hidden = button_list[i][5]
var multi = button_list[i][6]
var wrap = jQuery("#" + parent + "_b"); //Fields wrapper
if (hidden){
jQuery("." + i + "_add").hide(0)
}
jQuery("." + i + "_add").click(function(e){ //on add input button click
e.preventDefault();
var start = button_list.length
var str = create_component(null, s, n, parent, schema, pos_add_btn)
jQuery(wrap).append(str);
component_added()
for(var i = start ; i < button_list.length; i++){
attach_add_btn(i)
}
if(pos_add_btn > 0 && ! multi){
jQuery(this).hide(0)
}
update_names()
});
jQuery("#" + i + "_remove").click(function(e){ //user click on remove text
//console.log(pos_add_btn)
e.preventDefault();
var parent_id = jQuery(this).attr('id').split("_")[0]
jQuery("#" + parent_id).remove();
delete button_list[i]
if(pos_add_btn > 0){
jQuery("." + pos_add_btn + "_add").show(0)
}
update_names()
})
jQuery("#" + i + "_rollup").click(function(e){
e.preventDefault();
jQuery("#" + i + "_b").toggle(0)
update_names()
})
jQuery("#h" + i + "_name").click(function(e){
e.preventDefault();
jQuery("#" + i + "_b").toggle(0)
update_names()
})
jQuery("#h" + i ).click(function(e){
e.preventDefault();
jQuery("#" + i + "_b").toggle(0)
update_names()
})
}
function leavePage(){
window.location.href = window.location.href
}
function provide_hooks(){
jQuery("#dcl_wrap").html('<div id="status">Press save to store any changes</div>' +
'<form id="dcl_data">' +
'<p id=dcl_edtbuttons>' +
'<button class="submitButton" type="button" onclick="loadDCLJSONFile()">Load JSON</button>' +
'<button class="submitButton" type="button" onclick="submitDCLChanges()">Save JSON</button>' +
'<button class="submitButton" type="button" onclick="loadDataJSON(copy)">Reset</button>' +
'<button class="submitButton" type="button" onclick="exportData()">Export HTML</button>' +
'</p>' +
'<div id="data_fields_wrap">' +
'</div>' +
'</form>' +
'<div id="dcl_graph_fields"></div>')
}
function verify_input(e){
p = e.pattern
//var err_field = document.getElementById(e.getAttribute("id") + '_err')
var req = e.getAttribute("required")
if(p == "" || (e.value == "" && req == null) ){
e.style.background = "lightgreen"
//err_field.innerHTML = ""
}else{
var rx = new RegExp(p);
if (e.value.match(rx)){
e.style.background = "lightgreen"
//err_field.innerHTML = ""
}else{
// mark the field red
e.style.background = "red"
addError("Invalid input")
//err_field.innerHTML = "Expected regex: " + p
}
}
}
function traverse_elements_to_obj(el, depth) {
var children = []
var label = ""
var head = ""
var value = ""
var attributes = {}
//console.log(el.nodeName + ":" + el.className)
for(var i=0; i< el.children.length; i++) {
var c = el.children[i]
if (c.nodeName == "DIV" || depth < 1 ){
if(c.className == "head"){
head = c.firstChild.innerText
}else if(hasClass(c.className, "entity") || hasClass(c.className, "schema")){
children.push(traverse_elements_to_obj(c, depth+1));
}else if (c.className == "body"){
for(var p=0; p < c.children.length; p++) {
var cc = c.children[p]
if(cc.nodeName == "DIV"){
if(hasClass(cc.className, "entity") || hasClass(cc.className, "schema")){
children.push(traverse_elements_to_obj(cc, depth+1));
}else if (cc.className == "value"){
for(var q=0; q < cc.children.length; q++) {
var ccc = cc.children[q]
if (ccc.nodeName == "LABEL"){
label = ccc.firstChild.nodeValue
value = -1
}else if (ccc.nodeName == "INPUT"){
if(ccc.value != ""){
attributes[label] = ccc.value
}
verify_input(ccc)
value = ccc.value
}else if (ccc.nodeName == "SELECT"){
if (value == -1){
attributes[label] = ccc.value
}else if(value == ""){
// skip this one
}else{
attributes[label] = [ value, ccc.value ]
}
}
}
}
}
}
}
}
}
if (head == ""){
if(children.length == 1){
return children[0]
}
return children
}
return {"type" : head, "att" : attributes, "childs" : children}
}
function resetStatus(){
status_msgs = []
var status = document.getElementById("status")
status.style.color = "darkgreen"
}
function addError(msg){
status_msgs.push(msg)
}
function printError(){
var status = document.getElementById("status")
status.style.color = "red"
str = ""
if(status_msgs.length > 1){
str = status_msgs.length + " Errors"
}else{
for(var m in status_msgs){
str = str + '<div class="error_msg">' + status_msgs[m] + '</div>'
}
}
status.innerHTML = str
alert("Errors occured while submitting the form")
}
function submitDCLChanges(){
if(global_readonly){
return true
}
graphData = getGraphData()
resetStatus()
var data = traverse_elements_to_obj(document.getElementById("data_fields_wrap",0), 0);
if (status_msgs.length > 0){
printError()
return false
}
graphData = store_graph()
var payload = {"NEW":{ "DATA" : data , "GRAPH" : graphData }}
copy = payload;
var data = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(payload));
var element = document.createElement('a');
element.setAttribute('href', data);
element.setAttribute('download', "site.json");
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
if(graphData != null){
redraw_graph()
}
return status_msgs.length == 0;
}
function loadDCLJSONFile() {
fileInput = document.createElement("input")
fileInput.type='file'
fileInput.accept='.json'
fileInput.onchange=function(e){
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = JSON.parse(e.target.result);
loadDataJSON(contents);
};
reader.readAsText(file);
}
fileInput.click()
}
function exportData(){
if(!global_readonly){
graphData = getGraphData()
resetStatus()
var data = traverse_elements_to_obj(document.getElementById("data_fields_wrap",0), 0);
if (status_msgs.length > 0){
printError()
return false
}
var graphData = store_graph()
var payload = {"NEW":{ "DATA" : data , "GRAPH" : graphData}}
if(graphData != null){
console.log("yo yo");
redraw_graph()
}
copy = payload;
}
global_readonly = !global_readonly;
loadDataJSON(copy);
return;
}
/*
document.getElementById("status").outerHTML="";
document.getElementById("dcl_edtbuttons").outerHTML="";
//document.getElementById("dcl_wrap").nextElementSibling.outerHTML="";
var html = document.documentElement.innerHTML;
//var html = btoa(html);
var data = "data:text/html," + encodeURIComponent(html);
var element = document.createElement('a');
element.setAttribute('href', data);
element.setAttribute('download', "site.html");
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
global_readonly = false;
loadDataJSON(copy);
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

20
index_files/jquery.js vendored 100644

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,23 @@
{
"NEW":{
"DATA": {
"type": "site",
"att": {
"abbreviation": "SITE_ABBREVIATION",
"institution": "SITE_NAME",
"nationality": "COUNTRY_ABBREVIATION"
},
"childs": []
},
"GRAPH": {
"Network": {
"pos": [],
"edges": []
},
"Building": {
"pos": [],
"edges": []
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB