1
0
Fork 0
mirror of https://github.com/VueTorrent/VueTorrent.git synced 2025-05-07 15:55:11 +03:00

Feature - search ()

This commit is contained in:
Daan Wijns 2020-07-21 09:35:53 +02:00 committed by GitHub
parent fdac03bfe3
commit 2a825d210c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 726 additions and 472 deletions
src/components/Modals

View file

@ -30,16 +30,17 @@
dark
label
small
>{{ text }}</v-chip
>
{{ text }}
</v-chip>
<span
v-else-if="index === 2"
class="overline grey--text text--darken-3 mx-2"
>+{{
files.length - 2
}}
File(s)</span
>
+{{ files.length - 2 }} File(s)
</span>
</template>
</v-file-input>
<v-text-field
@ -123,7 +124,8 @@ export default {
},
resetForm() {
this.url = null
;(this.files = []), (this.directory = null)
this.files = []
this.directory = null
}
},
computed: {

View file

@ -0,0 +1,159 @@
<template>
<v-dialog max-width="500px" v-model="dialog">
<v-card min-height="400px">
<v-container
style="min-height: 400px;"
:class="`pa-0 project done`"
>
<v-card-title class="justify-center">
<h2>Search Torrent</h2>
</v-card-title>
<v-card-text>
<div>
<v-container>
<v-row no-gutters>
<v-col ref="fileZone">
<v-text-field
label="Search"
prepend-icon="search"
required
:autofocus="!phoneLayout"
v-model="searchTerm"
v-on:keydown.enter="search"
/>
<v-text-field
label="Category"
prepend-icon="category"
v-model="searchCategory"
v-on:keydown.enter="search"
/>
</v-col>
</v-row>
</v-container>
</div>
</v-card-text>
<v-spacer></v-spacer>
<div>
<v-card-actions class="justify-center">
<v-btn
text
@click="search"
:loading="status === 'Running'"
class="blue_accent white--text"
>Search</v-btn
>
<!-- <v-btn text @click="getStatus" class="blue_accent white--text ml-6">Status</v-btn> -->
</v-card-actions>
</div>
<div class="text-center mt-10" v-if="results.length">
<h2>Results</h2>
<perfect-scrollbar>
<v-list
rounded
style="max-height: 500px; min-height: 400px;"
>
<v-list-item>
<v-list-item-title>FileName</v-list-item-title>
<v-list-item-subtitle style="max-width: 20%;"
>Size</v-list-item-subtitle
>
<v-list-item-subtitle style="max-width: 20%;"
>Seeders</v-list-item-subtitle
>
<v-list-item-subtitle style="max-width: 20%;"
>Leechers</v-list-item-subtitle
>
</v-list-item>
<v-list-item
@click="addTorrent(res.fileUrl)"
v-for="res in results"
:key="res.title"
>
<v-list-item-title>
{{ res.fileName }}
</v-list-item-title>
<v-list-item-subtitle style="max-width: 20%;">
{{ res.fileSize | size }}
</v-list-item-subtitle>
<v-list-item-subtitle style="max-width: 20%;">
{{ res.nbSeeders }}
</v-list-item-subtitle>
<v-list-item-subtitle style="max-width: 20%;">
{{ res.nbLeechers }}
</v-list-item-subtitle>
</v-list-item>
</v-list>
</perfect-scrollbar>
</div>
</v-container>
<v-fab-transition v-if="phoneLayout">
<v-btn @click="close" color="red" dark absolute bottom right>
<v-icon>close</v-icon>
</v-btn>
</v-fab-transition>
</v-card>
</v-dialog>
</template>
<script>
import Modal from '@/mixins/Modal'
import qbit from '@/services/qbit'
export default {
name: 'SearchModal',
mixins: [Modal],
data() {
return {
searchTerm: null,
searchCategory: null,
searchId: null,
status: null,
searchInterval: null,
results: []
}
},
methods: {
async search() {
if (this.searchTerm && !this.searchInterval) {
this.status = 'Running'
this.results = []
const { data } = await qbit.startSearch(
this.searchTerm,
this.searchCategory
)
this.searchId = data.id
this.searchInterval = setInterval(async () => {
let status = await this.getStatus()
if (status === 'Stopped') {
clearInterval(this.searchInterval)
this.getResults()
}
}, 2000)
}
},
async getStatus() {
if (this.searchId) {
let response = await qbit.getSearchStatus(this.searchId)
return (this.status = response.data[0].status)
}
},
async getResults() {
let response = await qbit.getSearchResults(this.searchId)
this.results = response.data.results
},
addTorrent(torrent) {
let params = { urls: null }
params.urls = torrent
qbit.addTorrents(params)
},
close() {
this.$store.commit('TOGGLE_MODAL', 'SearchModal')
}
},
computed: {
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly
}
}
}
</script>