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