00ea7692fbe143f6ed24ead379beb850ee28a704
1 Vue
.component('my-problems', {
2 props: ["queryHash","settings"],
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)
12 pbNum: 0, //to navigate directly to some problem
13 // New problem (to upload), or existing problem to edit:
15 id: 0, //defined if it's an edit
24 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
25 <div id="problemControls" class="button-group">
26 <button :aria-label='translate("Previous problem(s)")' class="tooltip" @click="showNext('backward')">
27 <i class="material-icons">skip_previous</i>
29 <button :aria-label='translate("Add a problem")' class="tooltip" onClick="doClick('modal-newproblem')">
30 {{ translate("New") }}
32 <button :aria-label='translate("Next problem(s)")' class="tooltip" @click="showNext('forward')">
33 <i class="material-icons">skip_next</i>
36 <div id="mainBoard" v-show="!!curProb">
37 <div id="instructions-div" class="section-content">
38 <p id="problem-instructions">
39 {{ curProb.instructions }}
42 <my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true" :settings="settings">
44 <div id="solution-div" class="section-content">
45 <h3 class="clickable" @click="showSolution = !showSolution">
46 {{ translations["Show solution"] }}
48 <p id="problem-solution" v-show="showSolution">
49 {{ curProb.solution }}
52 <button @click="displayList()">
53 <span>Back to list display</span>
57 <input type="text" placeholder="Type problem number" v-model="pbNum"/>
58 <button @click="showProblem()">
59 <span>Show problem</span>
62 <button v-if="!!userId" @click="toggleListDisplay()">
63 <span>My problems (only)</span>
65 <my-problem-summary v-show="!curProb"
66 v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
67 v-for="p in curProblems" @click="curProb=p"
68 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
70 <input type="checkbox" id="modal-newproblem" class="modal"/>
71 <div role="dialog" aria-labelledby="modalProblemTxt">
72 <div v-show="!modalProb.preview" class="card newproblem-form">
73 <label for="modal-newproblem" class="modal-close">
75 <h3 id="modalProblemTxt">
76 {{ translate("Add a problem") }}
78 <form @submit.prevent="previewProblem()">
80 <label for="newpbFen">FEN</label>
81 <input id="newpbFen" type="text" v-model="modalProb.fen"
82 :placeholder='translate("Full FEN description")'/>
86 {{ translate("Safe HTML tags allowed") }}
88 <label for="newpbInstructions">
89 {{ translate("Instructions") }}
91 <textarea id="newpbInstructions" v-model="modalProb.instructions"
92 :placeholder='translate("Describe the problem goal")'>
94 <label for="newpbSolution">
95 {{ translate("Solution") }}
97 <textarea id="newpbSolution" v-model="modalProb.solution"
98 :placeholder='translate("How to solve the problem?")'>
100 <button class="center-btn">
101 {{ translate("Preview") }}
106 <div v-show="modalProb.preview" class="card newproblem-preview">
107 <label for="modal-newproblem" class="modal-close">
109 <my-problem-summary v-bind:prob="modalProb" v-bind:userid="userId">
110 </my-problem-summary>
111 <div class="button-group">
112 <button @click="modalProb.preview=false">
113 {{ translate("Cancel") }}
115 <button @click="sendProblem()">
116 {{ translate("Send") }}
121 <input id="modalNomore" type="checkbox" class="modal"/>
122 <div role="dialog" aria-labelledby="nomoreMessage">
123 <div class="card smallpad small-modal text-center">
124 <label for="modalNomore" class="modal-close"></label>
125 <h3 id="nomoreMessage" class="section">
133 queryHash: function(newQhash
) {
136 // New query hash = "id=42"; get 42 as problem ID
137 const pid
= parseInt(newQhash
.substr(2));
138 this.showProblem(pid
);
141 this.curProb
= null; //(back to) list display
144 created: function() {
145 if (!!this.queryHash
)
147 const pid
= parseInt(this.queryHash
.substr(2));
148 this.showProblem(pid
);
154 firstFetch: function() {
155 // Fetch most recent problems from server, for both lists
156 this.fetchProblems("others", "bacwkard");
157 this.fetchProblems("mine", "bacwkard");
158 this.listsInitialized
= true;
160 showProblem: function(num
) {
161 const pid
= num
|| this.pbNum
;
162 location
.hash
= "#" + pid
;
163 const pIdx
= this.singletons
.findIndex(p
=> p
.id
== pid
);
165 curProb
= this.singletons
[pIdx
];
168 // Cannot find problem in current set; get from server, and add to singletons.
170 "/problems/" + variant
.name
+ "/" + pid
, //TODO: use variant._id ?
173 if (!!response
.problem
)
175 this.singletons
.push(response
.problem
);
176 this.curProb
= response
.problem
;
179 this.noMoreProblems("Sorry, problem " + pid
+ " does not exist");
184 translate: function(text
) {
185 return translations
[text
];
187 curProblems: function() {
188 switch (this.display
)
191 return this.problems
;
193 return this.myProblems
;
196 // TODO?: get 50 from server but only show 10 at a time (for example)
197 showNext: function(direction
) {
199 return this.fetchProblems(this.display
, direction
);
200 // Show next problem (older or newer):
201 let curProbs
= this.curProblems();
202 // Try to find a neighbour problem in the direction, among current set
203 const neighbor
= this.findClosestNeighbor(this.curProb
, curProbs
, direction
);
206 this.curProb
= neighbor
;
209 // Boundary case: nothing in current set, need to fetch from server
210 const curSize
= curProbs
.length
;
211 this.fetchProblems(this.display
, direction
);
212 const newSize
= curProbs
.length
;
213 if (curSize
== newSize
) //no problems found
214 return this.noMoreProblems("No more problems in this direction");
215 // Ok, found something:
216 this.curProb
= this.findClosestNeighbor(this.curProb
, curProbs
, direction
);
218 findClosestNeighbor: function(problem
, probList
, direction
) {
219 let neighbor
= undefined;
220 let smallestDistance
= Number
.MAX_SAFE_INTEGER
;
221 for (let prob
of probList
)
223 const delta
= Math
.abs(prob
.id
- problem
.id
);
224 if (delta
< smallestDistance
&&
225 ((direction
== "backward" && prob
.id
< problem
.id
)
226 || (direction
== "forward" && prob
.id
> problem
.id
)))
229 smallestDistance
= delta
;
234 noMoreProblems: function(message
) {
235 this.nomoreMessage
= message
;
236 let modalNomore
= document
.getElementById("modalNomore");
237 modalNomore
.checked
= true;
238 setTimeout(() => modalNomore
.checked
= false, 2000);
240 displayList: function() {
243 // Fetch problems if first call (if #num, and then lists)
244 if (!this.listsInitialized
)
247 toggleListDisplay: function() {
248 this.display
= (this.display
== "others" ? "mine" : "others");
250 fetchProblems: function(type
, direction
) {
251 let problems
= (type
== "others" ? this.problems : this.myProblems
);
252 let last_dt
= (direction
=="forward" ? 0 : Number
.MAX_SAFE_INTEGER
);
253 if (this.problems
.length
> 0)
255 // Search for newest date (or oldest)
256 last_dt
= problems
[0].added
;
257 for (let i
=1; i
<problems
.length
; i
++)
259 if ((direction
== "forward" && this.problems
[i
].added
> last_dt
) ||
260 (direction
== "backward" && this.problems
[i
].added
< last_dt
))
262 last_dt
= this.problems
[i
].added
;
267 "/problems/" + variant
.id
,
271 direction: direction
,
275 if (response
.problems
.length
> 0)
277 Array
.prototype.push
.apply(problems
,
278 response
.problems
.sort((p1
,p2
) => { return p1
.added
- p2
.added
; }));
279 // If one list is empty but not the other, show the non-empty
280 const otherArray
= (type
== "mine" ? this.problems : this.myProblems
);
281 if (problems
.length
> 0 && otherArray
.length
== 0)
287 previewProblem: function() {
288 if (!V
.IsGoodFen(this.newProblem
.fen
))
289 return alert(translations
["Bad FEN description"]);
290 if (this.newProblem
.instructions
.trim().length
== 0)
291 return alert(translations
["Empty instructions"]);
292 if (this.newProblem
.solution
.trim().length
== 0)
293 return alert(translations
["Empty solution"]);
294 this.modalProb
.preview
= true;
296 editProblem: function(prob
) {
297 this.modalProb
= prob
;
298 document
.getElementById("modal-newproblem").checked
= true;
300 deleteProblem: function(pid
) {
302 "/problems/" + variant
.id
+ "/" + pid
,
305 // Delete problem from the list on client side
306 let problems
= this.curProblems();
307 const pIdx
= problems
.findIndex(p
=> p
.id
== pid
);
308 problems
.splice(pIdx
, 1);
312 sendProblem: function() {
313 // Send it to the server and close modal
315 "/problems/" + variant
.id
,
316 (this.modalProb
.id
> 0 ? "PUT" : "POST"),
319 document
.getElementById("modal-newproblem").checked
= false;
320 if (this.modalProb
.id
== 0)
322 this.modalProb
.added
= Date
.now();
323 this.modalProb
.preview
= false;
324 this.myProblems
.push(JSON
.parse(JSON
.stringify(this.modalProb
)));
327 this.modalProb
.id
= 0;