client/src/views/Problems.vue

   1 <template lang="pug">
   2 main
   3   input#modalNewprob.modal(type="checkbox" @change="infoMsg=''")
   4   div#newprobDiv(role="dialog" data-checkbox="modalNewprob")
   5     .card(@keyup.enter="sendProblem()")
   6       label#closeNewprob.modal-close(for="modalNewprob")
   7       fieldset
   8         label(for="selectVariant") {{ st.tr["Variant"] }}
   9         select#selectVariant(
  10           v-model="curproblem.vid"
  11           @change="changeVariant(curproblem)"
  12         )
  13           option(
  14             v-for="v in [emptyVar].concat(st.variants)"
  15             :value="v.id"
  16             :selected="curproblem.vid==v.id"
  17           )
  18             | {{ v.name }}
  19       fieldset
  20         label(for="inputFen") FEN
  21         input#inputFen(
  22           type="text"
  23           v-model="curproblem.fen"
  24           @input="trySetDiagram(curproblem)"
  25         )
  26         div(v-html="curproblem.diag")
  27       fieldset
  28         textarea#instructions(
  29           :placeholder="st.tr['Instructions']"
  30           v-model="curproblem.instruction"
  31         )
  32         p(v-html="parseHtml(curproblem.instruction)")
  33       fieldset
  34         textarea#solution(
  35           :placeholder="st.tr['Solution']"
  36           v-model="curproblem.solution"
  37         )
  38         p(v-html="parseHtml(curproblem.solution)")
  39       button(@click="sendProblem()") {{ st.tr["Send"] }}
  40       #dialog.text-center {{ st.tr[infoMsg] }}
  41   .row
  42     .col-sm-12
  43       button#newProblem(onClick="doClick('modalNewprob')")
  44         | {{ st.tr["New problem"] }}
  45   .row(v-if="showOne")
  46     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  47       #actions
  48         button(@click="showOne=false") {{ st.tr["Back to list"] }}
  49         button(
  50           v-if="st.user.id == curproblem.uid"
  51           @click="editProblem(curproblem)"
  52         )
  53           | {{ st.tr["Edit"] }}
  54         button(
  55           v-if="st.user.id == curproblem.uid"
  56           @click="deleteProblem(curproblem)"
  57         )
  58           | {{ st.tr["Delete"] }}
  59       h4 {{ curproblem.vname }}
  60       p(v-html="parseHtml(curproblem.instruction)")
  61       h4(@click="curproblem.showSolution=!curproblem.showSolution")
  62         | {{ st.tr["Show solution"] }}
  63       p(
  64         v-show="curproblem.showSolution"
  65         v-html="parseHtml(curproblem.solution)"
  66       )
  67   .row(v-else)
  68     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  69       label(for="checkboxMine") {{ st.tr["My problems"] }}
  70       input#checkboxMine(
  71         type="checkbox"
  72         v-model="onlyMines"
  73       )
  74       label(for="selectVariant") {{ st.tr["Variant"] }}
  75       select#selectVariant(v-model="selectedVar")
  76         option(
  77           v-for="v in [emptyVar].concat(st.variants)"
  78           :value="v.id"
  79         )
  80           | {{ v.name }}
  81       div(
  82         v-for="p in problems"
  83         v-show="displayProblem(p)"
  84         @click="showProblem(p)"
  85       )
  86         h4 {{ p.vname }}
  87         p {{ p.fen }}
  88         p(v-html="p.instruction")
  89   BaseGame(v-if="showOne" :game="game" :vr="vr")
  90 </template>
  91
  92 <script>
  93 // TODO: si showProblem(p), changer URL (ajouter problem ID)
  94 // Et si au lancement l'URL comprend un pid, alors showOne=true et curproblem=...
  95
  96 import { store } from "@/store";
  97 import { ajax } from "@/utils/ajax";
  98 import { checkProblem } from "@/data/problemCheck";
  99 import { getDiagram } from "@/utils/printDiagram";
 100 import BaseGame from "@/components/BaseGame.vue";
 101 export default {
 102   name: "my-problems",
 103   components: {
 104     BaseGame,
 105   },
 106   data: function() {
 107     return {
 108       st: store.state,
 109       emptyVar: {
 110         vid: 0,
 111         vname: "",
 112       },
 113       // Problem currently showed, or edited:
 114       curproblem: {
 115         id: 0, //used in case of edit
 116         vid: 0,
 117         fen: "",
 118         diag: "",
 119         instruction: "",
 120         solution: "",
 121         showSolution: false,
 122       },
 123       loadedVar: 0, //corresponding to loaded V
 124       selectedVar: 0, //to filter problems based on variant
 125       problems: [],
 126       onlyMines: false,
 127       showOne: false,
 128       infoMsg: "",
 129       vr: null, //"variant rules" object initialized from FEN
 130       game: {
 131         players:[{name:"Problem"},{name:"Problem"}],
 132         mode: "analyze",
 133       },
 134     };
 135   },
 136   created: function() {
 137     ajax("/problems", "GET", (res) => {
 138       this.problems = res.problems;
 139       if (this.st.variants.length > 0)
 140         this.problems.forEach(p => this.setVname(p))
 141     });
 142   },
 143   watch: {
 144     // st.variants changes only once, at loading from [] to [...]
 145     "st.variants": function(variantArray) {
 146       // Set problems vname (either all are set or none)
 147       if (this.problems.length > 0 && this.problems[0].vname == "")
 148         this.problems.forEach(p => this.setVname(p));
 149     },
 150   },
 151   methods: {
 152     setVname: function(prob) {
 153       prob.vname = this.st.variants.find(v => v.id == prob.vid).name;
 154     },
 155     copyProblem: function(p1, p2) {
 156       for (let key in p1)
 157         p2[key] = p1[key];
 158     },
 159     resetCurProb: function() {
 160       this.curproblem.id = 0;
 161       this.curproblem.uid = 0;
 162       this.curproblem.vid = "";
 163       this.curproblem.vname = "";
 164       this.curproblem.fen = "";
 165       this.curproblem.diag = "";
 166       this.curproblem.instruction = "";
 167       this.curproblem.solution = "";
 168       this.curproblem.showSolution = false;
 169     },
 170     parseHtml: function(txt) {
 171       return !txt.match(/<[/a-zA-Z]+>/)
 172         ? txt.replace(/\n/g, "<br/>") //no HTML tag
 173         : txt;
 174     },
 175     changeVariant: function(prob) {
 176       this.setVname(prob);
 177       this.loadVariant(
 178         prob.vid,
 179         () => {
 180           // Set FEN if possible (might not be correct yet)
 181           if (V.IsGoodFen(prob.fen))
 182             this.setDiagram(prob);
 183         }
 184       );
 185     },
 186     loadVariant: async function(vid, cb) {
 187       // Condition: vid is a valid variant ID
 188       this.loadedVar = 0;
 189       const variant = this.st.variants.find(v => v.id == vid);
 190       const vModule = await import("@/variants/" + variant.name + ".js");
 191       window.V = vModule.VariantRules;
 192       this.loadedVar = vid;
 193       cb();
 194     },
 195     trySetDiagram: function(prob) {
 196       // Problem edit: FEN could be wrong or incomplete,
 197       // variant could not be ready, or not defined
 198       if (prob.vid > 0 && this.loadedVar == prob.vid && V.IsGoodFen(prob.fen))
 199         this.setDiagram(prob);
 200     },
 201     setDiagram: function(prob) {
 202       // Condition: prob.fen is correct and global V is ready
 203       const parsedFen = V.ParseFen(prob.fen);
 204       const args = {
 205         position: parsedFen.position,
 206         orientation: parsedFen.turn,
 207       };
 208       prob.diag = getDiagram(args);
 209     },
 210     displayProblem: function(p) {
 211       return ((this.selectedVar == 0 || p.vid == this.selectedVar) &&
 212         ((this.onlyMines && p.uid == this.st.user.id)
 213           || (!this.onlyMines && p.uid != this.st.user.id)));
 214     },
 215     showProblem: function(p) {
 216       this.loadVariant(
 217         p.vid,
 218         () => {
 219           // The FEN is already checked at this stage:
 220           this.vr = new V(p.fen);
 221           this.game.vname = p.vname;
 222           this.game.mycolor = this.vr.turn; //diagram orientation
 223           this.game.fen = p.fen;
 224           this.$set(this.game, "fenStart", p.fen);
 225           this.copyProblem(p, this.curproblem);
 226           this.showOne = true;
 227         }
 228       );
 229     },
 230     sendProblem: function() {
 231       const error = checkProblem(this.curproblem);
 232       if (!!error)
 233         return alert(error);
 234       const edit = this.curproblem.id > 0;
 235       this.infoMsg = "Processing... Please wait";
 236       ajax(
 237         "/problems",
 238         edit ? "PUT" : "POST",
 239         {prob: this.curproblem},
 240         (ret) => {
 241           if (edit)
 242           {
 243             let editedP = this.problems.find(p => p.id == this.curproblem.id);
 244             this.copyProblem(this.curproblem, editedP);
 245           }
 246           else //new problem
 247           {
 248             let newProblem = Object.assign({}, this.curproblem);
 249             newProblem.id = ret.id;
 250             this.problems = this.problems.concat(newProblem);
 251           }
 252           this.resetCurProb();
 253           this.infoMsg = "";
 254         }
 255       );
 256     },
 257     editProblem: function(prob) {
 258       if (!prob.diag)
 259         this.setDiagram(prob); //possible because V is loaded at this stage
 260       this.copyProblem(prob, this.curproblem);
 261       doClick('modalNewprob');
 262     },
 263     deleteProblem: function(prob) {
 264       if (confirm(this.st.tr["Are you sure?"]))
 265         ajax("/problems", "DELETE", {pid:prob.id});
 266     },
 267   },
 268 };
 269 </script>
 270
 271 <style lang="sass" scoped>
 272 #newProblem
 273   display: block
 274   margin: 10px auto 5px auto
 275 </style>