1 //TODO: new problem form + problem visualisation, like Game.vue (but simpler)
2 // --> mode analyze, moves = [], "load problem"
3 <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
4 <input type="checkbox" id="modal-newproblem" class="modal"/>
5 <div role="dialog" aria-labelledby="modalProblemTxt">
6 <div v-show="!modalProb.preview" class="card newproblem-form">
7 <label for="modal-newproblem" class="modal-close">
9 <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
10 <form @submit.prevent="previewProblem()">
12 <label for="newpbFen">FEN</label>
13 <input id="newpbFen" type="text" v-model="modalProb.fen"
14 :placeholder='translate("Full FEN description")'/>
17 <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
18 <label for="newpbInstructions">{{ translate("Instructions") }}</label>
19 <textarea id="newpbInstructions" v-model="modalProb.instructions"
20 :placeholder='translate("Describe the problem goal")'>
22 <label for="newpbSolution">{{ translate("Solution") }}</label>
23 <textarea id="newpbSolution" v-model="modalProb.solution"
24 :placeholder='translate("How to solve the problem?")'>
26 <button class="center-btn">{{ translate("Preview") }}</button>
30 <div v-show="modalProb.preview" class="card newproblem-preview">
31 <label for="modal-newproblem" class="modal-close"
32 @click="modalProb.preview=false">
34 <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
36 <div class="button-group">
37 <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
38 <button @click="sendProblem()">{{ translate("Send") }}</button>
42 previewProblem: function() {
43 if (!V.IsGoodFen(this.modalProb.fen))
44 return alert(translations["Bad FEN description"]);
45 if (this.modalProb.instructions.trim().length == 0)
46 return alert(translations["Empty instructions"]);
47 if (this.modalProb.solution.trim().length == 0)
48 return alert(translations["Empty solution"]);
49 Vue.set(this.modalProb, "preview", true);
51 editProblem: function(prob) {
52 this.modalProb = prob;
53 Vue.set(this.modalProb, "preview", false);
54 document.getElementById("modal-newproblem").checked = true;
56 deleteProblem: function(pid) {
61 // Delete problem from the list on client side
62 let problems = this.curProblems();
63 const pIdx = problems.findIndex(p => p.id == pid);
64 problems.splice(pIdx, 1);
68 sendProblem: function() {
69 // Send it to the server and close modal
71 "/problems/" + variant.id,
72 (this.modalProb.id > 0 ? "PUT" : "POST"),
75 document.getElementById("modal-newproblem").checked = false;
76 Vue.set(this.modalProb, "preview", false);
77 if (this.modalProb.id == 0)
79 this.myProblems.unshift({
83 fen: this.modalProb.fen,
84 instructions: this.modalProb.instructions,
85 solution: this.modalProb.solution,
87 if (!this.curProb && this.display != "mine")
88 this.display = "mine";
91 this.modalProb.id = 0;