initial work to provide context menus for nodes/edges and edit modals
This commit is contained in:
Blake J. Harnden
parent
b1b05a7eaa
commit
0ee3fca97c
10 changed files with 752 additions and 29 deletions
|
|
@ -107,10 +107,21 @@
|
|||
<div id="core-network" class="col">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'sessions_modal.html' %}
|
||||
</div>
|
||||
|
||||
{% include 'sessions_modal.html' %}
|
||||
{% include 'nodeedit_modal.html' %}
|
||||
{% include 'linkedit_modal.html' %}
|
||||
|
||||
<ul id="node-context" class="list-group invisible context">
|
||||
<a class="list-group-item list-group-item-action" href="#" data-option="edit">Edit Node</a>
|
||||
<a class="list-group-item list-group-item-action" href="#" data-option="services">Services</a>
|
||||
</ul>
|
||||
|
||||
<ul id="edge-context" class="list-group invisible context">
|
||||
<a class="list-group-item list-group-item-action" href="#" data-option="edit">Edit Link</a>
|
||||
</ul>
|
||||
|
||||
<script src="static/jquery-3.3.1.min.js"></script>
|
||||
<script src="static/popper.min.js"></script>
|
||||
<script src="static/bootstrap.min.js"></script>
|
||||
|
|
@ -125,7 +136,7 @@
|
|||
const $nodeButtons = $('.node-buttons a');
|
||||
const $sessionId = $('#session-id');
|
||||
const $nodeDisplay = $('#node-display');
|
||||
const $sessionsModel = $('#sessions-modal');
|
||||
const $sessionsModal = $('#sessions-modal');
|
||||
const $sessionsTable = $('#sessions-table');
|
||||
const $runButton = $('#run-button');
|
||||
const $infoCard = $('#info-card');
|
||||
|
|
@ -133,6 +144,12 @@
|
|||
const $infoCardHeader = $('#info-card-header');
|
||||
const $nodeSelect = $('#node-select');
|
||||
const $newSessionButton = $('#new-session-button');
|
||||
const $nodeContext = $('#node-context');
|
||||
const $edgeContext = $('#edge-context');
|
||||
const $nodeEditModal = $('#nodeedit-modal');
|
||||
const $nodeEditButton = $('#nodeedit-button');
|
||||
const $linkEditModal = $('#linkedit-modal');
|
||||
const $linkEditButton = $('#linkedit-button');
|
||||
|
||||
// initial core setup
|
||||
const coreRest = new CoreRest();
|
||||
|
|
@ -180,6 +197,8 @@
|
|||
// handle network clicks
|
||||
coreNetwork.network.on('click', function(properties) {
|
||||
console.log('click properties: ', properties);
|
||||
$nodeContext.addClass('invisible');
|
||||
$edgeContext.addClass('invisible');
|
||||
|
||||
$infoCard.removeClass('visible invisible');
|
||||
if (properties.nodes.length === 1) {
|
||||
|
|
@ -235,6 +254,77 @@
|
|||
}
|
||||
});
|
||||
|
||||
coreNetwork.network.on('oncontext', function(properties) {
|
||||
console.log('context event: ', properties);
|
||||
properties.event.preventDefault();
|
||||
$nodeContext.addClass('invisible');
|
||||
$edgeContext.addClass('invisible');
|
||||
|
||||
const location = properties.pointer.DOM;
|
||||
const x = properties.event.pageX;
|
||||
const y = properties.event.pageY;
|
||||
|
||||
const nodeId = coreNetwork.network.getNodeAt(location);
|
||||
if (nodeId) {
|
||||
const node = coreNetwork.nodes.get(nodeId);
|
||||
console.log('context node: ', node);
|
||||
$nodeContext.data('node', nodeId);
|
||||
$nodeContext.css({
|
||||
position: 'absolute',
|
||||
left: x,
|
||||
top: y
|
||||
});
|
||||
$nodeContext.removeClass('invisible');
|
||||
} else {
|
||||
const edgeId = coreNetwork.network.getEdgeAt(location);
|
||||
if (edgeId) {
|
||||
const edge = coreNetwork.edges.get(edgeId);
|
||||
console.log('context edge: ', edge);
|
||||
$edgeContext.data('edge', edgeId);
|
||||
$edgeContext.css({
|
||||
position: 'absolute',
|
||||
left: x,
|
||||
top: y
|
||||
});
|
||||
$edgeContext.removeClass('invisible');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$nodeContext.click(function(event) {
|
||||
$nodeContext.addClass('invisible');
|
||||
console.log('node context click: ', event);
|
||||
const nodeId = $nodeContext.data('node');
|
||||
const node = coreNetwork.nodes.get(nodeId).coreNode;
|
||||
const $target = $(event.target);
|
||||
const option = $target.data('option');
|
||||
console.log('node context: ', nodeId, option);
|
||||
if (option === 'edit') {
|
||||
$nodeEditModal.find('.modal-title').text(`Edit Node: ${node.name}`);
|
||||
$nodeEditModal.find('#node-name').val(node.name);
|
||||
$nodeEditModal.modal('show');
|
||||
}
|
||||
});
|
||||
|
||||
$nodeEditButton.click(function() {
|
||||
const $form = $nodeEditModal.find('form');
|
||||
console.log('form data: ', $form.serialize());
|
||||
});
|
||||
|
||||
$edgeContext.click(function(event) {
|
||||
$edgeContext.addClass('invisible');
|
||||
console.log('edge context click: ', event);
|
||||
const edgeId = $edgeContext.data('edge');
|
||||
const edge = coreNetwork.edges.get(edgeId);
|
||||
const $target = $(event.target);
|
||||
const option = $target.data('option');
|
||||
console.log('edge context: ', edgeId, option);
|
||||
if (option === 'edit') {
|
||||
$linkEditModal.find('.modal-title').text('Edit Edge');
|
||||
$linkEditModal.modal('show');
|
||||
}
|
||||
});
|
||||
|
||||
$newSessionButton.click(function() {
|
||||
coreNetwork.newSession()
|
||||
.then(function(session) {
|
||||
|
|
@ -254,7 +344,7 @@
|
|||
coreNetwork.joinSession(sessionId)
|
||||
.then(function(session) {
|
||||
joinSession(session);
|
||||
$sessionsModel.modal('hide');
|
||||
$sessionsModal.modal('hide');
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.log('join session error: ', err);
|
||||
|
|
@ -291,7 +381,6 @@
|
|||
}
|
||||
});
|
||||
|
||||
//$nodeDisplay.text(`Node: ${coreNetwork.nodeModel}`);
|
||||
$nodeButtons.click(function () {
|
||||
const $this = $(this);
|
||||
const nodeType = $this.data('node');
|
||||
|
|
@ -310,7 +399,7 @@
|
|||
});
|
||||
|
||||
// show sessions
|
||||
$sessionsModel.on('shown.bs.modal', function () {
|
||||
$sessionsModal.on('shown.bs.modal', function () {
|
||||
console.log('show sessions');
|
||||
$sessionsTable.find('tbody tr').remove();
|
||||
coreRest.getSessions()
|
||||
|
|
|
|||
19
webapp/templates/linkedit_modal.html
Normal file
19
webapp/templates/linkedit_modal.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<div id="linkedit-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white">
|
||||
<h5 class="modal-title"></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>edit stuff goes here</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="linkedit-button" type="button" class="btn btn-primary">Edit</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
25
webapp/templates/nodeedit_modal.html
Normal file
25
webapp/templates/nodeedit_modal.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<div id="nodeedit-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white">
|
||||
<h5 class="modal-title"></h5>
|
||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="node-name">Name</label>
|
||||
<input id="node-name" name="name" class="form-control" type="text" placeholder="Node Name"
|
||||
required>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="nodeedit-button" type="button" class="btn btn-primary">Edit</button>
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="modal-content">
|
||||
<div class="modal-header bg-dark text-white">
|
||||
<h5 class="modal-title">Sessions</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue