Some debug, all components enabled (but not finished: socket+AJAX missing)

[vchess.git] / public / javascripts / components / problems.js

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index cf2cd07..6f03fd9 100644 (file)
--- 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,14 +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-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true">
-                               </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"] }}
@@ -128,10 +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() {
-               // TODO: adapt this, #problems:28 ? (for example)
-               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();
        },
@@ -249,7 +265,7 @@ Vue.component('my-problems', {
                                }
                        }
                        ajax(
-                               "/problems/" + variant.name, //TODO: use variant._id ?
+                               "/problems/" + variant.id,
                                "GET",
                                {
                                        type: type,
@@ -284,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
@@ -297,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 => {