public/javascripts/components/problems.js

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