client/next_src/views/Problem.vue

   1 //TODO: new problem form + problem visualisation, like Game.vue (but simpler)
   2 // --> mode analyze, moves = [], "load problem"
   3         <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
   4             <input type="checkbox" id="modal-newproblem" class="modal"/>
   5             <div role="dialog" aria-labelledby="modalProblemTxt">
   6                 <div v-show="!modalProb.preview" class="card newproblem-form">
   7                     <label for="modal-newproblem" class="modal-close">
   8                     </label>
   9                     <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
  10                     <form @submit.prevent="previewProblem()">
  11                         <fieldset>
  12                             <label for="newpbFen">FEN</label>
  13                             <input id="newpbFen" type="text" v-model="modalProb.fen"
  14                                 :placeholder='translate("Full FEN description")'/>
  15                         </fieldset>
  16                         <fieldset>
  17                             <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
  18                             <label for="newpbInstructions">{{ translate("Instructions") }}</label>
  19                             <textarea id="newpbInstructions" v-model="modalProb.instructions"
  20                                 :placeholder='translate("Describe the problem goal")'>
  21                             </textarea>
  22                             <label for="newpbSolution">{{ translate("Solution") }}</label>
  23                             <textarea id="newpbSolution" v-model="modalProb.solution"
  24                                 :placeholder='translate("How to solve the problem?")'>
  25                             </textarea>
  26                             <button class="center-btn">{{ translate("Preview") }}</button>
  27                         </fieldset>
  28                     </form>
  29                 </div>
  30                 <div v-show="modalProb.preview" class="card newproblem-preview">
  31                     <label for="modal-newproblem" class="modal-close"
  32                         @click="modalProb.preview=false">
  33                     </label>
  34                     <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
  35                     </my-problem-summary>
  36                     <div class="button-group">
  37                         <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
  38                         <button @click="sendProblem()">{{ translate("Send") }}</button>
  39                     </div>
  40                 </div>
  41             </div>
  42         previewProblem: function() {
  43             if (!V.IsGoodFen(this.modalProb.fen))
  44                 return alert(translations["Bad FEN description"]);
  45             if (this.modalProb.instructions.trim().length == 0)
  46                 return alert(translations["Empty instructions"]);
  47             if (this.modalProb.solution.trim().length == 0)
  48                 return alert(translations["Empty solution"]);
  49             Vue.set(this.modalProb, "preview", true);
  50         },
  51         editProblem: function(prob) {
  52             this.modalProb = prob;
  53             Vue.set(this.modalProb, "preview", false);
  54             document.getElementById("modal-newproblem").checked = true;
  55         },
  56         deleteProblem: function(pid) {
  57             ajax(
  58                 "/problems/" + pid,
  59                 "DELETE",
  60                 response => {
  61                     // Delete problem from the list on client side
  62                     let problems = this.curProblems();
  63                     const pIdx = problems.findIndex(p => p.id == pid);
  64                     problems.splice(pIdx, 1);
  65                 }
  66             );
  67         },
  68         sendProblem: function() {
  69             // Send it to the server and close modal
  70             ajax(
  71                 "/problems/" + variant.id,
  72                 (this.modalProb.id > 0 ? "PUT" : "POST"),
  73                 this.modalProb,
  74                 response => {
  75                     document.getElementById("modal-newproblem").checked = false;
  76                     Vue.set(this.modalProb, "preview", false);
  77                     if (this.modalProb.id == 0)
  78                     {
  79                         this.myProblems.unshift({
  80                             added: Date.now(),
  81                             id: response.id,
  82                             uid: user.id,
  83                             fen: this.modalProb.fen,
  84                             instructions: this.modalProb.instructions,
  85                             solution: this.modalProb.solution,
  86                         });
  87                         if (!this.curProb && this.display != "mine")
  88                             this.display = "mine";
  89                     }
  90                     else
  91                         this.modalProb.id = 0;
  92                 }
  93             );
  94         },