public/javascripts/components/problems.js

   1 Vue.component('my-problems', {
   2     data: function () {
   3         return {
   4             userId: user.id,
   5             problems: [], //oldest first
   6             myProblems: [], //same, but only mine
   7             singletons: [], //requested problems (using #num)
   8             display: "others", //or "mine"
   9             curProb: null, //(reference to) current displayed problem (if any)
  10             showSolution: false,
  11             pbNum: 0, //to navigate directly to some problem
  12             // New problem (to upload), or existing problem to edit:
  13             modalProb: {
  14                 id: 0, //defined if it's an edit
  15                 fen: "",
  16                 instructions: "",
  17                 solution: "",
  18                 preview: false,
  19             },
  20         };
  21     },
  22     template: `
  23         <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
  24             <div id="problemControls" class="button-group">
  25                 <button :aria-label='translate("Previous problem(s)")' class="tooltip" @click="showNext('backward')">
  26                     <i class="material-icons">skip_previous</i>
  27                 </button>
  28                 <button :aria-label='translate("Add a problem")' class="tooltip" onClick="doClick('modal-newproblem')">
  29                     {{ translate("New") }}
  30                 </button>
  31                 <button :aria-label='translate("Next problem(s)")' class="tooltip" @click="showNext('forward')">
  32                     <i class="material-icons">skip_next</i>
  33                 </button>
  34             </div>
  35             <div id="mainBoard" v-show="!!curProb">
  36                 <div id="instructions-div" class="section-content">
  37                     <p id="problem-instructions">
  38                         {{ curProb.instructions }}
  39                     </p>
  40                 </div>
  41                 <my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true">
  42                 </my-board>
  43                 <div id="solution-div" class="section-content">
  44                     <h3 class="clickable" @click="showSolution = !showSolution">
  45                         {{ translations["Show solution"] }}
  46                     </h3>
  47                     <p id="problem-solution" v-show="showSolution">
  48                         {{ curProb.solution }}
  49                     </p>
  50                 </div>
  51                 <button @click="displayList()">
  52                     <span>Back to list display</span>
  53                 </button>
  54             </div>
  55             <div>
  56                 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
  57                 <button @click="showProblem()">
  58                     <span>Show problem</span>
  59                 </button>
  60             </div>
  61             <button v-if="!!userId" @click="toggleListDisplay()">
  62                 <span>My problems (only)</span>
  63             </button>
  64             <my-problem-summary v-show="!curProb"
  65                 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
  66                 v-for="p in curProblems" @click="curProb=p"
  67                 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
  68             </my-problem-summary>
  69             <input type="checkbox" id="modal-newproblem" class="modal"/>
  70             <div role="dialog" aria-labelledby="modalProblemTxt">
  71                 <div v-show="!modalProb.preview" class="card newproblem-form">
  72                     <label for="modal-newproblem" class="modal-close">
  73                     </label>
  74                     <h3 id="modalProblemTxt">
  75                         {{ translate("Add a problem") }}
  76                     </h3>
  77                     <form @submit.prevent="previewProblem()">
  78                         <fieldset>
  79                             <label for="newpbFen">FEN</label>
  80                             <input id="newpbFen" type="text" v-model="modalProb.fen"
  81                                 :placeholder='translate("Full FEN description")'/>
  82                         </fieldset>
  83                         <fieldset>
  84                             <p class="emphasis">
  85                                 {{ translate("Safe HTML tags allowed") }}
  86                             </p>
  87                             <label for="newpbInstructions">
  88                                 {{ translate("Instructions") }}
  89                             </label>
  90                             <textarea id="newpbInstructions" v-model="modalProb.instructions"
  91                                 :placeholder='translate("Describe the problem goal")'>
  92                             </textarea>
  93                             <label for="newpbSolution">
  94                                 {{ translate("Solution") }}
  95                             </label>
  96                             <textarea id="newpbSolution" v-model="modalProb.solution"
  97                                 :placeholder='translate("How to solve the problem?")'>
  98                             </textarea>
  99                             <button class="center-btn">
 100                                 {{ translate("Preview") }}
 101                             </button>
 102                         </fieldset>
 103                     </form>
 104                 </div>
 105                 <div v-show="modalProb.preview" class="card newproblem-preview">
 106                     <label for="modal-newproblem" class="modal-close">
 107                     </label>
 108                     <my-problem-summary v-bind:prob="modalProb" v-bind:userid="userId">
 109                     </my-problem-summary>
 110                     <div class="button-group">
 111                         <button @click="modalProb.preview=false">
 112                             {{ translate("Cancel") }}
 113                         </button>
 114                         <button @click="sendProblem()">
 115                             {{ translate("Send") }}
 116                         </button>
 117                     </div>
 118                 </div>
 119             </div>
 120             <input id="modalNomore" type="checkbox" class="modal"/>
 121             <div role="dialog" aria-labelledby="nomoreMessage">
 122                 <div class="card smallpad small-modal text-center">
 123                     <label for="modalNomore" class="modal-close"></label>
 124                     <h3 id="nomoreMessage" class="section">
 125                         {{ nomoreMessage }}
 126                     </h3>
 127                 </div>
 128             </div>
 129         </div>
 130     `,
 131     created: function() {
 132         // TODO: adapt this, #problems:28 ? (for example)
 133         if (location.hash.length > 0)
 134             this.showProblem(location.hash.slice(1));
 135         else
 136             this.firstFetch();
 137     },
 138     methods: {
 139         firstFetch: function() {
 140             // Fetch most recent problems from server, for both lists
 141             this.fetchProblems("others", "bacwkard");
 142             this.fetchProblems("mine", "bacwkard");
 143             this.listsInitialized = true;
 144         },
 145         showProblem: function(num) {
 146             const pid = num || this.pbNum;
 147             location.hash = "#" + pid;
 148             const pIdx = this.singletons.findIndex(p => p.id == pid);
 149             if (pIdx >= 0)
 150                 curProb = this.singletons[pIdx];
 151             else
 152             {
 153                 // Cannot find problem in current set; get from server, and add to singletons.
 154                 ajax(
 155                     "/problems/" + variant.name + "/" + pid, //TODO: use variant._id ?
 156                     "GET",
 157                     response => {
 158                         if (!!response.problem)
 159                         {
 160                             this.singletons.push(response.problem);
 161                             this.curProb = response.problem;
 162                         }
 163                         else
 164                             this.noMoreProblems("Sorry, problem " + pid + " does not exist");
 165                     }
 166                 );
 167             }
 168         },
 169         translate: function(text) {
 170             return translations[text];
 171         },
 172         curProblems: function() {
 173             switch (this.display)
 174             {
 175                 case "others":
 176                     return this.problems;
 177                 case "mine":
 178                     return this.myProblems;
 179             }
 180         },
 181         // TODO?: get 50 from server but only show 10 at a time (for example)
 182         showNext: function(direction) {
 183             if (!this.curProb)
 184                 return this.fetchProblems(this.display, direction);
 185             // Show next problem (older or newer):
 186             let curProbs = this.curProblems();
 187             // Try to find a neighbour problem in the direction, among current set
 188             const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
 189             if (!!neighbor)
 190             {
 191                 this.curProb = neighbor;
 192                 return;
 193             }
 194             // Boundary case: nothing in current set, need to fetch from server
 195             const curSize = curProbs.length;
 196             this.fetchProblems(this.display, direction);
 197             const newSize = curProbs.length;
 198             if (curSize == newSize) //no problems found
 199                 return this.noMoreProblems("No more problems in this direction");
 200             // Ok, found something:
 201             this.curProb = this.findClosestNeighbor(this.curProb, curProbs, direction);
 202         },
 203         findClosestNeighbor: function(problem, probList, direction) {
 204             let neighbor = undefined;
 205             let smallestDistance = Number.MAX_SAFE_INTEGER;
 206             for (let prob of probList)
 207             {
 208                 const delta = Math.abs(prob.id - problem.id);
 209                 if (delta < smallestDistance &&
 210                     ((direction == "backward" && prob.id < problem.id)
 211                     || (direction == "forward" && prob.id > problem.id)))
 212                 {
 213                     neighbor = prob;
 214                     smallestDistance = delta;
 215                 }
 216             }
 217             return neighbor;
 218         },
 219         noMoreProblems: function(message) {
 220             this.nomoreMessage = message;
 221             let modalNomore = document.getElementById("modalNomore");
 222             modalNomore.checked = true;
 223             setTimeout(() => modalNomore.checked = false, 2000);
 224         },
 225         displayList: function() {
 226             this.curProb = null;
 227             location.hash = "";
 228             // Fetch problems if first call (if #num, and then lists)
 229             if (!this.listsInitialized)
 230                 this.firstFetch();
 231         },
 232         toggleListDisplay: function() {
 233             this.display = (this.display == "others" ? "mine" : "others");
 234         },
 235         fetchProblems: function(type, direction) {
 236             let problems = (type == "others" ? this.problems : this.myProblems);
 237             let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
 238             if (this.problems.length > 0)
 239             {
 240                 // Search for newest date (or oldest)
 241                 last_dt = problems[0].added;
 242                 for (let i=1; i<problems.length; i++)
 243                 {
 244                     if ((direction == "forward" && this.problems[i].added > last_dt) ||
 245                         (direction == "backward" && this.problems[i].added < last_dt))
 246                     {
 247                         last_dt = this.problems[i].added;
 248                     }
 249                 }
 250             }
 251             ajax(
 252                 "/problems/" + variant.name, //TODO: use variant._id ?
 253                 "GET",
 254                 {
 255                     type: type,
 256                     direction: direction,
 257                     last_dt: last_dt,
 258                 },
 259                 response => {
 260                     if (response.problems.length > 0)
 261                     {
 262                         Array.prototype.push.apply(problems,
 263                             response.problems.sort((p1,p2) => { return p1.added - p2.added; }));
 264                         // If one list is empty but not the other, show the non-empty
 265                         const otherArray = (type == "mine" ? this.problems : this.myProblems);
 266                         if (problems.length > 0 && otherArray.length == 0)
 267                             this.display = type;
 268                     }
 269                 }
 270             );
 271         },
 272         previewProblem: function() {
 273             if (!V.IsGoodFen(this.newProblem.fen))
 274                 return alert(translations["Bad FEN description"]);
 275             if (this.newProblem.instructions.trim().length == 0)
 276                 return alert(translations["Empty instructions"]);
 277             if (this.newProblem.solution.trim().length == 0)
 278                 return alert(translations["Empty solution"]);
 279             this.modalProb.preview = true;
 280         },
 281         editProblem: function(prob) {
 282             this.modalProb = prob;
 283             document.getElementById("modal-newproblem").checked = true;
 284         },
 285         deleteProblem: function(pid) {
 286             ajax(
 287                 "/problems/" + variant.name + "/" + pid, //TODO: with variant.id ?
 288                 "DELETE",
 289                 response => {
 290                     // Delete problem from the list on client side
 291                     let problems = this.curProblems();
 292                     const pIdx = problems.findIndex(p => p.id == pid);
 293                     problems.splice(pIdx, 1);
 294                 }
 295             );
 296         },
 297         sendProblem: function() {
 298             // Send it to the server and close modal
 299             ajax(
 300                 "/problems/" + variant.name, //TODO: with variant.id ?
 301                 (this.modalProb.id > 0 ? "PUT" : "POST"),
 302                 this.modalProb,
 303                 response => {
 304                     document.getElementById("modal-newproblem").checked = false;
 305                     if (this.modalProb.id == 0)
 306                     {
 307                         this.modalProb.added = Date.now();
 308                         this.modalProb.preview = false;
 309                         this.myProblems.push(JSON.parse(JSON.stringify(this.modalProb)));
 310                     }
 311                     else
 312                         this.modalProb.id = 0;
 313                 }
 314             );
 315         },
 316     },
 317 })