diff --git a/webapp/static/corerest.js b/webapp/static/corerest.js index ed3ae567..c267a391 100644 --- a/webapp/static/corerest.js +++ b/webapp/static/corerest.js @@ -36,6 +36,11 @@ async function putJson(url, data) { return await sendJson(url, data, 'PUT'); } +async function deleteJson(url, data) { + console.log('DELETE: ', url); + return await sendJson(url, data, 'DELETE'); +} + class CoreRest { constructor() { this.currentSession = null; @@ -65,6 +70,10 @@ class CoreRest { return await putJson(`/sessions/${this.currentSession}/state`, {state}); } + async deleteSession(sessionId) { + return await deleteJson(`/sessions/${sessionId}`); + } + async getEmaneModels() { return await $.getJSON(`/sessions/${this.currentSession}/emane/models`); } diff --git a/webapp/static/coreui.js b/webapp/static/coreui.js index 94d3137c..b41133ac 100644 --- a/webapp/static/coreui.js +++ b/webapp/static/coreui.js @@ -264,30 +264,59 @@ class ServicesModal { } class SessionsModal { - constructor(coreRest, coreNetwork, onJoin) { + constructor(coreRest, coreNetwork, onJoin, deleteCurrent) { this.coreRest = coreRest; this.coreNetwork = coreNetwork; this.onJoin = onJoin; + this.deleteCurrent = deleteCurrent; this.$modal = $('#sessions-modal'); this.$modal.on('shown.bs.modal', this.onShow.bind(this)); this.$table = $('#sessions-table'); - this.$table.on('click', 'td', this.onClick.bind(this)); + this.$table.on('click', 'tbody tr', this.sessionClick.bind(this)); + this.$joinButton = $('#session-join'); + this.$joinButton.click(this.joinClicked.bind(this)); + this.$deleteButton = $('#session-delete'); + this.$deleteButton.click(this.deleteClicked.bind(this)); + this.selectedSession = null; } - async onClick(event) { - const sessionId = $(event.target).parent('tr').data('session'); - console.log('clicked session to join: ', sessionId); - if (sessionId === this.coreRest.currentSession) { + async joinClicked() { + console.log('joining session: ', this.selectedSession); + if (this.selectedSession === this.coreRest.currentSession) { console.log('same session, not changing'); } else { - const session = await this.coreNetwork.joinSession(sessionId); + const session = await this.coreNetwork.joinSession(this.selectedSession); this.onJoin(session); - this.$modal.modal('hide'); } + this.$modal.modal('hide'); + return false; + } + + async deleteClicked(event) { + console.log('deleting session: ', this.selectedSession); + await this.coreRest.deleteSession(this.selectedSession); + if (this.selectedSession === this.coreRest.currentSession) { + this.deleteCurrent(); + } + this.$modal.modal('hide'); + return false; + } + + async sessionClick(event) { + this.$table.find('tr').removeClass('table-active'); + console.log('event: ', event); + const $row = $(event.currentTarget); + $row.addClass('table-active'); + this.selectedSession = $row.data('session'); + this.$joinButton.removeAttr('disabled'); + this.$deleteButton.removeAttr('disabled'); + console.log('selected session: ', this.selectedSession); } async onShow() { console.log('show sessions'); + this.$joinButton.attr('disabled', 'disabled'); + this.$deleteButton.attr('disabled', 'disabled'); this.$table.find('tbody tr').remove(); const response = await this.coreRest.getSessions(); const sessions = response.sessions; @@ -297,7 +326,8 @@ class SessionsModal { const $nodeCell = $('', {text: session.nodes}); const stateName = this.coreRest.getStateName(session.state); const $stateCell = $('', {text: stateName}); - const $row = $('', {class: 'session-join', 'data-session': session.id}); + const $row = $('', {class: 'session-join'}); + $row.data('session', session.id); $row.append([$idCell, $nodeCell, $stateCell]); this.$table.find('tbody').append($row); } diff --git a/webapp/templates/index.html b/webapp/templates/index.html index 2afd811f..460a5578 100644 --- a/webapp/templates/index.html +++ b/webapp/templates/index.html @@ -181,7 +181,7 @@ const coreNetwork = new CoreNetwork('core-network', coreRest); 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, initialSetup); const nodeEditModal = new NodeEditModal(coreNetwork, coreRest); const nodeContext = new NodeContext(coreNetwork, coreRest, nodeEditModal, servicesModal); const edgeEditModal = new EdgeEditModal(coreNetwork, coreRest); @@ -189,13 +189,15 @@ const infoPanel = new InfoPanel(coreNetwork); const configModal = new ConfigModel(coreRest); - coreNetwork.initialSession() - .then(function (session) { - joinSession(session); - }) - .catch(function (err) { - console.log('initial session error: ', err); - }); + function initialSetup() { + coreNetwork.initialSession() + .then(function (session) { + joinSession(session); + }) + .catch(function (err) { + console.log('initial session error: ', err); + }); + } function setRunButton(start) { console.log('set run button: ', start); @@ -222,6 +224,8 @@ $sessionSaveButton.attr('download', true); } + initialSetup(); + // handle network clicks coreNetwork.network.on('click', function (properties) { console.log('click properties: ', properties); @@ -252,7 +256,7 @@ const nodeId = coreNetwork.network.getNodeAt(location); if (nodeId) { nodeContext.show(nodeId, x, y) - .catch(function(err) { + .catch(function (err) { console.log('error showing node context: ', err); }); } else { diff --git a/webapp/templates/sessions_modal.html b/webapp/templates/sessions_modal.html index ce6c8d77..c14cf036 100644 --- a/webapp/templates/sessions_modal.html +++ b/webapp/templates/sessions_modal.html @@ -21,6 +21,8 @@