Vue.component('my-problems', {
+ props: ["queryHash","settings"],
data: function () {
return {
userId: user.id,
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: {
<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"] }}
</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();
},
}
}
ajax(
- "/problems/" + variant.name, //TODO: use variant._id ?
+ "/problems/" + variant.id,
"GET",
{
type: type,
},
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
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 => {