github release test

.github/workflows/deploy.yml

@@ -0,0 +1,20 @@
+name: Build & Release
+runs-on: ubuntu-latest
+on:[push]
+       branches:
+          - develop
+jobs:
+  github-release:
+    runs-on: ubuntu-latest
+      steps:
+        - uses: actions/checkout@master
+        - uses: actions/setup-node@master
+        - run: npm install
+        - run: npm run build
+        - uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          automatic_release_tag: "latest"
+          prerelease: true
+          title: "Development Build"
+          files: dist

package-lock.json

@@ -10842,6 +10842,11 @@
         }
       }
     },
+    "vue-observe-visibility": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
+      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
+    },
     "vue-router": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.2.0.tgz",

package.json

@@ -15,6 +15,7 @@
     "register-service-worker": "^1.7.1",
     "vue": "^2.6.11",
     "vue-apexcharts": "^1.5.3",
+    "vue-observe-visibility": "^0.4.6",
     "vue-router": "^3.2.0",
     "vue-toastification": "^1.7.1",
     "vuetify": "^2.2.11",

src/components/Modals/AddModal.vue

@@ -1,12 +1,19 @@
 <template>
-    <v-dialog max-width="400px" v-model="dialog">
+  <v-dialog
+    max-width="400px"
+    v-model="dialog"
+    v-observe-visibility="visibilityChanged"
+  >
     <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-form ref="form">
             <v-container>
-                    <div ref="fileZone">
+              <v-row no-gutters>
+                <v-col ref="fileZone">
                   <v-file-input
                     v-show="files.length"
                     v-model="files"
@@ -19,26 +26,30 @@
                   <v-textarea
                     v-show="!files.length"
                     label="URL"
-                            placeholder="add Torrent"
+                    placeholder="dag 'n drop or paste a url"
                     prepend-icon="mdi-link"
                     append-outer-icon="mdi-attachment"
-                            :rules="[v => !!files.length || !!v]"
+                    :rules="[(v) => !!files.length || !!v]"
                     :rows="$vuetify.breakpoint.xsOnly ? 1 : 3"
                     required
                     :autofocus="!phoneLayout"
                     :value="params.urls"
                     @input="setParams('urls', $event)"
                   />
-                    </div>
+                </v-col>
-                </v-container>
+              </v-row>
-                <v-card-text>
+
-                    <v-form class="px-3" ref="form">
               <v-text-field
                 v-model="directory"
                 label="Download Directory"
                 prepend-icon="folder"
               ></v-text-field>
+            </v-container>
+          </v-form>
+        </v-card-text>
+
         <v-spacer></v-spacer>
+        <v-form>
           <v-card-actions class="justify-center">
             <v-btn
               :loading="loading"
@@ -49,60 +60,82 @@
             >
           </v-card-actions>
         </v-form>
-                </v-card-text>
       </v-container>
     </v-card>
   </v-dialog>
 </template>
 
 <script>
-import Modal from '@/mixins/Modal'
+import Modal from "@/mixins/Modal";
 export default {
-    name: 'AddModal',
+  name: "AddModal",
   mixins: [Modal],
   data() {
     return {
       files: [],
-            directory: '',
+      directory: "",
       inputRules: [
-                v =>
+        (v) =>
-                    v.indexOf('magnet') > -1 ||
+          v.indexOf("magnet") > -1 ||
-                    v.indexOf('http') > -1 ||
+          v.indexOf("http") > -1 ||
           this.validFile ||
-                    'Not a valid magnet link'
+          "Not a valid magnet link",
       ],
       loading: false,
-            params: {}
+      params: {},
-        }
+      file: null,
+    };
   },
   methods: {
     submit() {
       if (this.$refs.form.validate()) {
-                this.loading = true
+        this.loading = true;
 
-                this.$store.dispatch('ADD_TORRENT', {
+        this.$store.dispatch("ADD_TORRENT", {
           name: this.filename,
-                    dir: this.directory
+          dir: this.directory,
-                })
+        });
 
         // reset input
-                this.$refs.form.reset()
+        this.$refs.form.reset();
-                this.filename = ''
+        this.filename = "";
-                this.directory = ''
+        this.directory = "";
 
-                this.$refs.pond.removeFiles()
+        this.$refs.pond.removeFiles();
-                this.dialog = false
+        this.dialog = false;
-                this.loading = false
+        this.loading = false;
       }
+    },
+
+    selectFiles() {
+      const input = this.$refs.file.$el.querySelector("input[type=file]");
+      input.click();
+    },
+
+    onDrop(e) {
+      const transfer = e.dataTransfer;
+      const { files } = transfer;
+      if (!files.length) {
+        return;
       }
+
+      e.preventDefault();
+      this.files = files;
+    },
+    visibilityChanged(isVisible) {
+      if (this.$refs.fileZone)
+        isVisible
+          ? this.$refs.fileZone.addEventListener("drop", this.onDrop, true)
+          : this.$refs.fileZone.removeEventListener("drop", this.onDrop, true);
+    },
   },
   computed: {
     validFile() {
-            return this.Files.length > 0
+      return this.Files.length > 0;
     },
     phoneLayout() {
-            return this.$vuetify.breakpoint.xsOnly
+      return this.$vuetify.breakpoint.xsOnly;
-        }
+    },
-    }
+  },
-}
+};
 </script>

src/components/Navbar.vue

@@ -228,7 +228,9 @@ export default {
         resumeTorrents(){
              qbit.resumeTorrents(this.selected_torrents)
         },
-        removeTorrents() {},
+        removeTorrents() {
+            qbit.deleteTorrents(this.selected_torrents, false)
+        },
         updateChart() {
             this.$refs.chart.updateSeries(this.series, true)
         },

src/main.js

@@ -4,6 +4,9 @@ import '@/registerServiceWorker'
 import router from '@/router'
 import store from '@/store'
 import '@babel/polyfill'
+import VueObserveVisibility from 'vue-observe-visibility'
+ 
+Vue.use(VueObserveVisibility)
 
 import Toast from 'vue-toastification'
 import 'vue-toastification/dist/index.css'

src/store/index.js

@@ -68,22 +68,6 @@ export default new Vuex.Store({
         TOGGLE_THEME(state) {
             state.darkTheme = !state.darkTheme
         },
-        ADD_TORRENT: async (state, payload) => {
-            const res = await qbit.add_torrent(payload)
-            if (res.statusText === 'OK') {
-                state.snackbar = true
-                state.succes_msg = 'Awesome! You added a new Torrent.'
-                setTimeout(() => {
-                    state.snackbar = false
-                }, 4000)
-            } else {
-                state.snackbar_error = true
-                state.error_msg = 'Something went wrong'
-                setTimeout(() => {
-                    state.snackbar_error = false
-                }, 4000)
-            }
-        },
         REMOVE_TORRENTS: async state => {
             if (state.selected_torrents.length !== 0) {
                 qbit.remove_torrents(state.selected_torrents)