SotM_Playfield/src/Editor.vue

<template>
  <div>
    <div id="controls">
      <div>
        <button type="button" @click="upload"> Save Deck </button>
        <button type="button" @click="jsonInputDownload">
          Download Input JSON
        </button>

        <button type="button"
                @click="downloadFile('/decks/' + deckID + '.tts.json', deckInfo.meta.name + '.tts.json')">
          Download Tabletop Output JSON
        </button>
      </div>

      <div>
        <label> Upload JSON: WARNING: WILL CLEAR DECK
          <input @change="jsonUpload" type="file">
        </label>
      </div>

      <form>
        <div>
          <label> Deck Name: <input type="text" v-model="deckInfo.meta.name"> </label>
        </div>
        <div>
          <label> Deck Type:
            <select v-model="deckInfo.meta.type">
              <option value="hero">hero</option>
              <option value="villain">villain</option>
              <option value="environment">environment</option>
            </select>
          </label>
        </div>
      </form>
    </div>

    <div id="cardEditor" v-if="selected">
      <button class="close-editor" @click="selected = null">X</button>
      <div v-for="(type, prop) in selected.props">
        <label> {{ prop }}
          <input v-if="type === Number" v-model="selected.card[prop]"/>
          <input v-if="type === 'file'" type="file" accept="image/*"
                 @change="fileUploaded(prop, $event)" />
          <textarea v-else rows="1" v-model="selected.card[prop]"> </textarea>
        </label>
      </div>
    </div>

    <Deck ref="deck" :deckInfo="deckInfo" v-model="selected"> </Deck>
  </div>
</template>

<script>
 import Deck from './Deck.vue';

 export default {
   name: 'Editor',
   components: {Deck},

   props: ['deckID'],
   data() {
     return {
       selected: null,
       deckInfo: {meta: {name: "", type: ""}},
     };
   },

   watch: {
     deckInfo() {
       document.title = "Editor|" + this.deckInfo.meta.name;
     },
   },

   created() {
     if (this.deckID !== 'new') {
       fetch('/decks/' + this.deckID + '.json')
             .then(r => r.json())
             .then(j => this.deckInfo = j.input)
             .catch((err) => console.log('did not get old JSON, starting new deck'));
     }

     /* window.addEventListener(
      *   'beforeunload', e => e.returnValue = "Unsaved changes blah blah"); */
   },

   methods: {
     // deck JSON uploader
     jsonUpload(event) {
       let files = event.target.files;
       let reader = new FileReader();
       reader.onload = event => {
         this.deckInfo = JSON.parse(event.target.result);
       };
       reader.readAsText(files[0]);
     },

     // download input JSON
     jsonInputDownload() {
       console.log(JSON.stringify(this.deckInfo));
       this.downloadFile('data:application/json;charset=utf-8,' +
                         encodeURIComponent(JSON.stringify(this.deckInfo)),
                         this.deckID + '.input.json')
     },

     fileUploaded(event, prop) {
       let reader = new FileReader();
       reader.onload = e => {
         this.selected.card[prop] = e.target.result;
       };
       reader.readAsDataURL(event.target.files[0]);
     },

     downloadFile(file, name) {
       let dl = document.createElement('a');
       dl.setAttribute('href', file);
       dl.setAttribute('download', name);
       document.body.appendChild(dl);
       dl.click();
       document.body.removeChild(dl);
     },

     upload() {
       // POST the inputed json to the server
       fetch('/upload', {
         method: 'post',
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({
           id: this.deckID === 'new' ? undefined : this.deckID,
           deck: this.deckInfo,
           body: (new XMLSerializer()).serializeToString(this.$refs.deck.$el),
         })
       })
         .then(r => r.json())
         .then(j => this.$router.replace('/edit/' + j.id))
         .catch(err => console.log('Failed to upload' + err));
     },
   },
 }
</script>

<style>
 #cardEditor {
   position: fixed;
   top: 0;
   right: 0;
   background-color: gray;
   padding: 10px;
   border-radius: 3px;
 }

 .close-editor {
   float: right;
 }
</style>