From 8b07a39cb0ee1324418463178a62ba32fc4f9666 Mon Sep 17 00:00:00 2001
From: Gertjan van den Burg <gertjanvandenburg@gmail.com>
Date: Thu, 23 May 2019 16:40:33 -0400
Subject: Move js to separate files

---
 app/static/js/buttons.js     |  75 +++++++++++++++++++++++++
 app/static/js/makeChart.js   | 129 +++++++++++++++++++++++++++++++++++++++++++
 app/static/js/updateTable.js |  62 +++++++++++++++++++++
 3 files changed, 266 insertions(+)
 create mode 100644 app/static/js/buttons.js
 create mode 100644 app/static/js/makeChart.js
 create mode 100644 app/static/js/updateTable.js

(limited to 'app/static')

diff --git a/app/static/js/buttons.js b/app/static/js/buttons.js
new file mode 100644
index 0000000..d26a15d
--- /dev/null
+++ b/app/static/js/buttons.js
@@ -0,0 +1,75 @@
+function resetOnClick() {
+	var changepoints = d3.selectAll(".changepoint");
+	changepoints.each(function(d, i) {
+		var elem = d3.select(this);
+		elem.classed("changepoint", false);
+		elem.style("fill", "blue");
+	});
+	updateTable();
+}
+
+function noCPOnClick(task_id) {
+	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);
+		}
+	};
+}
+
+function submitOnClick(task_id) {
+	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);
+		}
+	};
+}
+
diff --git a/app/static/js/makeChart.js b/app/static/js/makeChart.js
new file mode 100644
index 0000000..35069b6
--- /dev/null
+++ b/app/static/js/makeChart.js
@@ -0,0 +1,129 @@
+function makeChart(data) {
+	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();
+	}
+}
diff --git a/app/static/js/updateTable.js b/app/static/js/updateTable.js
new file mode 100644
index 0000000..7d68aad
--- /dev/null
+++ b/app/static/js/updateTable.js
@@ -0,0 +1,62 @@
+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);
+}
-- 
cgit v1.2.3