X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fproblems.js;h=a95529234fbe9ebaa7766d984395661271424e9a;hb=b955c65b942d09d24b5c3bed0d755d4f2f8f71f1;hp=6edab93d9b5264d9e66e51fc4f9852272dcc5e8b;hpb=badeb466c977ed9a8e1b464a2236001126decb9e;p=vchess.git diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js index 6edab93d..a9552923 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, @@ -10,6 +10,7 @@ Vue.component('my-problems', { 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: { @@ -22,56 +23,9 @@ Vue.component('my-problems', { }, }; }, + // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect template: `
-
- - - -
-
-
-

{{ curProb.instructions }}

-
- - -
-

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

-

{{ curProb.solution }}

-
- -
-
- - -
- - -
@@ -117,68 +71,105 @@ Vue.component('my-problems', {

{{ nomoreMessage }}

+
+ + + +
+
+
+

{{ curProb.instructions }}

+
+ + +
+

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

+

{{ curProb.solution }}

+
+ +
+
+ + +
+ + +
`, 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"); this.fetchProblems("mine", "bacwkard"); this.listsInitialized = true; }, - showProblem: function(num) { - const pid = num || this.pbNum; + 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) { - curProb = parray[pIdx]; + this.curProb = parray[pIdx]; break; } } - if (!curProb) + 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) @@ -191,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 @@ -204,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; @@ -245,7 +245,7 @@ Vue.component('my-problems', { 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); @@ -273,13 +273,17 @@ Vue.component('my-problems', { response => { if (response.problems.length > 0) { - Array.prototype.push.apply(problems, - response.problems.sort((p1,p2) => { return p2.added - p1.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); } ); }, @@ -328,6 +332,8 @@ Vue.component('my-problems', { instructions: this.modalProb.instructions, solution: this.modalProb.solution, }); + if (!this.curProb && this.display != "mine") + this.display = "mine"; } else this.modalProb.id = 0;