web app, fleshed out delete sessions, updated sessions dialog to use selection and buttons for joining/deletion

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`);
     }

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) {
+    async joinClicked() {
-        const sessionId = $(event.target).parent('tr').data('session');
+        console.log('joining session: ', this.selectedSession);
-        console.log('clicked session to join: ', sessionId);
+        if (this.selectedSession === this.coreRest.currentSession) {
-        if (sessionId === 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 = $('<td>', {text: session.nodes});
             const stateName = this.coreRest.getStateName(session.state);
             const $stateCell = $('<td>', {text: stateName});
-            const $row = $('<tr>', {class: 'session-join', 'data-session': session.id});
+            const $row = $('<tr>', {class: 'session-join'});
+            $row.data('session', session.id);
             $row.append([$idCell, $nodeCell, $stateCell]);
             this.$table.find('tbody').append($row);
         }

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()
+    function initialSetup() {
-            .then(function (session) {
+        coreNetwork.initialSession()
-                joinSession(session);
+                .then(function (session) {
-            })
+                    joinSession(session);
-            .catch(function (err) {
+                })
-                console.log('initial session error: ', err);
+                .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 {

webapp/templates/sessions_modal.html

@@ -21,6 +21,8 @@
                 </table>
             </div>
             <div class="modal-footer">
+                <button id="session-join" type="button" class="btn btn-primary">Join</button>
+                <button id="session-delete" type="button" class="btn btn-danger">Delete</button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
             </div>
         </div>