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>