X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fproblems.js;h=d9265a36fcecb7a4df65d24d88f18d7bcef6f6f8;hb=e6dcb115eab52abefa1d54a65af546cf5a0153e9;hp=3bd13f63baf8856259deca647cfece614feaef7f;hpb=45109880413a50dec3a07298b987fb07d60630b2;p=vchess.git

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 3bd13f63..d9265a36 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -3,7 +3,7 @@ Vue.component('my-problems', {
 		return {
 			problems: problemArray, //initial value
 			newProblem: {
-				fen: V.GenRandInitFen(),
+				fen: "",
 				instructions: "",
 				solution: "",
 				stage: "nothing", //or "preview" after new problem is filled
@@ -16,7 +16,8 @@ Vue.component('my-problems', {
 			<button @click="fetchProblems('forward')">Next</button>
 			<button @click="showNewproblemModal">New</button>
 			<my-problem-summary v-on:show-problem="bubbleUp(p)"
-				v-for="(p,idx) in sortedProblems" v-bind:prob="p" v-bind:key="idx">
+				v-for="(p,idx) in sortedProblems"
+				v-bind:prob="p" v-bind:preview="false" v-bind:key="idx">
 			</my-problem-summary>
 			<input type="checkbox" id="modal-newproblem" class="modal">
 			<div role="dialog" aria-labelledby="newProblemTxt">
@@ -26,24 +27,29 @@ Vue.component('my-problems', {
 					<form @submit.prevent="previewNewProblem">
 						<fieldset>
 							<label for="newpbFen">Fen</label>
-							<input id="newpbFen" type="text" v-model="newProblem.fen"/>
+							<input id="newpbFen" type="text" v-model="newProblem.fen"
+								placeholder="Full FEN string"/>
 						</fieldset>
 						<fieldset>
 							<p class="emphasis">Safe HTML tags allowed</p>
 							<label for="newpbInstructions">Instructions</label>
 							<textarea id="newpbInstructions" v-model="newProblem.instructions"
-								placeholder="Explain the problem here"/>
+								placeholder="Explain the problem here"></textarea>
 							<label for="newpbSolution">Solution</label>
 							<textarea id="newpbSolution" v-model="newProblem.solution"
-								placeholder="How to solve the problem?"/>
+								placeholder="How to solve the problem?"></textarea>
 							<button class="center-btn">Preview</button>
 						</fieldset>
 					</form>
 				</div>
 				<div v-show="newProblem.stage=='preview'" class="card newproblem-preview">
-					// TODO: we don't want exactly the same display (-date +solution)
-					<my-problem-summary v-bind:prob="newProblem"></my-problem-summary>
-					<button @click="sendNewProblem()" class="center-btn">Send</button>
+					<label for="modal-newproblem" class="modal-close"></label>
+					<my-problem-summary v-bind:prob="newProblem" v-bind:preview="true">
+					</my-problem-summary>
+					<div class="col-sm-12 col-md-6 col-lg-3 col-lg-offset-3 topspace">
+						<button @click="sendNewProblem()">Send</button>
+						<button @click="newProblem.stage='nothing'">Cancel</button>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -99,6 +105,8 @@ Vue.component('my-problems', {
 				instructions: this.newProblem.instructions,
 				solution: this.newProblem.solution,
 			}, response => {
+				this.newProblem.added = Date.now();
+				this.problems.push(JSON.parse(JSON.stringify(this.newProblem)));
 				document.getElementById("modal-newproblem").checked = false;
 				this.newProblem.stage = "nothing";
 			});