X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fviews%2FProblems.vue;h=7c81e6782447e4e0dec7263f1f09755cfe215b6e;hp=e8e63f8fff5b125aea0cccb7bbfcbf957c914b2d;hb=bd76b45611cbb58dcf774745a4d690277a82aacd;hpb=d8b1800bcec983faabc34bdb1057ef880488a160

diff --git a/client/src/views/Problems.vue b/client/src/views/Problems.vue
index e8e63f8f..7c81e678 100644
--- a/client/src/views/Problems.vue
+++ b/client/src/views/Problems.vue
@@ -17,48 +17,46 @@ main
           )
             | {{ v.name }}
       fieldset
-        label(for="inputFen") FEN
         input#inputFen(
           type="text"
+          placeholder="FEN"
           v-model="curproblem.fen"
           @input="trySetDiagram(curproblem)"
         )
-        div(v-html="curproblem.diag")
+        #diagram(v-html="curproblem.diag")
       fieldset
-        textarea#instructions(
+        textarea(
           :placeholder="st.tr['Instructions']"
           v-model="curproblem.instruction"
         )
         p(v-html="parseHtml(curproblem.instruction)")
       fieldset
-        textarea#solution(
+        textarea(
           :placeholder="st.tr['Solution']"
           v-model="curproblem.solution"
         )
         p(v-html="parseHtml(curproblem.solution)")
       button(@click="sendProblem()") {{ st.tr["Send"] }}
       #dialog.text-center {{ st.tr[infoMsg] }}
-  .row
-    .col-sm-12
-      button#newProblem(onClick="doClick('modalNewprob')")
-        | {{ st.tr["New problem"] }}
   .row(v-if="showOne")
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-      #actions
-        button(@click="showOne=false") {{ st.tr["Back to list"] }}
-        button(
+      #topPage
+        span {{ curproblem.vname }}
+        button.marginleft(@click="backToList()") {{ st.tr["Back to list"] }}
+        button.nomargin(
           v-if="st.user.id == curproblem.uid"
           @click="editProblem(curproblem)"
         )
           | {{ st.tr["Edit"] }}
-        button(
+        button.nomargin(
           v-if="st.user.id == curproblem.uid"
           @click="deleteProblem(curproblem)"
         )
           | {{ st.tr["Delete"] }}
-      h4 {{ curproblem.vname }}
-      p(v-html="parseHtml(curproblem.instruction)")
-      h4(@click="curproblem.showSolution=!curproblem.showSolution")
+      p.clickable(
+        v-html="curproblem.uname + ' : ' + parseHtml(curproblem.instruction)"
+        @click="curproblem.showSolution=!curproblem.showSolution"
+      )
         | {{ st.tr["Show solution"] }}
       p(
         v-show="curproblem.showSolution"
@@ -66,38 +64,42 @@ main
       )
   .row(v-else)
     .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-      label(for="checkboxMine") {{ st.tr["My problems"] }}
-      input#checkboxMine(
-        type="checkbox"
-        v-model="onlyMines"
-      )
-      label(for="selectVariant") {{ st.tr["Variant"] }}
-      select#selectVariant(v-model="selectedVar")
-        option(
-          v-for="v in [emptyVar].concat(st.variants)"
-          :value="v.id"
+      #controls
+        button#newProblem(onClick="doClick('modalNewprob')")
+          | {{ st.tr["New problem"] }}
+        label(for="checkboxMine") {{ st.tr["My problems"] }}
+        input#checkboxMine(
+          type="checkbox"
+          v-model="onlyMines"
         )
-          | {{ v.name }}
-      div(
-        v-for="p in problems"
-        v-show="displayProblem(p)"
-        @click="showProblem(p)"
-      )
-        h4 {{ p.vname }}
-        p {{ p.fen }}
-        p(v-html="p.instruction")
+        label(for="selectVariant") {{ st.tr["Variant"] }}
+        select#selectVariant(v-model="selectedVar")
+          option(
+            v-for="v in [emptyVar].concat(st.variants)"
+            :value="v.id"
+          )
+            | {{ v.name }}
+      table
+        tr
+          th {{ st.tr["Variant"] }}
+          th {{ st.tr["Instructions"] }}
+        tr(
+          v-for="p in problems"
+          v-show="displayProblem(p)"
+          @click="setHrefPid(p)"
+        )
+          td {{ p.vname }}
+          td(v-html="p.instruction")
   BaseGame(v-if="showOne" :game="game" :vr="vr")
 </template>
 
 <script>
-// TODO: si showProblem(p), changer URL (ajouter problem ID)
-// Et si au lancement l'URL comprend un pid, alors showOne=true et curproblem=...
-// TODO: also style problem div (in the list, similar to variants page + clickable)
-
 import { store } from "@/store";
 import { ajax } from "@/utils/ajax";
 import { checkProblem } from "@/data/problemCheck";
 import { getDiagram } from "@/utils/printDiagram";
+import { processModalClick } from "@/utils/modalClick";
+import { ArrayFun } from "@/utils/array";
 import BaseGame from "@/components/BaseGame.vue";
 export default {
   name: "my-problems",
@@ -138,9 +140,34 @@ export default {
     ajax("/problems", "GET", (res) => {
       this.problems = res.problems;
       if (this.st.variants.length > 0)
-        this.problems.forEach(p => this.setVname(p))
+        this.problems.forEach(p => this.setVname(p));
+      // Retrieve all problems' authors' names
+      let names = {};
+      this.problems.forEach(p => {
+        if (p.uid != this.st.user.id)
+          names[p.uid] = ""; //unknwon for now
+        else { console.log("assign " + this.st.user.name);
+          p.uname = this.st.user.name; console.log(p); console.log(this.problems); }
+      });
+      if (Object.keys(name).length > 0)
+      {
+        ajax("/users",
+          "GET",
+          { ids: Object.keys(names).join(",") },
+          res2 => {
+            res2.users.forEach(u => {names[u.id] = u.name});
+            this.problems.forEach(p => p.uname = names[p.uid]);
+          }
+        );
+      }
+      const pid = this.$route.query["id"];
+      if (!!pid)
+        this.showProblem(this.problems.find(p => p.id == pid));
     });
   },
+  mounted: function() {
+    document.getElementById("newprobDiv").addEventListener("click", processModalClick);
+  },
   watch: {
     // st.variants changes only once, at loading from [] to [...]
     "st.variants": function(variantArray) {
@@ -148,6 +175,13 @@ export default {
       if (this.problems.length > 0 && this.problems[0].vname == "")
         this.problems.forEach(p => this.setVname(p));
     },
+    "$route": function(to, from) { console.log("ddddd");
+      const pid = to.query["id"];
+      if (!!pid)
+        this.showProblem(this.problems.find(p => p.id == pid));
+      else
+        this.showOne = false
+    },
   },
   methods: {
     setVname: function(prob) {
@@ -157,6 +191,15 @@ export default {
       for (let key in p1)
         p2[key] = p1[key];
     },
+    setHrefPid: function(p) {
+      // Change href => $route changes, watcher notices, call showProblem
+      const curHref = document.location.href;
+      document.location.href = curHref.split("?")[0] + "?id=" + p.id;
+    },
+    backToList: function() {
+      // Change href => $route change, watcher notices, reset showOne to false
+      document.location.href = document.location.href.split("?")[0];
+    },
     resetCurProb: function() {
       this.curproblem.id = 0;
       this.curproblem.uid = 0;
@@ -248,6 +291,8 @@ export default {
           {
             let newProblem = Object.assign({}, this.curproblem);
             newProblem.id = ret.id;
+            newProblem.uid = this.st.user.id;
+            newProblem.uname = this.st.user.name;
             this.problems = this.problems.concat(newProblem);
           }
           this.resetCurProb();
@@ -263,14 +308,41 @@ export default {
     },
     deleteProblem: function(prob) {
       if (confirm(this.st.tr["Are you sure?"]))
-        ajax("/problems", "DELETE", {pid:prob.id});
+      {
+        ajax("/problems", "DELETE", {id:prob.id}, () => {
+          ArrayFun.remove(this.problems, p => p.id == prob.id);
+          this.backToList();
+        });
+      }
     },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-#newProblem
-  display: block
-  margin: 10px auto 5px auto
+[type="checkbox"].modal+div .card
+  max-width: 767px
+  max-height: 100%
+#inputFen
+  width: 100%
+textarea
+  width: 100%
+#diagram
+  margin: 0 auto
+  max-width: 400px
+#controls
+  margin: 0
+  width: 100%
+  text-align: center
+  & > *
+    margin: 0
+#topPage
+  span
+    font-weight: bold
+  margin: 0 auto
+  & > .nomargin
+    margin: 0
+  & > .marginleft
+    margin: 0 0 0 15px
+
 </style>