From b3c4aba0a2eff8bb684bfafbf2474a10eafc64fc Mon Sep 17 00:00:00 2001 From: Martin Muehlhaeuser Date: Tue, 14 Aug 2018 16:30:56 +0000 Subject: [PATCH] [view] Add loading spinner --- octoprint_klipper/static/img/spinner.gif | Bin 0 -> 8942 bytes octoprint_klipper/static/js/klipper_graph.js | 23 ++++++++++++++++-- .../templates/klipper_graph_dialog.jinja2 | 8 +++++- 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 octoprint_klipper/static/img/spinner.gif diff --git a/octoprint_klipper/static/img/spinner.gif b/octoprint_klipper/static/img/spinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..0424aa4ffda24a189ed8487dddd63626bceff0f8 GIT binary patch literal 8942 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 O7>g_~XKNzx*Z%+t`<_t% literal 0 HcmV?d00001 diff --git a/octoprint_klipper/static/js/klipper_graph.js b/octoprint_klipper/static/js/klipper_graph.js index a5d0aa0..d083791 100644 --- a/octoprint_klipper/static/js/klipper_graph.js +++ b/octoprint_klipper/static/js/klipper_graph.js @@ -14,14 +14,16 @@ function KlipperGraphViewModel(parameters) { self.logFile = ko.observable(); self.status = ko.observable(); self.datasets = ko.observableArray(); + self.datasetFill = ko.observable(false); self.canvas; self.canvasContext; self.chart; - self.datasetFill = ko.observable(false); + self.spinnerDialog; self.onStartup = function() { self.canvas = $("#klipper_graph_canvas")[0] self.canvasContext = self.canvas.getContext("2d"); + self.spinnerDialog = $("#klipper_graph_spinner"); Chart.defaults.global.elements.line.borderWidth=1; Chart.defaults.global.elements.line.fill= false; @@ -55,6 +57,18 @@ function KlipperGraphViewModel(parameters) { button.attr("href", dataURL); } + self.showSpinner = function(showDialog) { + if (showDialog) { + self.spinnerDialog.modal({ + show: true, + keyboard: false, + backdrop: "static" + }); + } else { + self.spinnerDialog.modal("hide"); + } + } + self.toggleDatasetFill = function() { if(self.datasets) { for (i=0; i < self.datasets().length; i++) { @@ -84,10 +98,15 @@ function KlipperGraphViewModel(parameters) { } ) } - + + self.showSpinner(true); + $.ajax(settings).done(function (response) { self.status("") self.datasetFill(false); + + self.showSpinner(false); + if("error" in response) { self.status(response.error); } else { diff --git a/octoprint_klipper/templates/klipper_graph_dialog.jinja2 b/octoprint_klipper/templates/klipper_graph_dialog.jinja2 index 5c16690..dacd983 100644 --- a/octoprint_klipper/templates/klipper_graph_dialog.jinja2 +++ b/octoprint_klipper/templates/klipper_graph_dialog.jinja2 @@ -24,4 +24,10 @@ - \ No newline at end of file + +