4f832fadce8aadf724ec8d1db6aca2a5623d032f
[vchess.git] / client / src / views / Problems.vue
1 <template lang="pug">
2 main
3 input#modalNewprob.modal(type="checkbox" @change="infoMsg=''")
4 div#newprobDiv(role="dialog" data-checkbox="modalNewprob")
5 .card(@keyup.enter="newProblem()")
6 label#closeNewprob.modal-close(for="modalNewprob")
7 form(@submit.prevent="newProblem()" @keyup.enter="newProblem()")
8 fieldset
9 label(for="selectVariant") {{ st.tr["Variant"] }}
10 select#selectVariant(v-model="newproblem.vid" @change="loadVariant()")
11 option(v-for="v in [emptyVar].concat(st.variants)" :value="v.id"
12 :selected="newproblem.vid==v.id")
13 | {{ v.name }}
14 fieldset
15 label(for="inputFen") FEN
16 input#inputFen(type="text" v-model="newproblem.fen" @input="tryGetDiagram()")
17 fieldset
18 textarea#instructions(:placeholder="st.tr['Instructions']")
19 textarea#solution(:placeholder="st.tr['Solution']")
20 #preview
21 div(v-html="curDiag")
22 p instru: v-html=... .replace("\n", "<br/>") --> si pas de tags détectés !
23 p solution: v-html=...
24 button(@click="newProblem()") {{ st.tr["Send problem"] }}
25 #dialog.text-center {{ st.tr[infoMsg] }}
26 .row
27 .col-sm-12
28 button#newProblem(onClick="doClick('modalNewprob')") {{ st.tr["New problem"] }}
29 .row
30 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
31 label(for="checkboxMine") {{ st.tr["My problems"] }}
32 input#checkboxMine(type="checkbox" v-model="onlyMines")
33 label(for="selectVariant") {{ st.tr["Variant"] }}
34 select#selectVariant(v-model="newproblem.vid")
35 option(v-for="v in [emptyVar].concat(st.variants)" :value="v.id")
36 | {{ v.name }}
37 // TODO: nice problems printing :: same as in preview ==> subComponent (inlined?)
38 div(v-for="p in problems" v-show="showProblem(p)")
39 p {{ p.vid }}
40 p {{ p.fen }}
41 p {{ p.instruction }}
42 p {{ p.solution }}
43 </template>
44
45 <script>
46 import { store } from "@/store";
47 import { ajax } from "@/utils/ajax";
48 import { checkProblem } from "@/data/problemCheck";
49 import { getDiagram } from "@/utils/printDiagram";
50 export default {
51 name: "my-problems",
52 data: function() {
53 return {
54 emptyVar: {
55 vid: 0,
56 vname: "",
57 },
58 newproblem: {
59 vid: 0,
60 fen: "",
61 instruction: "",
62 solution: "",
63 },
64 onlyMines: false,
65 st: store.state,
66 problems: [],
67 infoMsg: "",
68 curVar: 0,
69 curDiag: "",
70 };
71 },
72 created: function() {
73 ajax("/problems", "GET", (res) => {
74 this.problems = res.problems;
75 });
76 },
77 methods: {
78 showProblem: function(p) {
79 return (this.vid == 0 || p.vid == this.vid) &&
80 (!this.onlyMines || p.uid != this.st.user.id);
81 },
82 loadVariant: async function() {
83 if (this.newproblem.vid == 0)
84 return;
85 this.curVar = 0;
86 const variant = this.st.variants.find(v => v.id == this.newproblem.vid);
87 const vModule = await import("@/variants/" + variant.name + ".js");
88 window.V = vModule.VariantRules;
89 this.curVar = this.newproblem.vid;
90 this.tryGetDiagram(); //the FEN might be already filled
91 },
92 tryGetDiagram: async function() {
93 if (this.newproblem.vid == 0)
94 return;
95 // Check through curVar if V is ready:
96 if (this.curVar == this.newproblem.vid && V.IsGoodFen(this.newproblem.fen))
97 {
98 const parsedFen = V.ParseFen(this.newproblem.fen);
99 const args = {
100 position: parsedFen.position,
101 orientation: parsedFen.turn,
102 };
103 this.curDiag = getDiagram(args);
104 }
105 else
106 this.curDiag = "<p>FEN not yet correct</p>";
107 },
108 newProblem: function() {
109 const error = checkProblem(this.newproblem);
110 if (!!error)
111 return alert(error);
112 ajax("/problems", "POST", {prob:this.newproblem}, (ret) => {
113 this.infoMsg = this.st.tr["Problem sent!"];
114 let newProblem = Object.Assign({}, this.newproblem);
115 newProblem.id = ret.id;
116 this.problems = this.problems.concat(newProblem);
117 });
118 },
119 },
120 };
121 </script>
122
123 <style lang="sass" scoped>
124 #newProblem
125 display: block
126 margin: 10px auto 5px auto
127 </style>