Improve 'connected' display in case of multi-accounts on same browser
[vchess.git] / client / src / views / Problems.vue
CommitLineData
89021f18
BA
1<template lang="pug">
2main
910d631b
BA
3 input#modalNewprob.modal(
4 type="checkbox"
09d37571 5 @change="fenFocusIfOpened($event)"
910d631b
BA
6 )
7 div#newprobDiv(
8 role="dialog"
9 data-checkbox="modalNewprob"
10 )
866842c3 11 .card
89021f18 12 label#closeNewprob.modal-close(for="modalNewprob")
604b951e
BA
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 :value="v.id"
22 :selected="curproblem.vid==v.id"
23 )
24 | {{ v.name }}
25 fieldset
604b951e
BA
26 input#inputFen(
27 type="text"
bd76b456 28 placeholder="FEN"
604b951e
BA
29 v-model="curproblem.fen"
30 @input="trySetDiagram(curproblem)"
31 )
bd76b456 32 #diagram(v-html="curproblem.diag")
604b951e 33 fieldset
bd76b456 34 textarea(
604b951e
BA
35 :placeholder="st.tr['Instructions']"
36 v-model="curproblem.instruction"
37 )
38 p(v-html="parseHtml(curproblem.instruction)")
39 fieldset
bd76b456 40 textarea(
604b951e
BA
41 :placeholder="st.tr['Solution']"
42 v-model="curproblem.solution"
43 )
44 p(v-html="parseHtml(curproblem.solution)")
45 button(@click="sendProblem()") {{ st.tr["Send"] }}
89021f18 46 #dialog.text-center {{ st.tr[infoMsg] }}
604b951e 47 .row(v-if="showOne")
866842c3 48 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
bd76b456 49 #topPage
d7c00f6a
BA
50 .button-group(v-if="st.user.id == curproblem.uid")
51 button(@click="editProblem(curproblem)") {{ st.tr["Edit"] }}
52 button(@click="deleteProblem(curproblem)") {{ st.tr["Delete"] }}
2f258c37 53 span.vname {{ curproblem.vname }}
98fb976e 54 span.uname ({{ curproblem.uname }})
bd76b456 55 button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
d7c00f6a
BA
56 button.nomargin(@click="gotoPrevNext($event,curproblem,1)")
57 | {{ st.tr["Previous"] }}
58 button.nomargin(@click="gotoPrevNext($event,curproblem,-1)")
feaf1bf7 59 | {{ st.tr["Next_p"] }}
866842c3 60 p.oneInstructions.clickable(
2f258c37 61 v-html="parseHtml(curproblem.instruction)"
bd76b456
BA
62 @click="curproblem.showSolution=!curproblem.showSolution"
63 )
604b951e
BA
64 | {{ st.tr["Show solution"] }}
65 p(
66 v-show="curproblem.showSolution"
67 v-html="parseHtml(curproblem.solution)"
68 )
69 .row(v-else)
89021f18 70 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
bd76b456 71 #controls
f37790f7 72 button#newProblem(@click="prepareNewProblem()")
bd76b456
BA
73 | {{ st.tr["New problem"] }}
74 label(for="checkboxMine") {{ st.tr["My problems"] }}
75 input#checkboxMine(
76 type="checkbox"
77 v-model="onlyMines"
604b951e 78 )
bd76b456
BA
79 label(for="selectVariant") {{ st.tr["Variant"] }}
80 select#selectVariant(v-model="selectedVar")
81 option(
82 v-for="v in [emptyVar].concat(st.variants)"
83 :value="v.id"
84 )
85 | {{ v.name }}
9b35f4a9 86 table#tProblems
bd76b456
BA
87 tr
88 th {{ st.tr["Variant"] }}
89 th {{ st.tr["Instructions"] }}
2f258c37 90 th {{ st.tr["Number"] }}
bd76b456 91 tr(
6808d7a1 92 v-for="p in problems"
bd76b456
BA
93 v-show="displayProblem(p)"
94 @click="setHrefPid(p)"
95 )
96 td {{ p.vname }}
2f258c37
BA
97 td {{ firstChars(p.instruction) }}
98 td {{ p.id }}
910d631b
BA
99 BaseGame(
100 v-if="showOne"
101 :game="game"
910d631b 102 )
89021f18
BA
103</template>
104
105<script>
106import { store } from "@/store";
107import { ajax } from "@/utils/ajax";
108import { checkProblem } from "@/data/problemCheck";
109import { getDiagram } from "@/utils/printDiagram";
bd76b456
BA
110import { processModalClick } from "@/utils/modalClick";
111import { ArrayFun } from "@/utils/array";
604b951e 112import BaseGame from "@/components/BaseGame.vue";
89021f18
BA
113export default {
114 name: "my-problems",
604b951e 115 components: {
6808d7a1 116 BaseGame
604b951e 117 },
89021f18
BA
118 data: function() {
119 return {
604b951e 120 st: store.state,
89021f18
BA
121 emptyVar: {
122 vid: 0,
6808d7a1 123 vname: ""
89021f18 124 },
604b951e
BA
125 // Problem currently showed, or edited:
126 curproblem: {
127 id: 0, //used in case of edit
89021f18
BA
128 vid: 0,
129 fen: "",
604b951e 130 diag: "",
89021f18
BA
131 instruction: "",
132 solution: "",
6808d7a1 133 showSolution: false
89021f18 134 },
604b951e
BA
135 loadedVar: 0, //corresponding to loaded V
136 selectedVar: 0, //to filter problems based on variant
89021f18 137 problems: [],
604b951e
BA
138 onlyMines: false,
139 showOne: false,
89021f18 140 infoMsg: "",
604b951e 141 game: {
6808d7a1
BA
142 players: [{ name: "Problem" }, { name: "Problem" }],
143 mode: "analyze"
144 }
89021f18
BA
145 };
146 },
147 created: function() {
6808d7a1
BA
148 ajax("/problems", "GET", res => {
149 // Show newest problem first:
150 this.problems = res.problems.sort((p1, p2) => p2.added - p1.added);
604b951e 151 if (this.st.variants.length > 0)
bd76b456
BA
152 this.problems.forEach(p => this.setVname(p));
153 // Retrieve all problems' authors' names
154 let names = {};
155 this.problems.forEach(p => {
6808d7a1 156 if (p.uid != this.st.user.id) names[p.uid] = "";
6808d7a1 157 else p.uname = this.st.user.name;
bd76b456 158 });
2f258c37
BA
159 const showOneIfPid = () => {
160 const pid = this.$route.query["id"];
6808d7a1 161 if (pid) this.showProblem(this.problems.find(p => p.id == pid));
2f258c37 162 };
6808d7a1
BA
163 if (Object.keys(names).length > 0) {
164 ajax("/users", "GET", { ids: Object.keys(names).join(",") }, res2 => {
165 res2.users.forEach(u => {
166 names[u.id] = u.name;
167 });
c9c0c57a
BA
168 this.problems.forEach(p => {
169 if (!p.uname)
170 p.uname = names[p.uid];
171 });
6808d7a1
BA
172 showOneIfPid();
173 });
174 } else showOneIfPid();
89021f18
BA
175 });
176 },
bd76b456 177 mounted: function() {
6808d7a1
BA
178 document
179 .getElementById("newprobDiv")
180 .addEventListener("click", processModalClick);
bd76b456 181 },
604b951e
BA
182 watch: {
183 // st.variants changes only once, at loading from [] to [...]
6808d7a1 184 "st.variants": function() {
604b951e
BA
185 // Set problems vname (either all are set or none)
186 if (this.problems.length > 0 && this.problems[0].vname == "")
187 this.problems.forEach(p => this.setVname(p));
188 },
6808d7a1 189 $route: function(to) {
bd76b456 190 const pid = to.query["id"];
6808d7a1
BA
191 if (pid) this.showProblem(this.problems.find(p => p.id == pid));
192 else this.showOne = false;
193 }
98fb976e 194 },
89021f18 195 methods: {
09d37571
BA
196 fenFocusIfOpened: function(event) {
197 if (event.target.checked) {
198 this.infoMsg = "";
199 document.getElementById("inputFen").focus();
200 }
201 },
604b951e
BA
202 setVname: function(prob) {
203 prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
204 },
2f258c37
BA
205 firstChars: function(text) {
206 let preparedText = text
207 // Replace line jumps and <br> by spaces
6808d7a1
BA
208 .replace(/\n/g, " ")
209 .replace(/<br\/?>/g, " ")
2f258c37
BA
210 .replace(/<[^>]+>/g, "") //remove remaining HTML tags
211 .replace(/[ ]+/g, " ") //remove series of spaces by only one
212 .trim();
213 const maxLength = 32; //arbitrary...
214 if (preparedText.length > maxLength)
6808d7a1 215 return preparedText.substr(0, 32) + "...";
2f258c37
BA
216 return preparedText;
217 },
604b951e 218 copyProblem: function(p1, p2) {
6808d7a1 219 for (let key in p1) p2[key] = p1[key];
604b951e 220 },
bd76b456
BA
221 setHrefPid: function(p) {
222 // Change href => $route changes, watcher notices, call showProblem
223 const curHref = document.location.href;
224 document.location.href = curHref.split("?")[0] + "?id=" + p.id;
225 },
226 backToList: function() {
227 // Change href => $route change, watcher notices, reset showOne to false
228 document.location.href = document.location.href.split("?")[0];
229 },
604b951e
BA
230 resetCurProb: function() {
231 this.curproblem.id = 0;
232 this.curproblem.uid = 0;
233 this.curproblem.vid = "";
234 this.curproblem.vname = "";
235 this.curproblem.fen = "";
236 this.curproblem.diag = "";
237 this.curproblem.instruction = "";
238 this.curproblem.solution = "";
239 this.curproblem.showSolution = false;
89021f18 240 },
604b951e
BA
241 parseHtml: function(txt) {
242 return !txt.match(/<[/a-zA-Z]+>/)
243 ? txt.replace(/\n/g, "<br/>") //no HTML tag
244 : txt;
245 },
246 changeVariant: function(prob) {
247 this.setVname(prob);
6808d7a1
BA
248 this.loadVariant(prob.vid, () => {
249 // Set FEN if possible (might not be correct yet)
250 if (V.IsGoodFen(prob.fen)) this.setDiagram(prob);
251 });
604b951e
BA
252 },
253 loadVariant: async function(vid, cb) {
254 // Condition: vid is a valid variant ID
255 this.loadedVar = 0;
256 const variant = this.st.variants.find(v => v.id == vid);
89021f18
BA
257 const vModule = await import("@/variants/" + variant.name + ".js");
258 window.V = vModule.VariantRules;
604b951e
BA
259 this.loadedVar = vid;
260 cb();
261 },
262 trySetDiagram: function(prob) {
263 // Problem edit: FEN could be wrong or incomplete,
264 // variant could not be ready, or not defined
265 if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
266 this.setDiagram(prob);
89021f18 267 },
604b951e
BA
268 setDiagram: function(prob) {
269 // Condition: prob.fen is correct and global V is ready
270 const parsedFen = V.ParseFen(prob.fen);
271 const args = {
272 position: parsedFen.position,
6808d7a1 273 orientation: parsedFen.turn
604b951e
BA
274 };
275 prob.diag = getDiagram(args);
89021f18 276 },
604b951e 277 displayProblem: function(p) {
6808d7a1 278 return (
866842c3 279 (!this.selectedVar || p.vid == this.selectedVar) &&
6808d7a1
BA
280 ((this.onlyMines && p.uid == this.st.user.id) ||
281 (!this.onlyMines && p.uid != this.st.user.id))
282 );
604b951e
BA
283 },
284 showProblem: function(p) {
6808d7a1
BA
285 this.loadVariant(p.vid, () => {
286 // The FEN is already checked at this stage:
6808d7a1 287 this.game.vname = p.vname;
e71161fb 288 this.game.mycolor = V.ParseFen(p.fen).turn; //diagram orientation
6808d7a1
BA
289 this.game.fen = p.fen;
290 this.$set(this.game, "fenStart", p.fen);
291 this.copyProblem(p, this.curproblem);
292 this.showOne = true;
293 });
604b951e 294 },
d7c00f6a
BA
295 gotoPrevNext: function(e, prob, dir) {
296 const startIdx = this.problems.findIndex(p => p.id == prob.id);
297 let nextIdx = startIdx + dir;
298 while (
299 nextIdx >= 0 &&
300 nextIdx < this.problems.length &&
301 ((this.onlyMines && this.problems[nextIdx].uid != this.st.user.id) ||
302 (!this.onlyMines && this.problems[nextIdx].uid == this.st.user.id))
303 )
304 nextIdx += dir;
305 if (nextIdx >= 0 && nextIdx < this.problems.length)
306 this.setHrefPid(this.problems[nextIdx]);
307 else
308 alert(this.st.tr["No more problems"]);
309 },
f37790f7
BA
310 prepareNewProblem: function() {
311 this.resetCurProb();
312 window.doClick("modalNewprob");
313 },
604b951e
BA
314 sendProblem: function() {
315 const error = checkProblem(this.curproblem);
6808d7a1 316 if (error) {
866842c3 317 alert(this.st.tr[error]);
6808d7a1
BA
318 return;
319 }
604b951e
BA
320 const edit = this.curproblem.id > 0;
321 this.infoMsg = "Processing... Please wait";
322 ajax(
323 "/problems",
324 edit ? "PUT" : "POST",
6808d7a1
BA
325 { prob: this.curproblem },
326 ret => {
327 if (edit) {
604b951e
BA
328 let editedP = this.problems.find(p => p.id == this.curproblem.id);
329 this.copyProblem(this.curproblem, editedP);
c9c0c57a 330 this.showProblem(editedP);
0cd02605 331 }
6808d7a1 332 else {
604b951e
BA
333 let newProblem = Object.assign({}, this.curproblem);
334 newProblem.id = ret.id;
bd76b456
BA
335 newProblem.uid = this.st.user.id;
336 newProblem.uname = this.st.user.name;
57b3f30e 337 this.problems = [newProblem].concat(this.problems);
604b951e 338 }
b638a2e7 339 document.getElementById("modalNewprob").checked = false;
c9c0c57a 340 this.infoMsg = "";
604b951e
BA
341 }
342 );
343 },
344 editProblem: function(prob) {
bec548e7
BA
345 // prob.diag might correspond to some other problem or be empty:
346 this.setDiagram(prob); //V is loaded at this stage
604b951e 347 this.copyProblem(prob, this.curproblem);
6808d7a1 348 window.doClick("modalNewprob");
604b951e
BA
349 },
350 deleteProblem: function(prob) {
6808d7a1
BA
351 if (confirm(this.st.tr["Are you sure?"])) {
352 ajax("/problems", "DELETE", { id: prob.id }, () => {
bd76b456
BA
353 ArrayFun.remove(this.problems, p => p.id == prob.id);
354 this.backToList();
355 });
356 }
6808d7a1
BA
357 }
358 }
89021f18
BA
359};
360</script>
361
362<style lang="sass" scoped>
bd76b456
BA
363[type="checkbox"].modal+div .card
364 max-width: 767px
365 max-height: 100%
910d631b 366
bd76b456
BA
367#inputFen
368 width: 100%
910d631b 369
bd76b456
BA
370textarea
371 width: 100%
910d631b 372
bd76b456
BA
373#diagram
374 margin: 0 auto
375 max-width: 400px
910d631b 376
9b35f4a9
BA
377table#tProblems
378 max-height: 100%
379
bd76b456
BA
380#controls
381 margin: 0
382 width: 100%
383 text-align: center
384 & > *
385 margin: 0
2f258c37 386
866842c3
BA
387p.oneInstructions
388 margin: 0
389 padding: 2px 5px
390 background-color: lightgreen
391
bd76b456 392#topPage
2f258c37 393 span.vname
bd76b456 394 font-weight: bold
feae89d3 395 padding-left: var(--universal-margin)
2f258c37
BA
396 span.uname
397 padding-left: var(--universal-margin)
bd76b456
BA
398 margin: 0 auto
399 & > .nomargin
400 margin: 0
401 & > .marginleft
402 margin: 0 0 0 15px
403
2f258c37
BA
404@media screen and (max-width: 767px)
405 #topPage
406 text-align: center
89021f18 407</style>