From 936dc463c969f648ae0bc81074ff3272c7c99697 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 10 Jan 2019 17:23:33 +0100
Subject: [PATCH] Finished problems page (untested)

---
 models/Problem.js                             |  50 ++--
 public/javascripts/components/game.js         |   2 +
 .../javascripts/components/problemSummary.js  |   7 +-
 public/javascripts/components/problems.js     | 225 ++++++++++++------
 routes/problems.js                            |  26 +-
 5 files changed, 208 insertions(+), 102 deletions(-)

diff --git a/models/Problem.js b/models/Problem.js
index cdd146e7..6184eafc 100644
--- a/models/Problem.js
+++ b/models/Problem.js
@@ -10,11 +10,16 @@ var db = require("../utils/database");
  *   solution: text
  */
 
+// TODO: callback ?
 exports.create = function(vname, fen, instructions, solution)
 {
 	db.serialize(function() {
-		db.get("SELECT id FROM Variants WHERE name = '" + vname + "'", (err,variant) => {
-			db.run(
+		const vidQuery =
+			"SELECT id " +
+			"FROM Variants " +
+			"WHERE name = '" + vname + "'";
+		db.get(vidQuery, (err,variant) => {
+			const insertQuery =
 				"INSERT INTO Problems (added, vid, fen, instructions, solution) VALUES " +
 				"(" +
 					Date.now() + "," +
@@ -22,7 +27,8 @@ exports.create = function(vname, fen, instructions, solution)
 					fen + "," +
 					instructions + "," +
 					solution +
-				")");
+				")";
+			db.run(insertQuery);
 		});
 	});
 }
@@ -30,43 +36,59 @@ exports.create = function(vname, fen, instructions, solution)
 exports.getById = function(id, callback)
 {
 	db.serialize(function() {
-		db.get(
+		const query =
 			"SELECT * FROM Problems " +
-			"WHERE id ='" + id + "'",
-			callback);
+			"WHERE id ='" + id + "'";
+		db.get(query, callback);
 	});
 }
 
-exports.fetchN = function(vname, directionStr, lastDt, MaxNbProblems, callback)
+exports.getOne = function(vname, pid, callback)
 {
 	db.serialize(function() {
-		db.all(
+		const query =
+			"SELECT * " +
+			"FROM Problems " +
+			"WHERE id = " + pid;
+		db.get(query, callback);
+	});
+}
+
+exports.fetchN = function(vname, uid, type, directionStr, lastDt, MaxNbProblems, callback)
+{
+	db.serialize(function() {
+		let typeLine = "";
+		if (uid > 0)
+			typeLine = "AND id " + (type=="others" ? "!=" : "=") + " " + uid;
+		const query =
 			"SELECT * FROM Problems " +
 			"WHERE vid = (SELECT id FROM Variants WHERE name = '" + vname + "') " +
-			"  AND added " + directionStr + " " + lastDt + " " +
+			"  AND added " + directionStr + " " + lastDt + " " + typeLine + " " +
 			"ORDER BY added " + (directionStr=="<" ? "DESC " : "") +
 			"LIMIT " + MaxNbProblems,
-			callback);
+		db.all(query, callback);
 	});
 }
 
 exports.update = function(id, uid, fen, instructions, solution)
 {
 	db.serialize(function() {
-		db.run(
+		const query =
 			"UPDATE Problems " +
 				"fen = " + fen + ", " +
 				"instructions = " + instructions + ", " +
 				"solution = " + solution + " " +
-			"WHERE id = " + id + " AND uid = " + uid);
+			"WHERE id = " + id + " AND uid = " + uid;
+		db.run(query);
 	});
 }
 
 exports.remove = function(id, uid)
 {
 	db.serialize(function() {
-		db.run(
+		const query =
 			"DELETE FROM Problems " +
-			"WHERE id = " + id + " AND uid = " + uid);
+			"WHERE id = " + id + " AND uid = " + uid;
+		db.run(query);
 	});
 }
diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 297ccc9d..84088c05 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -45,6 +45,8 @@ Vue.component('my-game', {
 				<div class="card smallpad small-modal text-center">
 					<label for="modal-eog" class="modal-close"></label>
 					<h3 id="eogMessage" class="section">{{ endgameMessage }}</h3>
+				</div>
+			</div>
 
 			<my-chat v-if="showChat"></my-chat>
 			//TODO: connection + turn indicators en haut à droite (superposé au menu)
diff --git a/public/javascripts/components/problemSummary.js b/public/javascripts/components/problemSummary.js
index 2c9ea94e..08109eff 100644
--- a/public/javascripts/components/problemSummary.js
+++ b/public/javascripts/components/problemSummary.js
@@ -11,8 +11,8 @@ Vue.component('my-problem-preview', {
 				<p v-if="!!prob.preview" v-html="prob.solution"></p>
 				<p v-else class="problem-time">{{ timestamp2date(prob.added) }}</p>
 				<div v-show="prob.uid==userid" class="button-group">
-					<button @click="sendSignal('edit')'">Edit</button>
-					<button @click="sendSignal('delete')">Delete</button>
+					<button @click="$emit('edit-problem')">Edit</button>
+					<button @click="$emit('delete-problem')">Delete</button>
 				</div>
 			</div>
 		</div>
@@ -29,8 +29,5 @@ Vue.component('my-problem-preview', {
 		timestamp2date(ts) {
 			return getDate(new Date(ts));
 		},
-		sendSignal: function(action) {
-			this.$emit(action + "-problem");
-		},
 	},
 })
diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index e3ab998d..897babbe 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -4,9 +4,11 @@ Vue.component('my-problems', {
 			userId: user.id,
 			problems: [], //oldest first
 			myProblems: [], //same, but only mine
-			display: "list", //or "myList"
-			curIdx: -1, //index in (current) problems array
+			singletons: [], //requested problems (using #num)
+			display: "others", //or "mine"
+			curProb: null, //(reference to) current displayed problem (if any)
 			showSolution: false,
+			pbNum: 0, //to navigate directly to some problem
 			// New problem (to upload), or existing problem to edit:
 			modalProb: {
 				id: 0, //defined if it's an edit
@@ -30,7 +32,7 @@ Vue.component('my-problems', {
 					<i class="material-icons">skip_next</i>
 				</button>
 			</div>
-			<div id="mainBoard" v-show="curIdx>=0">
+			<div id="mainBoard" v-show="!!curProb">
 				<div id="instructions-div" class="section-content">
 					<p id="problem-instructions">
 						{{ curProb.instructions }}
@@ -45,12 +47,22 @@ Vue.component('my-problems', {
 						{{ curProb.solution }}
 					</p>
 				</div>
+				<button @click="displayList()">
+					<span>Back to list display</span>
+				</button>
+			</div>
+			<div>
+				<input type="text" placeholder="Type problem number" v-model="pbNum"/>
+				<button @click="showProblem()">
+					<span>Show problem</span>
+				</button>
 			</div>
 			<button v-if="!!userId" @click="toggleListDisplay()">
 				<span>My problems (only)</span>
 			</button>
-			<my-problem-summary v-show="curIdx<0"
-				v-for="(p,idx) in sortedProblems" @click="setCurIdx(idx)"
+			<my-problem-summary v-show="!curProb"
+				v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
+				v-for="p in curProblems" @click="curProb=p"
 				v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
 			</my-problem-summary>
 			<input type="checkbox" id="modal-newproblem" class="modal"/>
@@ -104,39 +116,53 @@ Vue.component('my-problems', {
 					</div>
 				</div>
 			</div>
+			<input id="modalNomore" type="checkbox" class="modal"/>
+			<div role="dialog" aria-labelledby="nomoreMessage">
+				<div class="card smallpad small-modal text-center">
+					<label for="modalNomore" class="modal-close"></label>
+					<h3 id="nomoreMessage" class="section">
+						{{ nomoreMessage }}
+					</h3>
+				</div>
+			</div>
 		</div>
 	`,
-	computed: {
-		sortedProblems: function() {
-			// Newest problem first
-			return this.curProblems.sort((a,b) => a.added - b.added);
-		},
-		curProb: function() {
-			switch (this.display)
-			{
-				case "list":
-					return this.problems[this.curIdx];
-				case "myList":
-					return this.myProblems[this.curIdx];
-			}
-		},
-	},
 	created: function() {
 		if (location.hash.length > 0)
-		{
-			this.getOneProblem(location.hash.slice(1)); //callback?
-			this.curIdx = 0; //TODO: a bit more subtle, depending if it's my problem or not (set display)
-		}
+			this.showProblem(location.hash.slice(1));
 		else
-		{
-			// Fetch most recent problems from server
-			this.fetchProblems("backward"); //TODO: backward in time from the future. Second argument?
-		}
+			this.firstFetch();
 	},
 	methods: {
-		setCurIndex: function(idx) {
-			this.curIdx = idx;
-			location.hash = "#" + idx;
+		firstFetch: function() {
+			// Fetch most recent problems from server, for both lists
+			this.fetchProblems("others", "bacwkard");
+			this.fetchProblems("mine", "bacwkard");
+			this.listsInitialized = true;
+		},
+		showProblem: function(num) {
+			const pid = num || this.pbNum;
+			location.hash = "#" + pid;
+			const pIdx = this.singletons.findIndex(p => p.id == pid);
+			if (pIdx >= 0)
+				curProb = this.singletons[pIdx];
+			else
+			{
+				// Cannot find problem in current set; get from server, and add to singletons.
+				ajax(
+					"/problems/" + variant.name + "/" + pid, //TODO: use variant._id ?
+					"GET",
+					response => {
+						if (!!response.problem)
+						{
+							this.singletons.push(response.problem);
+							this.curProb = response.problem;
+						}
+						else
+							this.noMoreProblems("Sorry, problem " + pid + " does not exist");
+					}
+				);
+			}
 		},
 		translate: function(text) {
 			return translations[text];
@@ -144,70 +170,102 @@ Vue.component('my-problems', {
 		curProblems: function() {
 			switch (this.display)
 			{
-				case "list":
+				case "others":
 					return this.problems;
-				case "myList":
+				case "mine":
 					return this.myProblems;
 			}
 		},
 		// TODO?: get 50 from server but only show 10 at a time (for example)
 		showNext: function(direction) {
-			if (this.curIdx < 0)
-				return this.fetchProblems(direction);
+			if (!this.curProb)
+				return this.fetchProblems(this.display, direction);
 			// Show next problem (older or newer):
 			let curProbs = this.curProblems();
-			if ((this.curIdx > 0 && direction=="backward")
-				|| (this.curIdx < curProbs.length-1 && direction=="forward"))
+			// Try to find a neighbour problem in the direction, among current set
+			const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
+			if (!!neighbor)
 			{
-				this.setCurIdx(this.curIdx + (direction=="forward" ? 1 : -1));
+				this.curProb = neighbor;
+				return;
 			}
-			else //at boundary
+			// Boundary case: nothing in current set, need to fetch from server
+			const curSize = curProbs.length;
+			this.fetchProblems(this.display, direction);
+			const newSize = curProbs.length;
+			if (curSize == newSize) //no problems found
+				return this.noMoreProblems("No more problems in this direction");
+			// Ok, found something:
+			this.curProb = this.findClosestNeighbor(this.curProb, curProbs, direction);
+		},
+		findClosestNeighbor: function(problem, probList, direction) {
+			let neighbor = undefined;
+			let smallestDistance = Number.MAX_SAFE_INTEGER;
+			for (let prob of probList)
 			{
-				const curSize = curProbs.length;
-				this.fetchProblems(direction);
-				const newSize = curProbs.length;
-				if (curSize == newSize) //no problems found
-					return;
-				switch (direction)
+				const delta = Math.abs(prob.id - problem.id);
+				if (delta < smallestDistance &&
+					((direction == "backward" && prob.id < problem.id)
+					|| (direction == "forward" && prob.id > problem.id)))
 				{
-					case "forward":
-						this.setCurIdx(this.curIdx+1);
-						break;
-					case "backward":
-						this.setCurIdx(newSize - curSize + this.curIdx-1);
-						break;
+					neighbor = prob;
+					smallestDistance = delta;
 				}
 			}
+			return neighbor;
+		},
+		noMoreProblems: function(message) {
+			this.nomoreMessage = message;
+			let modalNomore = document.getElementById("modalNomore");
+			modalNomore.checked = true;
+			setTimeout(() => modalNomore.checked = false, 2000);
+		},
+		displayList: function() {
+			this.curProb = null;
+			location.hash = "";
+			// Fetch problems if first call (if #num, and then lists)
+			if (!this.listsInitialized)
+				this.firstFetch();
 		},
 		toggleListDisplay: function() {
-			this.display = (this.display == "list" ? "myList" : "list");
+			this.display = (this.display == "others" ? "mine" : "others");
 		},
-		// TODO: modal "there are no more problems"
-		fetchProblems: function(direction) {
-			const problems = if ... this.problems ... ou this.myProblems;
-			if (this.problems.length == 0)
-				return; //what could we do?! -------> ask problems older than MAX_NUMBER + backward
-			// Search for newest date (or oldest)
-			let last_dt = this.problems[0].added;
-			for (let i=0; i<this.problems.length; i++)
+		fetchProblems: function(type, direction) {
+			let problems = (type == "others" ? this.problems : this.myProblems);
+			let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
+			if (this.problems.length > 0)
 			{
-				if ((direction == "forward" && this.problems[i].added > last_dt) ||
-					(direction == "backward" && this.problems[i].added < last_dt))
+				// Search for newest date (or oldest)
+				last_dt = problems[0].added;
+				for (let i=1; i<problems.length; i++)
 				{
-					last_dt = this.problems[i].added;
+					if ((direction == "forward" && this.problems[i].added > last_dt) ||
+						(direction == "backward" && this.problems[i].added < last_dt))
+					{
+						last_dt = this.problems[i].added;
+					}
 				}
 			}
-			ajax("/problems/" + variant.name, "GET", { //TODO: use variant._id ?
-				direction: direction,
-				last_dt: last_dt,
-			}, response => {
-				if (response.problems.length > 0)
+			ajax(
+				"/problems/" + variant.name, //TODO: use variant._id ?
+				"GET",
 				{
-					this.problems = response.problems
-						.sort((p1,p2) => { return p1.added - p2.added; });
-					this.setCurIndex(response.problems.length - 1);
+					type: type,
+					direction: direction,
+					last_dt: last_dt,
+				},
+				response => {
+					if (response.problems.length > 0)
+					{
+						Array.prototype.push.apply(problems,
+							response.problems.sort((p1,p2) => { return p1.added - p2.added; }));
+						// If one list is empty but not the other, show the non-empty
+						const otherArray = (type == "mine" ? this.problems : this.myProblems);
+						if (problems.length > 0 && otherArray.length == 0)
+							this.display = type;
+					}
 				}
-			});
+			);
 		},
 		previewProblem: function() {
 			if (!V.IsGoodFen(this.newProblem.fen))
@@ -218,6 +276,22 @@ Vue.component('my-problems', {
 				return alert(translations["Empty solution"]);
 			this.modalProb.preview = true;
 		},
+		editProblem: function(prob) {
+			this.modalProb = prob;
+			document.getElementById("modal-newproblem").checked = true;
+		},
+		deleteProblem: function(pid) {
+			ajax(
+				"/problems/" + variant.name + "/" + pid, //TODO: with variant.id ?
+				"DELETE",
+				response => {
+					// Delete problem from the list on client side
+					let problems = this.curProblems();
+					const pIdx = problems.findIndex(p => p.id == pid);
+					problems.splice(pIdx, 1);
+				}
+			);
+		},
 		sendProblem: function() {
 			// Send it to the server and close modal
 			ajax(
@@ -230,17 +304,12 @@ Vue.component('my-problems', {
 					{
 						this.modalProb.added = Date.now();
 						this.modalProb.preview = false;
-						this.curProblems().push(JSON.parse(JSON.stringify(this.modalProb)));
+						this.myProblems.push(JSON.parse(JSON.stringify(this.modalProb)));
 					}
 					else
 						this.modalProb.id = 0;
 				}
 			);
 		},
-		// TODO: catch signal edit or delete ; on edit: modify modalProb and show modal
-		deleteProblem: function(pid) {
-			// TODO: AJAX call
-			// TODO: delete problem in curProblems() list
-		},
 	},
 })
diff --git a/routes/problems.js b/routes/problems.js
index 43258a0c..adb75dae 100644
--- a/routes/problems.js
+++ b/routes/problems.js
@@ -6,18 +6,34 @@ const ProblemModel = require("../models/Problem");
 const sanitizeHtml = require('sanitize-html');
 const MaxNbProblems = 20;
 
+// Get one problem
+router.get("/problems/:vname([a-zA-Z0-9]+)/:pnum([0-9]+)", access.ajax, (req,res) => {
+	const vname = req.params["vname"];
+	const pnum = req.params["pnum"];
+	ProblemModel.getOne(vname, pnum, (err,problem) => {
+		if (!!err)
+			return res.json(err);
+		return res.json({problem: problem});
+	});
+});
+
 // Fetch N previous or next problems
 router.get("/problems/:vname([a-zA-Z0-9]+)", access.ajax, (req,res) => {
 	const vname = req.params["vname"];
 	const directionStr = (req.query.direction == "forward" ? ">" : "<");
 	const lastDt = req.query.last_dt;
+	const type = req.query.type;
 	if (!lastDt.match(/[0-9]+/))
 		return res.json({errmsg: "Bad timestamp"});
-	ProblemModel.fetchN(vname, directionStr, lastDt, MaxNbProblems, (err,problems) => {
-		if (!!err)
-			return res.json(err);
-		return res.json({problems: problems});
-	});
+	if (!["others","mine"].includes(type))
+		return res.json({errmsg: "Bad type"});
+	ProblemModel.fetchN(vname, req.userId, type, directionStr, lastDt, MaxNbProblems,
+		(err,problems) => {
+			if (!!err)
+				return res.json(err);
+			return res.json({problems: problems});
+		}
+	);
 });
 
 function sanitizeUserInput(fen, instructions, solution)
-- 
2.44.0