68830a4f7f9af93c281455eb43b8521f9a41aaf5
1 Vue
.component('my-problems', {
4 problems: problemArray
//initial value
9 <button @click="fetchProblems('backward')">Previous</button>
10 <button @click="fetchProblems('forward')">Next</button>
11 <button @click="showNewproblemModal">New</button>
12 <my-problem-summary v-on:show-problem="bubbleUp(p)"
13 v-for="(p,idx) in sortedProblems" v-bind:prob="p" v-bind:key="idx">
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">
22 <label for="newpbFen">Fen</label>
23 <input type="text" id="newpbFen"
24 placeholder="Position [+ flags [+ turn]]"/>
29 <p>,<br>,<,ul>,<ol>,<li>
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>
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>
47 sortedProblems: function() {
48 // Newest problem first
49 return this.problems
.sort((p1
,p2
) => { return p2
.added
- p1
.added
; });
51 mailErrProblem: function() {
52 return "mailto:contact@vchess.club?subject=[" + variant
+ " problems] error";
56 // Propagate "show problem" event to parent component (my-variant)
57 bubbleUp: function(problem
) {
58 this.$emit('show-problem', JSON
.stringify(problem
));
60 fetchProblems: function(direction
) {
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
++)
68 if ((direction
== "forward" && this.problems
[i
].added
> last_dt
) ||
69 (direction
== "backward" && this.problems
[i
].added
< last_dt
))
71 last_dt
= this.problems
[i
].added
;
74 ajax("/problems/" + variant
, "GET", {
78 if (response
.problems
.length
> 0)
79 this.problems
= response
.problems
;
82 showNewproblemModal: function() {
83 document
.getElementById("modal-newproblem").checked
= true;
85 postNewProblem: function() {
86 const fen
= document
.getElementById("newpbFen").value
;
87 if (!V
.IsGoodFen(fen
))
88 return alert("Bad FEN string");
89 const instructions
= document
.getElementById("newpbInstructions").value
;
90 const solution
= document
.getElementById("newpbSolution").value
;
91 ajax("/problems/" + variant
, "POST", {
93 instructions: instructions
,
96 document
.getElementById("modal-newproblem").checked
= false;