On the way to problems: saving state [not functional yet]

[vchess.git] / public / javascripts / components / problems.js

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index dc32052..594d6e6 100644 (file)
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -1,23 +1,81 @@
-//TODO: list problems as FEN (quickly rendered), by date, with possible filtering per variant(?)
-//click on a problem ==> land on variant page with mode==friend, FEN prefilled... ok
-
-// get 10 first problems, and buttons next<>previous send date + "before" or "after"
-// need database: sqlite !
-
-// form "new problem" fen(position/turn/flags[guess]), instructions, solution (mandatory)
-// ==> upload on server in sandbox
-//
-// Atomic rules, atomic game, atomic problems(list drawn position
-//   + summary(first chars of instructions) + timedate)... one big Vue ? with components
-//
-// click on problem ==> masque problems, affiche game tab, launch new game Friend with
-//   FEN + turn + flags + rappel instructions / solution on click sous l'échiquier
-
 Vue.component('my-problems', {
-       //props: ['vobj'],
+       data: function () {
+               return {
+                       problems: problemArray //initial value
+               };
+       },
        template: `
-               <div class="variant col-sm-12">
-                       <p>Hello</p>
+               <div>
+                       <button>Previous</button>
+                       <button>Next</button>
+                       <button @click="showNewproblemModal">New</button>
+                       <my-problem-summary
+                               v-for="(p,idx) in sortedProblems",
+                               v-bind:prob="p",
+                               v-bind:key="idx",
+                               @click="showProblem(p)"
+                       </my-problem-summary>
+                       <input type="checkbox" id="modal-newproblem" class="modal">
+                       <div role="dialog" aria-labelledby="newProblemTxt">
+                               <div class="card newproblem">
+                                       <label for="modal-newproblem" class="modal-close"></label>
+                                       <h3 id="newProblemTxt">Add problem</h3>
+                                       <form @submit.prevent="postNewProblem">
+                                               <fieldset>
+                                                       <label for="newpbFen">Fen</label>
+                                                       <input type="text" id="newpbFen" placeholder="Position [+ flags [+ turn]]"/>
+                                               </fieldset>
+                                               <fieldset>
+                                                       <p class="emphasis">
+                                                               Allowed HTML tags:
+                                                               &lt;p&gt;,&lt;br&gt;,&lt,ul&gt;,&lt;ol&gt;,&lt;li&gt;
+                                                       </p>
+                                                       <label for="newpbInstructions">Instructions</label>
+                                                       <textarea id="newpbInstructions" placeholder="Explain the problem here"/>
+                                                       <label for="newpbSolution">Solution</label>
+                                                       <textarea id="newpbSolution" placeholder="How to solve the problem?"/>
+                                                       <button class="center-btn">Send</button>
+                                               </fieldset>
+                                               <p class="mistake-newproblem">
+                                                       Note: if you made a mistake, please let me know at
+                                                       <a :href="mailErrProblem">contact@vchess.club</a>
+                                               </p>
+                                       </form>
+                               </div>
+                       </div>
                </div>
        `,
+       computed: {
+               sortedProblems: function() {
+                       // Newest problem first
+                       return problems.sort((p1,p2) => { return p2.added - p1.added; });
+               },
+               mailErrProblem: function() {
+                       return "mailto:contact@vchess.club?subject=[" + variant + " problems] error";
+               },
+       },
+       methods: {
+               fetchProblems: function(direction) {
+                       // TODO: ajax call return list of max 10 problems
+                       // Do not do anything if no older problems (and store this result in cache!)
+                       // TODO: ajax call return list of max 10 problems
+                       // Do not do anything if no newer problems
+               },
+               showProblem: function(prob) {
+                       //TODO: send event with object prob.fen, prob.instructions, prob.solution
+                       //Event should propagate to game, which set mode=="problem" + other variables
+                       //click on a problem ==> land on variant page with mode==friend, FEN prefilled... ok
+                       // click on problem ==> masque problems, affiche game tab, launch new game Friend with
+                       //   FEN + turn + flags + rappel instructions / solution on click sous l'échiquier
+               },
+               showNewproblemModal: function() {
+                       document.getElementById("modal-newproblem").checked = true;
+               },
+               postNewProblem: function() {
+                       const fen = document.getElementById("newpbFen").value;
+                       const instructions = document.getElementById("newpbInstructions").value;
+                       const solution = document.getElementById("newpbSolution").value;
+                       
+               },
+       },
 })