From 9ec610ecc3cda5924870e92ae40ddf41b0f483ba Mon Sep 17 00:00:00 2001
From: Terrtia <or1994@hotmail.fr>
Date: Thu, 19 Dec 2019 11:09:22 +0100
Subject: [PATCH] chg: [correlation graph UI] add json error handler + add
 loading status

---
 .../correlation/show_correlation.html         | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/var/www/templates/correlation/show_correlation.html b/var/www/templates/correlation/show_correlation.html
index d99b2d1f..e0c5d6b3 100644
--- a/var/www/templates/correlation/show_correlation.html
+++ b/var/www/templates/correlation/show_correlation.html
@@ -116,10 +116,29 @@
 									</span>
 								</div>
 								<div class="card-body graph_panel">
+									<div id="graph_loading" class="ml-3 mt-3">
+										<div class="spinner-border text-secondary" role="status">
+											<span class="sr-only">Loading...</span>
+										</div>
+										<span>Loading...</span>
+									</div>
 									<div id="graph">
 									</div>
 								</div>
 							</div>
+
+							<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
+							  <div class="toast-header">
+							    <strong class="mr-auto">Bootstrap</strong>
+							    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
+							      <span aria-hidden="true">&times;</span>
+							    </button>
+							  </div>
+							  <div class="toast-body">
+							    Hello, world! This is a toast message.
+							  </div>
+							</div>
+
 						</div>
 
 						<div class="col-xl-2">
@@ -283,6 +302,9 @@ var zoom = d3.zoom()
 	.scaleExtent([.2, 10])
 	.on("zoom", zoomed);
 
+// Loading:
+//$("#graph_loading").show()
+
 //var transform = d3.zoomIdentity;
 
 var color = d3.scaleOrdinal(d3.schemeCategory10);
@@ -308,6 +330,7 @@ var container_graph = svg_node.append("g");
 		//.attr("transform", "translate(40,0)")
 		//.attr("transform", "scale(2)");
 
+
 function create_graph(url){
 
 d3.json(url)
@@ -384,7 +407,16 @@ d3.json(url)
 		node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
 	}
 
-});
+	// Loading ...
+	$("#graph_loading").remove();
+
+})
+.catch(function(error) {
+				$("#graph_loading").remove()
+				svg_node.remove();
+				d3.select("#graph").append("div")
+													 .text(error);
+		});
 }
 
 function zoomed() {