Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add edit vocabulary option #24

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Add edit vocabulary option #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1cd5a17
Update marker icon references
xadahiya Mar 15, 2018
84e1d20
Add option to edit controller vocabulary
ba11b0y Dec 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions static/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,3 +92,9 @@ footer {
right: 8px;
top:8px;
}

button#edit-vocab-btn {
position: fixed;
left: 8px;
top: 8px;
}
91 changes: 87 additions & 4 deletions static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ toastr.options = {
var centralControllerUrl = "http://localhost:8080";
var centralControllerLocationPath = "/api/Location";
var centralControllerMessageCollectionPath = "/api/MessageCollection";
var centralControllerVocabPath = "/api/#vocab/";
var updatecentralControllerVocabPath = "/api/demo/";
var center, map, path, message;
var activeDrones = [];
var droneMarkers = [];
Expand Down Expand Up @@ -251,7 +253,7 @@ function getActiveDronesAndGenerateMarkers() {
marker = map.createMarker({
lat: center[0],
lng: center[1],
icon: "http://i.picresize.com/images/2017/08/13/s5JB7.png",
icon: "https://raw.githubusercontent.com/xadahiya/flock-demo-images/master/rsz_1rsz_2016012007111739274.png",
})
map.addMarker(marker);
droneMarkers.push(marker);
Expand Down Expand Up @@ -514,7 +516,7 @@ function getAnomalyDetailsAndAddMarker(anomalyId) {
lat: markerLoc[0],
lng: markerLoc[1],
title: 'Positive Anomaly ' + "Lat:" + markerLoc[0] + ", Lng:" + markerLoc[1],
icon: "http://i.picresize.com/images/2017/08/13/mvebt.png",
icon: "https://raw.githubusercontent.com/xadahiya/flock-demo-images/master/rsz_map-marker-icon.png",
})

map.addMarker(positiveAnomalyMarker);
Expand All @@ -525,7 +527,7 @@ function getAnomalyDetailsAndAddMarker(anomalyId) {
lat: markerLoc[0],
lng: markerLoc[1],
title: 'Unconfirmed Anomaly ' + "Lat:" + markerLoc[0] + ", Lng:" + markerLoc[1],
icon: "http://i.picresize.com/images/2017/08/13/1L6FP.png",
icon: "https://raw.githubusercontent.com/xadahiya/flock-demo-images/master/rsz_256-256-a5485b563efc4511e0cd8bd04ad0fe9e.png",
})

map.addMarker(confirmingAnomalyMarker);
Expand Down Expand Up @@ -627,7 +629,7 @@ function addCentralControllerMarker(map, center) {
lat: center[0],
lng: center[1],
title: 'Central Controller ' + "Lat:" + center[0] + ", Lng:" + center[1],
icon: "http://i.picresize.com/images/2017/08/13/YtESh.png",
icon: "https://raw.githubusercontent.com/xadahiya/flock-demo-images/master/rsz_1308001441853739087googlepct20mapspct20pinsvghi.png",
});
}

Expand Down Expand Up @@ -720,8 +722,39 @@ function updateHttpApiLogs() {
setTimeout(updateHttpApiLogs, 8000);
}

function getUpdatedVocabulary() {
var updatedVocab = {};
var aTags = $("#vocab-json span a");

for (var atag in aTags) {
if (aTags.hasOwnProperty(atag)) {
try {
if (aTags[atag].classList.contains("editable-unsaved")) {
var parentSpan = $(aTags[atag]).parent()[0];
updatedVocab[parentSpan.id] = aTags[atag].text;
}
}
catch{}

}
}
return updatedVocab;

}



function makeEditable(data) {
var fdata = {};
$("#vocab-json").empty();
for (var property in data) {
if (data.hasOwnProperty(property) && !property.startsWith("@")) {
$("#vocab-json").append('<span id="'+property+'"><b>'+property+'</b>'+'<a href="#" class="uri">'+data[property]+'</a></span><br>');
}
}
return fdata;
}

// Bindings to different html elements

//Message form bindings
Expand Down Expand Up @@ -781,6 +814,56 @@ $("#pause-btn").click(function(){
}, 30000);
})

// Edit Vocabulary
$("#edit-vocab-btn").click(function () {

$.ajax({
type: "GET",
url: centralControllerUrl + centralControllerVocabPath,
success: function (data) {
var editableData = makeEditable(data);
$(".uri").editable({
title: 'Change endpoint URI',
validate: function (value) {
if (!value.startsWith("/api/")) {
return 'Base endpoint cannot be changed!';
}
}
});
$("#vocab-modal").modal('show');
},
error: function () {
toastr["error"]("Something went wrong");
},
dataType: 'json',
crossDomain: true,
contentType: "application/ld+json",
});

});

// Send Updated Vocabulary to Controller

$("#save-vocab").click(function () {
var updatedVocabulary = JSON.stringify(getUpdatedVocabulary());
if (!$.isEmptyObject(updatedVocabulary)) {
$.ajax({
type: "POST",
url: centralControllerUrl + updatecentralControllerVocabPath,
data: updatedVocabulary,
success: function (data) {
console.log(data);
},
error: function () {
toastr["error"]("Something went wrong");
},
dataType: 'json',
crossDomain: true,
contentType: "application/json",
});
}
});



// Drone list refresh button binding
Expand Down
33 changes: 32 additions & 1 deletion templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

</head>
Expand All @@ -16,7 +17,11 @@
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="pull-left">
<button class="btn btn-info" id="edit-vocab-btn">Edit Controller Vocabulary</button>
</div>
<a class="navbar-brand" href="#">Hydra Flock Demo</a>

<div class="pull-right">
<button class="btn btn-info hidden" id="play-btn">Play Simulation</button>
<button class="btn btn-info" id="pause-btn">Pause Simulation</button>
Expand All @@ -27,7 +32,29 @@
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
<!-- /.navbar -->

<div id="vocab-modal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Central Controller Vocabulary</h4>
</div>
<div class="modal-body" id="json-div">
<pre id="vocab-json"></pre>
</div>
<div class="modal-footer pull-left">
<button type="button" class="btn btn-default" id="save-vocab" data-dismiss="modal">Save</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


<div class="container-fluid" style="margin-top: 10px;">
Expand Down Expand Up @@ -177,6 +204,10 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCG7xcLeQde4m1GZr1al5oQ1Tqp0iy_0-o"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="http://warfares.github.io/pretty-json/pretty-json-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>

Expand Down