perf: Add progress bar toggle for mobile card (#822)

src/components/Torrent/MobileCard.vue

@@ -49,7 +49,7 @@
       <v-spacer />
       <span v-if="isEtaActive" class="body-2">{{ torrent.eta }}</span>
     </v-flex>
-    <v-flex xs12 class="ma-1">
+    <v-flex xs12 class="ma-1" v-if="isProgressBarActive">
       <v-progress-linear rounded color="upload" height="5" :value="torrent.progress" />
     </v-flex>
     <v-flex row xs12 class="ma-1">
@@ -109,43 +109,54 @@ export default {
       return this.webuiSettings.busyMobileCardProperties
     },
     isStatusActive() {
-      return this.properties.find(e => e.name === DashboardProperty.STATUS).active
+      return this.processProperty(DashboardProperty.STATUS)
     },
     isTrackerActive() {
-      return this.properties.find(e => e.name === DashboardProperty.TRACKER).active
+      return this.processProperty(DashboardProperty.TRACKER)
     },
     isCategoryActive() {
-      return this.properties.find(e => e.name === DashboardProperty.CATEGORY).active
+      return this.processProperty(DashboardProperty.CATEGORY)
     },
     isTagsActive() {
-      return this.properties.find(e => e.name === DashboardProperty.TAGS).active
+      return this.processProperty(DashboardProperty.TAGS)
     },
     isSizeActive() {
-      return this.properties.find(e => e.name === DashboardProperty.SIZE).active
+      return this.processProperty(DashboardProperty.SIZE)
     },
     isProgressActive() {
-      return this.properties.find(e => e.name === DashboardProperty.PROGRESS).active
+      return this.processProperty(DashboardProperty.PROGRESS)
+    },
+    isProgressBarActive() {
+      return this.processProperty(DashboardProperty.PROGRESS_BAR)
     },
     isRatioActive() {
-      return this.properties.find(e => e.name === DashboardProperty.RATIO).active
+      return this.processProperty(DashboardProperty.RATIO)
     },
     isUploadedActive() {
-      return this.properties.find(e => e.name === DashboardProperty.UPLOADED).active
+      return this.processProperty(DashboardProperty.UPLOADED)
     },
     isEtaActive() {
-      return this.properties.find(e => e.name === DashboardProperty.ETA).active
+      return this.processProperty(DashboardProperty.ETA)
     },
     isSeedsActive() {
-      return this.properties.find(e => e.name === DashboardProperty.SEEDS).active
+      return this.processProperty(DashboardProperty.SEEDS)
     },
     isPeersActive() {
-      return this.properties.find(e => e.name === DashboardProperty.PEERS).active
+      return this.processProperty(DashboardProperty.PEERS)
     },
     isDownloadSpeedActive() {
-      return this.properties.find(e => e.name === DashboardProperty.DOWNLOAD_SPEED).active
+      return this.processProperty(DashboardProperty.DOWNLOAD_SPEED)
     },
     isUploadSpeedActive() {
-      return this.properties.find(e => e.name === DashboardProperty.UPLOAD_SPEED).active
+      return this.processProperty(DashboardProperty.UPLOAD_SPEED)
+    }
+  },
+  methods: {
+    processProperty(ppt) {
+      const value = this.properties.find(e => e.name === ppt)
+
+      if (value === undefined) return true
+      else return value.active
     }
   }
 }

src/enums/vuetorrent/DashboardProperty.ts

@@ -19,6 +19,7 @@ export enum DashboardProperty {
   LAST_ACTIVITY = 'LastActivity',
   PEERS = 'Peers',
   PROGRESS = 'Progress',
+  PROGRESS_BAR = 'ProgressBar',
   RATIO = 'Ratio',
   SAVE_PATH = 'SavePath',
   SEEDS = 'Seeds',

src/lang/en.json

@@ -87,6 +87,7 @@
       "last_activity": "Last Activity",
       "peers": "Peers",
       "progress": "Progress",
+      "progress_bar": "Progress Bar",
       "ratio": "Ratio",
       "save_path": "Save Path",
       "seeds": "Seeds",
@@ -780,7 +781,8 @@
     "shutdownSuccess": "qBittorrent was shutdown successfully!",
     "shutdownError": "Unable to shutdown app. Make sure qBittorrent is running!",
     "invalidJson": "Invalid JSON! Check console for details",
-    "magnetHandlerNotSupported": "Unable to register handler, context isn't secured!"
+    "magnetHandlerNotSupported": "Unable to register handler, context isn't secured!",
+    "resetSettingsNeeded": "Old version of settings detected, reset them for the best experience!"
   },
   "rightClick": {
     "resume": "resume",

src/lang/uk.json

@@ -415,7 +415,7 @@
           "subheader": "Обмеження сідування",
           "whenRatioReaches": "Коли співвідношення досягне",
           "whenSeedingTimeReaches": "Коли сідування досягне часу",
-          "then": "Тоді"        
+          "then": "Тоді"
         },
         "autoAddTrackers": "Автоматично додати ці трекери до нових завантажень",
         "autoAddTrackersHint": "Один трекер на рядок"
@@ -450,11 +450,11 @@
           "btnCreateNew": "Додати стрічку",
           "refreshAll": "Оновити всі"
         },
-          "rules": {
+        "rules": {
-            "rules": "Правила",
+          "rules": "Правила",
-            "btnCreateNew": "Створити правило"        
+          "btnCreateNew": "Створити правило"
-          }
+        }
-        },
+      },
       "webUI": {
         "interface": {
           "subheader": "Веб-інтерфейс користувача (дистанційне керування)",

src/store/actions.ts

@@ -33,5 +33,11 @@ export default {
     store.commit('FETCH_SETTINGS', data)
 
     return data
+  },
+  ALERT_OLD_SETTINGS: async (store: Store<StoreState>) => {
+    if (store.state.oldSettingsDetected) return
+
+    store.state.oldSettingsDetected = true
+    Vue.$toast.error(i18n.t('toast.resetSettingsNeeded').toString(), { timeout: 2500 })
   }
 }

src/store/getters.ts

@@ -1,6 +1,6 @@
 import { i18n } from '@/plugins/i18n'
 import type { StoreState } from '@/types/vuetorrent'
-import {formatSize} from '@/filters'
+import { formatSize } from '@/filters'
 
 export default {
   getAppVersion: (state: StoreState) => () => state.version,
@@ -22,11 +22,13 @@ export default {
   getAuthenticated: (state: StoreState) => () => state.authenticated,
   getTorrentCountString: (state: StoreState) => () => {
     if (state.selected_torrents.length) {
-      let selectedSize = state.selected_torrents.map(hash => state.torrents.filter(el => el.hash === hash)[0])
+      let selectedSize = state.selected_torrents
-          .map(torrent => torrent.size)
+        .map(hash => state.torrents.filter(el => el.hash === hash)[0])
-          .reduce((partialSum, newVal) => partialSum + newVal)
+        .map(torrent => torrent.size)
+        .reduce((partialSum, newVal) => partialSum + newVal)
 
-      return i18n.tc('dashboard.selectedTorrentsCount', state.filteredTorrentsCount)
+      return i18n
+        .tc('dashboard.selectedTorrentsCount', state.filteredTorrentsCount)
         .replace('$0', state.selected_torrents.length.toString())
         .replace('$1', formatSize(selectedSize))
     } else {

src/store/index.ts

@@ -67,6 +67,7 @@ const mobilePropertiesTemplate = [
   { name: DashboardProperty.TAGS, active: true },
   { name: DashboardProperty.SIZE, active: true },
   { name: DashboardProperty.PROGRESS, active: true },
+  { name: DashboardProperty.PROGRESS_BAR, active: true },
   { name: DashboardProperty.RATIO, active: true },
   { name: DashboardProperty.UPLOADED, active: true },
   { name: DashboardProperty.ETA, active: true },
@@ -80,6 +81,7 @@ export default new Vuex.Store<StoreState>({
   plugins: [vuexPersist.plugin],
   state: {
     authenticated: false,
+    oldSettingsDetected: false,
     categories: [],
     dashboard: {
       currentPage: 1,

src/types/vuetorrent/StoreState.ts

@@ -27,6 +27,7 @@ export default interface StoreState extends PersistentStoreState {
   isUpdatingMainData: boolean
   latestSelectedTorrent: number
   modals: ModalTemplate[]
+  oldSettingsDetected: boolean
   rid?: number
   rss: {
     feeds: Feed[]

src/views/Dashboard.vue

@@ -127,7 +127,6 @@
             </v-expand-x-transition>
             <v-list-item-content class="pa-0 rounded">
               <Torrent :torrent="torrent" :index="index" />
-              <v-divider v-if="index < paginatedData.length - 1" :key="index" />
             </v-list-item-content>
           </template>
         </v-list-item>
@@ -153,6 +152,7 @@ import TorrentRightClickMenu from '@/components/Torrent/TorrentRightClickMenu.vu
 
 import { TorrentSelect, General } from '@/mixins'
 import { doesCommand } from '@/helpers'
+import { DashboardProperty } from '@/enums/vuetorrent'
 
 export default {
   name: 'Dashboard',
@@ -327,6 +327,11 @@ export default {
     document.addEventListener('dragenter', this.detectDragEnter)
     this.$store.state.selectMode = false
     window.scrollTo(0, 0)
+
+    const ppt = this.getWebuiSettings().busyMobileCardProperties.find(e => e.name === DashboardProperty.PROGRESS_BAR)
+    if (ppt === undefined) {
+      this.$store.dispatch('ALERT_OLD_SETTINGS')
+    }
   },
   created() {
     this.$store.commit('FETCH_CATEGORIES')