client/src/views/Problems.vue

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