X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fproblems.js;h=a95529234fbe9ebaa7766d984395661271424e9a;hb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;hp=897babbe7035886ff889e384ff86fa1100e48868;hpb=936dc463c969f648ae0bc81074ff3272c7c99697;p=vchess.git diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js index 897babbe..a9552923 100644 --- a/public/javascripts/components/problems.js +++ b/public/javascripts/components/problems.js @@ -1,4 +1,5 @@ Vue.component('my-problems', { + props: ["probId","settings"], data: function () { return { userId: user.id, @@ -8,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: "", @@ -19,60 +23,15 @@ Vue.component('my-problems', { }, }; }, + // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect template: `
-
- - - -
-
-
-

- {{ curProb.instructions }} -

-
- -
-

- {{ translations["Show solution"] }} -

-

- {{ curProb.solution }} -

-
- -
-
- - -
- - -
-

- {{ translate("Add a problem") }} -

+

{{ translate("Add a problem") }}

@@ -80,39 +39,28 @@ Vue.component('my-problems', { :placeholder='translate("Full FEN description")'/>
-

- {{ translate("Safe HTML tags allowed") }} -

- +

{{ translate("Safe HTML tags allowed") }}

+ - + - +
-
@@ -120,52 +68,108 @@ Vue.component('my-problems', {
-

- {{ nomoreMessage }} +

{{ nomoreMessage }}

+
+
+
+ + + +
+
+
+

{{ curProb.instructions }}

+
+ + +
+

+ {{ translate("Show solution") }}

+

{{ curProb.solution }}

+
+
+ + +
+ + +
`, + watch: { + probId: function() { + this.showProblem(this.probId); + }, + }, created: function() { - if (location.hash.length > 0) - this.showProblem(location.hash.slice(1)); + 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"); 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 + showProblem: function(pid) { + 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) { this.singletons.push(response.problem); this.curProb = response.problem; + this.display = (response.problem.uid == this.userId ? "mine" : "others"); } else this.noMoreProblems("Sorry, problem " + pid + " does not exist"); } ); } - }, - translate: function(text) { - return translations[text]; + else + this.display = (this.curProb.uid == this.userId ? "mine" : "others"); }, curProblems: function() { switch (this.display) @@ -178,8 +182,13 @@ Vue.component('my-problems', { }, // TODO?: get 50 from server but only show 10 at a time (for example) showNext: function(direction) { + const nomorePb = + problems => { + if (!problems || problems.length == 0) + this.noMoreProblems("No more problems in this direction"); + }; if (!this.curProb) - return this.fetchProblems(this.display, direction); + return this.fetchProblems(this.display, direction, nomorePb); // Show next problem (older or newer): let curProbs = this.curProblems(); // Try to find a neighbour problem in the direction, among current set @@ -191,12 +200,16 @@ Vue.component('my-problems', { } // 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); + this.fetchProblems(this.display, direction, problems => { + if (problems.length > 0) + { + // Ok, found something: + this.curProb = + this.findClosestNeighbor(this.curProb, curProbs, direction); + } + else + nomorePb(); + }); }, findClosestNeighbor: function(problem, probList, direction) { let neighbor = undefined; @@ -222,32 +235,35 @@ 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) { + fetchProblems: function(type, direction, cb) { 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; } } } ajax( - "/problems/" + variant.name, //TODO: use variant._id ? + "/problems/" + variant.id, "GET", { type: type, @@ -257,32 +273,37 @@ Vue.component('my-problems', { response => { if (response.problems.length > 0) { - Array.prototype.push.apply(problems, - response.problems.sort((p1,p2) => { return p1.added - p2.added; })); + Array.prototype.push.apply(problems, 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) + const otherArray = + (type == "mine" ? this.problems : this.myProblems); + if (otherArray.length == 0) this.display = type; + this.$forceUpdate(); //TODO... } + if (!!cb) + cb(response.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.name + "/" + pid, //TODO: with variant.id ? + "/problems/" + pid, "DELETE", response => { // Delete problem from the list on client side @@ -295,16 +316,24 @@ Vue.component('my-problems', { sendProblem: function() { // Send it to the server and close modal ajax( - "/problems/" + variant.name, //TODO: with variant.id ? + "/problems/" + variant.id, (this.modalProb.id > 0 ? "PUT" : "POST"), 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, + }); + if (!this.curProb && this.display != "mine") + this.display = "mine"; } else this.modalProb.id = 0;