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="newProblem()")
   6       label#closeNewprob.modal-close(for="modalNewprob")
   7       form(@submit.prevent="newProblem()" @keyup.enter="newProblem()")
   8         fieldset
   9           label(for="selectVariant") {{ st.tr["Variant"] }}
  10           select#selectVariant(v-model="newproblem.vid" @change="loadVariant()")
  11             option(v-for="v in [emptyVar].concat(st.variants)" :value="v.id"
  12                 :selected="newproblem.vid==v.id")
  13               | {{ v.name }}
  14         fieldset
  15           label(for="inputFen") FEN
  16           input#inputFen(type="text" v-model="newproblem.fen" @input="tryGetDiagram()")
  17         fieldset
  18           textarea#instructions(:placeholder="st.tr['Instructions']")
  19           textarea#solution(:placeholder="st.tr['Solution']")
  20       #preview
  21         div(v-html="curDiag")
  22         p instru: v-html=... .replace("\n", "<br/>") --> si pas de tags détectés !
  23         p solution: v-html=...
  24       button(@click="newProblem()") {{ st.tr["Send problem"] }}
  25       #dialog.text-center {{ st.tr[infoMsg] }}
  26   .row
  27     .col-sm-12
  28       button#newProblem(onClick="doClick('modalNewprob')") {{ st.tr["New problem"] }}
  29   .row
  30     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
  31       label(for="checkboxMine") {{ st.tr["My problems"] }}
  32       input#checkboxMine(type="checkbox" v-model="onlyMines")
  33       label(for="selectVariant") {{ st.tr["Variant"] }}
  34       select#selectVariant(v-model="newproblem.vid")
  35         option(v-for="v in [emptyVar].concat(st.variants)" :value="v.id")
  36           | {{ v.name }}
  37       // TODO: nice problems printing :: same as in preview ==> subComponent (inlined?)
  38       div(v-for="p in problems" v-show="showProblem(p)")
  39         p {{ p.vid }}
  40         p {{ p.fen }}
  41         p {{ p.instruction }}
  42         p {{ p.solution }}
  43 </template>
  44
  45 <script>
  46 import { store } from "@/store";
  47 import { ajax } from "@/utils/ajax";
  48 import { checkProblem } from "@/data/problemCheck";
  49 import { getDiagram } from "@/utils/printDiagram";
  50 export default {
  51   name: "my-problems",
  52   data: function() {
  53     return {
  54       emptyVar: {
  55         vid: 0,
  56         vname: "",
  57       },
  58       newproblem: {
  59         vid: 0,
  60         fen: "",
  61         instruction: "",
  62         solution: "",
  63       },
  64       onlyMines: false,
  65       st: store.state,
  66       problems: [],
  67       infoMsg: "",
  68       curVar: 0,
  69       curDiag: "",
  70     };
  71   },
  72   created: function() {
  73     ajax("/problems", "GET", (res) => {
  74       this.problems = res.problems;
  75     });
  76   },
  77   methods: {
  78     showProblem: function(p) {
  79       return (this.vid == 0 || p.vid == this.vid) &&
  80         (!this.onlyMines || p.uid != this.st.user.id);
  81     },
  82     loadVariant: async function() {
  83       if (this.newproblem.vid == 0)
  84         return;
  85       this.curVar = 0;
  86       const variant = this.st.variants.find(v => v.id == this.newproblem.vid);
  87       const vModule = await import("@/variants/" + variant.name + ".js");
  88       window.V = vModule.VariantRules;
  89       this.curVar = this.newproblem.vid;
  90       this.tryGetDiagram(); //the FEN might be already filled
  91     },
  92     tryGetDiagram: async function() {
  93       if (this.newproblem.vid == 0)
  94         return;
  95       // Check through curVar if V is ready:
  96       if (this.curVar == this.newproblem.vid && V.IsGoodFen(this.newproblem.fen))
  97       {
  98         const parsedFen = V.ParseFen(this.newproblem.fen);
  99         const args = {
 100           position: parsedFen.position,
 101           orientation: parsedFen.turn,
 102         };
 103         this.curDiag = getDiagram(args);
 104       }
 105       else
 106         this.curDiag = "<p>FEN not yet correct</p>";
 107     },
 108     newProblem: function() {
 109       const error = checkProblem(this.newproblem);
 110       if (!!error)
 111         return alert(error);
 112       ajax("/problems", "POST", {prob:this.newproblem}, (ret) => {
 113         this.infoMsg = this.st.tr["Problem sent!"];
 114         let newProblem = Object.Assign({}, this.newproblem);
 115         newProblem.id = ret.id;
 116         this.problems = this.problems.concat(newProblem);
 117       });
 118     },
 119   },
 120 };
 121 </script>
 122
 123 <style lang="sass" scoped>
 124 #newProblem
 125   display: block
 126   margin: 10px auto 5px auto
 127 </style>