Commit | Line | Data |
---|---|---|
4ecf423b | 1 | Vue.component('my-problems', { |
da06a6eb BA |
2 | data: function () { |
3 | return { | |
45109880 BA |
4 | problems: problemArray, //initial value |
5 | newProblem: { | |
6 | fen: V.GenRandInitFen(), | |
7 | instructions: "", | |
8 | solution: "", | |
9 | stage: "nothing", //or "preview" after new problem is filled | |
10 | }, | |
da06a6eb BA |
11 | }; |
12 | }, | |
4ecf423b | 13 | template: ` |
da06a6eb | 14 | <div> |
7931e479 BA |
15 | <button @click="fetchProblems('backward')">Previous</button> |
16 | <button @click="fetchProblems('forward')">Next</button> | |
da06a6eb | 17 | <button @click="showNewproblemModal">New</button> |
c794dbb8 | 18 | <my-problem-summary v-on:show-problem="bubbleUp(p)" |
7931e479 | 19 | v-for="(p,idx) in sortedProblems" v-bind:prob="p" v-bind:key="idx"> |
da06a6eb BA |
20 | </my-problem-summary> |
21 | <input type="checkbox" id="modal-newproblem" class="modal"> | |
22 | <div role="dialog" aria-labelledby="newProblemTxt"> | |
45109880 | 23 | <div v-show="newProblem.stage=='nothing'" class="card newproblem-form"> |
da06a6eb BA |
24 | <label for="modal-newproblem" class="modal-close"></label> |
25 | <h3 id="newProblemTxt">Add problem</h3> | |
45109880 | 26 | <form @submit.prevent="previewNewProblem"> |
da06a6eb BA |
27 | <fieldset> |
28 | <label for="newpbFen">Fen</label> | |
45109880 | 29 | <input id="newpbFen" type="text" v-model="newProblem.fen"/> |
da06a6eb BA |
30 | </fieldset> |
31 | <fieldset> | |
45109880 | 32 | <p class="emphasis">Safe HTML tags allowed</p> |
da06a6eb | 33 | <label for="newpbInstructions">Instructions</label> |
45109880 BA |
34 | <textarea id="newpbInstructions" v-model="newProblem.instructions" |
35 | placeholder="Explain the problem here"/> | |
da06a6eb | 36 | <label for="newpbSolution">Solution</label> |
45109880 BA |
37 | <textarea id="newpbSolution" v-model="newProblem.solution" |
38 | placeholder="How to solve the problem?"/> | |
39 | <button class="center-btn">Preview</button> | |
da06a6eb | 40 | </fieldset> |
da06a6eb BA |
41 | </form> |
42 | </div> | |
45109880 BA |
43 | <div v-show="newProblem.stage=='preview'" class="card newproblem-preview"> |
44 | // TODO: we don't want exactly the same display (-date +solution) | |
45 | <my-problem-summary v-bind:prob="newProblem"></my-problem-summary> | |
46 | <button @click="sendNewProblem()" class="center-btn">Send</button> | |
47 | </div> | |
da06a6eb | 48 | </div> |
4ecf423b BA |
49 | </div> |
50 | `, | |
da06a6eb BA |
51 | computed: { |
52 | sortedProblems: function() { | |
53 | // Newest problem first | |
7931e479 | 54 | return this.problems.sort((p1,p2) => { return p2.added - p1.added; }); |
da06a6eb BA |
55 | }, |
56 | mailErrProblem: function() { | |
57 | return "mailto:contact@vchess.club?subject=[" + variant + " problems] error"; | |
58 | }, | |
59 | }, | |
60 | methods: { | |
c794dbb8 BA |
61 | // Propagate "show problem" event to parent component (my-variant) |
62 | bubbleUp: function(problem) { | |
63 | this.$emit('show-problem', JSON.stringify(problem)); | |
64 | }, | |
da06a6eb | 65 | fetchProblems: function(direction) { |
7931e479 BA |
66 | return; //TODO: re-activate after server side is implemented (see routes/all.js) |
67 | if (this.problems.length == 0) | |
68 | return; //what could we do?! | |
69 | // Search for newest date (or oldest) | |
70 | let last_dt = this.problems[0].added; | |
71 | for (let i=0; i<this.problems.length; i++) | |
72 | { | |
73 | if ((direction == "forward" && this.problems[i].added > last_dt) || | |
74 | (direction == "backward" && this.problems[i].added < last_dt)) | |
75 | { | |
76 | last_dt = this.problems[i].added; | |
77 | } | |
78 | } | |
79 | ajax("/problems/" + variant, "GET", { | |
80 | direction: direction, | |
81 | last_dt: last_dt, | |
82 | }, response => { | |
83 | if (response.problems.length > 0) | |
84 | this.problems = response.problems; | |
85 | }); | |
da06a6eb BA |
86 | }, |
87 | showNewproblemModal: function() { | |
88 | document.getElementById("modal-newproblem").checked = true; | |
89 | }, | |
45109880 BA |
90 | previewNewProblem: function() { |
91 | if (!V.IsGoodFen(this.newProblem.fen)) | |
7931e479 | 92 | return alert("Bad FEN string"); |
45109880 BA |
93 | this.newProblem.stage = "preview"; |
94 | }, | |
95 | sendNewProblem: function() { | |
96 | // Send it to the server and close modal | |
7931e479 | 97 | ajax("/problems/" + variant, "POST", { |
45109880 BA |
98 | fen: this.newProblem.fen, |
99 | instructions: this.newProblem.instructions, | |
100 | solution: this.newProblem.solution, | |
7931e479 BA |
101 | }, response => { |
102 | document.getElementById("modal-newproblem").checked = false; | |
45109880 | 103 | this.newProblem.stage = "nothing"; |
7931e479 | 104 | }); |
da06a6eb BA |
105 | }, |
106 | }, | |
4ecf423b | 107 | }) |