tabbit

Thu Dec 29 2016
Copied to clipboard! Copy reply
<template>
  <div>
    <div class="ui modal" data-modal-mastheadimages>
      <i class="close icon"></i>
      <div class="header">
        <i class="image large icon"></i>
        Upload Masthead Images 
      </div>    
      <div class="content">        
        <h3>
          <!-- <i class="info warning circle icon"></i> -->
          Your files <b>must</b> be named in the following format: 
          <span style="color: cornflowerblue">template name</span>&mdash;
          <span style="color: cadetblue">device</span>&mdash;
          <span style="color: salmon">filename</span>
        </h3>
        
          <ul class="ui bulleted list">
            <li>
              Example:&nbsp;&nbsp;&nbsp;
              <span style="color: cornflowerblue">sbsr</span>&mdash;
              <span style="color: cadetblue">desktop</span>&mdash;
              <span style="color: salmon">xmas199.jpg</span>
            </li>
          </ul>
        
        
          <div class="field">
            <p class="ui basic segment">            
              <input type="file" name="masthead-files" multiple @change='handleFilesChange'>
              <center>
                <button class="ui large black button" @click="openFileSelect">Select files to upload</button>
                </center>
            </p>
          </div>
        <div class="ui error message" v-if='invalids.length'>
          <i class="icon ban"></i>
          The following file(s) have bad formatted names and <b>will not be uploaded</b>:
          <ul class="ui bulleted list" v-for='name in invalids'>
            <li>{{ name }}</li>
          </ul>

        </div>
        <div class="ui warning message" v-if='exists'>          
          <div>
            <i class="icon warning sign"></i>
            One or more files exist with the same name. <b>Would you like to overwrite?</b>
          </div>
          <table class="ui fixed table">
            <thead>
              <tr>
                <th>Name</th>
                <th>Overwrite?</th>
                <th>Modified Date</th>              
              </tr>
            </thead>
            <tbody>
              <tr v-for="obj in files" if=file.exists>
                <td>{{ obj.file.name }}</td>
                <td>
                  <div class="ui slider checkbox" name='overwrite-masthead-toggle' :data-filename=obj.file.name>
                    <input type="checkbox" :checked=obj.overwrite class="hidden" @change="handleOverwriteToggle">
                    <label></label>
                  </div>
                </td>
                <td>{{ obj.modified }}</td>              
              </tr>
            </tbody>
          </table>
          
        </div>
      </div>
      <div class="actions">
        <div class="ui right labeled icon button"
          :class="{'positive' : files.length, 'disabled' : !canSubmit}"
          @click="handleSubmit">
            Upload
            <i class="checkmark icon"></i>
        </div>
      </div>      
    </div>  
  </div>
</template>

<script>

var $mastheadModal

export default {
  name: 'MastheadModal',
  data() {
    return {
      // Holds our file obejcts, which hold the actual file
      // object, as well as extra ifno like modified, exists, etc
      files: [],

      // Set to true if a file above has a name that exists
      exists: false,
      
      // Invalid file names (doesnt follow template-device-name)
      invalids: [],

      canSubmit: false

    }
  },
  mounted() {
    const store = this.$store
    $mastheadModal = $('div[data-modal-mastheadimages]')
    $mastheadModal.modal({
      onApprove() {        
        return false
      },
      onHidden() {
        store.dispatch('toggleMastheadModal')
        return false
      }
    })
  },
  computed: {
    mastheadModal() {
      return this.$store.state.modal_masthead.show
    }
  },
  watch: {
    mastheadModal(on) {
      on = on ? 'show' : 'hide'      
      $mastheadModal.modal(on)      
    }
  },
  updated() {
    $('div[name=overwrite-masthead-toggle]').checkbox()
  },

  methods: {

    /*
     * The real select files button is hidden because we can't
     * style it. So open it when the fake one is clicked
     */
    
    openFileSelect() {
      $('[name=masthead-files]').click()
    },


    /*
     * Sets file.overwrite to true or false
     * when user toggles the checkbox
     */
    
    handleOverwriteToggle(e) {
      var $el = $(e.target)
      var filename = $el.parent().data('filename')
      this.files.forEach(f => {
        if (f.file.name == filename) {
          f.overwrite = $el.parent().hasClass('checked') ? true : false
        }
      })      
    },


    /*
     * User has just select files to upload.
     * First, validate that they follow the required naming
     * format:  template-device-whatever
     * Then, for each file object, set overwrite to true
     * (as it is the default) and exists to false.
     * Then check if the file name exists in the server,
     * if it does, set exist to true.
     */
    
    handleFilesChange(e) {
      var files = [...document.querySelector('input[name=masthead-files]').files]

      // Does not follow naming format 
      this.files = files.map(f => {        
        if (f.name.split('-').length < 3) {
          this.invalids.push(f.name)
          return false
        }

        var fileObj = {file: f, overwrite: true, exists: false, modified: null}
        fileObj.overwrite = true
        fileObj.exists = false
        if (this.$store.state.mastheadImages.indexOf(f.name)) {
          fileObj.exists = true
          fileObj.modified = f.lastModifiedDate.toString().split(' ').splice(0,4).join(' ')
          this.exists = true                  
        }
        return fileObj
      })
      .filter(e => e)
      _.uniq(this.invlids)


    },
    

    /*
     * Submit files to server.
     * We actually send a custom object, which holds extra
     * information such as overwrite: true|false, etc
     */
    handleSubmit(e) {      
      const formdata = new FormData()
      const files = [...this.files]
      const overwrites = []
      const request = new XMLHttpRequest()

      if (!files.length) return

      files.forEach(f => {        
        // Hopefully these parallels keep the order, lol.
        overwrites.push(f.overwrite)
        formdata.append('files[]', f.file)
      })
      //console.log(files)
      formdata.append('overwrites[]', JSON.stringify(overwrites))
      request.open('POST', `${window.server}/upload-masthteads`, true)
      request.send(formdata)
      request.onload = function() {
        if (request.status == 404) {
          console.log("Can't reach server")
          return
        }
        var data = JSON.parse(request.responseText)
        if (data.result == 0) {            
          console.log('error')
        } else {          
          console.log('success')
        }
      }
    }
  } 
}

</script>