Commit | Line | Data |
---|---|---|
4ecf423b | 1 | Vue.component('my-problems', { |
da06a6eb BA |
2 | data: function () { |
3 | return { | |
4 | problems: problemArray //initial value | |
5 | }; | |
6 | }, | |
4ecf423b | 7 | template: ` |
da06a6eb | 8 | <div> |
7931e479 BA |
9 | <button @click="fetchProblems('backward')">Previous</button> |
10 | <button @click="fetchProblems('forward')">Next</button> | |
da06a6eb | 11 | <button @click="showNewproblemModal">New</button> |
c794dbb8 | 12 | <my-problem-summary v-on:show-problem="bubbleUp(p)" |
7931e479 | 13 | v-for="(p,idx) in sortedProblems" v-bind:prob="p" v-bind:key="idx"> |
da06a6eb BA |
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> | |
7931e479 BA |
23 | <input type="text" id="newpbFen" |
24 | placeholder="Position [+ flags [+ turn]]"/> | |
da06a6eb BA |
25 | </fieldset> |
26 | <fieldset> | |
27 | <p class="emphasis"> | |
28 | Allowed HTML tags: | |
29 | <p>,<br>,<,ul>,<ol>,<li> | |
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> | |
4ecf423b BA |
44 | </div> |
45 | `, | |
da06a6eb BA |
46 | computed: { |
47 | sortedProblems: function() { | |
48 | // Newest problem first | |
7931e479 | 49 | return this.problems.sort((p1,p2) => { return p2.added - p1.added; }); |
da06a6eb BA |
50 | }, |
51 | mailErrProblem: function() { | |
52 | return "mailto:contact@vchess.club?subject=[" + variant + " problems] error"; | |
53 | }, | |
54 | }, | |
55 | methods: { | |
c794dbb8 BA |
56 | // Propagate "show problem" event to parent component (my-variant) |
57 | bubbleUp: function(problem) { | |
58 | this.$emit('show-problem', JSON.stringify(problem)); | |
59 | }, | |
da06a6eb | 60 | fetchProblems: function(direction) { |
7931e479 BA |
61 | return; //TODO: re-activate after server side is implemented (see routes/all.js) |
62 | if (this.problems.length == 0) | |
63 | return; //what could we do?! | |
64 | // Search for newest date (or oldest) | |
65 | let last_dt = this.problems[0].added; | |
66 | for (let i=0; i<this.problems.length; i++) | |
67 | { | |
68 | if ((direction == "forward" && this.problems[i].added > last_dt) || | |
69 | (direction == "backward" && this.problems[i].added < last_dt)) | |
70 | { | |
71 | last_dt = this.problems[i].added; | |
72 | } | |
73 | } | |
74 | ajax("/problems/" + variant, "GET", { | |
75 | direction: direction, | |
76 | last_dt: last_dt, | |
77 | }, response => { | |
78 | if (response.problems.length > 0) | |
79 | this.problems = response.problems; | |
80 | }); | |
da06a6eb BA |
81 | }, |
82 | showNewproblemModal: function() { | |
83 | document.getElementById("modal-newproblem").checked = true; | |
84 | }, | |
85 | postNewProblem: function() { | |
86 | const fen = document.getElementById("newpbFen").value; | |
7931e479 BA |
87 | if (!V.IsGoodFen(fen)) |
88 | return alert("Bad FEN string"); | |
da06a6eb BA |
89 | const instructions = document.getElementById("newpbInstructions").value; |
90 | const solution = document.getElementById("newpbSolution").value; | |
7931e479 BA |
91 | ajax("/problems/" + variant, "POST", { |
92 | fen: fen, | |
93 | instructions: instructions, | |
94 | solution: solution, | |
95 | }, response => { | |
96 | document.getElementById("modal-newproblem").checked = false; | |
97 | }); | |
da06a6eb BA |
98 | }, |
99 | }, | |
4ecf423b | 100 | }) |