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