public/javascripts/components/problems.js

   1 Vue.component('my-problems', {
   2     data: function () {
   3         return {
   4             problems: problemArray //initial value
   5         };
   6     },
   7     template: `
   8         <div>
   9             <button>Previous</button>
  10             <button>Next</button>
  11             <button @click="showNewproblemModal">New</button>
  12             <my-problem-summary
  13                 v-for="(p,idx) in sortedProblems",
  14                 v-bind:prob="p",
  15                 v-bind:key="idx",
  16                 @click="showProblem(p)"
  17             </my-problem-summary>
  18             <input type="checkbox" id="modal-newproblem" class="modal">
  19             <div role="dialog" aria-labelledby="newProblemTxt">
  20                 <div class="card newproblem">
  21                     <label for="modal-newproblem" class="modal-close"></label>
  22                     <h3 id="newProblemTxt">Add problem</h3>
  23                     <form @submit.prevent="postNewProblem">
  24                         <fieldset>
  25                             <label for="newpbFen">Fen</label>
  26                             <input type="text" id="newpbFen" placeholder="Position [+ flags [+ turn]]"/>
  27                         </fieldset>
  28                         <fieldset>
  29                             <p class="emphasis">
  30                                 Allowed HTML tags:
  31                                 &lt;p&gt;,&lt;br&gt;,&lt,ul&gt;,&lt;ol&gt;,&lt;li&gt;
  32                             </p>
  33                             <label for="newpbInstructions">Instructions</label>
  34                             <textarea id="newpbInstructions" placeholder="Explain the problem here"/>
  35                             <label for="newpbSolution">Solution</label>
  36                             <textarea id="newpbSolution" placeholder="How to solve the problem?"/>
  37                             <button class="center-btn">Send</button>
  38                         </fieldset>
  39                         <p class="mistake-newproblem">
  40                             Note: if you made a mistake, please let me know at
  41                             <a :href="mailErrProblem">contact@vchess.club</a>
  42                         </p>
  43                     </form>
  44                 </div>
  45             </div>
  46         </div>
  47     `,
  48     computed: {
  49         sortedProblems: function() {
  50             // Newest problem first
  51             return problems.sort((p1,p2) => { return p2.added - p1.added; });
  52         },
  53         mailErrProblem: function() {
  54             return "mailto:contact@vchess.club?subject=[" + variant + " problems] error";
  55         },
  56     },
  57     methods: {
  58         fetchProblems: function(direction) {
  59             // TODO: ajax call return list of max 10 problems
  60             // Do not do anything if no older problems (and store this result in cache!)
  61             // TODO: ajax call return list of max 10 problems
  62             // Do not do anything if no newer problems
  63         },
  64         showProblem: function(prob) {
  65             //TODO: send event with object prob.fen, prob.instructions, prob.solution
  66             //Event should propagate to game, which set mode=="problem" + other variables
  67             //click on a problem ==> land on variant page with mode==friend, FEN prefilled... ok
  68             // click on problem ==> masque problems, affiche game tab, launch new game Friend with
  69             //   FEN + turn + flags + rappel instructions / solution on click sous l'échiquier
  70         },
  71         showNewproblemModal: function() {
  72             document.getElementById("modal-newproblem").checked = true;
  73         },
  74         postNewProblem: function() {
  75             const fen = document.getElementById("newpbFen").value;
  76             const instructions = document.getElementById("newpbInstructions").value;
  77             const solution = document.getElementById("newpbSolution").value;
  78
  79         },
  80     },
  81 })