+
+
+ {{ curProb.instructions }}
+
+
+
+
+
+
+ {{ translations["Show solution"] }}
+
+
+ {{ curProb.solution }}
+
+
+
+
-
`,
- computed: {
- sortedProblems: function() {
- // Newest problem first
- return this.problems.sort((p1,p2) => { return p2.added - p1.added; });
- },
- mailErrProblem: function() {
- return "mailto:contact@vchess.club?subject=[" + variant + " problems] error";
+ watch: {
+ queryHash: function(newQhash) {
+ if (!!newQhash)
+ {
+ // New query hash = "id=42"; get 42 as problem ID
+ const pid = parseInt(newQhash.substr(2));
+ this.showProblem(pid);
+ }
+ else
+ this.curProb = null; //(back to) list display
},
},
+ created: function() {
+ if (!!this.queryHash)
+ {
+ const pid = parseInt(this.queryHash.substr(2));
+ this.showProblem(pid);
+ }
+ else
+ this.firstFetch();
+ },
methods: {
- // Propagate "show problem" event to parent component (my-variant)
- bubbleUp: function(problem) {
- this.$emit('show-problem', JSON.stringify(problem));
+ 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];
+ },
+ curProblems: function() {
+ switch (this.display)
+ {
+ case "others":
+ return this.problems;
+ case "mine":
+ return this.myProblems;
+ }
+ },
+ // TODO?: get 50 from server but only show 10 at a time (for example)
+ showNext: function(direction) {
+ if (!this.curProb)
+ return this.fetchProblems(this.display, direction);
+ // Show next problem (older or newer):
+ let curProbs = this.curProblems();
+ // Try to find a neighbour problem in the direction, among current set
+ const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
+ if (!!neighbor)
+ {
+ this.curProb = neighbor;
+ return;
+ }
+ // 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 delta = Math.abs(prob.id - problem.id);
+ if (delta < smallestDistance &&
+ ((direction == "backward" && prob.id < problem.id)
+ || (direction == "forward" && prob.id > problem.id)))
+ {
+ neighbor = prob;
+ smallestDistance = delta;
+ }
+ }
+ return neighbor;
},
- fetchProblems: function(direction) {
- return; //TODO: re-activate after server side is implemented (see routes/all.js)
- if (this.problems.length == 0)
- return; //what could we do?!
- // Search for newest date (or oldest)
- let last_dt = this.problems[0].added;
- for (let i=0; i
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 == "others" ? "mine" : "others");
+ },
+ 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 last_dt) ||
+ (direction == "backward" && this.problems[i].added < last_dt))
+ {
+ last_dt = this.problems[i].added;
+ }
}
}
- ajax("/problems/" + variant, "GET", {
- direction: direction,
- last_dt: last_dt,
- }, response => {
- if (response.problems.length > 0)
- this.problems = response.problems;
- });
+ ajax(
+ "/problems/" + variant.id,
+ "GET",
+ {
+ 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;
+ }
+ }
+ );
},
- showNewproblemModal: function() {
+ previewProblem: function() {
+ if (!V.IsGoodFen(this.newProblem.fen))
+ return alert(translations["Bad FEN description"]);
+ if (this.newProblem.instructions.trim().length == 0)
+ return alert(translations["Empty instructions"]);
+ if (this.newProblem.solution.trim().length == 0)
+ return alert(translations["Empty solution"]);
+ this.modalProb.preview = true;
+ },
+ editProblem: function(prob) {
+ this.modalProb = prob;
document.getElementById("modal-newproblem").checked = true;
},
- postNewProblem: function() {
- const fen = document.getElementById("newpbFen").value;
- if (!V.IsGoodFen(fen))
- return alert("Bad FEN string");
- const instructions = document.getElementById("newpbInstructions").value;
- const solution = document.getElementById("newpbSolution").value;
- ajax("/problems/" + variant, "POST", {
- fen: fen,
- instructions: instructions,
- solution: solution,
- }, response => {
- document.getElementById("modal-newproblem").checked = false;
- });
+ deleteProblem: function(pid) {
+ ajax(
+ "/problems/" + variant.id + "/" + pid,
+ "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(
+ "/problems/" + variant.id,
+ (this.modalProb.id > 0 ? "PUT" : "POST"),
+ this.modalProb,
+ response => {
+ document.getElementById("modal-newproblem").checked = false;
+ if (this.modalProb.id == 0)
+ {
+ this.modalProb.added = Date.now();
+ this.modalProb.preview = false;
+ this.myProblems.push(JSON.parse(JSON.stringify(this.modalProb)));
+ }
+ else
+ this.modalProb.id = 0;
+ }
+ );
},
},
})