afonso/core-extra
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

web app initial work towards configuring services, only shows an empty modal for now

Browse source
This commit is contained in:
Blake J. Harnden 2018-05-15 16:05:18 -07:00
parent 053c9789bc
commit d4c05dab09
3 changed files with 92 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

120
webapp/static/coreui.js
View file

@ -1,7 +1,27 @@
class ServiceModal {
constructor(coreRest) {
this.coreRest = coreRest;
this.$modal = $('#service-modal');
this.$title = this.$modal.find('.modal-title');
this.$button = $('#service-button');
this.$button.click(this.onClick.bind(this));
}
async show(service) {
this.$title.text(`Edit ${service}`);
this.$modal.modal('show');
}
async onClick() {
}
}
class ServicesModal { class ServicesModal {
constructor(coreRest, coreNetwork) { constructor(coreRest, coreNetwork, serviceModal) {
this.coreRest = coreRest; this.coreRest = coreRest;
this.coreNetwork = coreNetwork; this.coreNetwork = coreNetwork;
this.serviceModal = serviceModal;
this.$servicesModal = $('#services-modal'); this.$servicesModal = $('#services-modal');
this.$servicesForm = this.$servicesModal.find('form'); this.$servicesForm = this.$servicesModal.find('form');
this.$serviceGroup = $('#service-group'); this.$serviceGroup = $('#service-group');
@ -21,6 +41,17 @@ class ServicesModal {
this.$currentGroup = null; this.$currentGroup = null;
this.groupChange(); this.groupChange();
this.saveClicked(); this.saveClicked();
this.$servicesModal.on('click', '.service-button', this.editService.bind(this));
}
editService(event) {
//event.preventDefault();
const $target = $(event.target);
const service = $target.parent().parent().find('label').text();
console.log('edit service: ', service);
this.$servicesModal.modal('hide');
this.serviceModal.show(service);
return false;
} }
async show(nodeId) { async show(nodeId) {
@ -50,7 +81,10 @@ class ServicesModal {
this.$servicesList.append($formGroup); this.$servicesList.append($formGroup);
for (let service of services) { for (let service of services) {
const checked = this.nodeDefaults.has(service); const checked = this.nodeDefaults.has(service);
const $formCheck = $('<div>', {class: 'form-check'}); const $row = $('<div>', {class: 'row mb-1'});
const $button = $('<div>', {class: 'col-1'})
.append($('<a>', {text: 'Edit', href: '#', class: 'btn btn-primary btn-sm service-button'}));
const $formCheck = $('<div>', {class: 'form-check col'});
const $input = $('<input>', { const $input = $('<input>', {
class: 'form-check-input', class: 'form-check-input',
type: 'checkbox', type: 'checkbox',
@ -59,9 +93,9 @@ class ServicesModal {
checked checked
}); });
const $label = $('<label>', {class: 'form-check-label', text: service}); const $label = $('<label>', {class: 'form-check-label', text: service});
$formCheck.append($input); $formCheck.append([$input, $label]);
$formCheck.append($label); $row.append([$button, $formCheck]);
$formGroup.append($formCheck); $formGroup.append($row);
} }
} }
@ -98,55 +132,39 @@ class SessionsModal {
this.coreRest = coreRest; this.coreRest = coreRest;
this.coreNetwork = coreNetwork; this.coreNetwork = coreNetwork;
this.onJoin = onJoin; this.onJoin = onJoin;
this.$sessionsModal = $('#sessions-modal'); this.$modal = $('#sessions-modal');
this.$sessionsTable = $('#sessions-table'); this.$modal.on('shown.bs.modal', this.onShow.bind(this));
this.onShow(); this.$table = $('#sessions-table');
this.onClick(); this.$table.on('click', 'td', this.onClick.bind(this));
} }
onClick() { async onClick(event) {
const self = this; const sessionId = $(event.target).parent('tr').data('session');
this.$sessionsTable.on('click', 'td', function (event) { console.log('clicked session to join: ', sessionId);
const sessionId = $(this).parent('tr').data('session'); if (sessionId === this.coreRest.currentSession) {
console.log('clicked session to join: ', sessionId); console.log('same session, not changing');
if (sessionId === self.coreRest.currentSession) { } else {
console.log('same session, not changing'); const session = await this.coreNetwork.joinSession(sessionId);
} else { this.onJoin(session);
self.coreNetwork.joinSession(sessionId) this.$modal.modal('hide');
.then(function (session) { }
self.onJoin(session);
self.$sessionsModal.modal('hide');
})
.catch(function (err) {
console.log('join session error: ', err);
});
}
});
} }
onShow() { async onShow() {
const self = this; console.log('show sessions');
this.$sessionsModal.on('shown.bs.modal', function () { this.$table.find('tbody tr').remove();
console.log('show sessions'); const response = await this.coreRest.getSessions();
self.$sessionsTable.find('tbody tr').remove(); const sessions = response.sessions;
self.coreRest.getSessions() for (let session of sessions) {
.then(function (response) { console.log('show sessions: ', session);
const sessions = response.sessions; const $idCell = $('<td>', {text: session.id});
for (let session of sessions) { const $nodeCell = $('<td>', {text: session.nodes});
console.log('show sessions: ', session); const stateName = this.coreRest.getStateName(session.state);
const $idCell = $('<td>', {text: session.id}); const $stateCell = $('<td>', {text: stateName});
const $nodeCell = $('<td>', {text: session.nodes}); const $row = $('<tr>', {class: 'session-join', 'data-session': session.id});
const stateName = self.coreRest.getStateName(session.state); $row.append([$idCell, $nodeCell, $stateCell]);
const $stateCell = $('<td>', {text: stateName}); this.$table.find('tbody').append($row);
const $row = $('<tr>', {class: 'session-join', 'data-session': session.id}); }
$row.append([$idCell, $nodeCell, $stateCell]);
self.$sessionsTable.find('tbody').append($row);
}
})
.catch(function (err) {
console.log('error getting sessions: ', err);
});
});
} }
} }
@ -188,7 +206,7 @@ class NodeContext {
}); });
this.$nodeContext.removeClass('d-none'); this.$nodeContext.removeClass('d-none');
}) })
.catch(function(err) { .catch(function (err) {
console.log('error checking is session is running: ', err); console.log('error checking is session is running: ', err);
}); });
} }

4
webapp/templates/index.html
View file

@ -115,6 +115,7 @@
{% include 'sessions_modal.html' %} {% include 'sessions_modal.html' %}
{% include 'nodeedit_modal.html' %} {% include 'nodeedit_modal.html' %}
{% include 'linkedit_modal.html' %} {% include 'linkedit_modal.html' %}
{% include 'service_modal.html' %}
{% include 'services_modal.html' %} {% include 'services_modal.html' %}
<div id="node-context" class="list-group context d-none"> <div id="node-context" class="list-group context d-none">
@ -173,7 +174,8 @@
// core setup // core setup
const coreRest = new CoreRest(); const coreRest = new CoreRest();
const coreNetwork = new CoreNetwork('core-network', coreRest); const coreNetwork = new CoreNetwork('core-network', coreRest);
const servicesModal = new ServicesModal(coreRest, coreNetwork); const serviceModal = new ServiceModal(coreRest);
const servicesModal = new ServicesModal(coreRest, coreNetwork, serviceModal);
const sessionsModal = new SessionsModal(coreRest, coreNetwork, joinSession); const sessionsModal = new SessionsModal(coreRest, coreNetwork, joinSession);
const nodeEditModal = new NodeEditModal(coreNetwork); const nodeEditModal = new NodeEditModal(coreNetwork);
const nodeContext = new NodeContext(coreNetwork, coreRest, nodeEditModal, servicesModal); const nodeContext = new NodeContext(coreNetwork, coreRest, nodeEditModal, servicesModal);

20
webapp/templates/service_modal.html Normal file
View file

@ -0,0 +1,20 @@
<div id="service-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">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
</form>
</div>
<div class="modal-footer">
<button id="service-button" type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>