A few fixes, drop planned problems support (replaced by forum + mode analyze)

[vchess.git] / client / next_src / views / Problem.vue

diff --git a/client/next_src/views/Problem.vue b/client/next_src/views/Problem.vue
new file mode 100644 (file)
index 0000000..b30a22e
--- /dev/null
+++ b/client/next_src/views/Problem.vue
@@ -0,0 +1,94 @@
+//TODO: new problem form + problem visualisation, like Game.vue (but simpler)
+// --> mode analyze, moves = [], "load problem"
+               <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+                       <input type="checkbox" id="modal-newproblem" class="modal"/>
+                       <div role="dialog" aria-labelledby="modalProblemTxt">
+                               <div v-show="!modalProb.preview" class="card newproblem-form">
+                                       <label for="modal-newproblem" class="modal-close">
+                                       </label>
+                                       <h3 id="modalProblemTxt">{{ translate("Add a problem") }}</h3>
+                                       <form @submit.prevent="previewProblem()">
+                                               <fieldset>
+                                                       <label for="newpbFen">FEN</label>
+                                                       <input id="newpbFen" type="text" v-model="modalProb.fen"
+                                                               :placeholder='translate("Full FEN description")'/>
+                                               </fieldset>
+                                               <fieldset>
+                                                       <p class="emphasis">{{ translate("Safe HTML tags allowed") }}</p>
+                                                       <label for="newpbInstructions">{{ translate("Instructions") }}</label>
+                                                       <textarea id="newpbInstructions" v-model="modalProb.instructions"
+                                                               :placeholder='translate("Describe the problem goal")'>
+                                                       </textarea>
+                                                       <label for="newpbSolution">{{ translate("Solution") }}</label>
+                                                       <textarea id="newpbSolution" v-model="modalProb.solution"
+                                                               :placeholder='translate("How to solve the problem?")'>
+                                                       </textarea>
+                                                       <button class="center-btn">{{ translate("Preview") }}</button>
+                                               </fieldset>
+                                       </form>
+                               </div>
+                               <div v-show="modalProb.preview" class="card newproblem-preview">
+                                       <label for="modal-newproblem" class="modal-close"
+                                               @click="modalProb.preview=false">
+                                       </label>
+                                       <my-problem-summary :prob="modalProb" :userid="userId" :preview="true">
+                                       </my-problem-summary>
+                                       <div class="button-group">
+                                               <button @click="modalProb.preview=false">{{ translate("Cancel") }}</button>
+                                               <button @click="sendProblem()">{{ translate("Send") }}</button>
+                                       </div>
+                               </div>
+                       </div>
+               previewProblem: function() {
+                       if (!V.IsGoodFen(this.modalProb.fen))
+                               return alert(translations["Bad FEN description"]);
+                       if (this.modalProb.instructions.trim().length == 0)
+                               return alert(translations["Empty instructions"]);
+                       if (this.modalProb.solution.trim().length == 0)
+                               return alert(translations["Empty solution"]);
+                       Vue.set(this.modalProb, "preview", true);
+               },
+               editProblem: function(prob) {
+                       this.modalProb = prob;
+                       Vue.set(this.modalProb, "preview", false);
+                       document.getElementById("modal-newproblem").checked = true;
+               },
+               deleteProblem: function(pid) {
+                       ajax(
+                               "/problems/" + pid,
+                               "DELETE",
+                               response => {
+                                       // Delete problem from the list on client side
+                                       let problems = this.curProblems();
+                                       const pIdx = problems.findIndex(p => p.id == pid);
+                                       problems.splice(pIdx, 1);
+                               }
+                       );
+               },
+               sendProblem: function() {
+                       // Send it to the server and close modal
+                       ajax(
+                               "/problems/" + variant.id,
+                               (this.modalProb.id > 0 ? "PUT" : "POST"),
+                               this.modalProb,
+                               response => {
+                                       document.getElementById("modal-newproblem").checked = false;
+                                       Vue.set(this.modalProb, "preview", false);
+                                       if (this.modalProb.id == 0)
+                                       {
+                                               this.myProblems.unshift({
+                                                       added: Date.now(),
+                                                       id: response.id,
+                                                       uid: user.id,
+                                                       fen: this.modalProb.fen,
+                                                       instructions: this.modalProb.instructions,
+                                                       solution: this.modalProb.solution,
+                                               });
+                                               if (!this.curProb && this.display != "mine")
+                                                       this.display = "mine";
+                                       }
+                                       else
+                                               this.modalProb.id = 0;
+                               }
+                       );
+               },