dbd8340c96236d023f1d88b27ef2b38676ae7e9e
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>
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() {
49 // Newest problem first
50 return this.problems
.sort((p1
,p2
) => { return p2
.added
- p1
.added
; });
52 mailErrProblem: function() {
53 return "mailto:contact@vchess.club?subject=[" + variant
+ " problems] error";
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
++)
65 if ((direction
== "forward" && this.problems
[i
].added
> last_dt
) ||
66 (direction
== "backward" && this.problems
[i
].added
< last_dt
))
68 last_dt
= this.problems
[i
].added
;
71 ajax("/problems/" + variant
, "GET", {
75 if (response
.problems
.length
> 0)
76 this.problems
= response
.problems
;
79 showNewproblemModal: function() {
80 document
.getElementById("modal-newproblem").checked
= true;
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", {
90 instructions: instructions
,
93 document
.getElementById("modal-newproblem").checked
= false;