Fix classifyObject() in Hall
[vchess.git] / client / src / views / Problems.vue
1 <template lang="pug">
2 main
3 input#modalNewprob.modal(
4 type="checkbox"
5 @change="fenFocusIfOpened($event)"
6 )
7 div#newprobDiv(
8 role="dialog"
9 data-checkbox="modalNewprob"
10 )
11 .card
12 label#closeNewprob.modal-close(for="modalNewprob")
13 fieldset
14 label(for="selectVariant") {{ st.tr["Variant"] }}
15 select#selectVariant(
16 v-model="curproblem.vid"
17 @change="changeVariant(curproblem)"
18 )
19 option(
20 v-for="v in [emptyVar].concat(st.variants)"
21 v-if="!v.noProblems"
22 :value="v.id"
23 :selected="curproblem.vid==v.id"
24 )
25 | {{ v.name }}
26 fieldset
27 input#inputFen(
28 type="text"
29 placeholder="FEN"
30 v-model="curproblem.fen"
31 @input="trySetDiagram(curproblem)"
32 )
33 #diagram(v-html="curproblem.diag")
34 fieldset
35 textarea(
36 :placeholder="st.tr['Instructions']"
37 v-model="curproblem.instruction"
38 )
39 p(v-html="parseHtml(curproblem.instruction)")
40 fieldset
41 textarea(
42 :placeholder="st.tr['Solution']"
43 v-model="curproblem.solution"
44 )
45 p(v-html="parseHtml(curproblem.solution)")
46 button(@click="sendProblem()") {{ st.tr["Send"] }}
47 #dialog.text-center {{ st.tr[infoMsg] }}
48 .row(v-if="showOne")
49 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
50 #topPage
51 .button-group(v-if="canIedit(curproblem.uid)")
52 button(@click="editProblem(curproblem)") {{ st.tr["Edit"] }}
53 button(@click="deleteProblem(curproblem)") {{ st.tr["Delete"] }}
54 span.vname {{ curproblem.vname }}
55 span.uname ({{ curproblem.uname }})
56 button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
57 button.nomargin(@click="gotoPrevNext(curproblem,1)")
58 | {{ st.tr["Previous_p"] }}
59 button.nomargin(@click="gotoPrevNext(curproblem,-1)")
60 | {{ st.tr["Next_p"] }}
61 p.oneInstructions.clickable(
62 v-html="parseHtml(curproblem.instruction)"
63 @click="curproblem.showSolution=!curproblem.showSolution"
64 )
65 | {{ st.tr["Show solution"] }}
66 p(
67 v-show="curproblem.showSolution"
68 v-html="parseHtml(curproblem.solution)"
69 )
70 .row(v-else)
71 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
72 #controls
73 button#newProblem(@click="prepareNewProblem()")
74 | {{ st.tr["New problem"] }}
75 div#myProblems(v-if="st.user.id > 0")
76 label(for="checkboxMine") {{ st.tr["My problems"] }}
77 input#checkboxMine(
78 type="checkbox"
79 v-model="onlyMine"
80 )
81 label(for="selectVariant") {{ st.tr["Variant"] }}
82 select#selectVariant(v-model="selectedVar")
83 option(
84 v-for="v in [emptyVar].concat(st.variants)"
85 v-if="!v.noProblems"
86 :value="v.id"
87 )
88 | {{ v.name }}
89 table#tProblems
90 tr
91 th {{ st.tr["Variant"] }}
92 th {{ st.tr["Instructions"] }}
93 th {{ st.tr["Number"] }}
94 tr(
95 v-for="p in problems[onlyMine ? 'mine' : 'others']"
96 v-show="onlyMine || !selectedVar || p.vid == selectedVar"
97 @click="setHrefPid(p)"
98 )
99 td {{ p.vname }}
100 td {{ firstChars(p.instruction) }}
101 td {{ p.id }}
102 button#loadMoreBtn(
103 v-if="hasMore[onlyMine ? 'mine' : 'others']"
104 @click="loadMore(onlyMine ? 'mine' : 'others')"
105 )
106 | {{ st.tr["Load more"] }}
107 BaseGame(
108 ref="basegame"
109 v-if="showOne"
110 :game="game"
111 )
112 </template>
113
114 <script>
115 import { store } from "@/store";
116 import { ajax } from "@/utils/ajax";
117 import { checkProblem } from "@/data/problemCheck";
118 import params from "@/parameters";
119 import { getDiagram } from "@/utils/printDiagram";
120 import { processModalClick } from "@/utils/modalClick";
121 import { ArrayFun } from "@/utils/array";
122 import BaseGame from "@/components/BaseGame.vue";
123 export default {
124 name: "my-problems",
125 components: {
126 BaseGame
127 },
128 data: function() {
129 return {
130 st: store.state,
131 emptyVar: {
132 vid: 0,
133 vname: ""
134 },
135 // Problem currently showed, or edited:
136 curproblem: {
137 id: 0, //used in case of edit
138 vid: 0,
139 fen: "",
140 diag: "",
141 instruction: "",
142 solution: "",
143 showSolution: false
144 },
145 loadedVar: 0, //corresponding to loaded V
146 selectedVar: 0, //to filter problems based on variant
147 problems: { "mine": [], "others": [] },
148 // timestamp of oldest showed problem:
149 cursor: {
150 mine: Number.MAX_SAFE_INTEGER,
151 others: Number.MAX_SAFE_INTEGER
152 },
153 // hasMore == TRUE: a priori there could be more problems to load
154 hasMore: { mine: true, others: true },
155 onlyMine: false,
156 showOne: false,
157 infoMsg: "",
158 game: {
159 players: [{ name: "Problem" }, { name: "Problem" }],
160 mode: "analyze"
161 }
162 };
163 },
164 created: function() {
165 const pid = this.$route.query["id"];
166 if (!!pid) this.showProblem(pid);
167 else this.loadMore("others", () => { this.loadMore("mine"); });
168 },
169 mounted: function() {
170 document.getElementById("newprobDiv")
171 .addEventListener("click", processModalClick);
172 },
173 watch: {
174 // st.variants changes only once, at loading from [] to [...]
175 "st.variants": function() {
176 // Set problems vname (either all are set or none)
177 let problems = this.problems["others"].concat(this.problems["mine"]);
178 if (problems.length > 0 && problems[0].vname == "")
179 problems.forEach(p => this.setVname(p));
180 },
181 $route: function(to) {
182 const pid = to.query["id"];
183 if (!!pid) this.showProblem(pid);
184 else {
185 if (this.cursor["others"] == Number.MAX_SAFE_INTEGER)
186 // Back from a single problem view at initial loading:
187 // problems lists are empty!
188 this.loadMore("others", () => { this.loadMore("mine"); });
189 this.showOne = false;
190 }
191 }
192 },
193 methods: {
194 fenFocusIfOpened: function(event) {
195 if (event.target.checked) {
196 this.infoMsg = "";
197 document.getElementById("inputFen").focus();
198 }
199 },
200 setVname: function(prob) {
201 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
202 },
203 // Add vname and user names:
204 decorate: function(problems, callback) {
205 if (this.st.variants.length > 0)
206 problems.forEach(p => this.setVname(p));
207 // Retrieve all problems' authors' names
208 let names = {};
209 problems.forEach(p => {
210 if (p.uid != this.st.user.id) names[p.uid] = "";
211 else p.uname = this.st.user.name;
212 });
213 if (Object.keys(names).length > 0) {
214 ajax(
215 "/users",
216 "GET",
217 {
218 data: { ids: Object.keys(names).join(",") },
219 success: (res2) => {
220 res2.users.forEach(u => {
221 names[u.id] = u.name;
222 });
223 problems.forEach(p => {
224 if (!p.uname)
225 p.uname = names[p.uid];
226 });
227 if (!!callback) callback();
228 }
229 }
230 );
231 } else if (!!callback) callback();
232 },
233 firstChars: function(text) {
234 let preparedText = text
235 // Replace line jumps and <br> by spaces
236 .replace(/\n/g, " ")
237 .replace(/<br\/?>/g, " ")
238 .replace(/<[^>]+>/g, "") //remove remaining HTML tags
239 .replace(/[ ]+/g, " ") //remove series of spaces by only one
240 .trim();
241 const maxLength = 32; //arbitrary...
242 if (preparedText.length > maxLength)
243 return preparedText.substr(0, 32) + "...";
244 return preparedText;
245 },
246 copyProblem: function(p1, p2) {
247 for (let key in p1) p2[key] = p1[key];
248 },
249 setHrefPid: function(p) {
250 // Change href => $route changes, watcher notices, call showProblem
251 const curHref = document.location.href;
252 document.location.href = curHref.split("?")[0] + "?id=" + p.id;
253 },
254 backToList: function() {
255 // Change href => $route change, watcher notices, reset showOne to false
256 document.location.href = document.location.href.split("?")[0];
257 },
258 resetCurProb: function() {
259 this.curproblem.id = 0;
260 this.curproblem.uid = 0;
261 this.curproblem.vid = "";
262 this.curproblem.vname = "";
263 this.curproblem.fen = "";
264 this.curproblem.diag = "";
265 this.curproblem.instruction = "";
266 this.curproblem.solution = "";
267 this.curproblem.showSolution = false;
268 },
269 parseHtml: function(txt) {
270 return !txt.match(/<[/a-zA-Z]+>/)
271 ? txt.replace(/\n/g, "<br/>") //no HTML tag
272 : txt;
273 },
274 changeVariant: function(prob) {
275 this.setVname(prob);
276 this.loadVariant(prob.vid, () => {
277 // Set FEN if possible (might not be correct yet)
278 if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
279 else prob.diag = "";
280 });
281 },
282 loadVariant: async function(vid, cb) {
283 // Condition: vid is a valid variant ID
284 this.loadedVar = 0;
285 const variant = this.st.variants.find(v => v.id == vid);
286 await import("@/variants/" + variant.name + ".js")
287 .then((vModule) => {
288 window.V = vModule[variant.name + "Rules"];
289 this.loadedVar = vid;
290 cb();
291 });
292 },
293 trySetDiagram: function(prob) {
294 // Problem edit: FEN could be wrong or incomplete,
295 // variant could not be ready, or not defined
296 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
297 this.setDiagram(prob);
298 else prob.diag = "";
299 },
300 setDiagram: function(prob) {
301 // Condition: prob.fen is correct and global V is ready
302 const parsedFen = V.ParseFen(prob.fen);
303 const args = {
304 position: parsedFen.position,
305 orientation: parsedFen.turn
306 };
307 prob.diag = getDiagram(args);
308 },
309 showProblem: function(p_id) {
310 const processWhenWeHaveProb = () => {
311 this.loadVariant(p.vid, () => {
312 this.onlyMine = (p.uid == this.st.user.id);
313 // The FEN is already checked at this stage:
314 this.game.vname = p.vname;
315 this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation
316 this.game.fenStart = p.fen;
317 this.game.fen = p.fen;
318 this.showOne = true;
319 // $nextTick to be sure $refs["basegame"] exists
320 this.$nextTick(() => {
321 this.$refs["basegame"].re_setVariables(this.game); });
322 this.curproblem.showSolution = false; //in case of
323 this.copyProblem(p, this.curproblem);
324 });
325 };
326 let p = undefined;
327 if (typeof p_id == "object") p = p_id;
328 else {
329 const problems = this.problems["others"].concat(this.problems["mine"]);
330 p = problems.find(prob => prob.id == p_id);
331 }
332 if (!p) {
333 // Bad luck: problem not in list. Get from server
334 ajax(
335 "/problems",
336 "GET",
337 {
338 data: { id: p_id },
339 success: (res) => {
340 this.decorate([res.problem], () => {
341 p = res.problem;
342 const mode = (p.uid == this.st.user.id ? "mine" : "others");
343 this.problems[mode].push(p);
344 processWhenWeHaveProb();
345 });
346 }
347 }
348 );
349 } else processWhenWeHaveProb();
350 },
351 gotoPrevNext: function(prob, dir) {
352 const mode = (this.onlyMine ? "mine" : "others");
353 const problems = this.problems[mode];
354 const startIdx = problems.findIndex(p => p.id == prob.id);
355 const nextIdx = startIdx + dir;
356 if (nextIdx >= 0 && nextIdx < problems.length)
357 this.setHrefPid(problems[nextIdx]);
358 else if (this.hasMore[mode]) {
359 this.loadMore(
360 mode,
361 (nbProbs) => {
362 if (nbProbs > 0) this.gotoPrevNext(prob, dir);
363 else alert(this.st.tr["No more problems"]);
364 }
365 );
366 }
367 else alert(this.st.tr["No more problems"]);
368 },
369 prepareNewProblem: function() {
370 this.resetCurProb();
371 window.doClick("modalNewprob");
372 },
373 sendProblem: function() {
374 const error = checkProblem(this.curproblem);
375 if (error) {
376 alert(this.st.tr[error]);
377 return;
378 }
379 const edit = this.curproblem.id > 0;
380 this.infoMsg = "Processing... Please wait";
381 ajax(
382 "/problems",
383 edit ? "PUT" : "POST",
384 {
385 data: { prob: this.curproblem },
386 success: (ret) => {
387 if (edit) {
388 let editedP = this.problems["mine"]
389 .find(p => p.id == this.curproblem.id);
390 if (!editedP)
391 // I'm an admin and edit another user' problem
392 editedP = this.problems["others"]
393 .find(p => p.id == this.curproblem.id);
394 this.copyProblem(this.curproblem, editedP);
395 this.showProblem(editedP);
396 }
397 else {
398 let newProblem = Object.assign({}, this.curproblem);
399 newProblem.id = ret.id;
400 newProblem.uid = this.st.user.id;
401 newProblem.uname = this.st.user.name;
402 this.problems["mine"] =
403 [newProblem].concat(this.problems["mine"]);
404 }
405 document.getElementById("modalNewprob").checked = false;
406 this.infoMsg = "";
407 }
408 }
409 );
410 },
411 canIedit: function(puid) {
412 return params.devs.concat([puid]).includes(this.st.user.id);
413 },
414 editProblem: function(prob) {
415 // prob.diag might correspond to some other problem or be empty:
416 this.setDiagram(prob); //V is loaded at this stage
417 this.copyProblem(prob, this.curproblem);
418 window.doClick("modalNewprob");
419 },
420 deleteProblem: function(prob) {
421 if (confirm(this.st.tr["Are you sure?"])) {
422 ajax(
423 "/problems",
424 "DELETE",
425 {
426 data: { id: prob.id },
427 success: () => {
428 const mode = prob.uid == (this.st.user.id ? "mine" : "others");
429 ArrayFun.remove(this.problems[mode], p => p.id == prob.id);
430 this.backToList();
431 }
432 }
433 );
434 }
435 },
436 loadMore: function(mode, cb) {
437 ajax(
438 "/problems",
439 "GET",
440 {
441 data: {
442 uid: this.st.user.id,
443 mode: mode,
444 cursor: this.cursor[mode]
445 },
446 success: (res) => {
447 const L = res.problems.length;
448 if (L > 0) {
449 this.cursor[mode] = res.problems[L - 1].added;
450 // Remove potential duplicates:
451 const pids = this.problems[mode].map(p => p.id);
452 ArrayFun.remove(res.problems, p => pids.includes(p.id), "all");
453 this.decorate(res.problems);
454 this.problems[mode] =
455 this.problems[mode].concat(res.problems)
456 // TODO: problems are alrady sorted, would just need to insert
457 // the current individual problem in list; more generally
458 // there is probably only one misclassified problem.
459 // (Unless the user navigated several times by URL to show a
460 // single problem...)
461 .sort((p1, p2) => p2.added - p1.added);
462 } else this.hasMore[mode] = false;
463 if (!!cb) cb(L);
464 }
465 }
466 );
467 }
468 }
469 };
470 </script>
471
472 <style lang="sass" scoped>
473 [type="checkbox"].modal+div .card
474 max-width: 767px
475 max-height: 100%
476
477 #inputFen
478 width: 100%
479
480 textarea
481 width: 100%
482
483 #diagram
484 margin: 0 auto
485 max-width: 400px
486
487 table#tProblems
488 max-height: 100%
489
490 button#loadMoreBtn
491 display: block
492 margin: 0 auto
493
494 #controls
495 margin: 0
496 width: 100%
497 text-align: center
498 & > *
499 margin: 0
500
501 p.oneInstructions
502 margin: 0
503 padding: 2px 5px
504 background-color: lightgreen
505
506 #myProblems
507 display: inline-block
508
509 #topPage
510 span.vname
511 font-weight: bold
512 padding-left: var(--universal-margin)
513 span.uname
514 padding-left: var(--universal-margin)
515 margin: 0 auto
516 & > .nomargin
517 margin: 0
518 & > .marginleft
519 margin: 0 0 0 15px
520
521 @media screen and (max-width: 767px)
522 #topPage
523 text-align: center
524 </style>