{% extends "base.html" %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('static', filename='annotate.css')}}">
{% endblock %}

{% block app_content %}
<h1>{{ task.dataset.name }}</h1>

<div id="rubric" class="row">
	<div class="col-md-12">
		<p>{{ rubric | safe }}</p>
	</div>
</div>

<div id="graph"></div>

<div id="wrap-buttons" class="row">
	<div class="col-md-6 text-left">
	<button class="btn btn-primary float-md-left" type="button" id="btn-reset">Reset</button>
	</div>
	<div class="col-md-6 text-right">
	<button class="btn btn-warning float-md-right" type="button" id="btn-none">No Changepoints</button>
	<button class="btn btn-success float-md-right" id="btn-submit" type="button">Submit</button>
	</div>
</div>
<br>

<!-- Modal -->
<div class="modal fade" id="submitNoCPModal" tabindex="-1" role="dialog" aria-labelledby="submitNoCPModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="submitNoCPModalLongTitle">No Changepoints Selected</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	      Please use the "No Changepoints" button when you think there are no changepoints in the time series.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="NoCPYesCPModal" tabindex="-1" role="dialog" aria-labelledby="NoCPYesCPModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="NoCPYesCPModalLongTitle">Changepoints Selected</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	      There are selected changepoints, please click the Reset button before clicking the "No Changepoints" button.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<h3>Selected Changepoints</h3>
<div id="changepoint-table">
	<table id="cp-table" class="table table-striped">
	</table>
</div>

{# Based on: https://github.com/benalexkeen/d3-flask-blog-post/blob/master/templates/index.html #}
{# And: https://bl.ocks.org/mbostock/35964711079355050ff1 #}
<script src="https://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>
// 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();
}

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);
		}
	};
};

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);
		}
	};
};
</script>
{% endblock %}