Modals first on page to avoid 'scroll to the end' effect
[vchess.git] / public / javascripts / components / problems.js
1 Vue.component('my-problems', {
2 props: ["probId","settings"],
3 data: function () {
4 return {
5 userId: user.id,
6 problems: [], //oldest first
7 myProblems: [], //same, but only mine
8 singletons: [], //requested problems (using #num)
9 display: "others", //or "mine"
10 curProb: null, //(reference to) current displayed problem (if any)
11 showSolution: false,
12 nomoreMessage: "",
13 mode: "analyze", //for game component
14 pbNum: 0, //to navigate directly to some problem
15 // New problem (to upload), or existing problem to edit:
16 modalProb: {
17 id: 0, //defined if it's an edit
18 uid: 0, //...also
19 fen: "",
20 instructions: "",
21 solution: "",
22 preview: false,
23 },
24 };
25 },
26 // NOTE: always modals first, because otherwise "scroll to the end" undesirable effect
27 template: `
28 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
29 <input type="checkbox" id="modal-newproblem" class="modal"/>
30 <div role="dialog" aria-labelledby="modalProblemTxt">
31 <div v-show="!modalProb.preview" class="card newproblem-form">
32 <label for="modal-newproblem" class="modal-close">
33 </label>
34 <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
35 <form @submit.prevent="previewProblem()">
36 <fieldset>
37 <label for="newpbFen">FEN</label>
38 <input id="newpbFen" type="text" v-model="modalProb.fen"
39 :placeholder='translate("Full FEN description")'/>
40 </fieldset>
41 <fieldset>
42 <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
43 <label for="newpbInstructions">{{ translate("Instructions") }}</label>
44 <textarea id="newpbInstructions" v-model="modalProb.instructions"
45 :placeholder='translate("Describe the problem goal")'>
46 </textarea>
47 <label for="newpbSolution">{{ translate("Solution") }}</label>
48 <textarea id="newpbSolution" v-model="modalProb.solution"
49 :placeholder='translate("How to solve the problem?")'>
50 </textarea>
51 <button class="center-btn">{{ translate("Preview") }}</button>
52 </fieldset>
53 </form>
54 </div>
55 <div v-show="modalProb.preview" class="card newproblem-preview">
56 <label for="modal-newproblem" class="modal-close"
57 @click="modalProb.preview=false">
58 </label>
59 <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
60 </my-problem-summary>
61 <div class="button-group">
62 <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
63 <button @click="sendProblem()">{{ translate("Send") }}</button>
64 </div>
65 </div>
66 </div>
67 <input id="modalNomore" type="checkbox" class="modal"/>
68 <div role="dialog" aria-labelledby="nomoreMessage">
69 <div class="card smallpad small-modal text-center">
70 <label for="modalNomore" class="modal-close"></label>
71 <h3 id="nomoreMessage" class="section">{{ nomoreMessage }}</h3>
72 </div>
73 </div>
74 <div id="problemControls" class="button-group">
75 <button :aria-label='translate("Previous problem(s)")' class="tooltip"
76 @click="showNext('backward')"
77 >
78 <i class="material-icons">skip_previous</i>
79 </button>
80 <button v-if="!!userId" :aria-label='translate("Add a problem")'
81 class="tooltip" onClick="doClick('modal-newproblem')"
82 >
83 {{ translate("New") }}
84 </button>
85 <button :aria-label='translate("Next problem(s)")' class="tooltip"
86 @click="showNext('forward')"
87 >
88 <i class="material-icons">skip_next</i>
89 </button>
90 </div>
91 <div id="mainBoard" v-if="!!curProb">
92 <div id="instructions-div" class="section-content">
93 <p id="problem-instructions">{{ curProb.instructions }}</p>
94 </div>
95 <my-game :fen="curProb.fen" :mode="mode" :allowMovelist="true"
96 :settings="settings">
97 </my-game>
98 <div id="solution-div" class="section-content">
99 <h3 class="clickable" @click="showSolution = !showSolution">
100 {{ translate("Show solution") }}
101 </h3>
102 <p id="problem-solution" v-show="showSolution">{{ curProb.solution }}</p>
103 </div>
104 <button @click="displayList">Back to list display</button>
105 </div>
106 <div>
107 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
108 <button @click="() => showProblem(pbNum)">Show problem</button>
109 </div>
110 <button v-if="!!userId" @click="toggleListDisplay"
111 :class="{'only-mine':display=='mine'}"
112 >
113 My problems (only)
114 </button>
115 <my-problem-summary v-show="!curProb"
116 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
117 v-on:show-problem="() => showProblem(p.id)"
118 v-for="p in curProblems()" @click="curProb=p"
119 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
120 </my-problem-summary>
121 </div>
122 `,
123 watch: {
124 probId: function() {
125 this.showProblem(this.probId);
126 },
127 },
128 created: function() {
129 if (!!this.probId)
130 this.showProblem(this.probId);
131 else
132 this.firstFetch();
133 },
134 methods: {
135 translate: translate,
136 firstFetch: function() {
137 // Fetch most recent problems from server, for both lists
138 this.fetchProblems("others", "bacwkard");
139 this.fetchProblems("mine", "bacwkard");
140 this.listsInitialized = true;
141 },
142 showProblem: function(pid) {
143 location.hash = "#problems?id=" + pid;
144 for (let parray of [this.singletons,this.problems,this.myProblems])
145 {
146 const pIdx = parray.findIndex(p => p.id == pid);
147 if (pIdx >= 0)
148 {
149 this.curProb = parray[pIdx];
150 break;
151 }
152 }
153 if (!this.curProb)
154 {
155 // Cannot find problem in current set; get from server, and add to singletons.
156 ajax(
157 "/problems/" + variant.id + "/" + pid, //TODO: variant ID should not be required
158 "GET",
159 response => {
160 if (!!response.problem)
161 {
162 this.singletons.push(response.problem);
163 this.curProb = response.problem;
164 }
165 else
166 this.noMoreProblems("Sorry, problem " + pid + " does not exist");
167 }
168 );
169 }
170 },
171 curProblems: function() {
172 switch (this.display)
173 {
174 case "others":
175 return this.problems;
176 case "mine":
177 return this.myProblems;
178 }
179 },
180 // TODO?: get 50 from server but only show 10 at a time (for example)
181 showNext: function(direction) {
182 if (!this.curProb)
183 return this.fetchProblems(this.display, direction);
184 // Show next problem (older or newer):
185 let curProbs = this.curProblems();
186 // Try to find a neighbour problem in the direction, among current set
187 const neighbor = this.findClosestNeighbor(this.curProb, curProbs, direction);
188 if (!!neighbor)
189 {
190 this.curProb = neighbor;
191 return;
192 }
193 // Boundary case: nothing in current set, need to fetch from server
194 const curSize = curProbs.length;
195 this.fetchProblems(this.display, direction);
196 const newSize = curProbs.length;
197 if (curSize == newSize) //no problems found
198 return this.noMoreProblems("No more problems in this direction");
199 // Ok, found something:
200 this.curProb = this.findClosestNeighbor(this.curProb, curProbs, direction);
201 },
202 findClosestNeighbor: function(problem, probList, direction) {
203 let neighbor = undefined;
204 let smallestDistance = Number.MAX_SAFE_INTEGER;
205 for (let prob of probList)
206 {
207 const delta = Math.abs(prob.id - problem.id);
208 if (delta < smallestDistance &&
209 ((direction == "backward" && prob.id < problem.id)
210 || (direction == "forward" && prob.id > problem.id)))
211 {
212 neighbor = prob;
213 smallestDistance = delta;
214 }
215 }
216 return neighbor;
217 },
218 noMoreProblems: function(message) {
219 this.nomoreMessage = message;
220 let modalNomore = document.getElementById("modalNomore");
221 modalNomore.checked = true;
222 setTimeout(() => modalNomore.checked = false, 2000);
223 },
224 displayList: function() {
225 this.curProb = null;
226 location.hash = "#problems";
227 // Fetch problems if first call (if #num, and then lists)
228 if (!this.listsInitialized)
229 this.firstFetch();
230 },
231 toggleListDisplay: function() {
232 const displays = ["mine","others"];
233 const curIndex = displays.findIndex(item => item == this.display);
234 this.display = displays[1-curIndex];
235 },
236 fetchProblems: function(type, direction) {
237 let problems = (type == "others" ? this.problems : this.myProblems);
238 // "last datetime" set at a value OK for an empty initial array
239 let last_dt = (direction=="forward" ? 0 : Number.MAX_SAFE_INTEGER);
240 if (problems.length > 0)
241 {
242 // Search for newest date (or oldest)
243 last_dt = problems[0].added;
244 for (let i=1; i<problems.length; i++)
245 {
246 if ((direction == "forward" && problems[i].added > last_dt) ||
247 (direction == "backward" && problems[i].added < last_dt))
248 {
249 last_dt = problems[i].added;
250 }
251 }
252 }
253 ajax(
254 "/problems/" + variant.id,
255 "GET",
256 {
257 type: type,
258 direction: direction,
259 last_dt: last_dt,
260 },
261 response => {
262 if (response.problems.length > 0)
263 {
264 Array.prototype.push.apply(problems,
265 response.problems.sort((p1,p2) => { return p2.added - p1.added; }));
266 // If one list is empty but not the other, show the non-empty
267 const otherArray = (type == "mine" ? this.problems : this.myProblems);
268 if (problems.length > 0 && otherArray.length == 0)
269 this.display = type;
270 }
271 }
272 );
273 },
274 previewProblem: function() {
275 if (!V.IsGoodFen(this.modalProb.fen))
276 return alert(translations["Bad FEN description"]);
277 if (this.modalProb.instructions.trim().length == 0)
278 return alert(translations["Empty instructions"]);
279 if (this.modalProb.solution.trim().length == 0)
280 return alert(translations["Empty solution"]);
281 Vue.set(this.modalProb, "preview", true);
282 },
283 editProblem: function(prob) {
284 this.modalProb = prob;
285 Vue.set(this.modalProb, "preview", false);
286 document.getElementById("modal-newproblem").checked = true;
287 },
288 deleteProblem: function(pid) {
289 ajax(
290 "/problems/" + pid,
291 "DELETE",
292 response => {
293 // Delete problem from the list on client side
294 let problems = this.curProblems();
295 const pIdx = problems.findIndex(p => p.id == pid);
296 problems.splice(pIdx, 1);
297 }
298 );
299 },
300 sendProblem: function() {
301 // Send it to the server and close modal
302 ajax(
303 "/problems/" + variant.id,
304 (this.modalProb.id > 0 ? "PUT" : "POST"),
305 this.modalProb,
306 response => {
307 document.getElementById("modal-newproblem").checked = false;
308 Vue.set(this.modalProb, "preview", false);
309 if (this.modalProb.id == 0)
310 {
311 this.myProblems.unshift({
312 added: Date.now(),
313 id: response.id,
314 uid: user.id,
315 fen: this.modalProb.fen,
316 instructions: this.modalProb.instructions,
317 solution: this.modalProb.solution,
318 });
319 }
320 else
321 this.modalProb.id = 0;
322 }
323 );
324 },
325 },
326 })