X-Git-Url: https://git.auder.net/doc/index.css?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fproblems.js;h=6f03fd973bae4330c0eba1dceada95e00dee5669;hb=60d9063fdfcd4b7628fbc0e0fc594f083bda8761;hp=897babbe7035886ff889e384ff86fa1100e48868;hpb=936dc463c969f648ae0bc81074ff3272c7c99697;p=vchess.git

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 897babbe..6f03fd97 100644
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -1,4 +1,5 @@
 Vue.component('my-problems', {
+	props: ["queryHash","settings"],
 	data: function () {
 		return {
 			userId: user.id,
@@ -8,6 +9,7 @@ Vue.component('my-problems', {
 			display: "others", //or "mine"
 			curProb: null, //(reference to) current displayed problem (if any)
 			showSolution: false,
+			nomoreMessage: "",
 			pbNum: 0, //to navigate directly to some problem
 			// New problem (to upload), or existing problem to edit:
 			modalProb: {
@@ -32,13 +34,14 @@ Vue.component('my-problems', {
 					<i class="material-icons">skip_next</i>
 				</button>
 			</div>
-			<div id="mainBoard" v-show="!!curProb">
+			<div id="mainBoard" v-if="!!curProb">
 				<div id="instructions-div" class="section-content">
 					<p id="problem-instructions">
 						{{ curProb.instructions }}
 					</p>
 				</div>
-				<my-board :fen="curProb.fen"></my-board>
+				<my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true" :settings="settings">
+				</my-game>
 				<div id="solution-div" class="section-content">
 					<h3 class="clickable" @click="showSolution = !showSolution">
 						{{ translations["Show solution"] }}
@@ -127,9 +130,24 @@ Vue.component('my-problems', {
 			</div>
 		</div>
 	`,
+	watch: {
+		queryHash: function(newQhash) {
+			if (!!newQhash)
+			{
+				// New query hash = "id=42"; get 42 as problem ID
+				const pid = parseInt(newQhash.substr(2));
+				this.showProblem(pid);
+			}
+			else
+				this.curProb = null; //(back to) list display
+		},
+	},
 	created: function() {
-		if (location.hash.length > 0)
-			this.showProblem(location.hash.slice(1));
+		if (!!this.queryHash)
+		{
+			const pid = parseInt(this.queryHash.substr(2));
+			this.showProblem(pid);
+		}
 		else
 			this.firstFetch();
 	},
@@ -247,7 +265,7 @@ Vue.component('my-problems', {
 				}
 			}
 			ajax(
-				"/problems/" + variant.name, //TODO: use variant._id ?
+				"/problems/" + variant.id,
 				"GET",
 				{
 					type: type,
@@ -282,7 +300,7 @@ Vue.component('my-problems', {
 		},
 		deleteProblem: function(pid) {
 			ajax(
-				"/problems/" + variant.name + "/" + pid, //TODO: with variant.id ?
+				"/problems/" + variant.id + "/" + pid,
 				"DELETE",
 				response => {
 					// Delete problem from the list on client side
@@ -295,7 +313,7 @@ Vue.component('my-problems', {
 		sendProblem: function() {
 			// Send it to the server and close modal
 			ajax(
-				"/problems/" + variant.name, //TODO: with variant.id ?
+				"/problems/" + variant.id,
 				(this.modalProb.id > 0 ? "PUT" : "POST"),
 				this.modalProb,
 				response => {