aboutsummaryrefslogtreecommitdiffstats
path: root/src/static/js/dashboard.js
diff options
context:
space:
mode:
authorJeremy Plsek <jplsek@iol.unh.edu>2019-12-20 10:50:41 -0500
committerJeremy Plsek <jplsek@iol.unh.edu>2020-02-17 16:01:03 -0500
commitd63a08e56716358ea4daa30d3050fa01df65a837 (patch)
tree10873a809c29492efcc1988cc65ccf8cf054f7e7 /src/static/js/dashboard.js
parent80f9bb0bb514133363bd0a40edb8b10ddb8d3a51 (diff)
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>
Diffstat (limited to 'src/static/js/dashboard.js')
-rw-r--r--src/static/js/dashboard.js51
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);
};