- <div id="problemControls" class="button-group">
- <button :aria-label='translate("Previous problem(s)")' class="tooltip" @click="showNext('backward')">
- <i class="material-icons">skip_previous</i>
- </button>
- <button :aria-label='translate("Add a problem")' class="tooltip" onClick="doClick('modal-newproblem')">
- {{ translate("New") }}
- </button>
- <button :aria-label='translate("Next problem(s)")' class="tooltip" @click="showNext('forward')">
- <i class="material-icons">skip_next</i>
- </button>
- </div>
- <div id="mainBoard" v-show="!!curProb">
- <div id="instructions-div" class="section-content">
- <p id="problem-instructions">
- {{ curProb.instructions }}
- </p>
- </div>
- <my-board :fen="curProb.fen"></my-board>
- <div id="solution-div" class="section-content">
- <h3 class="clickable" @click="showSolution = !showSolution">
- {{ translations["Show solution"] }}
- </h3>
- <p id="problem-solution" v-show="showSolution">
- {{ curProb.solution }}
- </p>
- </div>
- <button @click="displayList()">
- <span>Back to list display</span>
- </button>
- </div>
- <div>
- <input type="text" placeholder="Type problem number" v-model="pbNum"/>
- <button @click="showProblem()">
- <span>Show problem</span>
- </button>
- </div>
- <button v-if="!!userId" @click="toggleListDisplay()">
- <span>My problems (only)</span>
- </button>
- <my-problem-summary v-show="!curProb"
- v-on:edit-problem="editProblem(p)" v-on:delete-problem="deleteProblem(p.id)"
- v-for="p in curProblems" @click="curProb=p"
- v-bind:prob="p" v-bind:userid="userId" v-bind:key="p.id">
- </my-problem-summary>