On the way to problems: saving state [not functional yet]
[vchess.git] / public / javascripts / components / problems.js
... / ...
CommitLineData
1Vue.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})