1 Vue
.component('my-problems', {
4 problems: [], //oldest first
6 curProblems: [], //assigned to either of the ones above
7 curIdx: 0, //index in (current) problems array
17 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
18 <div id="problemControls" class="button-group">
19 <button :aria-label='translate("Load previous problem")' class="tooltip"
20 @click="showPreviousProblem()">
21 <i class="material-icons">skip_previous</i>
23 <button :aria-label='translate("Add a problem")' class="tooltip"
24 @click="showNewproblemModal">
25 {{ translate("New") }}
27 <button :aria-label='translate("Load next problem")' class="tooltip"
28 @click="showNextProblem()">
29 <i class="material-icons">skip_next</i>
32 --> OK, mais ces flèches n'ont pas la même action selon les vues
33 --> fetchN si liste, problème suivant/précédent sinon
36 board qui bouge et activé que si #hash donnant numéro du problème
37 deux listes : tous les problèmes sauf les miens
41 //TODO: filter "my problems" ==> liste séparée (lors de la requête serveur)
42 --> bouton plutôt sous l'échiquier après soluce (sauf si anonymous)
43 --> puis dans la vue "my problems (listing échiquier gauche / instrus + soluce cachée à droite
44 if (this.mode == "problem")
46 // Show problem instructions
50 attrs: { id: "instructions-div" },
53 "section-content": true,
59 attrs: { id: "problem-instructions" },
60 domProps: { innerHTML: this.problem.instructions }
69 // TODO ici :: instrus + diag interactif + solution
70 my-board + pilotage via movesList + VariantRules !
72 <my-problem-preview v-show="stage=='preview'"
73 v-for="(p,idx) in problems"
74 v-bind:prob="p" v-bind:preview="false" v-bind:key="idx">
76 if (this.mode == "problem")
78 // Show problem solution (on click)
82 attrs: { id: "solution-div" },
83 "class": { "section-content": true },
88 "class": { clickable: true },
89 domProps: { innerHTML: translations["Show solution"] },
90 on: { click: this.toggleShowSolution },
95 attrs: { id: "problem-solution" },
96 domProps: { innerHTML: this.problem.solution }
104 <input type="checkbox" id="modal-newproblem" class="modal">
105 <div role="dialog" aria-labelledby="newProblemTxt">
106 <div v-show="stage=='nothing'" class="card newproblem-form">
107 <label for="modal-newproblem" class="modal-close"></label>
108 <h3 id="newProblemTxt">{{ translate("Add a problem") }}</h3>
109 <form @submit.prevent="previewNewProblem">
111 <label for="newpbFen">FEN</label>
112 <input id="newpbFen" type="text" v-model="newProblem.fen"
113 :placeholder='translate("Full FEN description")'/>
116 <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
117 <label for="newpbInstructions">{{ translate("Instructions") }}</label>
118 <textarea id="newpbInstructions" v-model="newProblem.instructions"
119 :placeholder='translate("Describe the problem goal")'></textarea>
120 <label for="newpbSolution">{{ translate("Solution") }}</label>
121 <textarea id="newpbSolution" v-model="newProblem.solution"
122 :placeholder='translate("How to solve the problem?")'></textarea>
123 <button class="center-btn">{{ translate("Preview") }}</button>
127 <div v-show="stage=='preview'" class="card newproblem-preview">
128 <label for="modal-newproblem" class="modal-close"></label>
129 <my-problem-preview v-bind:prob="newProblem"></my-problem-summary>
130 <div class="button-group">
131 <button @click="newProblem.stage='nothing'">{{ translate("Cancel") }}</button>
132 <button @click="sendNewProblem()">{{ translate("Send") }}</button>
139 sortedProblems: function() {
140 // Newest problem first
143 created: function() {
144 // Analyse URL: if a single problem required, show it. Otherwise,
145 // TODO: fetch most recent problems from server
146 // If the requested problem is in the list, just show it
150 translate: function(text
) {
151 return translations
[text
];
154 // // Propagate "show problem" event to parent component (my-variant)
155 // bubbleUp: function(problem) {
156 // this.$emit('show-problem', JSON.stringify(problem));
158 toggleShowSolution: function() {
159 let problemSolution
= document
.getElementById("problem-solution");
160 problemSolution
.style
.display
=
161 !problemSolution
.style
.display
|| problemSolution
.style
.display
== "none"
165 showPreviousProblem: function() {
166 if (this.curIdx
== 0)
167 this.fetchProblems("backward");
171 showNextProblem: function() {
172 if (this.curIdx
== this.problems
.length
- 1)
173 this.fetchProblems("forward");
177 // TODO: modal "no more problems"
178 fetchProblems: function(direction
) {
179 if (this.problems
.length
== 0)
180 return; //what could we do?!
181 // Search for newest date (or oldest)
182 let last_dt
= this.problems
[0].added
;
183 for (let i
=0; i
<this.problems
.length
; i
++)
185 if ((direction
== "forward" && this.problems
[i
].added
> last_dt
) ||
186 (direction
== "backward" && this.problems
[i
].added
< last_dt
))
188 last_dt
= this.problems
[i
].added
;
191 ajax("/problems/" + variant
.name
, "GET", { //TODO: use variant._id ?
192 direction: direction
,
195 if (response
.problems
.length
> 0)
197 this.problems
= response
.problems
198 .sort((p1
,p2
) => { return p1
.added
- p2
.added
; });
199 this.curIdx
= response
.problems
.length
- 1;
203 showNewproblemModal: function() {
204 document
.getElementById("modal-newproblem").checked
= true;
206 previewNewProblem: function() {
207 if (!V
.IsGoodFen(this.newProblem
.fen
))
208 return alert(translations
["Bad FEN description"]);
209 if (this.newProblem
.instructions
.trim().length
== 0)
210 return alert(translations
["Empty instructions"]);
211 if (this.newProblem
.solution
.trim().length
== 0)
212 return alert(translations
["Empty solution"]);
213 this.newProblem
.stage
= "preview";
215 sendNewProblem: function() {
216 // Send it to the server and close modal
217 ajax("/problems/" + variant
.name
, "POST", { //TODO: with variant._id ?
218 fen: this.newProblem
.fen
,
219 instructions: this.newProblem
.instructions
,
220 solution: this.newProblem
.solution
,
222 this.newProblem
.added
= Date
.now();
223 this.problems
.push(JSON
.parse(JSON
.stringify(this.newProblem
)));
224 document
.getElementById("modal-newproblem").checked
= false;
225 this.newProblem
.stage
= "nothing";
232 // possibilité de supprimer / éditer si peer ID reconnu comme celui du probleme (champ "uploader")