Commit | Line | Data |
---|---|---|
4ecf423b | 1 | Vue.component('my-problems', { |
da06a6eb BA |
2 | data: function () { |
3 | return { | |
45109880 BA |
4 | problems: problemArray, //initial value |
5 | newProblem: { | |
77fa6d1f | 6 | fen: "", |
45109880 BA |
7 | instructions: "", |
8 | solution: "", | |
9 | stage: "nothing", //or "preview" after new problem is filled | |
10 | }, | |
da06a6eb BA |
11 | }; |
12 | }, | |
4ecf423b | 13 | template: ` |
a5d56686 BA |
14 | <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> |
15 | <div id="problemControls" class="button-group"> | |
16 | <button aria-label="Load previous problems" class="tooltip" | |
17 | @click="fetchProblems('backward')"> | |
18 | <i class="material-icons">skip_previous</i> | |
19 | </button> | |
20 | <button aria-label="Add a problem" class="tooltip" | |
21 | @click="showNewproblemModal"> | |
22 | New | |
23 | </button> | |
24 | <button aria-label="Load next problems" class="tooltip" | |
25 | @click="fetchProblems('forward')"> | |
26 | <i class="material-icons">skip_next</i> | |
27 | </button> | |
28 | </div> | |
c794dbb8 | 29 | <my-problem-summary v-on:show-problem="bubbleUp(p)" |
b5fb8e69 BA |
30 | v-for="(p,idx) in sortedProblems" |
31 | v-bind:prob="p" v-bind:preview="false" v-bind:key="idx"> | |
da06a6eb BA |
32 | </my-problem-summary> |
33 | <input type="checkbox" id="modal-newproblem" class="modal"> | |
34 | <div role="dialog" aria-labelledby="newProblemTxt"> | |
45109880 | 35 | <div v-show="newProblem.stage=='nothing'" class="card newproblem-form"> |
da06a6eb BA |
36 | <label for="modal-newproblem" class="modal-close"></label> |
37 | <h3 id="newProblemTxt">Add problem</h3> | |
45109880 | 38 | <form @submit.prevent="previewNewProblem"> |
da06a6eb BA |
39 | <fieldset> |
40 | <label for="newpbFen">Fen</label> | |
77fa6d1f BA |
41 | <input id="newpbFen" type="text" v-model="newProblem.fen" |
42 | placeholder="Full FEN string"/> | |
da06a6eb BA |
43 | </fieldset> |
44 | <fieldset> | |
45109880 | 45 | <p class="emphasis">Safe HTML tags allowed</p> |
da06a6eb | 46 | <label for="newpbInstructions">Instructions</label> |
45109880 | 47 | <textarea id="newpbInstructions" v-model="newProblem.instructions" |
b5fb8e69 | 48 | placeholder="Explain the problem here"></textarea> |
da06a6eb | 49 | <label for="newpbSolution">Solution</label> |
45109880 | 50 | <textarea id="newpbSolution" v-model="newProblem.solution" |
b5fb8e69 | 51 | placeholder="How to solve the problem?"></textarea> |
45109880 | 52 | <button class="center-btn">Preview</button> |
da06a6eb | 53 | </fieldset> |
da06a6eb BA |
54 | </form> |
55 | </div> | |
45109880 | 56 | <div v-show="newProblem.stage=='preview'" class="card newproblem-preview"> |
b5fb8e69 BA |
57 | <label for="modal-newproblem" class="modal-close"></label> |
58 | <my-problem-summary v-bind:prob="newProblem" v-bind:preview="true"> | |
59 | </my-problem-summary> | |
a5d56686 | 60 | <div class="button-group"> |
b5fb8e69 | 61 | <button @click="newProblem.stage='nothing'">Cancel</button> |
a5d56686 | 62 | <button @click="sendNewProblem()">Send</button> |
b5fb8e69 | 63 | </div> |
45109880 | 64 | </div> |
da06a6eb | 65 | </div> |
4ecf423b BA |
66 | </div> |
67 | `, | |
da06a6eb BA |
68 | computed: { |
69 | sortedProblems: function() { | |
70 | // Newest problem first | |
7931e479 | 71 | return this.problems.sort((p1,p2) => { return p2.added - p1.added; }); |
da06a6eb | 72 | }, |
da06a6eb BA |
73 | }, |
74 | methods: { | |
c794dbb8 BA |
75 | // Propagate "show problem" event to parent component (my-variant) |
76 | bubbleUp: function(problem) { | |
77 | this.$emit('show-problem', JSON.stringify(problem)); | |
78 | }, | |
da06a6eb | 79 | fetchProblems: function(direction) { |
7931e479 BA |
80 | if (this.problems.length == 0) |
81 | return; //what could we do?! | |
82 | // Search for newest date (or oldest) | |
83 | let last_dt = this.problems[0].added; | |
84 | for (let i=0; i<this.problems.length; i++) | |
85 | { | |
86 | if ((direction == "forward" && this.problems[i].added > last_dt) || | |
87 | (direction == "backward" && this.problems[i].added < last_dt)) | |
88 | { | |
89 | last_dt = this.problems[i].added; | |
90 | } | |
91 | } | |
92 | ajax("/problems/" + variant, "GET", { | |
93 | direction: direction, | |
94 | last_dt: last_dt, | |
95 | }, response => { | |
96 | if (response.problems.length > 0) | |
97 | this.problems = response.problems; | |
98 | }); | |
da06a6eb BA |
99 | }, |
100 | showNewproblemModal: function() { | |
101 | document.getElementById("modal-newproblem").checked = true; | |
102 | }, | |
45109880 BA |
103 | previewNewProblem: function() { |
104 | if (!V.IsGoodFen(this.newProblem.fen)) | |
7931e479 | 105 | return alert("Bad FEN string"); |
a5d56686 BA |
106 | if (this.newProblem.instructions.length == 0) |
107 | return alert("Empty instructions"); | |
108 | if (this.newProblem.solution.length == 0) | |
109 | return alert("Empty solution"); | |
45109880 BA |
110 | this.newProblem.stage = "preview"; |
111 | }, | |
112 | sendNewProblem: function() { | |
113 | // Send it to the server and close modal | |
7931e479 | 114 | ajax("/problems/" + variant, "POST", { |
45109880 BA |
115 | fen: this.newProblem.fen, |
116 | instructions: this.newProblem.instructions, | |
117 | solution: this.newProblem.solution, | |
7931e479 | 118 | }, response => { |
b5fb8e69 BA |
119 | this.newProblem.added = Date.now(); |
120 | this.problems.push(JSON.parse(JSON.stringify(this.newProblem))); | |
7931e479 | 121 | document.getElementById("modal-newproblem").checked = false; |
45109880 | 122 | this.newProblem.stage = "nothing"; |
7931e479 | 123 | }); |
da06a6eb BA |
124 | }, |
125 | }, | |
4ecf423b | 126 | }) |