Commit | Line | Data |
---|---|---|
4ecf423b | 1 | Vue.component('my-problems', { |
da06a6eb BA |
2 | data: function () { |
3 | return { | |
81da2786 | 4 | problems: [], //oldest first |
26b8e4f7 | 5 | myProblems: [], //same |
81da2786 BA |
6 | curIdx: 0, //index in problems array |
7 | stage: "nothing", //or "preview" after new problem is filled | |
45109880 | 8 | newProblem: { |
77fa6d1f | 9 | fen: "", |
45109880 BA |
10 | instructions: "", |
11 | solution: "", | |
45109880 | 12 | }, |
da06a6eb BA |
13 | }; |
14 | }, | |
4ecf423b | 15 | template: ` |
a5d56686 BA |
16 | <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> |
17 | <div id="problemControls" class="button-group"> | |
81da2786 BA |
18 | <button :aria-label='translate("Load previous problem")' class="tooltip" |
19 | @click="showPreviousProblem()"> | |
a5d56686 BA |
20 | <i class="material-icons">skip_previous</i> |
21 | </button> | |
247356cd | 22 | <button :aria-label='translate("Add a problem")' class="tooltip" |
a5d56686 | 23 | @click="showNewproblemModal"> |
247356cd | 24 | {{ translate("New") }} |
a5d56686 | 25 | </button> |
81da2786 BA |
26 | <button :aria-label='translate("Load next problem")' class="tooltip" |
27 | @click="showNextProblem()"> | |
a5d56686 BA |
28 | <i class="material-icons">skip_next</i> |
29 | </button> | |
30 | </div> | |
81da2786 BA |
31 | |
32 | ||
33 | ||
26b8e4f7 BA |
34 | board qui bouge et activé que si #hash donnant numéro du problème |
35 | deux listes : tous les problèmes sauf les miens | |
36 | + les miens | |
37 | ||
38 | ||
39 | //TODO: filter "my problems" ==> liste séparée (lors de la requête serveur) | |
40 | --> bouton plutôt sous l'échiquier après soluce (sauf si anonymous) | |
41 | --> puis dans la vue "my problems (listing échiquier gauche / instrus + soluce cachée à droite | |
42 | if (this.mode == "problem") | |
81da2786 BA |
43 | { |
44 | // Show problem instructions | |
45 | elementArray.push( | |
46 | h('div', | |
47 | { | |
48 | attrs: { id: "instructions-div" }, | |
49 | "class": { | |
50 | "clearer": true, | |
51 | "section-content": true, | |
52 | }, | |
53 | }, | |
54 | [ | |
55 | h('p', | |
56 | { | |
57 | attrs: { id: "problem-instructions" }, | |
58 | domProps: { innerHTML: this.problem.instructions } | |
59 | } | |
60 | ) | |
61 | ] | |
62 | ) | |
63 | ); | |
64 | } | |
65 | ||
66 | ||
67 | // TODO ici :: instrus + diag interactif + solution | |
68 | my-board + pilotage via movesList + VariantRules ! | |
69 | ||
70 | <my-problem-preview v-show="stage=='preview'" | |
71 | v-for="(p,idx) in problems" | |
b5fb8e69 | 72 | v-bind:prob="p" v-bind:preview="false" v-bind:key="idx"> |
da06a6eb | 73 | </my-problem-summary> |
81da2786 BA |
74 | if (this.mode == "problem") |
75 | { | |
76 | // Show problem solution (on click) | |
77 | elementArray.push( | |
78 | h('div', | |
79 | { | |
80 | attrs: { id: "solution-div" }, | |
81 | "class": { "section-content": true }, | |
82 | }, | |
83 | [ | |
84 | h('h3', | |
85 | { | |
86 | "class": { clickable: true }, | |
87 | domProps: { innerHTML: translations["Show solution"] }, | |
88 | on: { click: this.toggleShowSolution }, | |
89 | } | |
90 | ), | |
91 | h('p', | |
92 | { | |
93 | attrs: { id: "problem-solution" }, | |
94 | domProps: { innerHTML: this.problem.solution } | |
95 | } | |
96 | ) | |
97 | ] | |
98 | ) | |
99 | ); | |
100 | } | |
101 | ||
da06a6eb BA |
102 | <input type="checkbox" id="modal-newproblem" class="modal"> |
103 | <div role="dialog" aria-labelledby="newProblemTxt"> | |
81da2786 | 104 | <div v-show="stage=='nothing'" class="card newproblem-form"> |
da06a6eb | 105 | <label for="modal-newproblem" class="modal-close"></label> |
247356cd | 106 | <h3 id="newProblemTxt">{{ translate("Add a problem") }}</h3> |
45109880 | 107 | <form @submit.prevent="previewNewProblem"> |
da06a6eb | 108 | <fieldset> |
247356cd | 109 | <label for="newpbFen">FEN</label> |
77fa6d1f | 110 | <input id="newpbFen" type="text" v-model="newProblem.fen" |
e081ffe3 | 111 | :placeholder='translate("Full FEN description")'/> |
da06a6eb BA |
112 | </fieldset> |
113 | <fieldset> | |
247356cd BA |
114 | <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p> |
115 | <label for="newpbInstructions">{{ translate("Instructions") }}</label> | |
45109880 | 116 | <textarea id="newpbInstructions" v-model="newProblem.instructions" |
d289b043 | 117 | :placeholder='translate("Describe the problem goal")'></textarea> |
247356cd | 118 | <label for="newpbSolution">{{ translate("Solution") }}</label> |
45109880 | 119 | <textarea id="newpbSolution" v-model="newProblem.solution" |
d289b043 | 120 | :placeholder='translate("How to solve the problem?")'></textarea> |
247356cd | 121 | <button class="center-btn">{{ translate("Preview") }}</button> |
da06a6eb | 122 | </fieldset> |
da06a6eb BA |
123 | </form> |
124 | </div> | |
81da2786 | 125 | <div v-show="stage=='preview'" class="card newproblem-preview"> |
b5fb8e69 | 126 | <label for="modal-newproblem" class="modal-close"></label> |
81da2786 | 127 | <my-problem-preview v-bind:prob="newProblem"></my-problem-summary> |
a5d56686 | 128 | <div class="button-group"> |
247356cd BA |
129 | <button @click="newProblem.stage='nothing'">{{ translate("Cancel") }}</button> |
130 | <button @click="sendNewProblem()">{{ translate("Send") }}</button> | |
b5fb8e69 | 131 | </div> |
45109880 | 132 | </div> |
da06a6eb | 133 | </div> |
4ecf423b BA |
134 | </div> |
135 | `, | |
da06a6eb BA |
136 | computed: { |
137 | sortedProblems: function() { | |
138 | // Newest problem first | |
da06a6eb | 139 | }, |
da06a6eb | 140 | }, |
298c42e6 | 141 | created: function() { |
81da2786 | 142 | // Analyse URL: if a single problem required, show it. Otherwise, |
298c42e6 | 143 | // TODO: fetch most recent problems from server |
26b8e4f7 | 144 | // If the requested problem is in the list, just show it |
298c42e6 | 145 | }, |
da06a6eb | 146 | methods: { |
247356cd BA |
147 | translate: function(text) { |
148 | return translations[text]; | |
149 | }, | |
298c42e6 BA |
150 | // TODO: obsolete: |
151 | // // Propagate "show problem" event to parent component (my-variant) | |
152 | // bubbleUp: function(problem) { | |
153 | // this.$emit('show-problem', JSON.stringify(problem)); | |
154 | // }, | |
81da2786 BA |
155 | toggleShowSolution: function() { |
156 | let problemSolution = document.getElementById("problem-solution"); | |
157 | problemSolution.style.display = | |
158 | !problemSolution.style.display || problemSolution.style.display == "none" | |
159 | ? "block" | |
160 | : "none"; | |
161 | }, | |
162 | showPreviousProblem: function() { | |
163 | if (this.curIdx == 0) | |
164 | this.fetchProblems("backward"); | |
165 | else | |
166 | this.curIdx--; | |
167 | }, | |
168 | showNextProblem: function() { | |
169 | if (this.curIdx == this.problems.length - 1) | |
170 | this.fetchProblems("forward"); | |
171 | else | |
172 | this.curIdx++; | |
173 | }, | |
174 | // TODO: modal "no more problems" | |
da06a6eb | 175 | fetchProblems: function(direction) { |
7931e479 BA |
176 | if (this.problems.length == 0) |
177 | return; //what could we do?! | |
178 | // Search for newest date (or oldest) | |
179 | let last_dt = this.problems[0].added; | |
180 | for (let i=0; i<this.problems.length; i++) | |
181 | { | |
182 | if ((direction == "forward" && this.problems[i].added > last_dt) || | |
183 | (direction == "backward" && this.problems[i].added < last_dt)) | |
184 | { | |
185 | last_dt = this.problems[i].added; | |
186 | } | |
187 | } | |
8d7e2786 | 188 | ajax("/problems/" + variant.name, "GET", { //TODO: use variant._id ? |
7931e479 BA |
189 | direction: direction, |
190 | last_dt: last_dt, | |
191 | }, response => { | |
192 | if (response.problems.length > 0) | |
81da2786 BA |
193 | { |
194 | this.problems = response.problems | |
195 | .sort((p1,p2) => { return p1.added - p2.added; }); | |
196 | this.curIdx = response.problems.length - 1; | |
197 | } | |
7931e479 | 198 | }); |
da06a6eb BA |
199 | }, |
200 | showNewproblemModal: function() { | |
201 | document.getElementById("modal-newproblem").checked = true; | |
202 | }, | |
45109880 BA |
203 | previewNewProblem: function() { |
204 | if (!V.IsGoodFen(this.newProblem.fen)) | |
e081ffe3 | 205 | return alert(translations["Bad FEN description"]); |
6b5517b4 BA |
206 | if (this.newProblem.instructions.trim().length == 0) |
207 | return alert(translations["Empty instructions"]); | |
208 | if (this.newProblem.solution.trim().length == 0) | |
209 | return alert(translations["Empty solution"]); | |
45109880 BA |
210 | this.newProblem.stage = "preview"; |
211 | }, | |
212 | sendNewProblem: function() { | |
213 | // Send it to the server and close modal | |
8d7e2786 | 214 | ajax("/problems/" + variant.name, "POST", { //TODO: with variant._id ? |
45109880 BA |
215 | fen: this.newProblem.fen, |
216 | instructions: this.newProblem.instructions, | |
217 | solution: this.newProblem.solution, | |
7931e479 | 218 | }, response => { |
b5fb8e69 BA |
219 | this.newProblem.added = Date.now(); |
220 | this.problems.push(JSON.parse(JSON.stringify(this.newProblem))); | |
7931e479 | 221 | document.getElementById("modal-newproblem").checked = false; |
45109880 | 222 | this.newProblem.stage = "nothing"; |
7931e479 | 223 | }); |
da06a6eb BA |
224 | }, |
225 | }, | |
4ecf423b | 226 | }) |
b6487fb9 BA |
227 | |
228 | // TODO: | |
229 | // possibilité de supprimer / éditer si peer ID reconnu comme celui du probleme (champ "uploader") |