js: use npm instead of bower

Bower is considered deprecated, so switch to npm.

- Update all dependencies
- Use npm's version of mxgraph
- Use npm's version of jquery
- Use npm's version of plotly
- Fix mxgraph to use styles and images from the correct location
- Removed random csrf token input in nav bar and use js to get csrf
token
- Remove all calendar and some resource files since they were not used

Change-Id: I30d6bd91cded9547caa4c0a5247cd9f214fe9798
Signed-off-by: Jeremy Plsek <jplsek@iol.unh.edu>

1 files changed, 30 insertions, 21 deletions

diff --git a/src/static/js/dashboard.js b/src/static/js/dashboard.js
index 8e1250a..6bff8d9 100644
--- a/src/static/js/dashboard.js
+++ b/src/static/js/dashboard.js
@@ -7,6 +7,24 @@ form_submission_callbacks = [];  //all runnables will be executed before form su
 ///////////////////
 // Global Functions
 ///////////////////
+
+// Taken from https://docs.djangoproject.com/en/3.0/ref/csrf/
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
 function update_page(response) {
     if( response.redirect )
     {
@@ -137,7 +155,7 @@ function create_workflow(type) {
             "workflow_type": type
         },
         headers: {
-            "X-CSRFToken": $('input[name="csrfmiddlewaretoken"]').val()
+            "X-CSRFToken": getCookie('csrftoken')
         }
     }).done(function (data, textStatus, jqXHR) {
         window.location = "/workflow/";
@@ -154,7 +172,7 @@ function add_workflow(type) {
             "workflow_type": type
         },
         headers: {
-            "X-CSRFToken": $('input[name="csrfmiddlewaretoken"]').val()
+            "X-CSRFToken": getCookie('csrftoken')
         }
     }).done(function (data, textStatus, jqXHR) {
         update_page(data);
@@ -168,7 +186,7 @@ function pop_workflow() {
         type: "POST",
         url: "/workflow/pop/",
         headers: {
-            "X-CSRFToken": $('input[name="csrfmiddlewaretoken"]').val()
+            "X-CSRFToken": getCookie('csrftoken')
         }
     }).done(function (data, textStatus, jqXHR) {
         update_page(data);
@@ -455,15 +473,15 @@ class NetworkStep {
         this.editor.setGraphContainer(graphContainer);
         this.doGlobalConfig();
         this.prefill(xml, hosts, added_hosts, removed_host_ids);
-        this.addToolbarButton(this.editor, toolbarContainer, 'zoomIn', '', "/static/img/mxgraph/zoom_in.png", true);
-        this.addToolbarButton(this.editor, toolbarContainer, 'zoomOut', '', "/static/img/mxgraph/zoom_out.png", true);
+        this.addToolbarButton(this.editor, toolbarContainer, 'zoomIn', 'fa-search-plus');
+        this.addToolbarButton(this.editor, toolbarContainer, 'zoomOut', 'fa-search-minus');
 
         if(this.debug){
             this.editor.addAction('printXML', function(editor, cell) {
                 mxLog.write(this.encodeGraph());
                 mxLog.show();
             }.bind(this));
-            this.addToolbarButton(this.editor, toolbarContainer, 'printXML', '', '/static/img/mxgraph/fit_to_size.png', true);
+            this.addToolbarButton(this.editor, toolbarContainer, 'printXML', 'fa-file-code');
         }
 
         new mxOutline(this.graph, overviewContainer);
@@ -704,27 +722,18 @@ class NetworkStep {
         this.currentWindow.destroy();
     }
 
-    addToolbarButton(editor, toolbar, action, label, image, isTransparent) {
+    addToolbarButton(editor, toolbar, action, image) {
         const button = document.createElement('button');
-        button.style.fontSize = '10';
+        button.setAttribute('class', 'btn btn-sm m-1');
         if (image != null) {
-            const img = document.createElement('img');
-            img.setAttribute('src', image);
-            img.style.width = '16px';
-            img.style.height = '16px';
-            img.style.verticalAlign = 'middle';
-            img.style.marginRight = '2px';
-            button.appendChild(img);
-        }
-        if (isTransparent) {
-            button.style.background = 'transparent';
-            button.style.color = '#FFFFFF';
-            button.style.border = 'none';
+            const icon = document.createElement('i');
+            icon.setAttribute('class', 'fas ' + image);
+            button.appendChild(icon);
         }
         mxEvent.addListener(button, 'click', function(evt) {
             editor.execute(action);
         });
-        mxUtils.write(button, label);
+        mxUtils.write(button, '');
         toolbar.appendChild(button);
     };