Separate client and server codes. Keep everything in one git repo for simplicity
[vchess.git] / client / client_OLD / javascripts / components / problems.js
CommitLineData
4ecf423b 1Vue.component('my-problems', {
97da8720 2 props: ["probId","settings"],
da06a6eb
BA
3 data: function () {
4 return {
ff1d4c3f 5 userId: user.id,
81da2786 6 problems: [], //oldest first
ff1d4c3f 7 myProblems: [], //same, but only mine
936dc463
BA
8 singletons: [], //requested problems (using #num)
9 display: "others", //or "mine"
10 curProb: null, //(reference to) current displayed problem (if any)
ff1d4c3f 11 showSolution: false,
60d9063f 12 nomoreMessage: "",
97da8720 13 mode: "analyze", //for game component
936dc463 14 pbNum: 0, //to navigate directly to some problem
ff1d4c3f
BA
15 // New problem (to upload), or existing problem to edit:
16 modalProb: {
17 id: 0, //defined if it's an edit
badeb466 18 uid: 0, //...also
77fa6d1f 19 fen: "",
45109880
BA
20 instructions: "",
21 solution: "",
a9f262f3 22 preview: false,
45109880 23 },
da06a6eb
BA
24 };
25 },
be5efe81 26 // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect
4ecf423b 27 template: `
a5d56686 28 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
be5efe81
BA
29 <input type="checkbox" id="modal-newproblem" class="modal"/>
30 <div role="dialog" aria-labelledby="modalProblemTxt">
31 <div v-show="!modalProb.preview" class="card newproblem-form">
32 <label for="modal-newproblem" class="modal-close">
33 </label>
34 <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
35 <form @submit.prevent="previewProblem()">
36 <fieldset>
37 <label for="newpbFen">FEN</label>
38 <input id="newpbFen" type="text" v-model="modalProb.fen"
39 :placeholder='translate("Full FEN description")'/>
40 </fieldset>
41 <fieldset>
42 <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
43 <label for="newpbInstructions">{{ translate("Instructions") }}</label>
44 <textarea id="newpbInstructions" v-model="modalProb.instructions"
45 :placeholder='translate("Describe the problem goal")'>
46 </textarea>
47 <label for="newpbSolution">{{ translate("Solution") }}</label>
48 <textarea id="newpbSolution" v-model="modalProb.solution"
49 :placeholder='translate("How to solve the problem?")'>
50 </textarea>
51 <button class="center-btn">{{ translate("Preview") }}</button>
52 </fieldset>
53 </form>
54 </div>
55 <div v-show="modalProb.preview" class="card newproblem-preview">
56 <label for="modal-newproblem" class="modal-close"
57 @click="modalProb.preview=false">
58 </label>
59 <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
60 </my-problem-summary>
61 <div class="button-group">
62 <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
63 <button @click="sendProblem()">{{ translate("Send") }}</button>
64 </div>
65 </div>
66 </div>
67 <input id="modalNomore" type="checkbox" class="modal"/>
68 <div role="dialog" aria-labelledby="nomoreMessage">
69 <div class="card smallpad small-modal text-center">
70 <label for="modalNomore" class="modal-close"></label>
71 <h3 id="nomoreMessage" class="section">{{ nomoreMessage }}</h3>
72 </div>
73 </div>
a5d56686 74 <div id="problemControls" class="button-group">
badeb466
BA
75 <button :aria-label='translate("Previous problem(s)")' class="tooltip"
76 @click="showNext('backward')"
77 >
a5d56686
BA
78 <i class="material-icons">skip_previous</i>
79 </button>
badeb466
BA
80 <button v-if="!!userId" :aria-label='translate("Add a problem")'
81 class="tooltip" onClick="doClick('modal-newproblem')"
82 >
247356cd 83 {{ translate("New") }}
a5d56686 84 </button>
badeb466
BA
85 <button :aria-label='translate("Next problem(s)")' class="tooltip"
86 @click="showNext('forward')"
87 >
a5d56686
BA
88 <i class="material-icons">skip_next</i>
89 </button>
90 </div>
60d9063f 91 <div id="mainBoard" v-if="!!curProb">
ff1d4c3f 92 <div id="instructions-div" class="section-content">
badeb466 93 <p id="problem-instructions">{{ curProb.instructions }}</p>
ff1d4c3f 94 </div>
97da8720
BA
95 <my-game :fen="curProb.fen" :mode="mode" :allowMovelist="true"
96 :settings="settings">
60d9063f 97 </my-game>
ff1d4c3f
BA
98 <div id="solution-div" class="section-content">
99 <h3 class="clickable" @click="showSolution = !showSolution">
97da8720 100 {{ translate("Show solution") }}
ff1d4c3f 101 </h3>
badeb466 102 <p id="problem-solution" v-show="showSolution">{{ curProb.solution }}</p>
ff1d4c3f 103 </div>
badeb466 104 <button @click="displayList">Back to list display</button>
936dc463
BA
105 </div>
106 <div>
107 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
be5efe81 108 <button @click="() => showProblem(pbNum)">Show problem</button>
ff1d4c3f 109 </div>
badeb466
BA
110 <button v-if="!!userId" @click="toggleListDisplay"
111 :class="{'only-mine':display=='mine'}"
112 >
113 My problems (only)
8ef618ef 114 </button>
936dc463
BA
115 <my-problem-summary v-show="!curProb"
116 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
badeb466
BA
117 v-on:show-problem="() => showProblem(p.id)"
118 v-for="p in curProblems()" @click="curProb=p"
8ef618ef 119 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
da06a6eb 120 </my-problem-summary>
4ecf423b
BA
121 </div>
122 `,
582df349 123 watch: {
97da8720
BA
124 probId: function() {
125 this.showProblem(this.probId);
582df349
BA
126 },
127 },
298c42e6 128 created: function() {
97da8720
BA
129 if (!!this.probId)
130 this.showProblem(this.probId);
ff1d4c3f 131 else
936dc463 132 this.firstFetch();
298c42e6 133 },
da06a6eb 134 methods: {
97da8720 135 translate: translate,
936dc463
BA
136 firstFetch: function() {
137 // Fetch most recent problems from server, for both lists
138 this.fetchProblems("others", "bacwkard");
139 this.fetchProblems("mine", "bacwkard");
140 this.listsInitialized = true;
141 },
be5efe81 142 showProblem: function(pid) {
badeb466
BA
143 location.hash = "#problems?id=" + pid;
144 for (let parray of [this.singletons,this.problems,this.myProblems])
145 {
146 const pIdx = parray.findIndex(p => p.id == pid);
147 if (pIdx >= 0)
148 {
97da8720 149 this.curProb = parray[pIdx];
badeb466
BA
150 break;
151 }
152 }
97da8720 153 if (!this.curProb)
936dc463
BA
154 {
155 // Cannot find problem in current set; get from server, and add to singletons.
156 ajax(
97da8720 157 "/problems/" + variant.id + "/" + pid, //TODO: variant ID should not be required
936dc463
BA
158 "GET",
159 response => {
160 if (!!response.problem)
161 {
162 this.singletons.push(response.problem);
163 this.curProb = response.problem;
6b519a84 164 this.display = (response.problem.uid == this.userId ? "mine" : "others");
936dc463
BA
165 }
166 else
167 this.noMoreProblems("Sorry, problem " + pid + " does not exist");
168 }
169 );
170 }
6b519a84
BA
171 else
172 this.display = (this.curProb.uid == this.userId ? "mine" : "others");
ff1d4c3f 173 },
ff1d4c3f
BA
174 curProblems: function() {
175 switch (this.display)
176 {
936dc463 177 case "others":
ff1d4c3f 178 return this.problems;
936dc463 179 case "mine":
ff1d4c3f
BA
180 return this.myProblems;
181 }
81da2786 182 },
8ef618ef 183 // TODO?: get 50 from server but only show 10 at a time (for example)
ff1d4c3f 184 showNext: function(direction) {
9e76c73c
BA
185 const nomorePb =
186 problems => {
187 if (!problems || problems.length == 0)
188 this.noMoreProblems("No more problems in this direction");
189 };
936dc463 190 if (!this.curProb)
9e76c73c 191 return this.fetchProblems(this.display, direction, nomorePb);
8ef618ef 192 // Show next problem (older or newer):
ff1d4c3f 193 let curProbs = this.curProblems();
936dc463
BA
194 // Try to find a neighbour problem in the direction, among current set
195 const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
196 if (!!neighbor)
ff1d4c3f 197 {
936dc463
BA
198 this.curProb = neighbor;
199 return;
ff1d4c3f 200 }
936dc463
BA
201 // Boundary case: nothing in current set, need to fetch from server
202 const curSize = curProbs.length;
9e76c73c
BA
203 this.fetchProblems(this.display, direction, problems => {
204 if (problems.length > 0)
205 {
206 // Ok, found something:
207 this.curProb =
208 this.findClosestNeighbor(this.curProb, curProbs, direction);
209 }
210 else
211 nomorePb();
6b519a84 212 });
936dc463
BA
213 },
214 findClosestNeighbor: function(problem, probList, direction) {
215 let neighbor = undefined;
216 let smallestDistance = Number.MAX_SAFE_INTEGER;
217 for (let prob of probList)
ff1d4c3f 218 {
936dc463
BA
219 const delta = Math.abs(prob.id - problem.id);
220 if (delta < smallestDistance &&
221 ((direction == "backward" && prob.id < problem.id)
222 || (direction == "forward" && prob.id > problem.id)))
8ef618ef 223 {
936dc463
BA
224 neighbor = prob;
225 smallestDistance = delta;
8ef618ef 226 }
ff1d4c3f 227 }
936dc463
BA
228 return neighbor;
229 },
230 noMoreProblems: function(message) {
231 this.nomoreMessage = message;
232 let modalNomore = document.getElementById("modalNomore");
233 modalNomore.checked = true;
234 setTimeout(() => modalNomore.checked = false, 2000);
235 },
236 displayList: function() {
237 this.curProb = null;
badeb466 238 location.hash = "#problems";
936dc463
BA
239 // Fetch problems if first call (if #num, and then lists)
240 if (!this.listsInitialized)
241 this.firstFetch();
ff1d4c3f
BA
242 },
243 toggleListDisplay: function() {
badeb466
BA
244 const displays = ["mine","others"];
245 const curIndex = displays.findIndex(item => item == this.display);
246 this.display = displays[1-curIndex];
81da2786 247 },
6b519a84 248 fetchProblems: function(type, direction, cb) {
936dc463 249 let problems = (type == "others" ? this.problems : this.myProblems);
badeb466 250 // "last datetime" set at a value OK for an empty initial array
936dc463 251 let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
badeb466 252 if (problems.length > 0)
7931e479 253 {
936dc463
BA
254 // Search for newest date (or oldest)
255 last_dt = problems[0].added;
256 for (let i=1; i<problems.length; i++)
7931e479 257 {
badeb466
BA
258 if ((direction == "forward" && problems[i].added > last_dt) ||
259 (direction == "backward" && problems[i].added < last_dt))
936dc463 260 {
badeb466 261 last_dt = problems[i].added;
936dc463 262 }
7931e479
BA
263 }
264 }
936dc463 265 ajax(
582df349 266 "/problems/" + variant.id,
936dc463 267 "GET",
81da2786 268 {
936dc463
BA
269 type: type,
270 direction: direction,
271 last_dt: last_dt,
272 },
273 response => {
9e76c73c
BA
274 if (response.problems.length > 0)
275 {
276 Array.prototype.push.apply(problems, response.problems.sort(
277 (p1,p2) => { return p2.added - p1.added; }));
278 // If one list is empty but not the other, show the non-empty
279 const otherArray =
280 (type == "mine" ? this.problems : this.myProblems);
281 if (otherArray.length == 0)
282 this.display = type;
6b519a84 283 this.$forceUpdate(); //TODO...
9e76c73c
BA
284 }
285 if (!!cb)
286 cb(response.problems);
81da2786 287 }
936dc463 288 );
da06a6eb 289 },
8ef618ef 290 previewProblem: function() {
badeb466 291 if (!V.IsGoodFen(this.modalProb.fen))
e081ffe3 292 return alert(translations["Bad FEN description"]);
badeb466 293 if (this.modalProb.instructions.trim().length == 0)
6b5517b4 294 return alert(translations["Empty instructions"]);
badeb466 295 if (this.modalProb.solution.trim().length == 0)
6b5517b4 296 return alert(translations["Empty solution"]);
badeb466 297 Vue.set(this.modalProb, "preview", true);
45109880 298 },
936dc463
BA
299 editProblem: function(prob) {
300 this.modalProb = prob;
badeb466 301 Vue.set(this.modalProb, "preview", false);
936dc463
BA
302 document.getElementById("modal-newproblem").checked = true;
303 },
304 deleteProblem: function(pid) {
305 ajax(
badeb466 306 "/problems/" + pid,
936dc463
BA
307 "DELETE",
308 response => {
309 // Delete problem from the list on client side
310 let problems = this.curProblems();
311 const pIdx = problems.findIndex(p => p.id == pid);
312 problems.splice(pIdx, 1);
313 }
314 );
315 },
8ef618ef 316 sendProblem: function() {
45109880 317 // Send it to the server and close modal
8ef618ef 318 ajax(
582df349 319 "/problems/" + variant.id,
8ef618ef
BA
320 (this.modalProb.id > 0 ? "PUT" : "POST"),
321 this.modalProb,
322 response => {
323 document.getElementById("modal-newproblem").checked = false;
badeb466 324 Vue.set(this.modalProb, "preview", false);
8ef618ef
BA
325 if (this.modalProb.id == 0)
326 {
badeb466
BA
327 this.myProblems.unshift({
328 added: Date.now(),
329 id: response.id,
330 uid: user.id,
331 fen: this.modalProb.fen,
332 instructions: this.modalProb.instructions,
333 solution: this.modalProb.solution,
334 });
9e76c73c
BA
335 if (!this.curProb && this.display != "mine")
336 this.display = "mine";
8ef618ef
BA
337 }
338 else
339 this.modalProb.id = 0;
340 }
341 );
342 },
da06a6eb 343 },
4ecf423b 344})