Refactoring: split files into components (not working, broken state)

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

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index bcd069c..ad8c54c 100644 (file)
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -1,38 +1,98 @@
 Vue.component('my-problems', {
        data: function () {
                return {
-                       problems: [],
+                       problems: [], //oldest first
+                       curIdx: 0, //index in problems array
+                       stage: "nothing", //or "preview" after new problem is filled
                        newProblem: {
                                fen: "",
                                instructions: "",
                                solution: "",
-                               stage: "nothing", //or "preview" after new problem is filled
                        },
                };
        },
        template: `
                <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
                        <div id="problemControls" class="button-group">
-                               <button :aria-label='translate("Load previous problems")' class="tooltip"
-                                               @click="fetchProblems('backward')">
+                               <button :aria-label='translate("Load previous problem")' class="tooltip"
+                                               @click="showPreviousProblem()">
                                        <i class="material-icons">skip_previous</i>
                                </button>
                                <button :aria-label='translate("Add a problem")' class="tooltip"
                                                @click="showNewproblemModal">
                                        {{ translate("New") }}
                                </button>
-                               <button :aria-label='translate("Load next problems")' class="tooltip"
-                                               @click="fetchProblems('forward')">
+                               <button :aria-label='translate("Load next problem")' class="tooltip"
+                                               @click="showNextProblem()">
                                        <i class="material-icons">skip_next</i>
                                </button>
                        </div>
-                       <my-problem-summary v-on:show-problem="bubbleUp(p)"
-                               v-for="(p,idx) in sortedProblems"
+               
+
+
+                       if (this.mode == "problem")
+                       {
+                               // Show problem instructions
+                               elementArray.push(
+                                       h('div',
+                                               {
+                                                       attrs: { id: "instructions-div" },
+                                                       "class": {
+                                                               "clearer": true,
+                                                               "section-content": true,
+                                                       },
+                                               },
+                                               [
+                                                       h('p',
+                                                               {
+                                                                       attrs: { id: "problem-instructions" },
+                                                                       domProps: { innerHTML: this.problem.instructions }
+                                                               }
+                                                       )
+                                               ]
+                                       )
+                               );
+                       }
+
+
+                       // TODO ici :: instrus + diag interactif + solution
+                       my-board + pilotage via movesList + VariantRules !
+                       
+                       <my-problem-preview v-show="stage=='preview'"
+                               v-for="(p,idx) in problems"
                                v-bind:prob="p" v-bind:preview="false" v-bind:key="idx">
                        </my-problem-summary>
+                       if (this.mode == "problem")
+                       {
+                               // Show problem solution (on click)
+                               elementArray.push(
+                                       h('div',
+                                               {
+                                                       attrs: { id: "solution-div" },
+                                                       "class": { "section-content": true },
+                                               },
+                                               [
+                                                       h('h3',
+                                                               {
+                                                                       "class": { clickable: true },
+                                                                       domProps: { innerHTML: translations["Show solution"] },
+                                                                       on: { click: this.toggleShowSolution },
+                                                               }
+                                                       ),
+                                                       h('p',
+                                                               {
+                                                                       attrs: { id: "problem-solution" },
+                                                                       domProps: { innerHTML: this.problem.solution }
+                                                               }
+                                                       )
+                                               ]
+                                       )
+                               );
+                       }
+                       
                        <input type="checkbox" id="modal-newproblem" class="modal">
                        <div role="dialog" aria-labelledby="newProblemTxt">
-                               <div v-show="newProblem.stage=='nothing'" class="card newproblem-form">
+                               <div v-show="stage=='nothing'" class="card newproblem-form">
                                        <label for="modal-newproblem" class="modal-close"></label>
                                        <h3 id="newProblemTxt">{{ translate("Add a problem") }}</h3>
                                        <form @submit.prevent="previewNewProblem">
@@ -53,10 +113,9 @@ Vue.component('my-problems', {
                                                </fieldset>
                                        </form>
                                </div>
-                               <div v-show="newProblem.stage=='preview'" class="card newproblem-preview">
+                               <div v-show="stage=='preview'" class="card newproblem-preview">
                                        <label for="modal-newproblem" class="modal-close"></label>
-                                       <my-problem-summary v-bind:prob="newProblem" v-bind:preview="true">
-                                       </my-problem-summary>
+                                       <my-problem-preview v-bind:prob="newProblem"></my-problem-summary>
                                        <div class="button-group">
                                                <button @click="newProblem.stage='nothing'">{{ translate("Cancel") }}</button>
                                                <button @click="sendNewProblem()">{{ translate("Send") }}</button>
@@ -68,10 +127,10 @@ Vue.component('my-problems', {
        computed: {
                sortedProblems: function() {
                        // Newest problem first
-                       return this.problems.sort((p1,p2) => { return p2.added - p1.added; });
                },
        },
        created: function() {
+               // Analyse URL: if a single problem required, show it. Otherwise,
                // TODO: fetch most recent problems from server
        },
        methods: {
@@ -83,6 +142,26 @@ Vue.component('my-problems', {
 //             bubbleUp: function(problem) {
 //                     this.$emit('show-problem', JSON.stringify(problem));
 //             },
+               toggleShowSolution: function() {
+                       let problemSolution = document.getElementById("problem-solution");
+                       problemSolution.style.display =
+                               !problemSolution.style.display || problemSolution.style.display == "none"
+                                       ? "block"
+                                       : "none";
+               },
+               showPreviousProblem: function() {
+                       if (this.curIdx == 0)
+                               this.fetchProblems("backward");
+                       else
+                               this.curIdx--;
+               },
+               showNextProblem: function() {
+                       if (this.curIdx == this.problems.length - 1)
+                               this.fetchProblems("forward");
+                       else
+                               this.curIdx++;
+               },
+               // TODO: modal "no more problems"
                fetchProblems: function(direction) {
                        if (this.problems.length == 0)
                                return; //what could we do?!
@@ -101,7 +180,11 @@ Vue.component('my-problems', {
                                last_dt: last_dt,
                        }, response => {
                                if (response.problems.length > 0)
-                                       this.problems = response.problems;
+                               {
+                                       this.problems = response.problems
+                                               .sort((p1,p2) => { return p1.added - p2.added; });
+                                       this.curIdx = response.problems.length - 1;
+                               }
                        });
                },
                showNewproblemModal: function() {