e3ab998d0fda67ee450e02a26eaaeea86bd44939
1 Vue
.component('my-problems', {
5 problems: [], //oldest first
6 myProblems: [], //same, but only mine
7 display: "list", //or "myList"
8 curIdx: -1, //index in (current) problems array
10 // New problem (to upload), or existing problem to edit:
12 id: 0, //defined if it's an edit
21 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
22 <div id="problemControls" class="button-group">
23 <button :aria-label='translate("Previous problem(s)")' class="tooltip" @click="showNext('backward')">
24 <i class="material-icons">skip_previous</i>
26 <button :aria-label='translate("Add a problem")' class="tooltip" onClick="doClick('modal-newproblem')">
27 {{ translate("New") }}
29 <button :aria-label='translate("Next problem(s)")' class="tooltip" @click="showNext('forward')">
30 <i class="material-icons">skip_next</i>
33 <div id="mainBoard" v-show="curIdx>=0">
34 <div id="instructions-div" class="section-content">
35 <p id="problem-instructions">
36 {{ curProb.instructions }}
39 <my-board :fen="curProb.fen"></my-board>
40 <div id="solution-div" class="section-content">
41 <h3 class="clickable" @click="showSolution = !showSolution">
42 {{ translations["Show solution"] }}
44 <p id="problem-solution" v-show="showSolution">
45 {{ curProb.solution }}
49 <button v-if="!!userId" @click="toggleListDisplay()">
50 <span>My problems (only)</span>
52 <my-problem-summary v-show="curIdx<0"
53 v-for="(p,idx) in sortedProblems" @click="setCurIdx(idx)"
54 v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
56 <input type="checkbox" id="modal-newproblem" class="modal"/>
57 <div role="dialog" aria-labelledby="modalProblemTxt">
58 <div v-show="!modalProb.preview" class="card newproblem-form">
59 <label for="modal-newproblem" class="modal-close">
61 <h3 id="modalProblemTxt">
62 {{ translate("Add a problem") }}
64 <form @submit.prevent="previewProblem()">
66 <label for="newpbFen">FEN</label>
67 <input id="newpbFen" type="text" v-model="modalProb.fen"
68 :placeholder='translate("Full FEN description")'/>
72 {{ translate("Safe HTML tags allowed") }}
74 <label for="newpbInstructions">
75 {{ translate("Instructions") }}
77 <textarea id="newpbInstructions" v-model="modalProb.instructions"
78 :placeholder='translate("Describe the problem goal")'>
80 <label for="newpbSolution">
81 {{ translate("Solution") }}
83 <textarea id="newpbSolution" v-model="modalProb.solution"
84 :placeholder='translate("How to solve the problem?")'>
86 <button class="center-btn">
87 {{ translate("Preview") }}
92 <div v-show="modalProb.preview" class="card newproblem-preview">
93 <label for="modal-newproblem" class="modal-close">
95 <my-problem-summary v-bind:prob="modalProb" v-bind:userid="userId">
97 <div class="button-group">
98 <button @click="modalProb.preview=false">
99 {{ translate("Cancel") }}
101 <button @click="sendProblem()">
102 {{ translate("Send") }}
110 sortedProblems: function() {
111 // Newest problem first
112 return this.curProblems
.sort((a
,b
) => a
.added
- b
.added
);
114 curProb: function() {
115 switch (this.display
)
118 return this.problems
[this.curIdx
];
120 return this.myProblems
[this.curIdx
];
124 created: function() {
125 if (location
.hash
.length
> 0)
127 this.getOneProblem(location
.hash
.slice(1)); //callback?
128 this.curIdx
= 0; //TODO: a bit more subtle, depending if it's my problem or not (set display)
132 // Fetch most recent problems from server
133 this.fetchProblems("backward"); //TODO: backward in time from the future. Second argument?
137 setCurIndex: function(idx
) {
139 location
.hash
= "#" + idx
;
141 translate: function(text
) {
142 return translations
[text
];
144 curProblems: function() {
145 switch (this.display
)
148 return this.problems
;
150 return this.myProblems
;
153 // TODO?: get 50 from server but only show 10 at a time (for example)
154 showNext: function(direction
) {
156 return this.fetchProblems(direction
);
157 // Show next problem (older or newer):
158 let curProbs
= this.curProblems();
159 if ((this.curIdx
> 0 && direction
=="backward")
160 || (this.curIdx
< curProbs
.length
-1 && direction
=="forward"))
162 this.setCurIdx(this.curIdx
+ (direction
=="forward" ? 1 : -1));
166 const curSize
= curProbs
.length
;
167 this.fetchProblems(direction
);
168 const newSize
= curProbs
.length
;
169 if (curSize
== newSize
) //no problems found
174 this.setCurIdx(this.curIdx
+1);
177 this.setCurIdx(newSize
- curSize
+ this.curIdx
-1);
182 toggleListDisplay: function() {
183 this.display
= (this.display
== "list" ? "myList" : "list");
185 // TODO: modal "there are no more problems"
186 fetchProblems: function(direction
) {
187 const problems
= if ... this.problems
... ou
this.myProblems
;
188 if (this.problems
.length
== 0)
189 return; //what could we do?! -------> ask problems older than MAX_NUMBER + backward
190 // Search for newest date (or oldest)
191 let last_dt
= this.problems
[0].added
;
192 for (let i
=0; i
<this.problems
.length
; i
++)
194 if ((direction
== "forward" && this.problems
[i
].added
> last_dt
) ||
195 (direction
== "backward" && this.problems
[i
].added
< last_dt
))
197 last_dt
= this.problems
[i
].added
;
200 ajax("/problems/" + variant
.name
, "GET", { //TODO: use variant._id ?
201 direction: direction
,
204 if (response
.problems
.length
> 0)
206 this.problems
= response
.problems
207 .sort((p1
,p2
) => { return p1
.added
- p2
.added
; });
208 this.setCurIndex(response
.problems
.length
- 1);
212 previewProblem: function() {
213 if (!V
.IsGoodFen(this.newProblem
.fen
))
214 return alert(translations
["Bad FEN description"]);
215 if (this.newProblem
.instructions
.trim().length
== 0)
216 return alert(translations
["Empty instructions"]);
217 if (this.newProblem
.solution
.trim().length
== 0)
218 return alert(translations
["Empty solution"]);
219 this.modalProb
.preview
= true;
221 sendProblem: function() {
222 // Send it to the server and close modal
224 "/problems/" + variant
.name
, //TODO: with variant.id ?
225 (this.modalProb
.id
> 0 ? "PUT" : "POST"),
228 document
.getElementById("modal-newproblem").checked
= false;
229 if (this.modalProb
.id
== 0)
231 this.modalProb
.added
= Date
.now();
232 this.modalProb
.preview
= false;
233 this.curProblems().push(JSON
.parse(JSON
.stringify(this.modalProb
)));
236 this.modalProb
.id
= 0;
240 // TODO: catch signal edit or delete ; on edit: modify modalProb and show modal
241 deleteProblem: function(pid
) {
243 // TODO: delete problem in curProblems() list