Draft of problems section

[vchess.git] / client / src / views / Problems.vue

<template lang="pug">
main
  input#modalNewprob.modal(type="checkbox" @change="infoMsg=''")
  div#newprobDiv(role="dialog" data-checkbox="modalNewprob")
    .card(@keyup.enter="newProblem()")
      label#closeNewprob.modal-close(for="modalNewprob")
      form(@submit.prevent="newProblem()" @keyup.enter="newProblem()")
        fieldset
          label(for="selectVariant") {{ st.tr["Variant"] }}
          select#selectVariant(v-model="newproblem.vid" @change="loadVariant()")
            option(v-for="v in [emptyVar].concat(st.variants)" :value="v.id"
                :selected="newproblem.vid==v.id")
              | {{ v.name }}
        fieldset
          label(for="inputFen") FEN
          input#inputFen(type="text" v-model="newproblem.fen" @input="tryGetDiagram()")
        fieldset
          textarea#instructions(:placeholder="st.tr['Instructions']")
          textarea#solution(:placeholder="st.tr['Solution']")
      #preview
        div(v-html="curDiag")
        p instru: v-html=... .replace("\n", "<br/>") --> si pas de tags détectés !
        p solution: v-html=...
      button(@click="newProblem()") {{ st.tr["Send problem"] }}
      #dialog.text-center {{ st.tr[infoMsg] }}
  .row
    .col-sm-12
      button#newProblem(onClick="doClick('modalNewprob')") {{ st.tr["New problem"] }}
  .row
    .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="newproblem.vid")
        option(v-for="v in [emptyVar].concat(st.variants)" :value="v.id")
          | {{ v.name }}
      // TODO: nice problems printing :: same as in preview ==> subComponent (inlined?)
      div(v-for="p in problems" v-show="showProblem(p)")
        p {{ p.vid }}
        p {{ p.fen }}
        p {{ p.instruction }}
        p {{ p.solution }}
</template>

<script>
import { store } from "@/store";
import { ajax } from "@/utils/ajax";
import { checkProblem } from "@/data/problemCheck";
import { getDiagram } from "@/utils/printDiagram";
export default {
  name: "my-problems",
  data: function() {
    return {
      emptyVar: {
        vid: 0,
        vname: "",
      },
      newproblem: {
        vid: 0,
        fen: "",
        instruction: "",
        solution: "",
      },
      onlyMines: false,
      st: store.state,
      problems: [],
      infoMsg: "",
      curVar: 0,
      curDiag: "",
    };
  },
  created: function() {
    ajax("/problems", "GET", (res) => {
      this.problems = res.problems;
    });
  },
  methods: {
    showProblem: function(p) {
      return (this.vid == 0 || p.vid == this.vid) &&
        (!this.onlyMines || p.uid != this.st.user.id);
    },
    loadVariant: async function() {
      if (this.newproblem.vid == 0)
        return;
      this.curVar = 0;
      const variant = this.st.variants.find(v => v.id == this.newproblem.vid);
      const vModule = await import("@/variants/" + variant.name + ".js");
      window.V = vModule.VariantRules;
      this.curVar = this.newproblem.vid;
      this.tryGetDiagram(); //the FEN might be already filled
    },
    tryGetDiagram: async function() {
      if (this.newproblem.vid == 0)
        return;
      // Check through curVar if V is ready:
      if (this.curVar == this.newproblem.vid && V.IsGoodFen(this.newproblem.fen))
      {
        const parsedFen = V.ParseFen(this.newproblem.fen);
        const args = {
          position: parsedFen.position,
          orientation: parsedFen.turn,
        };
        this.curDiag = getDiagram(args);
      }
      else
        this.curDiag = "<p>FEN not yet correct</p>";
    },
    newProblem: function() {
      const error = checkProblem(this.newproblem);
      if (!!error)
        return alert(error);
      ajax("/problems", "POST", {prob:this.newproblem}, (ret) => {
        this.infoMsg = this.st.tr["Problem sent!"];
        let newProblem = Object.Assign({}, this.newproblem);
        newProblem.id = ret.id;
        this.problems = this.problems.concat(newProblem);
      });
    },
  },
};
</script>

<style lang="sass" scoped>
#newProblem
  display: block
  margin: 10px auto 5px auto
</style>