X-Git-Url: https://git.auder.net/pieces/Cwda/n_black_bishop.svg?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fproblems.js;h=d1ec9a215685151fabfde982eb66c47b4bcab878;hb=97da8720d3f33cb0c29079baf42c52ed047c3049;hp=00ea7692fbe143f6ed24ead379beb850ee28a704;hpb=582df3497b0f91dd4b645386a059eac9e98da1bb;p=vchess.git
diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 00ea7692..d1ec9a21 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -1,5 +1,5 @@
Vue.component('my-problems', {
- props: ["queryHash","settings"],
+ props: ["probId","settings"],
data: function () {
return {
userId: user.id,
@@ -9,10 +9,13 @@ Vue.component('my-problems', {
display: "others", //or "mine"
curProb: null, //(reference to) current displayed problem (if any)
showSolution: false,
+ nomoreMessage: "",
+ mode: "analyze", //for game component
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
+ uid: 0, //...also
fen: "",
instructions: "",
solution: "",
@@ -23,48 +26,50 @@ Vue.component('my-problems', {
template: `
-
-
+
-
- {{ curProb.instructions }}
-
+
{{ curProb.instructions }}
-
-
+
+
- {{ translations["Show solution"] }}
+ {{ translate("Show solution") }}
-
- {{ curProb.solution }}
-
+
{{ curProb.solution }}
-
- Back to list display
-
+ Back to list display
-
- Show problem
-
+ Show problem
-
- My problems (only)
+
+ My problems (only)
@@ -72,9 +77,7 @@ Vue.component('my-problems', {
-
@@ -122,35 +114,24 @@ Vue.component('my-problems', {
-
- {{ nomoreMessage }}
-
+ {{ nomoreMessage }}
`,
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
+ probId: function() {
+ this.showProblem(this.probId);
},
},
created: function() {
- if (!!this.queryHash)
- {
- const pid = parseInt(this.queryHash.substr(2));
- this.showProblem(pid);
- }
+ if (!!this.probId)
+ this.showProblem(this.probId);
else
this.firstFetch();
},
methods: {
+ translate: translate,
firstFetch: function() {
// Fetch most recent problems from server, for both lists
this.fetchProblems("others", "bacwkard");
@@ -159,15 +140,21 @@ Vue.component('my-problems', {
},
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
+ location.hash = "#problems?id=" + pid;
+ for (let parray of [this.singletons,this.problems,this.myProblems])
+ {
+ const pIdx = parray.findIndex(p => p.id == pid);
+ if (pIdx >= 0)
+ {
+ this.curProb = parray[pIdx];
+ break;
+ }
+ }
+ if (!this.curProb)
{
// Cannot find problem in current set; get from server, and add to singletons.
ajax(
- "/problems/" + variant.name + "/" + pid, //TODO: use variant._id ?
+ "/problems/" + variant.id + "/" + pid, //TODO: variant ID should not be required
"GET",
response => {
if (!!response.problem)
@@ -181,9 +168,6 @@ Vue.component('my-problems', {
);
}
},
- translate: function(text) {
- return translations[text];
- },
curProblems: function() {
switch (this.display)
{
@@ -239,27 +223,30 @@ Vue.component('my-problems', {
},
displayList: function() {
this.curProb = null;
- location.hash = "";
+ location.hash = "#problems";
// Fetch problems if first call (if #num, and then lists)
if (!this.listsInitialized)
this.firstFetch();
},
toggleListDisplay: function() {
- this.display = (this.display == "others" ? "mine" : "others");
+ const displays = ["mine","others"];
+ const curIndex = displays.findIndex(item => item == this.display);
+ this.display = displays[1-curIndex];
},
fetchProblems: function(type, direction) {
let problems = (type == "others" ? this.problems : this.myProblems);
+ // "last datetime" set at a value OK for an empty initial array
let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
- if (this.problems.length > 0)
+ if (problems.length > 0)
{
// 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))
+ if ((direction == "forward" && problems[i].added > last_dt) ||
+ (direction == "backward" && problems[i].added < last_dt))
{
- last_dt = this.problems[i].added;
+ last_dt = problems[i].added;
}
}
}
@@ -275,7 +262,7 @@ Vue.component('my-problems', {
if (response.problems.length > 0)
{
Array.prototype.push.apply(problems,
- response.problems.sort((p1,p2) => { return p1.added - p2.added; }));
+ response.problems.sort((p1,p2) => { return p2.added - p1.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)
@@ -285,21 +272,22 @@ Vue.component('my-problems', {
);
},
previewProblem: function() {
- if (!V.IsGoodFen(this.newProblem.fen))
+ if (!V.IsGoodFen(this.modalProb.fen))
return alert(translations["Bad FEN description"]);
- if (this.newProblem.instructions.trim().length == 0)
+ if (this.modalProb.instructions.trim().length == 0)
return alert(translations["Empty instructions"]);
- if (this.newProblem.solution.trim().length == 0)
+ if (this.modalProb.solution.trim().length == 0)
return alert(translations["Empty solution"]);
- this.modalProb.preview = true;
+ Vue.set(this.modalProb, "preview", true);
},
editProblem: function(prob) {
this.modalProb = prob;
+ Vue.set(this.modalProb, "preview", false);
document.getElementById("modal-newproblem").checked = true;
},
deleteProblem: function(pid) {
ajax(
- "/problems/" + variant.id + "/" + pid,
+ "/problems/" + pid,
"DELETE",
response => {
// Delete problem from the list on client side
@@ -317,11 +305,17 @@ Vue.component('my-problems', {
this.modalProb,
response => {
document.getElementById("modal-newproblem").checked = false;
+ Vue.set(this.modalProb, "preview", false);
if (this.modalProb.id == 0)
{
- this.modalProb.added = Date.now();
- this.modalProb.preview = false;
- this.myProblems.push(JSON.parse(JSON.stringify(this.modalProb)));
+ this.myProblems.unshift({
+ added: Date.now(),
+ id: response.id,
+ uid: user.id,
+ fen: this.modalProb.fen,
+ instructions: this.modalProb.instructions,
+ solution: this.modalProb.solution,
+ });
}
else
this.modalProb.id = 0;