FileManager.vue 41.3 KB
Newer Older
1001
    },
1002
1003
1004
1005

    // When a new file was added with the addFile function we can start an upload
    // fetching the import endpoint of this file and then call the upload
    // function, which atually puts the file onto the server.
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
    startUpload: function (id) {
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/import'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token },
        params: {'wait-for': 'running'}
      }).then(
        this.upload(id)
      ).catch(error => {
        console.log('Error:')
        console.log(error)
        alert('Error: could not start the file upload. See console log for details.')
      })
    },
1020
1021
1022

    // Upload a file to the AuRa tank API - given it was created with the addFile
    // and started with the startUpload methods.
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
    upload: function (id) {
      /*
       * NOTE: there is no npm package for flow.js and importing it manually did not
       *       work so far. therefore this is commented out and we are using the simple
       *       upload method, until there is a nice npm package for flow.js or somone
       *       resolves this issue otherwise
      var flow = new Flow({
        target: process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/upload',
        chunkSize: 100 * 1024,
        prioritizeFirstAndLastChunk: true
      })
      flow.on('fileSuccess', function(file, message) {
        console.log(file, message)
      })
      flow.on('fileError', function(file, message) {
        console.log(file, message)
        alert('Error: could not upload your file. See console log for details.')
      })
      flow.addFile(this.uploadSourceFile)
      flow.upload()
      */
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + this.shows[this.currentShow].slug + '/files/' + id + '/upload'
      axios.put(uri, this.uploadSourceFile, {
        withCredentials: true,
        headers: {
          'Authorization': 'Bearer ' + this.$parent.user.access_token,
          'Content-Type': 'application/octet-stream'
        }
1051
1052
1053
1054
1055
1056
1057
      }).then(() => {
        console.log('Sucessfully uploaded file.')
        // now we start polling for the import progress
        // the fetchImports function has to make sure to deactivate the interval
        // again, when all running imports are done (in this first raw version;
        // ideally we should refine this so that every single file gets updated independently)
        //this.uploadInterval = setInterval(() => { this.fetchImports(this.shows[this.currentShow].slug) }, 100)
1058
1059
1060
1061
1062
      }).catch(error => {
        console.log('Error:')
        console.log(error)
        alert('Error: could not start the file upload. See console log for details.')
      })
1063
    },
1064
1065
1066

    // This switches the UI elements to reflect another show and fetches all
    // relevent data from the tank API.
1067
1068
1069
1070
    switchShow: function (index) {
      // set the current show and its ID to whatever we want to switch to now
      this.currentShow = index
      this.currentShowID = this.shows[this.currentShow].id
1071
      this.fetchShow(this.shows[this.currentShow].slug)
1072
    },
1073
1074
1075

    // This function is used to visually switch between the files and playlists
    // editing mode.
1076
1077
1078
1079
    switchMode: function (mode) {
      if (this.mode !== mode) {
        this.mode = mode
        for (var b in this.button) {
1080
1081
          if (b === mode) { this.button[b] = 'info' }
          else { this.button[b] = 'outline-info' }
1082
1083
1084
        }
      }
    },
1085
1086
1087
1088
1089

    // This function fetches all running imports for a given show. It should
    // be called periodically to reflect the upload/import progress. When no
    // more active imports are available the corresponding updateInterval
    // should be cleared again.
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
    fetchImports: function (slug){
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/imports'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
        // if all imports are done, we will receive an empty result set and stop
        // polling the server again. now we can also refetch all file statuses.
        if (response.data.results === null) {
          clearInterval(this.uploadInterval)
          this.uploadInterval = null
          this.fetchShow(slug)
        } else {
          for (var i in response.data.results) {
            var f = this.getFileById(response.data.results[i].id)
            if (f) {
              f.source.import.progress = {
                progress: response.data.results[i].progress.progress,
                step: response.data.results[i].progress.step
              }
            }
            var p = '[import]'
            p += ' id: ' + response.data.results[i].id
            p += ', progress: ' + response.data.results[i].progress.progress
            p += ', step: ' + response.data.results[i].progress.step
            console.log(p)
            this.$refs.filesTable.refresh()
          }
        }
      }).catch(error => {
        console.log(error)
        alert('There was an error fetching current imports. See console for details.')
      })
    },
1124
1125

    // Just a wrapper to fetch both, files and playlists information.
1126
1127
1128
1129
    fetchShow: function (slug) {
      this.fetchFiles(slug)
      this.fetchPlaylists(slug)
    },
1130
1131

    // Fetch all files for a given show from the AuRa tank API
1132
    fetchFiles: function (slug) {
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
      this.loaded.files = false
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/files'
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
        // we don't have to check separately, if there are files, because tank
        // always provides an empty array if there are no files (or even if there is no corresponding show)
        this.files = response.data.results
        this.loaded.files = true
      }).catch(error => {
        alert('There was an error fetching files from tank: ' + error)
      })
1146
    },
1147
1148

    // Fetch all playlists for a given show from the AuRa tank API
1149
1150
1151
    fetchPlaylists: function (slug) {
      this.loaded.playlists = false
      var uri = process.env.VUE_APP_API_TANK + 'shows/' + slug + '/playlists'
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
      axios.get(uri, {
        withCredentials: true,
        headers: { 'Authorization': 'Bearer ' + this.$parent.user.access_token }
      }).then(response => {
        // we don't have to check separately, if there are playlists, because tank
        // always provides an empty array if there are no playlists (or even if there is no corresponding show)
        this.playlists = response.data.results
        this.loaded.playlists = true
      }).catch(error => {
        alert('There was an error fetching playlists from tank: ' + error)
      })
1163
1164
1165
    }
  }
}
1166
1167
1168
</script>

<style>
1169
1170
1171
1172
1173
div.filelistbox {
  border: 1px solid #e9ecef;
  border-radius: 0.3rem;
  padding: 1rem 2rem;
}
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
.stateNew {
  color: red;
  font-weight: bold;
}
.stateRunning {
  color: darkgreen;
}
.stateUndefined {
  color: orange;
  font-weight: bold;
}
1185
1186
1187
1188
1189
1190
.upDownArrows {
  font-size: 1.15rem;
}
.modalPlaylistRows {
  padding: 0.2rem 0;
}
1191
</style>
For faster browsing, not all history is shown. View entire blame