0.5.2 (#115)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "vuetorrent",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "private": true,
     "scripts": {
         "start": "npm run serve",

src/components/Modals/AddModal.vue

@@ -1,11 +1,16 @@
 <template>
-  <v-dialog v-model="dialog" max-width="500px">
+  <v-dialog
+    v-model="dialog"
+    scrollable
+    max-width="500px"
+    :fullscreen="phoneLayout"
+  >
     <v-card>
       <v-container :class="`pa-0 project done`">
         <v-card-title class="justify-center">
           <h2>Add a new Torrent</h2>
         </v-card-title>
-        <v-card-text>
+        <v-card-text class="pb-0">
           <v-form ref="form" v-model="valid">
             <v-container>
               <v-row no-gutters>
@@ -70,6 +75,7 @@
                 :items="availableCategories"
                 clearable
                 label="Category"
+                item-text="name"
                 :prepend-icon="mdiTag"
                 @input="categoryChanged"
               />
@@ -87,24 +93,28 @@
                   <v-checkbox
                     v-model="start"
                     label="Start torrent"
+                    hide-details
                   />
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-checkbox
                     v-model="skip_checking"
                     label="Skip hash check"
+                    hide-details
                   />
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-checkbox
                     v-model="root_folder"
                     label="Create subfolder"
+                    hide-details
                   />
                 </v-flex>
                 <v-flex xs12 sm6>
                   <v-checkbox
                     v-model="autoTMM"
                     label="Automatic Torrent Management"
+                    hide-details
                   />
                 </v-flex>
               </v-row>
@@ -123,6 +133,18 @@
             >
               Add Torrent
             </v-btn>
+            <v-fab-transition v-if="phoneLayout">
+              <v-btn
+                color="red"
+                dark
+                absolute
+                bottom
+                right
+                @click="close"
+              >
+                <v-icon>{{ mdiClose }}</v-icon>
+              </v-btn>
+            </v-fab-transition>
           </v-card-actions>
         </v-form>
       </v-container>
@@ -134,10 +156,11 @@
 import { mapGetters } from 'vuex'
 import Modal from '@/mixins/Modal'
 import qbit from '@/services/qbit'
-import { mdiFolder, mdiTag, mdiPaperclip, mdiLink } from '@mdi/js'
+import { mdiFolder, mdiTag, mdiPaperclip, mdiLink, mdiClose } from '@mdi/js'
+import { FullScreenModal } from '@/mixins'
 export default {
   name: 'AddModal',
-  mixins: [Modal],
+  mixins: [Modal, FullScreenModal],
   props: ['initialMagnet'],
   data() {
     return {
@@ -161,14 +184,11 @@ export default {
       loading: false,
       urls: null,
       valid: false,
-      mdiFolder, mdiTag, mdiPaperclip, mdiLink
+      mdiFolder, mdiTag, mdiPaperclip, mdiLink, mdiClose
     }
   },
   computed: {
     ...mapGetters(['getSettings', 'getCategories']),
-    settings() {
-      return this.getSettings()
-    },
     validFile() {
       return this.Files.length > 0
     },
@@ -178,20 +198,13 @@ export default {
     savepath() {
       let savePath = this.getSettings().save_path
       if (this.category) {
-        savePath += this.category
-        const category = this.getCategories()[this.category]
-        if (category && category.savePath) savePath = category.savePath
+        savePath = this.category.savePath
       }
 
       return savePath
     },
     availableCategories() {
-      return Object.keys(this.getCategories())
-    }
-  },
-  watch: {
-    settings(newvalue) {
-      this.directory = newvalue.save_path
+      return this.getCategories()
     }
   },
   created() {
@@ -222,7 +235,7 @@ export default {
         }
         if (this.files.length) torrents.push(...this.files)
         if (this.urls) params.urls = this.urls
-        if (this.category) params.category = this.category
+        if (this.category) params.category = this.category.name
         if (!this.autoTMM) params.savepath = this.directory
 
         qbit.addTorrents(params, torrents)
@@ -241,7 +254,10 @@ export default {
       this.category = null
       this.directory = this.savepath
       this.skip_checking = null
+    },
+    close() {
+      this.deleteModal()
     }
   }
 }
-</script>
+</script>

src/components/Modals/TorrentDetailModal/Tabs/Content.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card flat>
     <perfect-scrollbar>
-      <v-card-text :style="{ minHeight: phoneLayout ? '' : '75vh', maxHeight: '75vh'}">
+      <v-card-text class="pa-0" :style="{ minHeight: phoneLayout ? '' : '75vh', maxHeight: '75vh'}">
         <v-treeview
           v-model="selected"
           :items="fileTree"
@@ -27,7 +27,7 @@
               autofocus
             />
           </template>
-          <template #append="{ item }">
+          <template v-if="!$vuetify.breakpoint.smAndDown" #append="{ item }">
             <span v-if="!item.icon">{{ item.children.length }} Files</span>
             <div v-else>
               <span>[{{ item.size }}]</span>

src/components/Modals/TorrentDetailModal/Tabs/Trackers.vue

@@ -189,3 +189,4 @@ export default {
   }
 }
 </style>
+

src/components/Navbar/FreeSpace.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card flat color="secondary" class="mr-2 ml-2 mt-8">
+  <v-card flat color="secondary" class="mr-2 ml-2 mt-8 mb-4">
     <v-layout row wrap class="pa-3 py-6 project mx-auto">
       <v-flex md6>
         <div

src/components/Navbar/Navbar.vue

@@ -42,8 +42,6 @@
 
         <SpeedGraph v-if="webuiSettings.showSpeedGraph" />
 
-        <div class="mt-4" />
-        <FilterSelect :show-tracker-filter="webuiSettings.showTrackerFilter" />
         <SessionStats
           v-if="webuiSettings.showSessionStat"
           :status="status"
@@ -53,6 +51,8 @@
           v-if="webuiSettings.showFreeSpace"
           :space="status.freeDiskSpace"
         />
+
+        <FilterSelect :show-tracker-filter="webuiSettings.showTrackerFilter" />
         <div
           style="font-size: 0.9em"
           class="download--text text-uppercase text-center mt-5"

src/components/Navbar/TopActions.vue

@@ -25,7 +25,7 @@
           small
           fab
           class="mr-0 ml-0"
-          aria-label="Add Torrent"
+          aria-label="Sort Torrents"
           v-on="on"
           @click="addModal('SortModal')"
         >
@@ -34,7 +34,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span>Add Torrent</span>
+      <span>Sort Torrents</span>
     </v-tooltip>
     <v-tooltip bottom>
       <template #activator="{ on }">

src/components/Torrent/MobileCard.vue

@@ -6,7 +6,7 @@
     :class="style"
   >
     <v-flex xs12 class="ma-1 mt-0" row>
-      <span class="subtitle-1">
+      <span class="subtitle-1" style="line-height: 1.3em;">
         {{ torrent.name }}
       </span>
     </v-flex>
@@ -32,7 +32,9 @@
       <span class="body-2 ml-1"> {{ torrent.size | getDataValue }} </span>
       <span class="grey--text caption ml-1"> {{ torrent.size | getDataUnit }} - </span>
       <span class="grey--text caption ml-1"> Ratio: </span>
-      <span class="body-2 ml-1"> {{ torrent.ratio }} </span>
+      <span class="body-2 ml-1"> {{ torrent.ratio }} - </span>
+      <span class="grey--text caption ml-1"> ETA: </span>
+      <span class="body-2 ml-1"> {{ torrent.eta }} </span>
       <v-spacer />
       <span class="body-2">{{ torrent.progress }}</span>
       <span class="grey--text caption">%</span>

src/components/Torrent/TorrentRightClickMenu.vue

@@ -118,6 +118,35 @@
         </v-list-item>
       </v-list>
     </v-menu>
+    <v-menu
+      open-on-hover
+      top
+    >
+      <template #activator="{ on }">
+        <v-list-item link v-on="on">
+          <v-icon>{{ mdiShape }}</v-icon>
+          <v-list-item-title
+            class="ml-2"
+            style="font-size: 1em"
+          >
+            Set Category
+            <v-icon>{{ mdiChevronRight }}</v-icon>
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+      <v-list dense rounded>
+        <v-list-item
+          v-for="(item, index) in availableCategories"
+          :key="index"
+          link
+          @click="setCategory(item.value)"
+        >
+          <v-list-item-title class="ml-2" style="font-size: 12px">
+            {{ item.name }}
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
     <v-divider />
     <v-list-item link @click="showInfo">
       <v-icon>{{ mdiInformation }}</v-icon>
@@ -145,8 +174,10 @@ import { General, TorrentSelect } from '@/mixins'
 import {
   mdiBullhorn, mdiPlaylistCheck, mdiArrowUp, mdiArrowDown, mdiPriorityLow,
   mdiInformation, mdiDeleteForever, mdiRenameBox, mdiFolder, mdiDelete,
-  mdiPlay, mdiPause, mdiSelect, mdiPriorityHigh, mdiChevronRight, mdiFastForward
+  mdiPlay, mdiPause, mdiSelect, mdiPriorityHigh, mdiChevronRight,
+  mdiFastForward, mdiShape
 } from '@mdi/js'
+import { mapGetters } from 'vuex'
 export default {
   name: 'TorrentRightClickMenu',
   mixins: [General, TorrentSelect],
@@ -162,11 +193,19 @@ export default {
     ],
     mdiDelete, mdiPlay, mdiPause, mdiSelect, mdiFastForward,
     mdiFolder, mdiRenameBox, mdiDeleteForever, mdiInformation,
-    mdiPlaylistCheck, mdiPriorityHigh, mdiBullhorn, mdiChevronRight
+    mdiPlaylistCheck, mdiPriorityHigh, mdiBullhorn, mdiChevronRight,
+    mdiShape
   }),
   computed: {
-    dark() {
-      return this.$vuetify.dark
+    ...mapGetters(['getCategories']),
+    availableCategories() {
+      const categories = [
+        { name: 'None', value: '' }]
+      categories.push(...this.getCategories().map(c => {
+        return { name: c.name, value: c.name }
+      }))
+
+      return categories
     }
   },
   methods: {
@@ -202,6 +241,9 @@ export default {
     },
     forceResume() {
       qbit.forceStartTorrents([this.hash])
+    },
+    setCategory(cat) {
+      qbit.setCategory([this.hash], cat)
     }
   }
 }

src/mixins/SettingsTab.js

@@ -15,6 +15,13 @@ export default {
       })
       this.$store.commit('FETCH_SETTINGS')
       this.close()
+      if (!this.settings.alternative_webui_enabled) {
+        navigator.serviceWorker.getRegistrations().then(function (registrations) {
+          for (const registration of registrations) {
+            registration.unregister()
+          } 
+        })
+      }
     }
   }
 }