Commit 323bcc6d authored by akucera's avatar akucera
Browse files

added remove function to the client, various bugs resolved

parent 610220b2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="sbmsClient">Semantic BMS client</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-->
<script src="js/bootstrap.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- https://github.com/jonmiles/bootstrap-treeview -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- Latest compiled and minified JavaScript -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/i18next/3.1.0/i18next.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.min.js"></script>
<script src="js/i18n.js"></script>
<script src="js/scripts.js"></script>
<script>
var p = new SBMSPage(function() {
$(".opDiv").hide();
// loading divs
$(".opDiv").each(function() {
p.semaphore++;
$(this).load($(this).attr("data-incl-file"), function() { if(--p.semaphore == 0) { p.delayedInit(); } });
});
$("#" + $("li.opNav.active").attr("data-show-div")).show();
$(".opNav").click(
function() {
p.switchPanel("opNav", "opDiv", this, $(this).attr(
"data-show-div"));
});
//$("#kompasFrame").attr("src", p.mapURL);
}, {
datapoints : [],
semaphore : 0
}, {
delayedInit : function() {
$("#selectorTree").hide();
$(".selectorNav").click(
function() {
p.switchPanel("selectorNav", "selectorDiv", this, $(this)
.attr("data-show-div"));
});
$("#selectorMap").height(
$(window).height() < 800 ? 700 : $(window).height() - 300);
$(document).ajaxStop(
function() {
$("#console").css(
"height",
$("#c2").height() - $("#c1").height()
+ ($("#console").outerHeight()));
});
if (window.location.hash != null
&& window.location.hash != ""
&& window.location.hash != "#") {
var panel = window.location.hash.substring(1);
p.switchPanel("opNav", "opDiv", $("#nav" + panel),
"tab" + panel);
}
p.loadList("field.insert", [ p.createParams ], [
"#params",
false,
function() {
p.switchPanel("selectorNav", "selectorDiv",
"showTree", "selectorTree");
},
function() {
},
function() {
p.switchPanel("selectorNav", "selectorDiv",
"showMap", "selectorMap");
}, function() {
}, "kompasFrame", "tree" ]);
$("#sendSingle").click(p.sendInsertSingle);
$("#parseBatch").click(
function() {
$("#rawInput").attr("rows", 6);
p.parseRawInput($("#rawInput").val(), $(
"#headers").prop("checked"), $(
"#delimiter").val());
});
$("#sendRemove").click(
function() {
var glyphDP = "minus";
var glyphRels = "minus";
var glyphTrends = "minus";
$("#removeStatus").html("");
var ids = $("#idsToRemove").val().split(/[\n;\s]+/);
var assertions = [];
if($("#removeDps").prop("checked")) {
assertions[assertions.length] = "datapoints";
glyphDP = "time";
}
if($("#removeRels").prop("checked")) {
assertions[assertions.length] = "relations";
glyphRels = "time";
}
if($("#removeTrends").prop("checked")) {
assertions[assertions.length] = "trends";
glyphTrends = "time";
}
for(var i = 0; i < ids.length; i++) {
var text = ids[i];
ids[i] = encodeURIComponent(ids[i]);
$("#removeStatus").append('<tr data-address-id="' + ids[i] + '">'
+ '<td>' + text + '</td>'
+ '<td data-link-type="datapoints"><span class="glyphicon glyphicon-' + glyphDP + '" aria-hidden="true"></span></td>'
+ '<td data-link-type="relations"><span class="glyphicon glyphicon-' + glyphRels + '" aria-hidden="true"></span></td>'
+ '<td data-link-type="trends"><span class="glyphicon glyphicon-' + glyphTrends+ '" aria-hidden="true"></span></td>');
};
if(assertions.length > 0 && ids.length > 0)
p.removeAssertions(assertions, 0, ids, 0);
}
);
p.loadList("field.insert", function(data, params) {
var htmlHead = "";
var columns = 0;
$.each(data, function(i, f) {
htmlHead += "<th>" + f + "</th>";
++columns;
});
$("table#parsedBatch thead tr:eq(0)").html(htmlHead);
$("table#parsedBatch tbody tr:eq(0)").html("<td></td>")
.find("td:eq(0)").html("No data").attr(
"colspan", columns);
});
$("#sendBatch").click(p.sendInsertBatch);
},
removeAssertions : function(assertions, iA, ids, iI) {
if(iA < assertions.length && iI < ids.length) {
$.ajax({
type: 'DELETE',
url: SBMSPage.prototype.sbmsURL + assertions[iA] + "/" + ids[iI],
beforeSend: function (xhr) {
p.setAuth(xhr);
}}).done(function() {
$('tr[data-address-id="' + ids[iI] + '"] td[data-link-type="' + assertions[iA]+ '"]')
.html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>');
p.removeAssertions(assertions, iA, ids, ++iI);
}).fail(function() {
$('tr[data-address-id="' + ids[iI] + '"] td[data-link-type="' + assertions[iA]+ '"]')
.html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>');
p.removeAssertions(assertions, iA, ids, ++iI);
});
} else if (iA < assertions.length) {
p.removeAssertions(assertions, ++iA, ids, 0);
}
},
parseRawInput : function(input, headersPresent, delimiter) {
var data;
if (headersPresent) {
// custom headers ordering
var headers = [];
var h = input[0].split(delimiter);
data = input.split("\n").slice(1);
p.loadList("field.insert",
function(oFields, params) {
// filling the headers
$.each(h, function(i, v) {
// we are accepting only correct headers - validated against fields from model
var hi = $.inArray(v, oFields);
if (hi >= 0) {
// adding to final list of headers
headers[i] = v;
}
});
// creating data points
p.parseRows(data, headers, delimiter);
p.fillBatchTable(oFields);
});
} else {
data = input.split("\n");
p.loadList("field.insert", function(h, params) {
p.parseRows(data, h, delimiter);
p.fillBatchTable(h);
});
}
},
parseRows : function(data, headers, delimiter) {
$.each(data, function(i, row) {
if (row == "")
return;
var vals = row.split(delimiter);
var dp = {};
$.each(vals, function(j, val) {
p.setDpField(dp, headers[j], val);
});
p.datapoints[datapoints.length] = dp;
});
},
fillBatchTable : function(headers) {
//loadList("insertField", function(data, params) {
html = "";
$.each(datapoints, function(i1, dp) {
html += "<tr>";
$.each(headers, function(i2, f) {
var v = eval("dp." + f);
var c = "";
if (v == null) {
c = ' class="bg-danger"';
v = "";
}
html += "<td" + c + ">" + v + "</td>";
});
html += "</tr>";
});
if (html != "") {
$("table#parsedBatch tbody").html(html);
}
},
sendInsertBatch : function() {
p.toggleButtonSending();
if (datapoints.length > 0) {
index = 0;
p.proceedSend(datapoints, index, function() {
p.toggleButtonSuccess();
p.toggleButtonComplete("Completed");
});
}
},
proceedSend : function(data, index, completeAction) {
if (index < data.length) {
p.insertDP(data[index], function() {
}, function() {
}, function(error) {
}, function(status) {
if (Status == "success") {
p.proceedSend(data, index + 1, completeAction);
} else {
completeAction();
}
}, "logBatch");
} else {
completeAction();
}
},
sendInsertSingle : function() {
var dp = {};
$("#params input.field,select.field").each(function() {
var val = $(this).val();
p.setDpField(dp, p.getField(this.id), val);
});
if (dp != null) {
p.insertDP(dp, p.toggleButtonSending, p.toggleButtonSuccess,
p.toggleButtonError, p.toggleButtonComplete,
"logSingle");
}
},
insertDP : function(dp, ba, sa, ea, ca, logId) {
var query = p.sbmsURL + "datapoints/";
$.ajax({
type : 'POST',
cache : false,
url : query,
data : JSON.stringify({
dataPoint : dp
}),
processData : false,
contentType : 'application/json',
beforeSend : function(xhr) {
p.setAuth(xhr);
ba();
$("#" + logId).append(
"\nSending dp: " + JSON.stringify(dp, null, 2));
},
success : function(result) {
sa();
$("#" + logId).append("\nSuccess");
},
error : function(xhr, status, error) {
ea(error);
$("#" + logId)
.append("\nError - " + status + " - " + error);
},
complete : function(xhr, status) {
ca(status);
$("#" + logId).append(
"\nComplete - " + status + "\n-----------");
}
});
}
});
</script>
<style>
.bootstrap-select .dropdown-toggle {
background-color: #fff;
background-image: none;
}
.opDiv {
margin-top: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbarc1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="query.html" data-i18n="sbmsClient">Semantic
BMS client</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarc1">
<ul class="nav navbar-nav">
<li><a href="query.html" data-i18n="query">Query</a></li>
<li class="active"><a href="insert.html" data-i18n="edit">Edit<span
class="sr-only">(current)</span></a></li>
<li><a href="sparql.html" data-i18n="sparql">SPARQL</a></li>
</ul>
<form id="login" class="navbar-form navbar-right"
action="insert.html" method="GET">
<div class="form-group">
<label for="user" class="sr-only" data-i18n="user">User</label> <input
type="text" name="username" id="user" class="form-control"
data-i18n="[placeholder]user" placeholder="User" /> <label
for="pass" class="sr-only" data-i18n="pass">Password</label> <input
type="password" name="password" id="pass"
data-i18n="[placeholder]pass" placeholder="Password"
class="form-control" />
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"><span id="langIndicator">En</span><span
class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-lang-indicator-abbrev="Cs"
data-lang="cs" class="langChange">Česky</a></li>
<li><a href="#" data-lang-indicator-abbrev="En"
data-lang="en" class="langChange">English</a></li>
<li><a href="#" data-lang-indicator-abbrev="Dev"
data-lang="en-DEV" class="langChange">Developer</a></li>
</ul></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<form id="queryForm">
<div class="container-fluid">
<ul class="nav nav-tabs">
<li role="presentation" class="active opNav"
data-show-div="tabInsertSingle" id="navInsertSingle"><a
href="#InsertSingle">Datapoint (Single)</a></li>
<li role="presentation" class="opNav" data-show-div="tabInsertBatch"
id="navInsertBatch"><a href="#InsertBatch">Datapoints (Batch)</a></li>
<li role="presentation" class="opNav"
data-show-div="tabInsertTrends" id="navInsertTrends"><a
href="#InsertTrends">Trends</a></li>
<li role="presentation" class="opNav"
data-show-div="tabInsertPrograms" id="navInsertPrograms"><a
href="#InsertPrograms">Programs</a></li>
<li role="presentation" class="opNav"
data-show-div="tabInsertInfluence" id="navInsertInfluence"><a
href="#InsertInfluence">Influence</a></li>
<li role="presentation" class="opNav" data-show-div="tabRemoveBatch"
id="navRemoveBatch"><a href="#RemoveBatch">Remove</a></li>
</ul>
<div id="tabInsertSingle" class="opDiv"
data-incl-file="inclInsertSingle.html"></div>
<div id="tabInsertBatch" class="opDiv"
data-incl-file="inclInsertBatch.html"></div>
<div id="tabInsertTrends" class="opDiv"
data-incl-file="inclInsertTrends.html">
<p>TODO Trends insert</p>
</div>
<div id="tabInsertPrograms" class="opDiv"
data-incl-file="inclInsertPrograms.html">
<p>TODO Programs insert</p>
</div>
<div id="tabInsertInfluence" class="opDiv"
data-incl-file="inclInsertInfluence.html">
<p>TODO Influence insert</p>
</div>
<div id="tabRemoveBatch" class="opDiv"
data-incl-file="inclRemoveBatch.html"></div>
</div>
</form>
</body>
</html>
\ No newline at end of file
<div class="row">
<div class="col-lg-10">
<div class="form-group">
<textarea class="form-control" id="rawInput" rows="20"></textarea>
</div>
<table id="parsedBatch" class="table table-bordered table-hover">
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody>
</table>
</div>
<div class="col-lg-2">
<div class="checkbox"><label><input type="checkbox" value="" id="headers">The first row contains headers</label></div>
<div class="form-group">
<label for="delimiter">Delimiter:</label><select id="delimiter" class="selectpicker btn-sm"><option value=";" selected>Semicolon (;)</option><option value=",">Comma (,)</option><option value="\t">TAB</option></select>
</div>
<div class="form-group">
<button type="button" id="parseBatch" class="btn btn-info">Parse data</button>
<button type="button" id="sendBatch" class="btn btn-primary">Save data</button>
</div>
<h4>Console</h4>
<pre class="bg-info"><small id="logBatch">Ready</small></pre>
</div>
</div>
\ No newline at end of file
<div class="row">
<div id="c1" class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">New data point annotation</h3></div>
<div class="panel-body">
<p>Fill parameters:</p>
<div id="params"></div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Send data</h3></div>
<div class="panel-body">
<div class="form-group form-horizontal text-center">
<h3><span id="status" class="label label-lg label-success">Ready</span>
<button type="button" id="sendSingle" class="btn btn-primary">Send query</button></h3>
</div>
<div class="panel-body">
<pre id="console" class="bg-info"><small id="logSingle">Ready</small></pre>
</div>
</div>
</div>
</div>
<div id="c2" class="col-lg-8">
<div class="panel panel-primary">
<div class="panel-heading"><h3 class="panel-title">Data selectors</h3></div>
<div class="panel-body">
<ul class="nav nav-tabs">
<li role="presentation" class="active selectorNav" data-show-div="selectorMap" id="showMap"><a href="#">Map</a></li>
<li role="presentation" class="selectorNav" data-show-div="selectorTree" id="showTree"><a href="#">Tree</a></li>
</ul>
<div id="selectorMap" class="selectorDiv">
<iframe id="kompasFrame" style="width:100%;height:100%;" src="about:blank"></iframe>
</div>
<div id="selectorTree" class="selectorDiv">
<div id="tree"></div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="row">
<div class="col-lg-8 col-md-8">
<h3>BMS IDs (separated by semicolon or new line)</h3>
<textarea id="idsToRemove" class="form-control" rows="15"></textarea>
<h3>Data to remove</h3>
<div class="form-group">
<div class="checkbox"><label><input type="checkbox" name="relsToRemove" id="removeDps" value="datapoint" checked>DataPoint assertions</label></div>
<div class="checkbox"><label><input type="checkbox" name="relsToRemove" id="removeRels" value="relations">Relation (influences, uses) assertions</label></div>
<div class="checkbox"><label><input type="checkbox" name="relsToRemove" id="removeTrends" value="trends">Trend assertions</label></div>
</div>
<button type="button" id="sendRemove" class="btn btn-primary">Remove data</button>
</div>
<div class="col-lg-4 col-md-4">
<h3>Status</h3>
<table class="table table-striped">
<thead>
<tr><th>ID</th><th>DataPoint</th><th>Relations</th><th>Trends</th></tr>
</thead>
<tbody id="removeStatus">
</tbody>
</table>
</div>
</div>
\ No newline at end of file
......@@ -41,7 +41,7 @@
<script>
var p = new SBMSPage(function () {
p.loadList("dataField", function(headers, params) {
p.loadList("field.data", function(headers, params) {
dpId = p.getQueryVariable("bmsId");
if(!dpId) {
......@@ -83,10 +83,11 @@
});
$("table#dpInfo thead tr:eq(0)").html(htmlHead);
$("table#dpInfo tbody tr:eq(0)").html(htmlBody);
//add actions to map buttons
$("table#dpInfo .mapButton").click(p.switchMaps);
p.enrichPropertyValueCells("table#dpInfo", function() {
//add actions to map buttons
$("table#dpInfo .mapButton").click(p.switchMaps);