+//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;
+ }
+ );
+ },
projects / vchess.git / commitdiff