Move js to separate files

1 files changed, 9 insertions, 264 deletions

diff --git a/app/templates/annotate/index.html b/app/templates/annotate/index.html
index e2d0efc..106ef2a 100644
--- a/app/templates/annotate/index.html
+++ b/app/templates/annotate/index.html
@@ -76,278 +76,23 @@
 {# Based on: https://github.com/benalexkeen/d3-flask-blog-post/blob/master/templates/index.html #}
 {# And: https://bl.ocks.org/mbostock/35964711079355050ff1 #}
 <script src="//d3js.org/d3.v5.min.js"></script>
-<script>
-var data = {{ data.chart_data | safe }};
-var n = 0;
-data.forEach(function(d) {
-	d.X = n++;
-	d.Y = d.value;
-});
-
-var divWidth = 1000;
-var divHeight = 480;
-
-var svg = d3.select("#graph")
-	.on("touchstart", nozoom)
-	.on("touchmove", nozoom)
-	.append("svg")
-	.attr("width", divWidth)
-	.attr("height", divHeight);
-
-var margin = {top: 20, right: 20, bottom: 50, left: 50};
-var width = +svg.attr("width") - margin.left - margin.right;
-var height = +svg.attr("height") - margin.top - margin.bottom;
-
-var zoom = d3.zoom()
-  .scaleExtent([1, 50])
-  .translateExtent([[0, 0], [width, height]])
-  .extent([[0, 0], [width, height]])
-  .on("zoom", zoomed);
-
-var x = d3.scaleLinear().range([0, width]);
-var x2 = d3.scaleLinear().range([0, width]);
-var y = d3.scaleLinear().range([height, 0]);
-
-var xAxis = d3.axisBottom(x);
-var yAxis = d3.axisLeft(y);
-
-var xExtent = d3.extent(data, function(d) { return d.X; });
-var xRange = xExtent[1] - xExtent[0];
-var xDomainMin = xExtent[0] - xRange * 0.02;
-var xDomainMax = xExtent[1] + xRange * 0.02;
-
-var yExtent = d3.extent(data, function(d) { return d.Y; });
-var yRange = yExtent[1] - yExtent[0];
-var yDomainMin = yExtent[0] - yRange * 0.05;
-var yDomainMax = yExtent[1] + yRange * 0.05;
-
-x.domain([xDomainMin, xDomainMax]);
-y.domain([yDomainMin, yDomainMax]);
-x2.domain(x.domain());
-
-svg.append("defs").append("clipPath")
-  .attr("id", "clip")
-  .append("rect")
-  .attr("width", width - 30)
-  .attr("height", height)
-  .attr("transform", "translate(" + 30 + ",0)");
-
-svg.append("g")
-  .attr("class", "axis axis--y")
-  .attr("transform", "translate(" + 30 + ",0)")
-  .call(yAxis);
-
-svg.append("g")
-  .attr("class", "axis axis--x")
-  .attr("transform", "translate(0," + height + ")")
-  .call(xAxis);
-
-svg.append("text")
-  .attr("text-anchor", "middle")
-  .attr("class", "axis-label")
-  .attr("transform", "translate(" + (width - 20) + "," + (height + 50) + ")")
-  .text("Time");
-
-var line = d3.line()
-  .x(function(d) { return x(d.X); })
-  .y(function(d) { return y(d.Y); });
-
-var g = svg.append("g")
-    .call(zoom);
-
-g.append("rect")
-    .attr("width", width)
-    .attr("height", height);
-
-var view = g.append("g")
-    .attr("class", "view");
-
-view.append("path")
-  .datum(data)
-  .attr("class", "line")
-  .attr("d", line);
-
-var points = view.selectAll("circle")
-    .data(data)
-  .enter().append("circle")
-    .attr("cx", function(d) { return x(d.X); })
-    .attr("cy", function(d) { return y(d.Y); })
-    .attr("data_X", function(d) { return d.X; })
-    .attr("data_Y", function(d) { return d.Y; })
-    .attr("r", 5)
-    .on("click", clicked);
-
-function zoomed() {
-  t = d3.event.transform;
-  x.domain(t.rescaleX(x2).domain());
-  svg.select(".line").attr("d", line);
-  points.data(data)
-    .attr("cx", function(d) { return x(d.X); })
-    .attr("cy", function(d) { return y(d.Y); });
-  svg.select(".axis--x").call(xAxis);
-}
-
-function clicked(d, i) {
-	if (d3.event.defaultPrevented) return; // zoomed
-
-	// this function handles changepoint marking
-	var elem = d3.select(this);
-	if (elem.classed("changepoint")) {
-		elem.style("fill", "blue");
-		elem.classed("changepoint", false);
-	} else {
-		elem.style("fill", "red");
-		elem.classed("changepoint", true);
-	}
-	updateTable();
-}
-
-function nozoom() {
-  d3.event.preventDefault();
-}
-</script>
-<script>
-function updateTable() {
-	var changepoints = document.getElementsByClassName("changepoint");
-
-	var myTableDiv = document.getElementById("changepoint-table");
-
-	var old_table = document.getElementById("cp-table");
-	old_table.remove();
-
-	var table = document.createElement('TABLE')
-	table.id = "cp-table";
-	table.className = "table table-striped";
-
-	if (changepoints.length == 0) {
-		myTableDiv.appendChild(table);
-		return;
-	}
-
-	var heading = new Array();
-	heading[0] = "#";
-	heading[1] = "X";
-	heading[2] = "Y";
-
-	// TABLE COLUMNS
-	var thead = document.createElement('THEAD');
-	thead.className = "thead-dark";
-	table.appendChild(thead);
-	for (i = 0; i < heading.length; i++) {
-		var th = document.createElement('TH')
-		th.appendChild(document.createTextNode(heading[i]));
-		th.setAttribute("scope", "col");
-		thead.appendChild(th);
-	}
-	var body = document.createElement("TBODY");
-
-	//TABLE ROWS
-	for (i = 0; i < changepoints.length; i++) {
-		cp = changepoints[i];
-
-		var tr = document.createElement('TR');
-
-		var th = document.createElement('TH');
-		th.setAttribute("scope", "row");
-		th.appendChild(document.createTextNode(i+1));
-		tr.appendChild(th);
-
-		var td = document.createElement('TD');
-		td.appendChild(document.createTextNode(
-			d3.select(cp).data()[0].X
-		));
-		tr.appendChild(td);
-
-		var td = document.createElement('TD');
-		td.appendChild(document.createTextNode(
-			d3.select(cp).data()[0].Y
-		));
-		tr.appendChild(td);
-
-		body.appendChild(tr);
-	}
-	table.appendChild(body);
-	myTableDiv.appendChild(table);
-}
-</script>
+<script src="{{ url_for('static', filename='js/makeChart.js') }}"></script>
+<script src="{{ url_for('static', filename='js/updateTable.js') }}"></script>
+<script src="{{ url_for('static', filename='js/buttons.js') }}"></script>
+<script>makeChart({{ data.chart_data | safe }});</script>
 <script>
 // reset button
 var reset = document.getElementById("btn-reset");
-reset.onclick = function() {
-	var changepoints = d3.selectAll(".changepoint");
-	changepoints.each(function(d, i) {
-		var elem = d3.select(this);
-		elem.classed("changepoint", false);
-		elem.style("fill", "blue");
-	});
-	updateTable();
-}
-
+reset.onclick = resetOnClick;
+// no changepoint button
 var nocp = document.getElementById("btn-none");
 nocp.onclick = function() {
-	var changepoints = document.getElementsByClassName("changepoint");
-	// validation
-	if (changepoints.length > 0) {
-		$('#NoCPYesCPModal').modal();
-		return;
-	}
-
-	var obj = {
-		task: {{ task.id }},
-		changepoints: null
-	};
-
-	var xhr = new XMLHttpRequest();
-	xhr.open("POST", "");
-	xhr.withCredentials = true;
-	xhr.setRequestHeader("Content-Type", "application/json");
-	xhr.send(JSON.stringify(obj));
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			if (xhr.status === 200)
-				window.location.href = xhr.responseText;
-		} else {
-			console.log("Error: " + xhr.status);
-		}
-	};
+	noCPOnClick({{ task.id }});
 };
-
+// submit button
 var submit = document.getElementById("btn-submit");
 submit.onclick = function() {
-	var changepoints = document.getElementsByClassName("changepoint");
-	// validation
-	if (changepoints.length === 0) {
-		$('#submitNoCPModal').modal();
-		return;
-	}
-
-	var obj = {};
-	obj["task"] = {{ task.id }};
-	obj["changepoints"] = [];
-	var i, cp;
-	for (i=0; i<changepoints.length; i++) {
-		cp = changepoints[i];
-		elem = {
-			id: i,
-			x: cp.getAttribute("data_X"),
-			y: cp.getAttribute("data_Y")
-		};
-		obj["changepoints"].push(elem);
-	}
-
-	var xhr = new XMLHttpRequest();
-	xhr.open("POST", "");
-	xhr.withCredentials = true;
-	xhr.setRequestHeader("Content-Type", "application/json");
-	xhr.send(JSON.stringify(obj));
-	xhr.onreadystatechange = function() {
-		if (xhr.readyState == XMLHttpRequest.DONE) {
-			if (xhr.status === 200)
-				window.location.href = xhr.responseText;
-		} else {
-			console.log("Error: " + xhr.status);
-		}
-	};
+	submitOnClick({{ task.id }});
 };
 </script>
 {% endblock %}