Fix ebook url #75, download other files #75, fix book icon disappearing #88, backups #87

client/components/tables/BackupsTable.vue

@@ -0,0 +1,190 @@
+<template>
+  <div class="text-center mt-4">
+    <div class="flex py-4">
+      <ui-file-input ref="fileInput" class="mr-2" accept=".audiobookshelf" @change="backupUploaded">Upload Backup</ui-file-input>
+      <div class="flex-grow" />
+      <ui-btn :loading="isBackingUp" @click="clickCreateBackup">Create Backup</ui-btn>
+    </div>
+    <div class="relative">
+      <table id="backups">
+        <tr>
+          <th>File</th>
+          <th class="w-56">Datetime</th>
+          <th class="w-28">Size</th>
+          <th class="w-36"></th>
+        </tr>
+        <tr v-for="backup in backups" :key="backup.id">
+          <td>
+            <p class="truncate">/{{ backup.path.replace(/\\/g, '/') }}</p>
+          </td>
+          <td class="font-sans">{{ backup.datePretty }}</td>
+          <td class="font-mono">{{ $bytesPretty(backup.fileSize) }}</td>
+          <td>
+            <div class="w-full flex items-center justify-center">
+              <ui-btn small color="primary" @click="applyBackup(backup)">Apply</ui-btn>
+
+              <a :href="`/metadata/${backup.path.replace(/%/g, '%25').replace(/#/g, '%23')}?token=${userToken}`" class="mx-1 pt-0.5 hover:text-opacity-100 text-opacity-70 text-white" download><span class="material-icons text-xl">download</span></a>
+              <!-- <span class="material-icons text-xl hover:text-opacity-100 text-opacity-70 text-white cursor-pointer mx-1" @click="downloadBackup">download</span> -->
+
+              <span class="material-icons text-xl hover:text-error hover:text-opacity-100 text-opacity-70 text-white cursor-pointer mx-1" @click="deleteBackupClick(backup)">delete</span>
+            </div>
+          </td>
+        </tr>
+        <tr v-if="!backups.length" class="staticrow">
+          <td colspan="4" class="text-lg">No Backups</td>
+        </tr>
+      </table>
+      <div v-show="processing" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-25 flex items-center justify-center">
+        <ui-loading-indicator />
+      </div>
+    </div>
+
+    <prompt-dialog v-model="showConfirmApply" :width="675">
+      <div v-if="selectedBackup" class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
+        <p class="text-error text-lg font-semibold">Important Notice!</p>
+        <p class="text-base py-1">Applying a backup will overwrite users, user progress, book details, settings, and covers stored in metadata with the backed up data.</p>
+        <p class="text-base py-1">Backups <strong>do not</strong> modify any files in your library folders, only data in the audiobookshelf created <span class="font-mono">/config</span> and <span class="font-mono">/metadata</span> directories.</p>
+        <p class="text-base py-1">All clients using your server will be automatically refreshed.</p>
+
+        <p class="text-lg text-center my-8">Are you sure you want to apply the backup created on {{ selectedBackup.datePretty }}?</p>
+        <div class="flex px-1 items-center">
+          <ui-btn color="primary" @click="showConfirmApply = false">Nevermind</ui-btn>
+          <div class="flex-grow" />
+          <ui-btn color="success" @click="confirm">Apply Backup</ui-btn>
+        </div>
+      </div>
+    </prompt-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      showConfirmApply: false,
+      selectedBackup: null,
+      isBackingUp: false,
+      processing: false
+    }
+  },
+  computed: {
+    backups() {
+      return this.$store.state.backups || []
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    }
+  },
+  methods: {
+    confirm() {
+      this.showConfirmApply = false
+      this.$root.socket.once('apply_backup_complete', this.applyBackupComplete)
+      this.$root.socket.emit('apply_backup', this.selectedBackup.id)
+    },
+    deleteBackupClick(backup) {
+      if (confirm(`Are you sure you want to delete backup for ${backup.datePretty}?`)) {
+        this.processing = true
+        this.$axios
+          .$delete(`/api/backup/${backup.id}`)
+          .then((backups) => {
+            console.log('Backup deleted', backups)
+            this.$store.commit('setBackups', backups)
+            this.$toast.success(`Backup deleted`)
+            this.processing = false
+          })
+          .catch((error) => {
+            console.error(error)
+            this.$toast.error('Failed to delete backup')
+            this.processing = false
+          })
+      }
+    },
+    applyBackupComplete(success) {
+      if (success) {
+        // this.$toast.success('Backup Applied, refresh the page')
+        location.replace('/config?backup=1')
+      } else {
+        this.$toast.error('Failed to apply backup')
+      }
+    },
+    applyBackup(backup) {
+      this.selectedBackup = backup
+      this.showConfirmApply = true
+    },
+    backupComplete(backups) {
+      this.isBackingUp = false
+      if (backups) {
+        this.$toast.success('Backup Successful')
+        this.$store.commit('setBackups', backups)
+      } else this.$toast.error('Backup Failed')
+    },
+    clickCreateBackup() {
+      this.isBackingUp = true
+      this.$root.socket.once('backup_complete', this.backupComplete)
+      this.$root.socket.emit('create_backup')
+    },
+    backupUploaded(file) {
+      var form = new FormData()
+      form.set('file', file)
+
+      this.processing = true
+
+      this.$axios
+        .$post('/api/backup/upload', form)
+        .then((result) => {
+          console.log('Upload backup result', result)
+          this.$store.commit('setBackups', result)
+          this.$toast.success('Backup upload success')
+          this.processing = false
+        })
+        .catch((error) => {
+          console.error(error)
+          var errorMessage = error.response && error.response.data ? error.response.data : 'Failed to upload backup'
+          this.$toast.error(errorMessage)
+          this.processing = false
+        })
+    }
+  },
+  mounted() {
+    if (this.$route.query.backup) {
+      this.$toast.success('Backup applied successfully')
+      this.$router.replace('/config')
+    }
+  }
+}
+</script>
+
+<style>
+#backups {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+#backups td,
+#backups th {
+  border: 1px solid #2e2e2e;
+  padding: 8px 8px;
+  text-align: left;
+}
+
+#backups tr.staticrow td {
+  text-align: center;
+}
+
+#backups tr:nth-child(even) {
+  background-color: #3a3a3a;
+}
+
+#backups tr:not(.staticrow):hover {
+  background-color: #444;
+}
+
+#backups th {
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #333;
+}
+</style>

client/components/tables/OtherFilesTable.vue

@@ -19,9 +19,10 @@
         <table class="text-sm tracksTable">
           <tr class="font-book">
             <th class="text-left px-4">Path</th>
-            <th class="text-left px-4">Filetype</th>
+            <th class="text-left px-4 w-24">Filetype</th>
+            <th v-if="userCanDownload" class="text-center w-20">Download</th>
           </tr>
-          <template v-for="file in files">
+          <template v-for="file in otherFilesCleaned">
             <tr :key="file.path">
               <td class="font-book pl-2">
                 {{ showFullPath ? file.fullPath : file.path }}
@@ -29,6 +30,9 @@
               <td class="text-xs">
                 <p>{{ file.filetype }}</p>
               </td>
+              <td v-if="userCanDownload" class="text-center">
+                <a :href="`/s/book/${audiobookId}/${file.relativePath}?token=${userToken}`" download><span class="material-icons icon-text">download</span></a>
+              </td>
             </tr>
           </template>
         </table>
@@ -44,7 +48,10 @@ export default {
       type: Array,
       default: () => []
     },
-    audiobookId: String
+    audiobook: {
+      type: Object,
+      default: () => null
+    }
   },
   data() {
     return {
@@ -52,7 +59,34 @@ export default {
       showFullPath: false
     }
   },
-  computed: {},
+  computed: {
+    audiobookId() {
+      return this.audiobook.id
+    },
+    audiobookPath() {
+      return this.audiobook.path
+    },
+    otherFilesCleaned() {
+      return this.files.map((file) => {
+        var filePath = file.path.replace(/\\/g, '/')
+        var audiobookPath = this.audiobookPath.replace(/\\/g, '/')
+
+        return {
+          ...file,
+          relativePath: filePath
+            .replace(audiobookPath + '/', '')
+            .replace(/%/g, '%25')
+            .replace(/#/g, '%23')
+        }
+      })
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    }
+  },
   methods: {
     clickBar() {
       this.showFiles = !this.showFiles

client/components/tables/TracksTable.vue

@@ -80,7 +80,10 @@ export default {
 
         return {
           ...track,
-          relativePath: trackPath.replace(audiobookPath, '').replace(/%/g, '%25').replace(/#/g, '%23')
+          relativePath: trackPath
+            .replace(audiobookPath + '/', '')
+            .replace(/%/g, '%25')
+            .replace(/#/g, '%23')
         }
       })
     },

client/components/tables/UsersTable.vue

@@ -127,4 +127,35 @@ export default {
     }
   }
 }
-</script>
+</script>
+
+<style>
+#accounts {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+#accounts td,
+#accounts th {
+  border: 1px solid #2e2e2e;
+  padding: 8px 8px;
+  text-align: left;
+}
+
+#accounts tr:nth-child(even) {
+  background-color: #3a3a3a;
+}
+
+#accounts tr:hover {
+  background-color: #444;
+}
+
+#accounts th {
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  background-color: #333;
+}
+</style>