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