Commit | Line | Data |
---|---|---|
89021f18 BA |
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> |