Thu Dec 29 2016
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
<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>