oxpanel/oxpanel25
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Nell
2025-03-18 18:24:14 +01:00
parent cb92b0c84f
commit da313ce205
6 changed files with 146 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
app/frontend/src/components/torrent/App.vue
View File

@@ -13,35 +13,47 @@
</v-list-item>
<v-divider/>
</v-list>
<UserStats :stats="user_stats"/>
</v-navigation-drawer>
<v-navigation-drawer v-model="right_drawer" location="right" temporary>
<Friend v-if="right_drawer" :active_user="display_user.id" @userSelected="userSelectedUpdated"/>
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-title><v-btn variant="plain" href="/">Oxpanel</v-btn></v-app-bar-title>
<v-spacer/>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn v-bind="props">Manage</v-btn>
</template>
<v-list>
<v-list-item href="/password_change/" title="Change password"/>
<v-list-item>
<v-list-item-action>
<form action="/logout/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" :value="Cookies.get('csrftoken')">
<button>Disconnect</button>
</form>
</v-list-item-action>
</v-list-item>
</v-list>
</v-menu>
<v-btn
@click="right_drawer = !right_drawer"
prepend-icon="mdi-account-group"
:color="display_user.id === user.id ? 'green':'orange'"
:text="display_user.username"
/>
<v-app-bar app>
<v-app-bar-title>
<v-row align="center" justify="start" style="max-width: 100%">
<v-col class="v-col-1 text-center">
<v-btn variant="plain" href="/">Oxpanel</v-btn>
</v-col>
<v-col class="v-col-3">
<v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" v-model="filters.search" clearable @click:clear="filters.search = ''"/>
</v-col>
</v-row>
</v-app-bar-title>
<template v-slot:append>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn v-bind="props">Manage</v-btn>
</template>
<v-list>
<v-list-item href="/password_change/" title="Change password"/>
<v-list-item>
<v-list-item-action>
<form action="/logout/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" :value="Cookies.get('csrftoken')">
<button>Disconnect</button>
</form>
</v-list-item-action>
</v-list-item>
</v-list>
</v-menu>
<v-btn
@click="right_drawer = !right_drawer"
prepend-icon="mdi-account-group"
:color="display_user.id === user.id ? 'green':'orange'"
:text="display_user.username"
/>
</template>
</v-app-bar>
<v-main>
<TorrentList :loading="loading_torrents" :torrents="torrents" :delete_disabled="user.id !== display_user.id"/>
@@ -54,6 +66,7 @@ import Cookies from "js-cookie";
import TorrentList from "@/components/torrent/TorrentList.vue";
import UploadForm from "@/components/torrent/UploadForm.vue";
import Friend from "@/components/auth/Friend.vue";
import UserStats from "@/components/torrent/UserStats.vue";
</script>
<script>
@@ -68,7 +81,32 @@ export default {
},
loading_torrents: false,
filters: {},
torrents: []
torrents: [],
user_stats: {
"torrents_size": 0,
"torrents_len": 0,
"torrent_len_shared": 0,
"torrents_total_len": 0,
"user_max_size": 0,
"user_usage_percent": 0,
"disk_total": 0,
"disk_used": 0,
"disk_free": 0,
"disk_usage_percent": 0,
},
filter_timer: null,
}
},
watch: {
filters: {
handler(){
// console.log(JSON.stringify(this.filters));
clearTimeout(this.filter_timer);
this.filter_timer = setTimeout(() => {
this.fetchTorrents();
}, 200)
},
deep: true
}
},
async mounted(){
@@ -83,17 +121,25 @@ export default {
break;
case "add_torrent":
this.fetchTorrent(message.torrent_id);
this.fetchUserStats();
break;
case "remove_torrent":
this.removeTorrent(message.torrent_id);
this.fetchUserStats();
break;
case "update_torrent":
this.updateTorrent(message.torrent_id, message.updated_fields)
break
}
})
await this.fetchTorrents();
await this.fetchUserStats();
},
methods: {
async fetchUserStats(){
let response = await fetch("/api/users/user_stats/");
this.user_stats = await response.json();
},
torrentAdded(torrent){
if(!(torrent.id in this.torrentsAsObject)){
this.torrents.unshift(torrent);

2
app/frontend/src/components/torrent/FileList.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-list density="compact">
<div v-if="loading">
<div v-if="loading" class="text-center">
<v-progress-circular indeterminate/>
Loading files ...
</div>

45
app/frontend/src/components/torrent/UserStats.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<v-list>
<v-list-item
prepend-icon="mdi-file-multiple"
:title="`${stats.torrents_total_len} torrent${stats.torrents_total_len !== 1 ? 's':''}`"
class="text-center"
/>
<v-list-item prepend-icon="mdi-harddisk" :title="`${fs_format(stats.torrents_size)}/${fs_format(stats.user_max_size)}`" class="text-center">
<v-progress-linear :model-value="stats.user_usage_percent" height="10" :color="getProgressColor(stats.user_usage_percent)"/>
</v-list-item>
<!-- <v-list-item prepend-icon="mdi-server" :title="`Server usage ${stats.disk_usage_percent.toFixed(2)}%`" class="text-center">-->
<!-- <template v-slot:subtitle>-->
<!-- <v-progress-linear :model-value="stats.disk_usage_percent" height="10" :color="getProgressColor(stats.disk_usage_percent)"/>-->
<!-- </template>-->
<!-- </v-list-item>-->
<!-- <v-list-item prepend-icon="mdi-server" :title="`${stats.disk_used}/${stats.disk_total}`"/>-->
</v-list>
</template>
<script setup>
import {fs_format} from "@/plugins/utils.js";
</script>
<script>
export default {
props: {
stats: {
required: true,
type: Object
}
},
data(){
return {
}
},
methods: {
getProgressColor(value){
if(value < 50) return "green";
if(value < 75) return "orange";
return "red";
}
}
}
</script>