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/App.vue

@@ -1,6 +1,6 @@
 <template>
     <v-app class="background">
-        <AddModal/>
+        <AddModal />
         <div v-if="authenticated" class="background">
             <keep-alive><Navbar /></keep-alive>
             <v-content class="mx-4 mb-4">

src/components/Modals/AddModal.vue

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