Almost finished problems logic. TODO: showProblem() part
[vchess.git] / 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 @click="fetchProblems('backward')">Previous</button>
10 <button @click="fetchProblems('forward')">Next</button>
11 <button @click="showNewproblemModal">New</button>
12 <my-problem-summary
13 v-for="(p,idx) in sortedProblems" v-bind:prob="p" v-bind:key="idx">
14 </my-problem-summary>
15 <input type="checkbox" id="modal-newproblem" class="modal">
16 <div role="dialog" aria-labelledby="newProblemTxt">
17 <div class="card newproblem">
18 <label for="modal-newproblem" class="modal-close"></label>
19 <h3 id="newProblemTxt">Add problem</h3>
20 <form @submit.prevent="postNewProblem">
21 <fieldset>
22 <label for="newpbFen">Fen</label>
23 <input type="text" id="newpbFen"
24 placeholder="Position [+ flags [+ turn]]"/>
25 </fieldset>
26 <fieldset>
27 <p class="emphasis">
28 Allowed HTML tags:
29 &lt;p&gt;,&lt;br&gt;,&lt,ul&gt;,&lt;ol&gt;,&lt;li&gt;
30 </p>
31 <label for="newpbInstructions">Instructions</label>
32 <textarea id="newpbInstructions" placeholder="Explain the problem here"/>
33 <label for="newpbSolution">Solution</label>
34 <textarea id="newpbSolution" placeholder="How to solve the problem?"/>
35 <button class="center-btn">Send</button>
36 </fieldset>
37 <p class="mistake-newproblem">
38 Note: if you made a mistake, please let me know at
39 <a :href="mailErrProblem">contact@vchess.club</a>
40 </p>
41 </form>
42 </div>
43 </div>
44 </div>
45 `,
46 computed: {
47 sortedProblems: function() {
48 console.log("call");
49 // Newest problem first
50 return this.problems.sort((p1,p2) => { return p2.added - p1.added; });
51 },
52 mailErrProblem: function() {
53 return "mailto:contact@vchess.club?subject=[" + variant + " problems] error";
54 },
55 },
56 methods: {
57 fetchProblems: function(direction) {
58 return; //TODO: re-activate after server side is implemented (see routes/all.js)
59 if (this.problems.length == 0)
60 return; //what could we do?!
61 // Search for newest date (or oldest)
62 let last_dt = this.problems[0].added;
63 for (let i=0; i<this.problems.length; i++)
64 {
65 if ((direction == "forward" && this.problems[i].added > last_dt) ||
66 (direction == "backward" && this.problems[i].added < last_dt))
67 {
68 last_dt = this.problems[i].added;
69 }
70 }
71 ajax("/problems/" + variant, "GET", {
72 direction: direction,
73 last_dt: last_dt,
74 }, response => {
75 if (response.problems.length > 0)
76 this.problems = response.problems;
77 });
78 },
79 showNewproblemModal: function() {
80 document.getElementById("modal-newproblem").checked = true;
81 },
82 postNewProblem: function() {
83 const fen = document.getElementById("newpbFen").value;
84 if (!V.IsGoodFen(fen))
85 return alert("Bad FEN string");
86 const instructions = document.getElementById("newpbInstructions").value;
87 const solution = document.getElementById("newpbSolution").value;
88 ajax("/problems/" + variant, "POST", {
89 fen: fen,
90 instructions: instructions,
91 solution: solution,
92 }, response => {
93 document.getElementById("modal-newproblem").checked = false;
94 });
95 },
96 },
97 })