812 lines
24 KiB
JavaScript
812 lines
24 KiB
JavaScript
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 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 + '_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">></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 + "_store").unbind()
|
|
jQuery("#" + name + "_store").click(function(e){ //on add input button click
|
|
e.preventDefault()
|
|
var result = confirm("Are you sure you want to upload this model?");
|
|
if (!result) {
|
|
return;
|
|
}
|
|
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_autocomplete(name, load);
|
|
add_load_button(name, load)
|
|
}
|
|
}
|
|
|
|
function add_autocomplete(name, load){
|
|
var type = name.split("_")[1]
|
|
var button = jQuery("#" + name + "");
|
|
button.autocomplete({
|
|
select: function(event, ui) {
|
|
jQuery.ajax({
|
|
type: "POST",
|
|
url: window.location.protocol + "//" + host + "/ajax-model.php",
|
|
data: JSON.stringify({ "field" : type, "value" : ui.item.value, "type" : load}),
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
success: function(data){
|
|
update_element(ui.item.value, name, data)
|
|
},
|
|
failure: function(errMsg) {
|
|
addError("Error " + errMsg)
|
|
printError()
|
|
},
|
|
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
|
alert("Server Error: \"" + errorThrown + "\"")
|
|
}
|
|
});
|
|
},
|
|
source: function(req,res) {
|
|
jQuery.ajax({
|
|
type: "POST",
|
|
url: window.location.protocol + "//" + host + "/ajax-model.php",
|
|
data: JSON.stringify({ "field" : type, "value" : req.term, "type" : load, "autocomplete" : true}
|
|
),
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
success: function(data){
|
|
var arr = data['complete'] || [];
|
|
res(Array.from(arr));
|
|
},
|
|
error: function(XMLHttpRequest, textStatus, errorThrown) {
|
|
console.log("Server Error: \"" + errorThrown + "\"")
|
|
}
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
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 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(){
|
|
var payload = getJSON()
|
|
|
|
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);
|
|
loadData(contents);
|
|
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
fileInput.click()
|
|
}
|
|
|
|
function getJSON(){
|
|
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 json = { "DATA" : data , "GRAPH" : graphData}
|
|
|
|
if(graphData != null){
|
|
redraw_graph()
|
|
}
|
|
reset = json
|
|
return json;
|
|
}
|
|
|
|
function exportData(){
|
|
var payload = getJSON();
|
|
if(!payload)return;
|
|
global_readonly = true; //switch to readonly mode so the correct dom is copied over
|
|
loadData(payload); //redraw page
|
|
|
|
//copy page
|
|
var doccopy = document.cloneNode(true);
|
|
var promises = []
|
|
var wrap = doccopy.getElementById("dcl_wrap")
|
|
wrap.nextElementSibling.innerHTML = "";
|
|
var files = ["index_files/dcl-readonly.min.js"];
|
|
|
|
//grab stylesheet
|
|
Array.from(doccopy.getElementsByTagName("link")).forEach(
|
|
function(l){
|
|
if(l.rel == "stylesheet"){
|
|
promises.push(fetch(l.href).then(data=>data.text()).then(
|
|
function(data){
|
|
var src = doccopy.createElement("style");
|
|
src.innerHTML = data;
|
|
doccopy.head.append(src);
|
|
doccopy.head.append(doccopy.createTextNode("\n\t"));
|
|
l.outerHTML = "";
|
|
}
|
|
));
|
|
}
|
|
}
|
|
)
|
|
//remove js links
|
|
Array.from(doccopy.getElementsByTagName("script")).forEach(
|
|
function(l){
|
|
if(l.type == "text/javascript"){
|
|
l.outerHTML = "";
|
|
}
|
|
}
|
|
)
|
|
//add jquery
|
|
var jq = doccopy.createElement("script");
|
|
jq.src = "https://code.jquery.com/jquery-3.1.1.slim.min.js"
|
|
jq.integrity = "sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
|
|
jq.setAttribute("crossorigin","anonymous")
|
|
doccopy.head.append(doccopy.createTextNode("\t"));
|
|
doccopy.head.append(jq);
|
|
doccopy.head.append(doccopy.createTextNode("\n\t"));
|
|
//add javascript
|
|
files.forEach(function(path){
|
|
promises.push(fetch(path).then(data=>data.text()).then(
|
|
function(data){
|
|
var src = doccopy.createElement("script");
|
|
src.type = "text/javascript";
|
|
src.innerHTML = data;
|
|
doccopy.head.append(src);
|
|
doccopy.head.append(doccopy.createTextNode("\n\t"));
|
|
}
|
|
))});
|
|
|
|
Promise.all(promises).then(function(){
|
|
var js = doccopy.createElement("script");
|
|
js.type ="text/javascript";
|
|
js.innerHTML =
|
|
"loadData("+JSON.stringify(graphData)+","+JSON.stringify(header["CONNECT"])+","+buttons+");" //reduced script has a different load func
|
|
wrap.appendChild(js);
|
|
doccopy.getElementById("dokuwiki__header").outerHTML = "";
|
|
/*
|
|
var ver = doccopy.createElement("p");
|
|
ver.align = "left"
|
|
ver.style = "float: left;";
|
|
ver.innerHTML = "CDCL V1.0";
|
|
var t = doccopy.createElement("p");
|
|
t.innerHTML = "Powered by VI4IO";
|
|
t.align = "center"
|
|
t.style = "float: center;"
|
|
doccopy.getElementById("dokuwiki__top").appendChild(ver);
|
|
doccopy.getElementById("dokuwiki__top").appendChild(t)
|
|
*/
|
|
|
|
|
|
var html = "<!DOCTYPE html>\n"+doccopy.documentElement.innerHTML;
|
|
var start = html.substring(0,html.indexOf("<meta name=\"robots\"")+52)
|
|
end = html.substring(html.indexOf("<meta name=\"viewport\""))
|
|
html = start + end
|
|
createDownload(html);
|
|
});
|
|
//return page to normal
|
|
global_readonly = false;
|
|
loadData(payload);
|
|
}
|
|
|
|
function createDownload(str) {
|
|
var b64 = btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
|
|
function toSolidBytes(match, p1) {
|
|
return String.fromCharCode('0x' + p1);
|
|
}));
|
|
var data = "data:text/html;base64," + b64;
|
|
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);
|
|
}
|