mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2024-10-22 18:56:38 +03:00
0.5.3 (#116)
This commit is contained in:
Daan Wijns
GitHub
parent
f645ed6f54
commit
4e61868f7c
13 changed files with 194 additions and 139 deletions
7
package-lock.json
generated
7
package-lock.json
generated
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vuetorrent",
|
||||
"version": "0.5.0",
|
||||
"version": "0.5.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
@ -11685,6 +11685,11 @@
|
|||
"resolved": "https://registry.npmjs.org/typeface-roboto/-/typeface-roboto-1.1.13.tgz",
|
||||
"integrity": "sha512-YXvbd3a1QTREoD+FJoEkl0VQNJoEjewR2H11IjVv4bp6ahuIcw0yyw/3udC4vJkHw3T3cUh85FTg8eWef3pSaw=="
|
||||
},
|
||||
"typeface-roboto-mono": {
|
||||
"version": "1.1.13",
|
||||
"resolved": "https://registry.npmjs.org/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz",
|
||||
"integrity": "sha512-pnzDc70b7ywJHin/BUFL7HZX8DyOTBLT2qxlJ92eH1UJOFcENIBXa9IZrxsJX/gEKjbEDKhW5vz/TKRBNk/ufQ=="
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.10",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vuetorrent",
|
||||
"version": "0.5.2",
|
||||
"version": "0.5.3",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "npm run serve",
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
"lodash": "^4.17.20",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"typeface-roboto": "^1.1.13",
|
||||
"typeface-roboto-mono": "^1.1.13",
|
||||
"uuid": "^8.3.2",
|
||||
"vue": "^2.6.12",
|
||||
"vue-apexcharts": "^1.6.0",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
v-bind="{ guid: modal.guid, ...modal.props }"
|
||||
/>
|
||||
<Navbar v-if="isAuthenticated" />
|
||||
<v-main class="background" fill-height fill-width>
|
||||
<v-main class="background">
|
||||
<router-view />
|
||||
</v-main>
|
||||
</v-app>
|
||||
|
|
@ -34,7 +34,7 @@ export default {
|
|||
created() {
|
||||
this.$store.commit('SET_APP_VERSION', version)
|
||||
this.checkDeviceDarkTheme()
|
||||
//this.checkAuthenticated()
|
||||
this.checkAuthenticated()
|
||||
},
|
||||
methods: {
|
||||
async checkAuthenticated() {
|
||||
|
|
|
|||
47
src/components/Core/SpeedCard.vue
Normal file
47
src/components/Core/SpeedCard.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<v-card
|
||||
flat
|
||||
color="secondary"
|
||||
class="speedCard"
|
||||
>
|
||||
<v-layout row :class="color + '--text'">
|
||||
<v-flex xs2>
|
||||
<v-icon :color="color" size="16px">
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
</v-flex>
|
||||
<v-flex xs7 class="text-center font-weight-bold robot-mono">
|
||||
<span>
|
||||
<!-- {{ value | getDataValue(2) }}-->
|
||||
223.45
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex
|
||||
xs3
|
||||
class="caption robot-mono text-right mt-1"
|
||||
>
|
||||
<span class="speedUnits">
|
||||
{{ value | getDataUnit(1) }}/s
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SpeedCard',
|
||||
props: ['color', 'icon', 'value']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.speedCard {
|
||||
padding: 32px 16px !important;
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
.speedUnits {
|
||||
font-size: .8em !important;
|
||||
}
|
||||
</style>
|
||||
29
src/components/Core/StorageCard.vue
Normal file
29
src/components/Core/StorageCard.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<v-card flat color="secondary" class="mr-2 ml-2">
|
||||
<v-layout row wrap class="pa-3 mx-auto">
|
||||
<v-flex md6>
|
||||
<div
|
||||
style="margin-top: 6px"
|
||||
:class="color + '--text'"
|
||||
>
|
||||
{{ label }}
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex md5 class="ml-4">
|
||||
<span :class="color + '--text title'">
|
||||
{{ value | getDataValue(2) }}
|
||||
<span class="font-weight-light caption">
|
||||
{{ value | getDataUnit }}
|
||||
</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StorageCard',
|
||||
props: ['color', 'label', 'value']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -36,15 +36,17 @@
|
|||
Size
|
||||
</td>
|
||||
<td class="torrentmodaltext--text">
|
||||
{{ torrent.size }}
|
||||
{{ torrent.size | getDataValue }}
|
||||
{{ torrent.size | getDataUnit(1) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="grey--text">
|
||||
Done:
|
||||
Downloaded:
|
||||
</td>
|
||||
<td class="torrentmodaltext--text">
|
||||
{{ torrent.dloaded }}
|
||||
{{ torrent.dloaded | getDataValue }}
|
||||
{{ torrent.dloaded | getDataUnit(1) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -52,7 +54,8 @@
|
|||
Uploaded:
|
||||
</td>
|
||||
<td class="torrentmodaltext--text">
|
||||
{{ torrent.uploaded }}
|
||||
{{ torrent.uploaded | getDataValue }}
|
||||
{{ torrent.uploaded | getDataUnit(1) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -68,7 +71,8 @@
|
|||
Download Speed
|
||||
</td>
|
||||
<td class="torrentmodaltext--text">
|
||||
{{ torrent.dlspeed }}
|
||||
{{ torrent.dlspeed | getDataValue }}
|
||||
{{ torrent.dlspeed | getDataUnit(1) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -76,7 +80,8 @@
|
|||
Upload Speed
|
||||
</td>
|
||||
<td class="torrentmodaltext--text">
|
||||
{{ torrent.upspeed }}
|
||||
{{ torrent.upspeed | getDataValue }}
|
||||
{{ torrent.upspeed | getDataUnit(1) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -3,49 +3,25 @@
|
|||
<div class="text-uppercase white--text caption ml-4 font-weight-medium">
|
||||
current speed
|
||||
</div>
|
||||
<v-card color="secondary" flat class="mr-2 ml-2">
|
||||
<v-layout row wrap class="py-3 px-1 mt-1 project mx-auto text-center">
|
||||
<v-flex xs6>
|
||||
<v-icon color="download" size="16px">
|
||||
{{ mdiChevronDown }}
|
||||
</v-icon>
|
||||
<span
|
||||
class="download--text title"
|
||||
style="font-size: 1.1em !important;"
|
||||
>
|
||||
{{ status.dlspeed | getDataValue(1) }}
|
||||
<span class="font-weight-light caption font-weight-regular">
|
||||
{{ status.dlspeed | getDataUnit(1) }}/s
|
||||
</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex xs6>
|
||||
<v-icon
|
||||
class="pl-2"
|
||||
color="upload"
|
||||
size="24px"
|
||||
>
|
||||
{{ mdiChevronUp }}
|
||||
</v-icon>
|
||||
<span
|
||||
class="upload--text title"
|
||||
style="font-size: 1.1em !important;"
|
||||
>
|
||||
{{ status.upspeed | getDataValue(1) }}
|
||||
<span class="font-weight-light caption font-weight-regular">
|
||||
{{ status.upspeed | getDataUnit }}/s
|
||||
</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-row dense class="mx-1 pt-1">
|
||||
<v-col>
|
||||
<SpeedCard :icon="mdiChevronDown" color="download" :value="status.dlspeed" />
|
||||
</v-col>
|
||||
<v-col>
|
||||
<SpeedCard :icon="mdiChevronUp" color="upload" :value="status.upspeed" />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
|
||||
import SpeedCard from '@/components/Core/SpeedCard'
|
||||
export default {
|
||||
name: 'CurrentSpeed',
|
||||
components: {
|
||||
SpeedCard
|
||||
},
|
||||
props: ['status'],
|
||||
data: () => ({
|
||||
mdiChevronUp,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,22 @@
|
|||
<template>
|
||||
<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
|
||||
style="margin-top: 6px"
|
||||
class="upload--text"
|
||||
>
|
||||
Free Space
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex v-if="space" md5 class="ml-4">
|
||||
<span class="upload--text title">
|
||||
{{ space | getDataValue }}
|
||||
<span class="font-weight-light caption">
|
||||
{{ space | getDataUnit }}
|
||||
</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<div v-if="space" class="mt-3 mb-4">
|
||||
<StorageCard
|
||||
v-if="space"
|
||||
class="mt-8"
|
||||
label="Free Space"
|
||||
color="upload"
|
||||
:value="space"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StorageCard from '@/components/Core/StorageCard'
|
||||
export default {
|
||||
name: 'FreeSpace',
|
||||
components: {
|
||||
StorageCard
|
||||
},
|
||||
props: ['space']
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,53 +3,37 @@
|
|||
<label class="text-uppercase white--text caption font-weight-medium ml-4">
|
||||
Session Stats
|
||||
</label>
|
||||
<v-card flat color="secondary" class="mr-2 ml-2 mb-4">
|
||||
<v-layout row wrap class="pa-3 mt-1 project mx-auto">
|
||||
<v-flex md6>
|
||||
<div
|
||||
style="margin-top: 6px"
|
||||
class="download--text"
|
||||
>
|
||||
Downloaded
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex md5 class="ml-4">
|
||||
<span class="download--text title">
|
||||
{{ status.downloaded | getDataValue }}
|
||||
<span class="font-weight-light caption">
|
||||
{{ status.downloaded | getDataUnit }}
|
||||
</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-card flat color="secondary" class="ml-2 mr-2">
|
||||
<v-layout row wrap class="pa-3 mt-1 project mx-auto">
|
||||
<v-flex md6>
|
||||
<div
|
||||
style="margin-top: 6px"
|
||||
class="upload--text"
|
||||
>
|
||||
Uploaded
|
||||
</div>
|
||||
</v-flex>
|
||||
<v-flex md5 class="ml-4">
|
||||
<span class="upload--text title">
|
||||
{{ status.uploaded | getDataValue(1) }}
|
||||
<span class="font-weight-light caption">
|
||||
{{ status.uploaded | getDataUnit(1) }}
|
||||
</span>
|
||||
</span>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
<v-tooltip bottom>
|
||||
<template #activator="{ on }">
|
||||
<v-icon
|
||||
color="white"
|
||||
style="opacity: 0.3;"
|
||||
small
|
||||
v-on="on"
|
||||
>
|
||||
{{ mdiInformationOutline }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<span>Since the last time qBittorrent was restarted</span>
|
||||
</v-tooltip>
|
||||
<StorageCard
|
||||
class="mb-4 mt-4"
|
||||
label="Downloaded"
|
||||
color="download"
|
||||
:value="status.downloaded"
|
||||
/>
|
||||
<StorageCard label="Uploaded" color="upload" :value="status.uploaded" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mdiInformationOutline } from '@mdi/js'
|
||||
import StorageCard from '@/components/Core/StorageCard'
|
||||
export default {
|
||||
name: 'SessionStats',
|
||||
props: ['status']
|
||||
components: { StorageCard },
|
||||
props: ['status'],
|
||||
data: () => ({ mdiInformationOutline })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
class="ma-0 pa-1"
|
||||
:class="style"
|
||||
>
|
||||
<v-flex xs12 class="ma-1 mt-0" row>
|
||||
<span class="subtitle-1" style="line-height: 1.3em;">
|
||||
<v-flex xs12 class="ma-1" row>
|
||||
<span class="subtitle-1" style="line-height: 1.3em; font-size: .95em !important;">
|
||||
{{ torrent.name }}
|
||||
</span>
|
||||
</v-flex>
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
small
|
||||
class="caption white--text mr-2"
|
||||
:class="torrent.state.toLowerCase()"
|
||||
style="height: 20px;"
|
||||
>
|
||||
{{ torrent.state }}
|
||||
</v-chip>
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
v-if="torrent.category"
|
||||
small
|
||||
class="upload caption white--text"
|
||||
style="height: 20px;"
|
||||
>
|
||||
{{ torrent.category }}
|
||||
</v-chip>
|
||||
|
|
@ -30,36 +32,47 @@
|
|||
<span class="body-2"> {{ torrent.dloaded | getDataValue }} </span>
|
||||
<span class="grey--text caption ml-1"> {{ torrent.dloaded | getDataUnit }} / </span>
|
||||
<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="grey--text caption ml-1"> ETA: </span>
|
||||
<span class="body-2 ml-1"> {{ torrent.eta }} </span>
|
||||
<v-spacer />
|
||||
<span class="grey--text caption ml-1"> {{ torrent.size | getDataUnit }}</span>
|
||||
<span class="mx-1 grey--text" style="margin-top: 3px">•</span>
|
||||
<span class="body-2">{{ torrent.progress }}</span>
|
||||
<span class="grey--text caption">%</span>
|
||||
<span class="grey--text caption ml-1">%</span>
|
||||
<span class="mx-1 grey--text" style="margin-top: 3px">•</span>
|
||||
<span class="grey--text caption"> Ratio: </span>
|
||||
<span class="body-2 ml-1"> {{ torrent.ratio }} </span>
|
||||
<v-spacer />
|
||||
<span class="body-2 ml-1"> {{ torrent.eta }} </span>
|
||||
</v-flex>
|
||||
<v-flex xs12 class="mt-1 mb-1">
|
||||
<v-progress-linear color="upload" :value="torrent.progress" />
|
||||
<v-flex xs12 class="ma-1">
|
||||
<v-progress-linear
|
||||
rounded
|
||||
color="upload"
|
||||
height="5"
|
||||
:value="torrent.progress"
|
||||
/>
|
||||
</v-flex>
|
||||
<v-flex row xs12 class="ma-1">
|
||||
<div class="caption grey--text">
|
||||
{{ torrent.num_seeds }}/{{ torrent.available_seeds }} seeds
|
||||
</div>
|
||||
<div class="caption grey--text ml-2">
|
||||
<span class="mx-1 grey--text" style="margin-top: 2px">•</span>
|
||||
<div class="caption grey--text">
|
||||
{{ torrent.num_leechs }}/{{ torrent.available_peers }} peers
|
||||
</div>
|
||||
<v-spacer />
|
||||
<div class="caption grey--text">
|
||||
<div>
|
||||
<span v-if="torrent.dlspeed">
|
||||
<v-icon small class="grey--text">
|
||||
{{ mdiChevronDown }}
|
||||
</v-icon> {{ torrent.dlspeed | getDataValue(1) }} {{ torrent.dlspeed | getDataUnit(1) }}/s
|
||||
</v-icon>
|
||||
<span class="caption font-weight-medium grey--text">{{ torrent.dlspeed | getDataValue(1) }} </span>
|
||||
<span class="caption grey--text" style="font-size: 0.6em !important;"> {{ torrent.dlspeed | getDataUnit(1) }}/s </span>
|
||||
</span>
|
||||
<span v-if="torrent.upspeed">
|
||||
<v-icon small class="grey--text">
|
||||
{{ mdiChevronUp }}
|
||||
</v-icon> {{ torrent.upspeed | getDataValue(1) }} {{ torrent.upspeed | getDataUnit(1) }}/s
|
||||
</v-icon>
|
||||
<span class="caption font-weight-medium grey--text">{{ torrent.upspeed | getDataValue(1) }} </span>
|
||||
<span class="caption grey--text" style="font-size: 0.6em !important;"> {{ torrent.upspeed | getDataUnit(1) }}/s </span>
|
||||
</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import router from '@/router'
|
|||
import store from '@/store'
|
||||
import '@babel/polyfill'
|
||||
import 'typeface-roboto'
|
||||
import 'typeface-roboto-mono'
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
import filters from '@/filters'
|
||||
|
|
|
|||
|
|
@ -1,34 +1,36 @@
|
|||
@import "~@/styles/colors.scss";
|
||||
|
||||
$sideborder-margin: 5px;
|
||||
|
||||
.sideborder.done {
|
||||
border-left: 4px solid #{$torrent-done};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-done};
|
||||
}
|
||||
.sideborder.downloading {
|
||||
border-left: 4px solid #{$torrent-downloading};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-downloading};
|
||||
}
|
||||
.sideborder.fail {
|
||||
border-left: 4px solid #{$torrent-fail};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-fail};
|
||||
}
|
||||
.sideborder.paused {
|
||||
border-left: 4px solid #{$torrent-paused};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-paused};
|
||||
}
|
||||
.sideborder.queued {
|
||||
border-left: 4px solid #{$torrent-queued};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-queued};
|
||||
}
|
||||
.sideborder.seeding {
|
||||
border-left: 4px solid #{$torrent-seeding};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-seeding};
|
||||
}
|
||||
.sideborder.checking {
|
||||
border-left: 4px solid #{$torrent-checking};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-checking};
|
||||
}
|
||||
.sideborder.stalled {
|
||||
border-left: 4px solid #{$torrent-stalled};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-stalled};
|
||||
}
|
||||
.sideborder.metadata {
|
||||
border-left: 4px solid #{$torrent-metadata};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-metadata};
|
||||
}
|
||||
.sideborder.moving {
|
||||
border-left: 4px solid #{$torrent-moving};
|
||||
border-left: #{$sideborder-margin} solid #{$torrent-moving};
|
||||
}
|
||||
.v-chip.done {
|
||||
background: #{$torrent-done} !important;
|
||||
|
|
@ -99,6 +101,11 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.robot-mono {
|
||||
font-family: 'Roboto Mono', sans-serif;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<v-layout
|
||||
row
|
||||
wrap
|
||||
align-center
|
||||
style="height: 100vh"
|
||||
class="justify-center background"
|
||||
>
|
||||
<v-layout class="background mt-5">
|
||||
<div style="margin: 130px auto">
|
||||
<v-card max-width="400" flat>
|
||||
<v-card-title class="justify-center">
|
||||
|
|
|
|||
Loading…
Reference in a new issue