mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-05-16 02:55:41 +00:00
Compare commits
4 Commits
hallucinat
...
c8262a3bda
| Author | SHA1 | Date | |
|---|---|---|---|
| c8262a3bda | |||
| cb90281e5e | |||
| 0cd2a73a8b | |||
| c309016299 |
@@ -13,7 +13,7 @@
|
|||||||
<!-- Popup that will show above existing rendered content -->
|
<!-- Popup that will show above existing rendered content -->
|
||||||
<popup />
|
<popup />
|
||||||
|
|
||||||
<!-- Command Palette -->
|
<!-- Command Palette for quick navigation -->
|
||||||
<command-palette />
|
<command-palette />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -62,6 +62,7 @@
|
|||||||
grid-column: 2 / 3;
|
grid-column: 2 / 3;
|
||||||
width: calc(100% - var(--header-size));
|
width: calc(100% - var(--header-size));
|
||||||
grid-row: 2;
|
grid-row: 2;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
|
|||||||
@@ -1,9 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<li class="card">
|
<li class="cast-card">
|
||||||
<a @click="openCastItem" @keydown.enter="openCastItem">
|
<a
|
||||||
<img :src="pictureUrl" alt="Movie or person poster image" />
|
class="cast-card__link"
|
||||||
<p class="name">{{ creditItem.name || creditItem.title }}</p>
|
role="button"
|
||||||
<p class="meta">{{ creditItem.character || creditItem.year }}</p>
|
tabindex="0"
|
||||||
|
:aria-label="ariaLabel"
|
||||||
|
@click="openCastItem"
|
||||||
|
@keydown.enter="openCastItem"
|
||||||
|
>
|
||||||
|
<div class="cast-card__image-wrapper">
|
||||||
|
<img
|
||||||
|
class="cast-card__image"
|
||||||
|
:src="pictureUrl"
|
||||||
|
:alt="imageAltText"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="cast-card__content">
|
||||||
|
<p class="cast-card__name">{{ creditItem.name || creditItem.title }}</p>
|
||||||
|
<p v-if="metaText" class="cast-card__meta">{{ metaText }}</p>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
@@ -33,85 +49,139 @@
|
|||||||
return "/assets/no-image_small.svg";
|
return "/assets/no-image_small.svg";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const metaText = computed(() => {
|
||||||
|
if ("character" in props.creditItem && props.creditItem.character) {
|
||||||
|
return props.creditItem.character;
|
||||||
|
}
|
||||||
|
if ("job" in props.creditItem && props.creditItem.job) {
|
||||||
|
return props.creditItem.job;
|
||||||
|
}
|
||||||
|
if ("year" in props.creditItem && props.creditItem.year) {
|
||||||
|
return props.creditItem.year;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
});
|
||||||
|
|
||||||
|
const imageAltText = computed(() => {
|
||||||
|
const name = props.creditItem.name || (props.creditItem as any).title || "";
|
||||||
|
if ("character" in props.creditItem) {
|
||||||
|
return `${name} as ${props.creditItem.character}`;
|
||||||
|
}
|
||||||
|
if ("job" in props.creditItem) {
|
||||||
|
return `${name}, ${props.creditItem.job}`;
|
||||||
|
}
|
||||||
|
return name ? `Poster for ${name}` : "No image available";
|
||||||
|
});
|
||||||
|
|
||||||
|
const ariaLabel = computed(() => {
|
||||||
|
const name = props.creditItem.name || (props.creditItem as any).title || "";
|
||||||
|
if ("character" in props.creditItem && props.creditItem.character) {
|
||||||
|
return `View ${name}, played ${props.creditItem.character}`;
|
||||||
|
}
|
||||||
|
if ("job" in props.creditItem && props.creditItem.job) {
|
||||||
|
return `View ${name}, ${props.creditItem.job}`;
|
||||||
|
}
|
||||||
|
return `View ${name}`;
|
||||||
|
});
|
||||||
|
|
||||||
function openCastItem() {
|
function openCastItem() {
|
||||||
store.dispatch("popup/open", { ...props.creditItem });
|
store.dispatch("popup/open", { ...props.creditItem });
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
li a p:first-of-type {
|
@import "scss/variables";
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.card p {
|
.cast-card {
|
||||||
font-size: 1em;
|
list-style: none;
|
||||||
padding: 0 10px;
|
margin: 0 10px 10px 0;
|
||||||
margin: 0;
|
width: 150px;
|
||||||
overflow: hidden;
|
flex-shrink: 0;
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-height: calc(10px + ((16px * var(--line-height)) * 3));
|
|
||||||
}
|
|
||||||
|
|
||||||
li.card {
|
|
||||||
margin: 10px;
|
|
||||||
margin-right: 4px;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
border-radius: 8px;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
min-width: 140px;
|
|
||||||
width: 140px;
|
|
||||||
background-color: var(--background-color-secondary);
|
|
||||||
color: var(--text-color);
|
|
||||||
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
transform: scale(0.97) translateZ(0);
|
|
||||||
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
.cast-card__link {
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
display: flex;
|
||||||
transform: scale(1.03);
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: var(
|
||||||
|
--highlight-secondary,
|
||||||
|
var(--background-color-secondary)
|
||||||
|
);
|
||||||
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
&:focus-visible {
|
||||||
font-weight: 500;
|
outline: 2px solid var(--highlight-color);
|
||||||
}
|
outline-offset: 2px;
|
||||||
|
|
||||||
.character {
|
|
||||||
font-size: 0.9em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta {
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: var(--text-color-70);
|
|
||||||
display: -webkit-box;
|
|
||||||
overflow: hidden;
|
|
||||||
-webkit-line-clamp: 1;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
// margin-top: auto;
|
|
||||||
max-height: calc((0.9em * var(--line-height)) * 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-height: 210px;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cast-card__image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 2 / 3;
|
||||||
|
overflow: hidden;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
var(--background-color) 0%,
|
||||||
|
var(--background-color-secondary) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cast-card__image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cast-card__content {
|
||||||
|
padding: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cast-card__name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--highlight-bg, var(--text-color));
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cast-card__meta {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.3;
|
||||||
|
color: var(--highlight-bg, var(--text-color-70));
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,503 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="admin-stats">
|
|
||||||
<div class="admin-stats__header">
|
|
||||||
<h2 class="admin-stats__title">Statistics</h2>
|
|
||||||
<div class="admin-stats__controls">
|
|
||||||
<select
|
|
||||||
v-model="timeRange"
|
|
||||||
class="time-range-select"
|
|
||||||
@change="fetchStats"
|
|
||||||
>
|
|
||||||
<option value="today">Today</option>
|
|
||||||
<option value="week">This Week</option>
|
|
||||||
<option value="month">This Month</option>
|
|
||||||
<option value="all">All Time</option>
|
|
||||||
</select>
|
|
||||||
<button class="refresh-btn" @click="fetchStats" :disabled="loading">
|
|
||||||
<IconActivity :class="{ spin: loading }" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="loading" class="admin-stats__loading">Loading statistics...</div>
|
|
||||||
|
|
||||||
<div v-else class="admin-stats__grid">
|
|
||||||
<div
|
|
||||||
class="stat-card"
|
|
||||||
v-for="stat in statCards"
|
|
||||||
:key="stat.key"
|
|
||||||
@click="handleCardClick(stat.key)"
|
|
||||||
:class="{ 'stat-card--clickable': stat.clickable }"
|
|
||||||
>
|
|
||||||
<div class="stat-card__header">
|
|
||||||
<component :is="stat.icon" class="stat-card__icon" />
|
|
||||||
<span
|
|
||||||
v-if="stat.trend !== 0"
|
|
||||||
:class="[
|
|
||||||
'stat-card__trend',
|
|
||||||
stat.trend > 0 ? 'stat-card__trend--up' : 'stat-card__trend--down'
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
{{ stat.trend > 0 ? "↑" : "↓" }} {{ Math.abs(stat.trend) }}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<span class="stat-card__value">{{ stat.value }}</span>
|
|
||||||
<span class="stat-card__label">{{ stat.label }}</span>
|
|
||||||
<div v-if="stat.sparkline" class="stat-card__sparkline">
|
|
||||||
<div
|
|
||||||
v-for="(point, index) in stat.sparkline"
|
|
||||||
:key="index"
|
|
||||||
class="sparkline-bar"
|
|
||||||
:style="{
|
|
||||||
height: `${(point / Math.max(...stat.sparkline)) * 100}%`
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, onMounted } from "vue";
|
|
||||||
import IconProfile from "@/icons/IconProfile.vue";
|
|
||||||
import IconPlay from "@/icons/IconPlay.vue";
|
|
||||||
import IconRequest from "@/icons/IconRequest.vue";
|
|
||||||
import IconActivity from "@/icons/IconActivity.vue";
|
|
||||||
|
|
||||||
interface Stat {
|
|
||||||
key: string;
|
|
||||||
value: string | number;
|
|
||||||
label: string;
|
|
||||||
trend: number;
|
|
||||||
icon: any;
|
|
||||||
clickable: boolean;
|
|
||||||
sparkline?: number[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const stats = ref({
|
|
||||||
totalUsers: 0,
|
|
||||||
activeTorrents: 0,
|
|
||||||
totalRequests: 0,
|
|
||||||
pendingRequests: 0,
|
|
||||||
approvedRequests: 0,
|
|
||||||
totalStorage: "0 GB",
|
|
||||||
usersTrend: 0,
|
|
||||||
torrentsTrend: 0,
|
|
||||||
requestsTrend: 0,
|
|
||||||
pendingTrend: 0,
|
|
||||||
approvedTrend: 0,
|
|
||||||
storageTrend: 0,
|
|
||||||
usersSparkline: [] as number[],
|
|
||||||
torrentsSparkline: [] as number[],
|
|
||||||
requestsSparkline: [] as number[]
|
|
||||||
});
|
|
||||||
|
|
||||||
const loading = ref(false);
|
|
||||||
const timeRange = ref("week");
|
|
||||||
|
|
||||||
const statCards = computed<Stat[]>(() => [
|
|
||||||
{
|
|
||||||
key: "totalUsers",
|
|
||||||
value: stats.value.totalUsers,
|
|
||||||
label: "Total Users",
|
|
||||||
trend: stats.value.usersTrend,
|
|
||||||
icon: IconProfile,
|
|
||||||
clickable: true,
|
|
||||||
sparkline: stats.value.usersSparkline
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "activeTorrents",
|
|
||||||
value: stats.value.activeTorrents,
|
|
||||||
label: "Active Torrents",
|
|
||||||
trend: stats.value.torrentsTrend,
|
|
||||||
icon: IconPlay,
|
|
||||||
clickable: true,
|
|
||||||
sparkline: stats.value.torrentsSparkline
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "totalRequests",
|
|
||||||
value: stats.value.totalRequests,
|
|
||||||
label: "Total Requests",
|
|
||||||
trend: stats.value.requestsTrend,
|
|
||||||
icon: IconRequest,
|
|
||||||
clickable: true,
|
|
||||||
sparkline: stats.value.requestsSparkline
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "pendingRequests",
|
|
||||||
value: stats.value.pendingRequests,
|
|
||||||
label: "Pending Requests",
|
|
||||||
trend: stats.value.pendingTrend,
|
|
||||||
icon: IconRequest,
|
|
||||||
clickable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "approvedRequests",
|
|
||||||
value: stats.value.approvedRequests,
|
|
||||||
label: "Approved",
|
|
||||||
trend: stats.value.approvedTrend,
|
|
||||||
icon: IconRequest,
|
|
||||||
clickable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: "totalStorage",
|
|
||||||
value: stats.value.totalStorage,
|
|
||||||
label: "Storage Used",
|
|
||||||
trend: stats.value.storageTrend,
|
|
||||||
icon: IconActivity,
|
|
||||||
clickable: false
|
|
||||||
}
|
|
||||||
]);
|
|
||||||
|
|
||||||
const generateSparkline = (
|
|
||||||
baseValue: number,
|
|
||||||
points: number = 7
|
|
||||||
): number[] => {
|
|
||||||
return Array.from({ length: points }, () => {
|
|
||||||
const variance = Math.random() * 0.3 - 0.15;
|
|
||||||
return Math.max(0, Math.floor(baseValue * (1 + variance)));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
async function fetchStats() {
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
const baseUsers = 142;
|
|
||||||
const baseTorrents = 23;
|
|
||||||
const baseRequests = 856;
|
|
||||||
|
|
||||||
stats.value = {
|
|
||||||
totalUsers: baseUsers,
|
|
||||||
activeTorrents: baseTorrents,
|
|
||||||
totalRequests: baseRequests,
|
|
||||||
pendingRequests: 12,
|
|
||||||
approvedRequests: 712,
|
|
||||||
totalStorage: "2.4 TB",
|
|
||||||
usersTrend: 8.5,
|
|
||||||
torrentsTrend: -3.2,
|
|
||||||
requestsTrend: 12.7,
|
|
||||||
pendingTrend: -15.4,
|
|
||||||
approvedTrend: 18.2,
|
|
||||||
storageTrend: 5.8,
|
|
||||||
usersSparkline: generateSparkline(baseUsers / 7),
|
|
||||||
torrentsSparkline: generateSparkline(baseTorrents),
|
|
||||||
requestsSparkline: generateSparkline(baseRequests / 30)
|
|
||||||
};
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCardClick(key: string) {
|
|
||||||
console.log(`Stat card clicked: ${key}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => fetchStats());
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "scss/variables";
|
|
||||||
@import "scss/media-queries";
|
|
||||||
|
|
||||||
.admin-stats {
|
|
||||||
background-color: var(--background-color-secondary);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $text-color;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__loading {
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: $text-color-70;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 0.75rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 0.6rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.time-range-select {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: $text-color;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
padding: 0.4rem 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 40px;
|
|
||||||
padding: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: $text-color;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-card {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
text-align: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
overflow: hidden;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 0.6rem 0.4rem;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--clickable {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
||||||
background-color: var(--background-40);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
&:hover {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
fill: var(--highlight-color);
|
|
||||||
opacity: 0.8;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__trend {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0.2rem 0.4rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.65rem;
|
|
||||||
padding: 0.15rem 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--up {
|
|
||||||
color: $white;
|
|
||||||
background-color: var(--color-success-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--down {
|
|
||||||
color: $white;
|
|
||||||
background-color: var(--color-error-highlight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__value {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--highlight-color);
|
|
||||||
margin-bottom: 0.15rem;
|
|
||||||
line-height: 1.1;
|
|
||||||
padding: 1rem 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: $text-color-70;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.4px;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
word-break: break-word;
|
|
||||||
max-width: 100%;
|
|
||||||
line-height: 1.2;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sparkline {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
gap: 2px;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
height: 18px;
|
|
||||||
margin-top: 0.3rem;
|
|
||||||
gap: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sparkline-bar {
|
|
||||||
flex: 1;
|
|
||||||
background: linear-gradient(
|
|
||||||
180deg,
|
|
||||||
var(--highlight-color) 0%,
|
|
||||||
var(--color-green-70) 100%
|
|
||||||
);
|
|
||||||
border-radius: 2px 2px 0 0;
|
|
||||||
min-height: 3px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
|
|
||||||
.stat-card:hover & {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,685 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="activity-feed">
|
|
||||||
<div class="activity-feed__header">
|
|
||||||
<h2 class="activity-feed__title">Recent Activity</h2>
|
|
||||||
<div class="activity-feed__controls">
|
|
||||||
<select v-model="typeFilter" class="activity-feed__filter">
|
|
||||||
<option value="">All Types</option>
|
|
||||||
<option value="request">Requests</option>
|
|
||||||
<option value="download">Downloads</option>
|
|
||||||
<option value="user">Users</option>
|
|
||||||
<option value="movie">Library</option>
|
|
||||||
</select>
|
|
||||||
<select
|
|
||||||
v-model="timeFilter"
|
|
||||||
class="activity-feed__filter"
|
|
||||||
@change="fetchActivities"
|
|
||||||
>
|
|
||||||
<option value="1h">Last Hour</option>
|
|
||||||
<option value="24h">Last 24 Hours</option>
|
|
||||||
<option value="7d">Last 7 Days</option>
|
|
||||||
<option value="30d">Last 30 Days</option>
|
|
||||||
</select>
|
|
||||||
<button
|
|
||||||
class="refresh-btn"
|
|
||||||
@click="fetchActivities"
|
|
||||||
:disabled="loading"
|
|
||||||
>
|
|
||||||
<IconActivity :class="{ spin: loading }" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="loading" class="activity-feed__loading">
|
|
||||||
Loading activities...
|
|
||||||
</div>
|
|
||||||
<div v-else-if="error" class="activity-feed__error">{{ error }}</div>
|
|
||||||
|
|
||||||
<div v-else class="activity-feed__list">
|
|
||||||
<div
|
|
||||||
class="activity-item"
|
|
||||||
v-for="activity in filteredActivities"
|
|
||||||
:key="activity.id"
|
|
||||||
@click="handleActivityClick(activity)"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
:class="[
|
|
||||||
'activity-item__icon',
|
|
||||||
`activity-item__icon--${activity.type}`
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<component :is="getIcon(activity.type)" />
|
|
||||||
</div>
|
|
||||||
<div class="activity-item__content">
|
|
||||||
<div class="activity-item__header">
|
|
||||||
<span class="activity-item__message">{{ activity.message }}</span>
|
|
||||||
<span v-if="activity.metadata" class="activity-item__badge">
|
|
||||||
{{ activity.metadata }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="activity-item__footer">
|
|
||||||
<span class="activity-item__user" v-if="activity.user">{{
|
|
||||||
activity.user
|
|
||||||
}}</span>
|
|
||||||
<span class="activity-item__time">{{
|
|
||||||
formatTime(activity.timestamp)
|
|
||||||
}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="filteredActivities.length === 0" class="activity-feed__empty">
|
|
||||||
No activities found
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-if="!loading && filteredActivities.length > 0"
|
|
||||||
class="activity-feed__footer"
|
|
||||||
>
|
|
||||||
<span class="activity-count"
|
|
||||||
>{{ filteredActivities.length }} of
|
|
||||||
{{ activities.length }} activities</span
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
v-if="hasMore"
|
|
||||||
class="load-more-btn"
|
|
||||||
@click="loadMore"
|
|
||||||
:disabled="loadingMore"
|
|
||||||
>
|
|
||||||
{{ loadingMore ? "Loading..." : "Load More" }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
|
||||||
import IconMovie from "@/icons/IconMovie.vue";
|
|
||||||
import IconPlay from "@/icons/IconPlay.vue";
|
|
||||||
import IconRequest from "@/icons/IconRequest.vue";
|
|
||||||
import IconProfile from "@/icons/IconProfile.vue";
|
|
||||||
import IconActivity from "@/icons/IconActivity.vue";
|
|
||||||
|
|
||||||
type ActivityType = "request" | "download" | "user" | "movie";
|
|
||||||
|
|
||||||
interface Activity {
|
|
||||||
id: number;
|
|
||||||
type: ActivityType;
|
|
||||||
message: string;
|
|
||||||
timestamp: Date;
|
|
||||||
user?: string;
|
|
||||||
metadata?: string;
|
|
||||||
details?: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const activities = ref<Activity[]>([]);
|
|
||||||
const loading = ref(false);
|
|
||||||
const loadingMore = ref(false);
|
|
||||||
const error = ref("");
|
|
||||||
const typeFilter = ref<ActivityType | "">("");
|
|
||||||
const timeFilter = ref("24h");
|
|
||||||
const hasMore = ref(true);
|
|
||||||
const page = ref(1);
|
|
||||||
|
|
||||||
const filteredActivities = computed(() => {
|
|
||||||
let result = [...activities.value];
|
|
||||||
|
|
||||||
if (typeFilter.value) {
|
|
||||||
result = result.filter(a => a.type === typeFilter.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
return result;
|
|
||||||
});
|
|
||||||
|
|
||||||
const getIcon = (type: string) => {
|
|
||||||
const icons: Record<string, any> = {
|
|
||||||
request: IconRequest,
|
|
||||||
download: IconPlay,
|
|
||||||
user: IconProfile,
|
|
||||||
movie: IconMovie
|
|
||||||
};
|
|
||||||
return icons[type] || IconMovie;
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatTime = (date: Date): string => {
|
|
||||||
const now = new Date();
|
|
||||||
const diff = now.getTime() - date.getTime();
|
|
||||||
const minutes = Math.floor(diff / 60000);
|
|
||||||
const hours = Math.floor(diff / 3600000);
|
|
||||||
const days = Math.floor(diff / 86400000);
|
|
||||||
|
|
||||||
if (minutes < 1) return "Just now";
|
|
||||||
if (minutes < 60) return `${minutes}m ago`;
|
|
||||||
if (hours < 24) return `${hours}h ago`;
|
|
||||||
return `${days}d ago`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const generateMockActivities = (
|
|
||||||
count: number,
|
|
||||||
startId: number
|
|
||||||
): Activity[] => {
|
|
||||||
const types: ActivityType[] = ["request", "download", "user", "movie"];
|
|
||||||
const messages = {
|
|
||||||
request: [
|
|
||||||
"New request: Interstellar (2014)",
|
|
||||||
"Request approved: Oppenheimer",
|
|
||||||
"Request denied: The Matrix",
|
|
||||||
"Request fulfilled: Dune Part Two"
|
|
||||||
],
|
|
||||||
download: [
|
|
||||||
"Torrent completed: Dune Part Two",
|
|
||||||
"Torrent started: Poor Things",
|
|
||||||
"Download failed: Network Error",
|
|
||||||
"Torrent paused by admin"
|
|
||||||
],
|
|
||||||
user: [
|
|
||||||
"New user registered: john_doe",
|
|
||||||
"User upgraded to VIP: sarah_s",
|
|
||||||
"User login from new device: alex_p",
|
|
||||||
"Password changed: mike_r"
|
|
||||||
],
|
|
||||||
movie: [
|
|
||||||
"Movie added to library: The Batman",
|
|
||||||
"Library scan completed: 12 new items",
|
|
||||||
"Show updated: Breaking Bad S5",
|
|
||||||
"Media deleted: Old Movie (1999)"
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
const users = [
|
|
||||||
"admin",
|
|
||||||
"kevin_m",
|
|
||||||
"sarah_s",
|
|
||||||
"john_doe",
|
|
||||||
"alex_p",
|
|
||||||
"mike_r"
|
|
||||||
];
|
|
||||||
|
|
||||||
return Array.from({ length: count }, (_, i) => {
|
|
||||||
const type = types[Math.floor(Math.random() * types.length)];
|
|
||||||
const typeMessages = messages[type];
|
|
||||||
const message =
|
|
||||||
typeMessages[Math.floor(Math.random() * typeMessages.length)];
|
|
||||||
const timeOffset = Math.random() * 24 * 60 * 60 * 1000; // Random time in last 24h
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: startId + i,
|
|
||||||
type,
|
|
||||||
message,
|
|
||||||
timestamp: new Date(Date.now() - timeOffset),
|
|
||||||
user: users[Math.floor(Math.random() * users.length)],
|
|
||||||
metadata: type === "request" ? "Pending" : undefined
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
async function fetchActivities() {
|
|
||||||
loading.value = true;
|
|
||||||
error.value = "";
|
|
||||||
page.value = 1;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
activities.value = generateMockActivities(15, 1).sort(
|
|
||||||
(a, b) => b.timestamp.getTime() - a.timestamp.getTime()
|
|
||||||
);
|
|
||||||
|
|
||||||
hasMore.value = true;
|
|
||||||
} catch (e) {
|
|
||||||
error.value = "Failed to load activities";
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadMore() {
|
|
||||||
if (!hasMore.value || loadingMore.value) return;
|
|
||||||
|
|
||||||
loadingMore.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
const newActivities = generateMockActivities(
|
|
||||||
10,
|
|
||||||
activities.value.length + 1
|
|
||||||
);
|
|
||||||
activities.value = [...activities.value, ...newActivities].sort(
|
|
||||||
(a, b) => b.timestamp.getTime() - a.timestamp.getTime()
|
|
||||||
);
|
|
||||||
|
|
||||||
page.value += 1;
|
|
||||||
|
|
||||||
if (page.value >= 5) {
|
|
||||||
hasMore.value = false;
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
loadingMore.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleActivityClick(activity: Activity) {
|
|
||||||
console.log("Activity clicked:", activity);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(fetchActivities);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "scss/variables";
|
|
||||||
@import "scss/media-queries";
|
|
||||||
|
|
||||||
.activity-feed {
|
|
||||||
background-color: var(--background-color-secondary);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
gap: 0.6rem;
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $text-color;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 100%;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__filter {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: $text-color;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
padding: 0.4rem 0.5rem;
|
|
||||||
min-width: 0;
|
|
||||||
max-width: calc(50% - 0.2rem - 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__loading,
|
|
||||||
&__error {
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: $text-color-70;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__error {
|
|
||||||
color: var(--color-error-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
max-height: 450px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 0.25rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
max-height: 350px;
|
|
||||||
gap: 0.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
|
||||||
background: var(--background-40);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--text-color-50);
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--text-color-70);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__empty {
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: $text-color-50;
|
|
||||||
font-style: italic;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
border-top: 1px solid var(--background-40);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding: 0.65rem;
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
cursor: pointer;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
gap: 0.6rem;
|
|
||||||
padding: 0.6rem;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__icon {
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--request {
|
|
||||||
background-color: #3b82f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--download {
|
|
||||||
background-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--user {
|
|
||||||
background-color: #8b5cf6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--movie {
|
|
||||||
background-color: #f59e0b;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
fill: $white;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.25rem;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
gap: 0.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__message {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: $text-color;
|
|
||||||
line-height: 1.3;
|
|
||||||
flex: 1;
|
|
||||||
word-break: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.78rem;
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__badge {
|
|
||||||
flex-shrink: 0;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 0.15rem 0.4rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: var(--color-warning);
|
|
||||||
color: $black;
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
padding: 0.1rem 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
gap: 0.35rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__user {
|
|
||||||
color: $text-color-70;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "@";
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__time {
|
|
||||||
color: $text-color-50;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "•";
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-right: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 40px;
|
|
||||||
padding: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: $text-color;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-more-btn {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
color: $text-color;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.65rem 1rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-count {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: $text-color-50;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,750 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-status">
|
|
||||||
<div class="system-status__header">
|
|
||||||
<h2 class="system-status__title">System Status</h2>
|
|
||||||
<button
|
|
||||||
class="refresh-btn"
|
|
||||||
@click="fetchSystemStatus"
|
|
||||||
:disabled="loading"
|
|
||||||
>
|
|
||||||
<IconActivity :class="{ spin: loading }" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="loading" class="system-status__loading">
|
|
||||||
Loading system status...
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else class="system-status__items">
|
|
||||||
<div
|
|
||||||
class="status-item"
|
|
||||||
v-for="item in systemItems"
|
|
||||||
:key="item.name"
|
|
||||||
@click="showDetails(item)"
|
|
||||||
>
|
|
||||||
<div class="status-item__header">
|
|
||||||
<span class="status-item__name">{{ item.name }}</span>
|
|
||||||
<div class="status-item__indicator-wrapper">
|
|
||||||
<span class="status-item__uptime" v-if="item.uptime">{{
|
|
||||||
item.uptime
|
|
||||||
}}</span>
|
|
||||||
<span
|
|
||||||
:class="[
|
|
||||||
'status-item__indicator',
|
|
||||||
`status-item__indicator--${item.status}`
|
|
||||||
]"
|
|
||||||
:title="`${item.status}`"
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="status-item__details">
|
|
||||||
<span class="status-item__value">{{ item.value }}</span>
|
|
||||||
<span class="status-item__description">{{ item.description }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.metrics" class="status-item__metrics">
|
|
||||||
<div
|
|
||||||
v-for="metric in item.metrics"
|
|
||||||
:key="metric.label"
|
|
||||||
class="metric"
|
|
||||||
>
|
|
||||||
<span class="metric__label">{{ metric.label }}</span>
|
|
||||||
<div class="metric__bar">
|
|
||||||
<div
|
|
||||||
class="metric__fill"
|
|
||||||
:style="{ width: `${metric.value}%` }"
|
|
||||||
:class="getMetricClass(metric.value)"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
<span class="metric__value">{{ metric.value }}%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Details Modal -->
|
|
||||||
<div v-if="selectedItem" class="modal-overlay" @click="closeDetails">
|
|
||||||
<div class="modal-content" @click.stop>
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3>{{ selectedItem.name }} Details</h3>
|
|
||||||
<button class="close-btn" @click="closeDetails">
|
|
||||||
<IconClose />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="detail-row">
|
|
||||||
<span class="detail-label">Status:</span>
|
|
||||||
<span
|
|
||||||
:class="['detail-value', `detail-value--${selectedItem.status}`]"
|
|
||||||
>
|
|
||||||
{{ selectedItem.status.toUpperCase() }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-row">
|
|
||||||
<span class="detail-label">Current Value:</span>
|
|
||||||
<span class="detail-value">{{ selectedItem.value }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-row">
|
|
||||||
<span class="detail-label">Description:</span>
|
|
||||||
<span class="detail-value">{{ selectedItem.description }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedItem.uptime" class="detail-row">
|
|
||||||
<span class="detail-label">Uptime:</span>
|
|
||||||
<span class="detail-value">{{ selectedItem.uptime }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedItem.lastCheck" class="detail-row">
|
|
||||||
<span class="detail-label">Last Check:</span>
|
|
||||||
<span class="detail-value">{{ selectedItem.lastCheck }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="selectedItem.logs" class="detail-logs">
|
|
||||||
<h4>Recent Logs</h4>
|
|
||||||
<div
|
|
||||||
class="log-entry"
|
|
||||||
v-for="(log, index) in selectedItem.logs"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
<span class="log-time">{{ log.time }}</span>
|
|
||||||
<span class="log-message">{{ log.message }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="action-btn" @click="restartService(selectedItem)">
|
|
||||||
Restart Service
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="action-btn action-btn--secondary"
|
|
||||||
@click="viewFullLogs(selectedItem)"
|
|
||||||
>
|
|
||||||
View Full Logs
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted } from "vue";
|
|
||||||
import IconActivity from "@/icons/IconActivity.vue";
|
|
||||||
import IconClose from "@/icons/IconClose.vue";
|
|
||||||
|
|
||||||
interface Metric {
|
|
||||||
label: string;
|
|
||||||
value: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface LogEntry {
|
|
||||||
time: string;
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SystemItem {
|
|
||||||
name: string;
|
|
||||||
status: "online" | "warning" | "offline";
|
|
||||||
value: string;
|
|
||||||
description: string;
|
|
||||||
uptime?: string;
|
|
||||||
lastCheck?: string;
|
|
||||||
metrics?: Metric[];
|
|
||||||
logs?: LogEntry[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const systemItems = ref<SystemItem[]>([]);
|
|
||||||
const loading = ref(false);
|
|
||||||
const selectedItem = ref<SystemItem | null>(null);
|
|
||||||
|
|
||||||
const getMetricClass = (value: number) => {
|
|
||||||
if (value >= 90) return "metric__fill--critical";
|
|
||||||
if (value >= 70) return "metric__fill--warning";
|
|
||||||
return "metric__fill--good";
|
|
||||||
};
|
|
||||||
|
|
||||||
async function fetchSystemStatus() {
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
try {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
systemItems.value = [
|
|
||||||
{
|
|
||||||
name: "API Server",
|
|
||||||
status: "online",
|
|
||||||
value: "Running",
|
|
||||||
description: "All endpoints responding",
|
|
||||||
uptime: "15d 7h 23m",
|
|
||||||
lastCheck: "Just now",
|
|
||||||
metrics: [
|
|
||||||
{ label: "CPU", value: 23 },
|
|
||||||
{ label: "Memory", value: 45 }
|
|
||||||
],
|
|
||||||
logs: [
|
|
||||||
{ time: "2m ago", message: "Health check passed" },
|
|
||||||
{ time: "5m ago", message: "Request handled: /api/v2/movie" },
|
|
||||||
{ time: "7m ago", message: "Cache hit: user_settings" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Disk Space",
|
|
||||||
status: "warning",
|
|
||||||
value: "45% Used",
|
|
||||||
description: "1.2 TB / 2.7 TB",
|
|
||||||
uptime: "15d 7h 23m",
|
|
||||||
lastCheck: "Just now",
|
|
||||||
metrics: [
|
|
||||||
{ label: "System", value: 45 },
|
|
||||||
{ label: "Media", value: 78 }
|
|
||||||
],
|
|
||||||
logs: [
|
|
||||||
{ time: "5m ago", message: "Disk usage check completed" },
|
|
||||||
{ time: "10m ago", message: "Media folder: 78% full" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Plex Connection",
|
|
||||||
status: "online",
|
|
||||||
value: "Connected",
|
|
||||||
description: "Server: Home",
|
|
||||||
uptime: "15d 7h 23m",
|
|
||||||
lastCheck: "Just now",
|
|
||||||
metrics: [{ label: "Response Time", value: 15 }],
|
|
||||||
logs: [
|
|
||||||
{ time: "2m ago", message: "Plex API request successful" },
|
|
||||||
{ time: "8m ago", message: "Library sync completed" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function showDetails(item: SystemItem) {
|
|
||||||
selectedItem.value = item;
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDetails() {
|
|
||||||
selectedItem.value = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function restartService(item: SystemItem) {
|
|
||||||
console.log(`Restarting service: ${item.name}`);
|
|
||||||
alert(`Restart initiated for ${item.name}`);
|
|
||||||
closeDetails();
|
|
||||||
}
|
|
||||||
|
|
||||||
function viewFullLogs(item: SystemItem) {
|
|
||||||
console.log(`Viewing full logs for: ${item.name}`);
|
|
||||||
alert(`Full logs for ${item.name} would open here`);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(fetchSystemStatus);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "scss/variables";
|
|
||||||
@import "scss/media-queries";
|
|
||||||
|
|
||||||
.system-status {
|
|
||||||
background-color: var(--background-color-secondary);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $text-color;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__loading {
|
|
||||||
padding: 1.5rem;
|
|
||||||
text-align: center;
|
|
||||||
color: $text-color-70;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1rem;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__items {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 40px;
|
|
||||||
padding: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: $text-color;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-item {
|
|
||||||
padding: 0.65rem;
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 0.6rem;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
transform: translateX(2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
&:hover {
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__name {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $text-color;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
line-height: 1.2;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.82rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indicator-wrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
gap: 0.35rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__uptime {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: $text-color-50;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__indicator {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: pulse 2s infinite;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--online {
|
|
||||||
background-color: var(--color-success-highlight);
|
|
||||||
box-shadow: 0 0 6px var(--color-success);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
background-color: var(--color-warning-highlight);
|
|
||||||
box-shadow: 0 0 6px var(--color-warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--offline {
|
|
||||||
background-color: var(--color-error-highlight);
|
|
||||||
box-shadow: 0 0 6px var(--color-error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__details {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 0.15rem;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__value {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: $text-color-70;
|
|
||||||
line-height: 1.2;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__description {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: $text-color-50;
|
|
||||||
line-height: 1.2;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__metrics {
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.4rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-top: 0.3rem;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.metric {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
|
|
||||||
&__label {
|
|
||||||
min-width: 65px;
|
|
||||||
color: $text-color-70;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__bar {
|
|
||||||
flex: 1;
|
|
||||||
height: 5px;
|
|
||||||
background-color: var(--background-40);
|
|
||||||
border-radius: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3px;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
|
|
||||||
&--good {
|
|
||||||
background-color: var(--color-success-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
background-color: var(--color-warning-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--critical {
|
|
||||||
background-color: var(--color-error-highlight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__value {
|
|
||||||
min-width: 35px;
|
|
||||||
text-align: right;
|
|
||||||
color: $text-color-50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 1000;
|
|
||||||
padding: 1rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 0.5rem;
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background-color: var(--background-color-secondary);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
max-width: 600px;
|
|
||||||
width: 100%;
|
|
||||||
max-height: 80vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
max-height: 90vh;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-bottom: 1px solid var(--background-40);
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
color: $text-color;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
fill: $text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-body {
|
|
||||||
padding: 1.5rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.75rem 0;
|
|
||||||
border-bottom: 1px solid var(--background-40);
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-weight: 500;
|
|
||||||
color: $text-color-70;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-value {
|
|
||||||
color: $text-color;
|
|
||||||
|
|
||||||
&--online {
|
|
||||||
color: var(--color-success-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--warning {
|
|
||||||
color: var(--color-warning-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--offline {
|
|
||||||
color: var(--color-error-highlight);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-logs {
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
padding-top: 1rem;
|
|
||||||
border-top: 1px solid var(--background-40);
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 0 0 0.75rem 0;
|
|
||||||
color: $text-color;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-entry {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
padding: 0.5rem;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-time {
|
|
||||||
min-width: 60px;
|
|
||||||
color: $text-color-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
.log-message {
|
|
||||||
color: $text-color-70;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
border-top: 1px solid var(--background-40);
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1rem;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border: 1px solid var(--highlight-color);
|
|
||||||
background-color: var(--highlight-color);
|
|
||||||
color: $white;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--color-green-90);
|
|
||||||
border-color: var(--color-green-90);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--secondary {
|
|
||||||
background-color: transparent;
|
|
||||||
color: $text-color;
|
|
||||||
border-color: var(--background-40);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,723 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="torrent-management">
|
|
||||||
<div class="torrent-management__header">
|
|
||||||
<h2 class="torrent-management__title">Torrent Management</h2>
|
|
||||||
<div class="torrent-management__controls">
|
|
||||||
<input
|
|
||||||
v-model="searchQuery"
|
|
||||||
type="text"
|
|
||||||
placeholder="Search torrents..."
|
|
||||||
class="torrent-management__search"
|
|
||||||
/>
|
|
||||||
<select v-model="statusFilter" class="torrent-management__filter">
|
|
||||||
<option value="">All Status</option>
|
|
||||||
<option value="seeding">Seeding</option>
|
|
||||||
<option value="downloading">Downloading</option>
|
|
||||||
<option value="paused">Paused</option>
|
|
||||||
<option value="stopped">Stopped</option>
|
|
||||||
</select>
|
|
||||||
<button class="refresh-btn" @click="fetchTorrents" :disabled="loading">
|
|
||||||
<IconActivity :class="{ spin: loading }" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="loading" class="torrent-management__loading">
|
|
||||||
Loading torrents...
|
|
||||||
</div>
|
|
||||||
<div v-else-if="error" class="torrent-management__error">{{ error }}</div>
|
|
||||||
|
|
||||||
<table v-else class="torrent-management__table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th @click="sortBy('name')" class="sortable">
|
|
||||||
Name
|
|
||||||
<span v-if="sortColumn === 'name'">{{
|
|
||||||
sortDirection === "asc" ? "↑" : "↓"
|
|
||||||
}}</span>
|
|
||||||
</th>
|
|
||||||
<th v-if="!isMobile" @click="sortBy('size')" class="sortable">
|
|
||||||
Size
|
|
||||||
<span v-if="sortColumn === 'size'">{{
|
|
||||||
sortDirection === "asc" ? "↑" : "↓"
|
|
||||||
}}</span>
|
|
||||||
</th>
|
|
||||||
<th v-if="!isMobile" @click="sortBy('seeders')" class="sortable">
|
|
||||||
Seeders
|
|
||||||
<span v-if="sortColumn === 'seeders'">{{
|
|
||||||
sortDirection === "asc" ? "↑" : "↓"
|
|
||||||
}}</span>
|
|
||||||
</th>
|
|
||||||
<th v-if="!isMobile">Status</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
v-for="torrent in filteredTorrents"
|
|
||||||
:key="torrent.id"
|
|
||||||
:class="{ processing: torrent.processing }"
|
|
||||||
>
|
|
||||||
<td class="torrent-name" :title="torrent.name">
|
|
||||||
<div class="torrent-name__title">{{ torrent.name }}</div>
|
|
||||||
<div v-if="isMobile" class="torrent-name__meta">
|
|
||||||
<span class="meta-item">{{ torrent.size }}</span>
|
|
||||||
<span class="meta-separator">•</span>
|
|
||||||
<span class="meta-item">{{ torrent.seeders }} seeders</span>
|
|
||||||
<span class="meta-separator">•</span>
|
|
||||||
<span
|
|
||||||
:class="['status-badge', `status-badge--${torrent.status}`]"
|
|
||||||
>
|
|
||||||
{{ torrent.status }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td v-if="!isMobile">{{ torrent.size }}</td>
|
|
||||||
<td v-if="!isMobile">{{ torrent.seeders }}</td>
|
|
||||||
<td v-if="!isMobile">
|
|
||||||
<span :class="['status-badge', `status-badge--${torrent.status}`]">
|
|
||||||
{{ torrent.status }}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
<td class="actions">
|
|
||||||
<button
|
|
||||||
v-if="
|
|
||||||
torrent.status === 'seeding' || torrent.status === 'downloading'
|
|
||||||
"
|
|
||||||
class="action-btn"
|
|
||||||
title="Pause"
|
|
||||||
@click="pauseTorrent(torrent)"
|
|
||||||
:disabled="torrent.processing"
|
|
||||||
>
|
|
||||||
<IconStop />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="torrent.status === 'paused' || torrent.status === 'stopped'"
|
|
||||||
class="action-btn"
|
|
||||||
title="Resume"
|
|
||||||
@click="resumeTorrent(torrent)"
|
|
||||||
:disabled="torrent.processing"
|
|
||||||
>
|
|
||||||
<IconPlay />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="action-btn action-btn--danger"
|
|
||||||
title="Delete"
|
|
||||||
@click="deleteTorrent(torrent)"
|
|
||||||
:disabled="torrent.processing"
|
|
||||||
>
|
|
||||||
<IconClose />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="action-btn"
|
|
||||||
title="Details"
|
|
||||||
@click="showDetails(torrent)"
|
|
||||||
>
|
|
||||||
<IconInfo />
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<div class="torrent-management__footer">
|
|
||||||
<span class="torrent-count"
|
|
||||||
>{{ filteredTorrents.length }} of {{ torrents.length }} torrents</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
|
||||||
import IconStop from "@/icons/IconStop.vue";
|
|
||||||
import IconPlay from "@/icons/IconPlay.vue";
|
|
||||||
import IconClose from "@/icons/IconClose.vue";
|
|
||||||
import IconInfo from "@/icons/IconInfo.vue";
|
|
||||||
import IconActivity from "@/icons/IconActivity.vue";
|
|
||||||
|
|
||||||
interface Torrent {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
size: string;
|
|
||||||
seeders: number;
|
|
||||||
leechers: number;
|
|
||||||
uploaded: string;
|
|
||||||
downloaded: string;
|
|
||||||
ratio: number;
|
|
||||||
status: "seeding" | "downloading" | "paused" | "stopped";
|
|
||||||
processing?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const torrents = ref<Torrent[]>([]);
|
|
||||||
const loading = ref(false);
|
|
||||||
const error = ref("");
|
|
||||||
const searchQuery = ref("");
|
|
||||||
const statusFilter = ref("");
|
|
||||||
const sortColumn = ref<keyof Torrent>("name");
|
|
||||||
const sortDirection = ref<"asc" | "desc">("asc");
|
|
||||||
|
|
||||||
const windowWidth = ref(window.innerWidth);
|
|
||||||
const isMobile = computed(() => windowWidth.value <= 768);
|
|
||||||
|
|
||||||
function handleResize() {
|
|
||||||
windowWidth.value = window.innerWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
const filteredTorrents = computed(() => {
|
|
||||||
let result = [...torrents.value];
|
|
||||||
|
|
||||||
if (searchQuery.value) {
|
|
||||||
const query = searchQuery.value.toLowerCase();
|
|
||||||
result = result.filter(t => t.name.toLowerCase().includes(query));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (statusFilter.value) {
|
|
||||||
result = result.filter(t => t.status === statusFilter.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
result.sort((a, b) => {
|
|
||||||
const aVal = a[sortColumn.value];
|
|
||||||
const bVal = b[sortColumn.value];
|
|
||||||
|
|
||||||
if (typeof aVal === "string" && typeof bVal === "string") {
|
|
||||||
return sortDirection.value === "asc"
|
|
||||||
? aVal.localeCompare(bVal)
|
|
||||||
: bVal.localeCompare(aVal);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof aVal === "number" && typeof bVal === "number") {
|
|
||||||
return sortDirection.value === "asc" ? aVal - bVal : bVal - aVal;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
return result;
|
|
||||||
});
|
|
||||||
|
|
||||||
function sortBy(column: keyof Torrent) {
|
|
||||||
if (sortColumn.value === column) {
|
|
||||||
sortDirection.value = sortDirection.value === "asc" ? "desc" : "asc";
|
|
||||||
} else {
|
|
||||||
sortColumn.value = column;
|
|
||||||
sortDirection.value = "asc";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchTorrents() {
|
|
||||||
loading.value = true;
|
|
||||||
error.value = "";
|
|
||||||
|
|
||||||
try {
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
|
|
||||||
torrents.value = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "Movie.Name.2024.1080p.BluRay.x264",
|
|
||||||
size: "2.4 GB",
|
|
||||||
seeders: 156,
|
|
||||||
leechers: 23,
|
|
||||||
uploaded: "45.2 GB",
|
|
||||||
downloaded: "2.4 GB",
|
|
||||||
ratio: 18.83,
|
|
||||||
status: "seeding"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
name: "TV.Show.S01E01.720p.WEB-DL",
|
|
||||||
size: "1.2 GB",
|
|
||||||
seeders: 89,
|
|
||||||
leechers: 12,
|
|
||||||
uploaded: "12.8 GB",
|
|
||||||
downloaded: "1.2 GB",
|
|
||||||
ratio: 10.67,
|
|
||||||
status: "seeding"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
name: "Documentary.2024.HDRip",
|
|
||||||
size: "890 MB",
|
|
||||||
seeders: 45,
|
|
||||||
leechers: 8,
|
|
||||||
uploaded: "2.1 GB",
|
|
||||||
downloaded: "650 MB",
|
|
||||||
ratio: 3.31,
|
|
||||||
status: "downloading"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: "Anime.Series.S02E10.1080p",
|
|
||||||
size: "1.8 GB",
|
|
||||||
seeders: 234,
|
|
||||||
leechers: 56,
|
|
||||||
uploaded: "89.4 GB",
|
|
||||||
downloaded: "1.8 GB",
|
|
||||||
ratio: 49.67,
|
|
||||||
status: "seeding"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
name: "Concert.2024.4K.UHD",
|
|
||||||
size: "12.5 GB",
|
|
||||||
seeders: 67,
|
|
||||||
leechers: 5,
|
|
||||||
uploaded: "0 B",
|
|
||||||
downloaded: "0 B",
|
|
||||||
ratio: 0,
|
|
||||||
status: "paused"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: "Drama.Series.2024.S01E05.1080p",
|
|
||||||
size: "2.1 GB",
|
|
||||||
seeders: 112,
|
|
||||||
leechers: 34,
|
|
||||||
uploaded: "8.9 GB",
|
|
||||||
downloaded: "2.1 GB",
|
|
||||||
ratio: 4.24,
|
|
||||||
status: "seeding"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 7,
|
|
||||||
name: "Action.Movie.2024.BRRip",
|
|
||||||
size: "1.5 GB",
|
|
||||||
seeders: 0,
|
|
||||||
leechers: 0,
|
|
||||||
uploaded: "0 B",
|
|
||||||
downloaded: "0 B",
|
|
||||||
ratio: 0,
|
|
||||||
status: "stopped"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
} catch (e) {
|
|
||||||
error.value = "Failed to load torrents";
|
|
||||||
} finally {
|
|
||||||
loading.value = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function pauseTorrent(torrent: Torrent) {
|
|
||||||
torrent.processing = true;
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
torrent.status = "paused";
|
|
||||||
torrent.processing = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function resumeTorrent(torrent: Torrent) {
|
|
||||||
torrent.processing = true;
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
torrent.status = "seeding";
|
|
||||||
torrent.processing = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function deleteTorrent(torrent: Torrent) {
|
|
||||||
if (!confirm(`Are you sure you want to delete "${torrent.name}"?`)) return;
|
|
||||||
|
|
||||||
torrent.processing = true;
|
|
||||||
await new Promise(resolve => setTimeout(resolve, 500));
|
|
||||||
torrents.value = torrents.value.filter(t => t.id !== torrent.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
function showDetails(torrent: Torrent) {
|
|
||||||
alert(
|
|
||||||
`Torrent Details:\n\nName: ${torrent.name}\nSize: ${torrent.size}\nSeeders: ${torrent.seeders}\nLeechers: ${torrent.leechers}\nUploaded: ${torrent.uploaded}\nDownloaded: ${torrent.downloaded}\nRatio: ${torrent.ratio.toFixed(2)}\nStatus: ${torrent.status}`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
fetchTorrents();
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.removeEventListener("resize", handleResize);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "scss/variables";
|
|
||||||
@import "scss/media-queries";
|
|
||||||
|
|
||||||
.torrent-management {
|
|
||||||
background-color: var(--background-color-secondary);
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
padding: 1rem;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
||||||
max-width: 100%;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
background-color: transparent;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 0.75rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.75rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
gap: 0.6rem;
|
|
||||||
margin-bottom: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 400;
|
|
||||||
color: $text-color;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__controls {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 100%;
|
|
||||||
gap: 0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__search {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: $text-color;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
padding: 0.4rem 0.5rem;
|
|
||||||
max-width: calc(50% - 0.2rem - 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__filter {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: $text-color;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
padding: 0.4rem 0.5rem;
|
|
||||||
max-width: calc(50% - 0.2rem - 20px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__loading,
|
|
||||||
&__error {
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
color: $text-color-70;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 1.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__error {
|
|
||||||
color: var(--color-error-highlight);
|
|
||||||
}
|
|
||||||
|
|
||||||
&__footer {
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding-top: 0.75rem;
|
|
||||||
border-top: 1px solid var(--background-40);
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__table {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
border-spacing: 0;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
overflow: hidden;
|
|
||||||
table-layout: fixed;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
table-layout: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
padding: 0.75rem 1rem;
|
|
||||||
text-align: left;
|
|
||||||
border-bottom: 1px solid var(--background-40);
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 0.5rem 0.4rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background-color: var(--table-background-color);
|
|
||||||
color: var(--table-header-text-color);
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
letter-spacing: 0.3px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sortable {
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-80);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: $text-color;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
|
|
||||||
&:nth-child(even) {
|
|
||||||
background-color: var(--background-70);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.processing {
|
|
||||||
opacity: 0.6;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.torrent-name {
|
|
||||||
max-width: 300px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
max-width: none;
|
|
||||||
white-space: normal;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
word-break: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__meta {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
color: var(--text-color-60);
|
|
||||||
margin-top: 0.25rem;
|
|
||||||
|
|
||||||
.meta-item {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-separator {
|
|
||||||
color: var(--text-color-40);
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 500;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
padding: 0.2rem 0.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--seeding {
|
|
||||||
background-color: var(--color-success);
|
|
||||||
color: var(--color-success-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--downloading {
|
|
||||||
background-color: var(--color-warning);
|
|
||||||
color: $black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--paused {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
color: $text-color-70;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--stopped {
|
|
||||||
background-color: var(--color-error);
|
|
||||||
color: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.35rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background-color: var(--background-40);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--danger:hover:not(:disabled) {
|
|
||||||
background-color: var(--color-error);
|
|
||||||
|
|
||||||
svg {
|
|
||||||
fill: $white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
fill: $text-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.refresh-btn {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid var(--background-40);
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.2s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 40px;
|
|
||||||
padding: 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background-color: var(--background-ui);
|
|
||||||
border-color: var(--highlight-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg {
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
fill: $text-color;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.spin {
|
|
||||||
animation: spin 1s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.torrent-count {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: $text-color-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
|
|
||||||
const signinNavigationIcon: INavigationIcon = {
|
const signinNavigationIcon: INavigationIcon = {
|
||||||
title: "Signin",
|
title: "Signin",
|
||||||
route: "/signin",
|
route: "/login",
|
||||||
icon: IconProfileLock
|
icon: IconProfileLock
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -9,14 +9,19 @@
|
|||||||
unclickable: !!!stat.clickable
|
unclickable: !!!stat.clickable
|
||||||
}"
|
}"
|
||||||
@click="
|
@click="
|
||||||
stat.clickable && stat.value?.total > 0 && !loading && handleClick(stat.key)
|
stat.clickable &&
|
||||||
|
stat.value?.total > 0 &&
|
||||||
|
!loading &&
|
||||||
|
handleClick(stat.key)
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="stat-icon">
|
<div class="stat-icon">
|
||||||
<component :is="stat.icon" />
|
<component :is="stat.icon" />
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-content">
|
<div class="stat-content">
|
||||||
<div class="stat-value" v-if="!loading">{{ formatNumber(stat.value?.total) }}</div>
|
<div class="stat-value" v-if="!loading">
|
||||||
|
{{ formatNumber(stat.value?.total) }}
|
||||||
|
</div>
|
||||||
<div class="stat-value loading-dots" v-else>...</div>
|
<div class="stat-value loading-dots" v-else>...</div>
|
||||||
<div class="stat-label">{{ stat.label }}</div>
|
<div class="stat-label">{{ stat.label }}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -26,7 +31,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { formatNumber } from '@/utils'
|
import { formatNumber } from "@/utils";
|
||||||
import IconMovie from "@/icons/IconMovie.vue";
|
import IconMovie from "@/icons/IconMovie.vue";
|
||||||
import IconShow from "@/icons/IconShow.vue";
|
import IconShow from "@/icons/IconShow.vue";
|
||||||
import IconMusic from "@/icons/IconMusic.vue";
|
import IconMusic from "@/icons/IconMusic.vue";
|
||||||
|
|||||||
@@ -3,14 +3,14 @@
|
|||||||
<div class="plex-details">
|
<div class="plex-details">
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">
|
<span class="detail-label">
|
||||||
<IconServer class="label-icon" />
|
<IconServer class="label-icon" style="fill: var(--text-color)" />
|
||||||
Plex server name
|
Plex server name
|
||||||
</span>
|
</span>
|
||||||
<span class="detail-value">{{ serverName || "Unknown" }}</span>
|
<span class="detail-value">{{ serverName || "Unknown" }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-row">
|
<div class="detail-row">
|
||||||
<span class="detail-label">
|
<span class="detail-label">
|
||||||
<IconSync class="label-icon" />
|
<IconSync class="label-icon" style="stroke: var(--text-color)" />
|
||||||
Last Sync
|
Last Sync
|
||||||
</span>
|
</span>
|
||||||
<span class="detail-value">{{ lastSync || "Never" }}</span>
|
<span class="detail-value">{{ lastSync || "Never" }}</span>
|
||||||
@@ -82,7 +82,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
color: var(--text-color-60);
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -215,8 +215,7 @@
|
|||||||
|
|
||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
const ASSET_URL = "https://image.tmdb.org/t/p/";
|
const ASSET_URL = "https://image.tmdb.org/t/p/";
|
||||||
// const COLORS_URL = "https://colors.schleppe.cloud/colors";
|
const COLORS_API = import.meta.env.VITE_SEASONED_COLORS_API || "";
|
||||||
const COLORS_URL = "http://localhost:8080/colors";
|
|
||||||
const ASSET_SIZES = ["w500", "w780", "original"];
|
const ASSET_SIZES = ["w500", "w780", "original"];
|
||||||
|
|
||||||
const media: Ref<IMovie | IShow> = ref();
|
const media: Ref<IMovie | IShow> = ref();
|
||||||
@@ -353,7 +352,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function colorsFromPoster(posterPath: string) {
|
async function colorsFromPoster(posterPath: string) {
|
||||||
const url = new URL(COLORS_URL);
|
const url = new URL("/colors", COLORS_API);
|
||||||
url.searchParams.append("id", posterPath.replace("/", ""));
|
url.searchParams.append("id", posterPath.replace("/", ""));
|
||||||
url.searchParams.append("size", "w342");
|
url.searchParams.append("size", "w342");
|
||||||
|
|
||||||
|
|||||||
@@ -24,8 +24,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref } from "vue";
|
||||||
import StorageManager from "./StorageManager.vue";
|
import StorageManager from "./StorageManager.vue";
|
||||||
import ExportSection from "./ExportSection.vue"
|
import ExportSection from "./ExportSection.vue";
|
||||||
import RequestHistory from "./RequestHistory.vue"
|
import RequestHistory from "./RequestHistory.vue";
|
||||||
import DangerZoneAction from "./DangerZoneAction.vue";
|
import DangerZoneAction from "./DangerZoneAction.vue";
|
||||||
|
|
||||||
const requestStats = ref({
|
const requestStats = ref({
|
||||||
|
|||||||
@@ -72,8 +72,6 @@
|
|||||||
function convertToCSV(data: any): string {
|
function convertToCSV(data: any): string {
|
||||||
return `Username,Total Requests,Approved,Pending,Export Date\n${data.username},${data.requests.total},${data.requests.approved},${data.requests.pending},${data.exportDate}`;
|
return `Username,Total Requests,Approved,Pending,Export Date\n${data.username},${data.requests.total},${data.requests.approved},${data.requests.pending},${data.exportDate}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -74,7 +74,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -1,68 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<table>
|
<div class="torrent-table">
|
||||||
<thead class="table__header noselect">
|
<div class="sort-toggle">
|
||||||
<tr>
|
<span class="sort-label">Sort by:</span>
|
||||||
<th
|
<div class="sort-options">
|
||||||
v-for="column in visibleColumns"
|
<button
|
||||||
:key="column"
|
v-for="option in sortOptions"
|
||||||
:class="column === selectedColumn ? 'active' : null"
|
:key="option.value"
|
||||||
@click="sortTable(column)"
|
:class="['sort-btn', { active: selectedSort === option.value }]"
|
||||||
|
@click="changeSort(option.value)"
|
||||||
>
|
>
|
||||||
{{ column }}
|
{{ option.label }}
|
||||||
<span v-if="prevCol === column && direction">↑</span>
|
</button>
|
||||||
<span v-if="prevCol === column && !direction">↓</span>
|
</div>
|
||||||
</th>
|
</div>
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody>
|
<table>
|
||||||
<tr
|
<thead class="table__header noselect">
|
||||||
v-for="torrent in torrents"
|
<tr>
|
||||||
:key="torrent.magnet"
|
<th
|
||||||
class="table__content"
|
class="name-header"
|
||||||
>
|
:class="selectedSort === 'name' ? 'active' : null"
|
||||||
<td
|
@click="changeSort('name')"
|
||||||
class="torrent-info"
|
>
|
||||||
@click="expand($event, torrent.name)"
|
Name
|
||||||
@keydown.enter="expand($event, torrent.name)"
|
<span v-if="selectedSort === 'name'">{{
|
||||||
|
direction ? "↑" : "↓"
|
||||||
|
}}</span>
|
||||||
|
</th>
|
||||||
|
<th class="add-header">Add</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr
|
||||||
|
v-for="torrent in sortedTorrents"
|
||||||
|
:key="torrent.magnet"
|
||||||
|
class="table__content"
|
||||||
>
|
>
|
||||||
<div class="torrent-title">{{ torrent.name }}</div>
|
<td
|
||||||
<div v-if="isMobile" class="torrent-meta">
|
class="torrent-info"
|
||||||
<span class="meta-item">{{ torrent.size }}</span>
|
@click="expand($event, torrent.name)"
|
||||||
<span class="meta-separator">•</span>
|
@keydown.enter="expand($event, torrent.name)"
|
||||||
<span class="meta-item">{{ torrent.seed }} seeders</span>
|
>
|
||||||
</div>
|
<div class="torrent-title">{{ torrent.name }}</div>
|
||||||
</td>
|
<div class="torrent-meta">
|
||||||
<td
|
<span class="meta-item">{{ torrent.size }}</span>
|
||||||
v-if="!isMobile"
|
<span class="meta-separator">•</span>
|
||||||
class="torrent-seed"
|
<span class="meta-item">{{ torrent.seed }} seeders</span>
|
||||||
@click="expand($event, torrent.name)"
|
</div>
|
||||||
@keydown.enter="expand($event, torrent.name)"
|
</td>
|
||||||
>
|
<td
|
||||||
{{ torrent.seed }}
|
class="download"
|
||||||
</td>
|
@click="() => emit('magnet', torrent)"
|
||||||
<td
|
@keydown.enter="() => emit('magnet', torrent)"
|
||||||
v-if="!isMobile"
|
>
|
||||||
class="torrent-size"
|
<IconMagnet />
|
||||||
@click="expand($event, torrent.name)"
|
</td>
|
||||||
@keydown.enter="expand($event, torrent.name)"
|
</tr>
|
||||||
>
|
</tbody>
|
||||||
{{ torrent.size }}
|
</table>
|
||||||
</td>
|
</div>
|
||||||
<td
|
|
||||||
class="download"
|
|
||||||
@click="() => emit('magnet', torrent)"
|
|
||||||
@keydown.enter="() => emit('magnet', torrent)"
|
|
||||||
>
|
|
||||||
<IconMagnet />
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import IconMagnet from "@/icons/IconMagnet.vue";
|
import IconMagnet from "@/icons/IconMagnet.vue";
|
||||||
import type { Ref } from "vue";
|
import type { Ref } from "vue";
|
||||||
import { sortableSize } from "../../utils";
|
import { sortableSize } from "../../utils";
|
||||||
@@ -79,31 +80,55 @@
|
|||||||
const props = defineProps<Props>();
|
const props = defineProps<Props>();
|
||||||
const emit = defineEmits<Emit>();
|
const emit = defineEmits<Emit>();
|
||||||
|
|
||||||
const columns: string[] = ["name", "seed", "size", "add"];
|
const sortOptions = [
|
||||||
const windowWidth = ref(window.innerWidth);
|
{ value: "name", label: "Name" },
|
||||||
const isMobile = computed(() => windowWidth.value <= 768);
|
{ value: "size", label: "Size" },
|
||||||
const visibleColumns = computed(() =>
|
{ value: "seed", label: "Seeders" }
|
||||||
isMobile.value ? ["name", "add"] : columns
|
];
|
||||||
);
|
|
||||||
|
|
||||||
const torrents: Ref<ITorrent[]> = ref(props.torrents);
|
const torrents: Ref<ITorrent[]> = ref(props.torrents);
|
||||||
const direction: Ref<boolean> = ref(false);
|
const direction: Ref<boolean> = ref(false);
|
||||||
const selectedColumn: Ref<string> = ref(columns[0]);
|
const selectedSort: Ref<string> = ref("size");
|
||||||
const prevCol: Ref<string> = ref("");
|
const prevSort: Ref<string> = ref("");
|
||||||
|
|
||||||
function handleResize() {
|
const sortedTorrents = computed(() => {
|
||||||
windowWidth.value = window.innerWidth;
|
const sorted = [...torrents.value];
|
||||||
|
|
||||||
|
if (selectedSort.value === "name") {
|
||||||
|
sorted.sort((a, b) =>
|
||||||
|
direction.value
|
||||||
|
? a.name.localeCompare(b.name)
|
||||||
|
: b.name.localeCompare(a.name)
|
||||||
|
);
|
||||||
|
} else if (selectedSort.value === "size") {
|
||||||
|
sorted.sort((a, b) =>
|
||||||
|
direction.value
|
||||||
|
? sortableSize(a.size) - sortableSize(b.size)
|
||||||
|
: sortableSize(b.size) - sortableSize(a.size)
|
||||||
|
);
|
||||||
|
} else if (selectedSort.value === "seed") {
|
||||||
|
sorted.sort((a, b) =>
|
||||||
|
direction.value
|
||||||
|
? parseInt(a.seed, 10) - parseInt(b.seed, 10)
|
||||||
|
: parseInt(b.seed, 10) - parseInt(a.seed, 10)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return sorted;
|
||||||
|
});
|
||||||
|
|
||||||
|
function changeSort(sortBy: string) {
|
||||||
|
if (prevSort.value === sortBy) {
|
||||||
|
direction.value = !direction.value;
|
||||||
|
} else {
|
||||||
|
direction.value = false;
|
||||||
|
selectedSort.value = sortBy;
|
||||||
|
}
|
||||||
|
prevSort.value = sortBy;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
window.addEventListener("resize", handleResize);
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
window.removeEventListener("resize", handleResize);
|
|
||||||
});
|
|
||||||
|
|
||||||
function expand(event: MouseEvent, text: string) {
|
function expand(event: MouseEvent, text: string) {
|
||||||
|
return;
|
||||||
const elementClicked = event.target as HTMLElement;
|
const elementClicked = event.target as HTMLElement;
|
||||||
const tableRow = elementClicked.parentElement;
|
const tableRow = elementClicked.parentElement;
|
||||||
const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
|
const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
|
||||||
@@ -116,8 +141,6 @@
|
|||||||
if (existingExpandedElement) {
|
if (existingExpandedElement) {
|
||||||
existingExpandedElement.remove();
|
existingExpandedElement.remove();
|
||||||
|
|
||||||
// Clicked the same element twice, remove and return
|
|
||||||
// not recreate and collapse
|
|
||||||
if (clickedSameTwice) return;
|
if (clickedSameTwice) return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -128,59 +151,11 @@
|
|||||||
expandedRow.className = "expanded";
|
expandedRow.className = "expanded";
|
||||||
expandedCol.innerText = text;
|
expandedCol.innerText = text;
|
||||||
|
|
||||||
// Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
|
expandedCol.colSpan = 2;
|
||||||
expandedCol.colSpan = isMobile.value ? 2 : 4;
|
|
||||||
|
|
||||||
expandedRow.appendChild(expandedCol);
|
expandedRow.appendChild(expandedCol);
|
||||||
tableRow.insertAdjacentElement("afterend", expandedRow);
|
tableRow.insertAdjacentElement("afterend", expandedRow);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sortName() {
|
|
||||||
const torrentsCopy = [...torrents.value];
|
|
||||||
if (direction.value) {
|
|
||||||
torrents.value = torrentsCopy.sort((a, b) => (a.name < b.name ? 1 : -1));
|
|
||||||
} else {
|
|
||||||
torrents.value = torrentsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortSeed() {
|
|
||||||
const torrentsCopy = [...torrents.value];
|
|
||||||
if (direction.value) {
|
|
||||||
torrents.value = torrentsCopy.sort(
|
|
||||||
(a, b) => parseInt(a.seed, 10) - parseInt(b.seed, 10)
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
torrents.value = torrentsCopy.sort(
|
|
||||||
(a, b) => parseInt(b.seed, 10) - parseInt(a.seed, 10)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortSize() {
|
|
||||||
const torrentsCopy = [...torrents.value];
|
|
||||||
if (direction.value) {
|
|
||||||
torrents.value = torrentsCopy.sort((a, b) =>
|
|
||||||
sortableSize(a.size) > sortableSize(b.size) ? 1 : -1
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
torrents.value = torrentsCopy.sort((a, b) =>
|
|
||||||
sortableSize(a.size) < sortableSize(b.size) ? 1 : -1
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortTable(col, sameDirection = false) {
|
|
||||||
if (prevCol.value === col && sameDirection === false) {
|
|
||||||
direction.value = !direction.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (col === "name") sortName();
|
|
||||||
else if (col === "seed") sortSeed();
|
|
||||||
else if (col === "size") sortSize();
|
|
||||||
|
|
||||||
prevCol.value = col;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -188,6 +163,58 @@
|
|||||||
@import "scss/media-queries";
|
@import "scss/media-queries";
|
||||||
@import "scss/elements";
|
@import "scss/elements";
|
||||||
|
|
||||||
|
.torrent-table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.sort-label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--text-color-70);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-options {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-btn {
|
||||||
|
border: 1px solid var(--highlight-bg, var(--background-color-40));
|
||||||
|
color: var(--text-color-70);
|
||||||
|
padding: 0.35rem 0.65rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--highlight-bg, var(--background-color));
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: var(--highlight-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
border-color: var(--highlight-color, $green);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
@@ -195,16 +222,11 @@
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
table-layout: fixed;
|
table-layout: auto;
|
||||||
|
|
||||||
@include mobile {
|
|
||||||
table-layout: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
border: 0.5px solid var(--background-color-40);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
@@ -217,16 +239,16 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
color: var(--table-header-text-color);
|
color: var(--highlight-bg, var(--table-header-text-color));
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: var(--table-background-color);
|
background-color: var(--highlight-color, var(--highlight-color));
|
||||||
background-color: var(--highlight-color);
|
|
||||||
letter-spacing: 0.8px;
|
letter-spacing: 0.8px;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
|
|
||||||
th:last-of-type {
|
th:last-of-type {
|
||||||
padding-right: 0.4rem;
|
padding: 0 0.4rem;
|
||||||
|
border-left: 1px solid var(--highlight-bg, var(--background-color));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -237,7 +259,7 @@
|
|||||||
padding: 0.5rem 0.6rem;
|
padding: 0.5rem 0.6rem;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
border-left: 1px solid var(--table-background-color);
|
border-left: 1px solid var(--highlight-secondary, var(--highlight-color));
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -258,8 +280,8 @@
|
|||||||
|
|
||||||
.torrent-meta {
|
.torrent-meta {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: var(--text-color-60);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
opacity: 70%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -275,20 +297,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// seed and size columns (desktop only)
|
|
||||||
.torrent-seed,
|
|
||||||
.torrent-size {
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// last column - action
|
// last column - action
|
||||||
tr td:last-of-type {
|
tr td:last-of-type {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-right: 1px solid var(--table-background-color);
|
border-right: 1px solid var(--highlight-secondary, var(--highlight-color));
|
||||||
width: 60px;
|
max-width: 60px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
@@ -300,7 +314,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: 0.3rem 0;
|
padding: 0.3rem 0;
|
||||||
fill: var(--text-color);
|
fill: var(inherit, var(--text-color));
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
@@ -310,16 +324,30 @@
|
|||||||
|
|
||||||
// alternate background color per row
|
// alternate background color per row
|
||||||
tr {
|
tr {
|
||||||
background-color: var(--background-color);
|
background-color: var(--highlight-bg, var(--background-90));
|
||||||
|
color: var(--text-color);
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-left: 1px solid
|
||||||
|
var(--highlight-secondary, var(--highlight-color));
|
||||||
|
fill: var(--text-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
tr:nth-child(even) {
|
tr:nth-child(odd) {
|
||||||
background-color: var(--background-70);
|
background-color: var(--highlight-secondary, var(--background-color));
|
||||||
|
color: var(--highlight-bg, var(--text-color));
|
||||||
|
|
||||||
|
td {
|
||||||
|
fill: var(--highlight-bg, var(--text-color)) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// last element rounded corner border
|
// last element rounded corner border
|
||||||
tr:last-of-type {
|
tr:last-of-type {
|
||||||
td {
|
td {
|
||||||
border-bottom: 1px solid var(--table-background-color);
|
border-bottom: 1px solid
|
||||||
|
var(--highlight-secondary, var(--highlight-color));
|
||||||
|
border-left: 1px solid var(--highlight-bg, var(--text-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
td:first-of-type {
|
td:first-of-type {
|
||||||
@@ -335,15 +363,16 @@
|
|||||||
.expanded {
|
.expanded {
|
||||||
padding: 0.25rem 1rem;
|
padding: 0.25rem 1rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-left: 1px solid $text-color;
|
border-left: 1px solid var(--text-color);
|
||||||
border-right: 1px solid $text-color;
|
border-right: 1px solid var(--text-color);
|
||||||
border-bottom: 1px solid $text-color;
|
border-bottom: 1px solid var(--text-color);
|
||||||
|
|
||||||
td {
|
td {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
padding: 0.5rem 0.15rem;
|
padding: 0.5rem 0.15rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -22,9 +22,9 @@ function applyTheme(theme: Theme) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function useTheme() {
|
export function useTheme() {
|
||||||
const savedTheme = computed(() => {
|
const savedTheme = computed(
|
||||||
return (localStorage.getItem("theme-preference") as Theme) || "auto";
|
() => (localStorage.getItem("theme-preference") as Theme) || "auto"
|
||||||
});
|
);
|
||||||
|
|
||||||
function initTheme() {
|
function initTheme() {
|
||||||
const theme = savedTheme.value;
|
const theme = savedTheme.value;
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ export interface CookieOptions {
|
|||||||
* Read a cookie value.
|
* Read a cookie value.
|
||||||
*/
|
*/
|
||||||
export function getAuthorizationCookie(): string | null {
|
export function getAuthorizationCookie(): string | null {
|
||||||
const key = 'authorization';
|
const key = "authorization";
|
||||||
const array = document.cookie.split(";");
|
const array = document.cookie.split(";");
|
||||||
let match = null;
|
let match = null;
|
||||||
|
|
||||||
|
|||||||
@@ -257,6 +257,7 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
|
margin-top: calc(-1 * var(--header-size));
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
|
|||||||
@@ -1,108 +0,0 @@
|
|||||||
<template>
|
|
||||||
<section class="admin">
|
|
||||||
<h1 class="admin__title">Admin Dashboard</h1>
|
|
||||||
|
|
||||||
<div class="admin__grid">
|
|
||||||
<AdminStats class="admin__stats" />
|
|
||||||
<SystemStatusPanel class="admin__system-status" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="admin__torrents">
|
|
||||||
<TorrentManagementGrid />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="admin__activity">
|
|
||||||
<RecentActivityFeed />
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import AdminStats from "@/components/admin/AdminStats.vue";
|
|
||||||
import TorrentManagementGrid from "@/components/admin/TorrentManagementGrid.vue";
|
|
||||||
import SystemStatusPanel from "@/components/admin/SystemStatusPanel.vue";
|
|
||||||
import RecentActivityFeed from "@/components/admin/RecentActivityFeed.vue";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import "scss/variables";
|
|
||||||
@import "scss/media-queries";
|
|
||||||
|
|
||||||
.admin {
|
|
||||||
padding: 3rem;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
padding: 0.75rem;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__title {
|
|
||||||
margin: 0 0 2rem 0;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 300;
|
|
||||||
color: $text-color;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 0 0 1rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
gap: 1.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__stats {
|
|
||||||
grid-column: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__system-status {
|
|
||||||
grid-column: 2;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
grid-column: 1;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__torrents {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
min-width: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&__activity {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
@include mobile-only {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,40 +1,107 @@
|
|||||||
<template>
|
<template>
|
||||||
<section>
|
<div class="register auth-page">
|
||||||
<h1>Register new user</h1>
|
<div class="auth-content auth-content--wide">
|
||||||
|
<div class="auth-header">
|
||||||
|
<h1 class="auth-title">Register new user</h1>
|
||||||
|
<p class="auth-subtitle">Create an account to get started</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form ref="formElement" class="form">
|
<form ref="formElement" class="auth-form" @submit.prevent>
|
||||||
<seasoned-input
|
<seasoned-input
|
||||||
v-model="username"
|
v-model="username"
|
||||||
placeholder="username"
|
placeholder="Email address"
|
||||||
icon="Email"
|
icon="Email"
|
||||||
type="email"
|
type="email"
|
||||||
@keydown.enter="focusOnNextElement"
|
@keydown.enter="focusOnNextElement"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<seasoned-input
|
<div class="register__password-section">
|
||||||
v-model="password"
|
<div class="password-generator">
|
||||||
placeholder="password"
|
<button
|
||||||
icon="Keyhole"
|
type="button"
|
||||||
type="password"
|
class="generator-toggle"
|
||||||
@keydown.enter="focusOnNextElement"
|
@click="toggleGenerator"
|
||||||
/>
|
>
|
||||||
<seasoned-input
|
<IconKey class="toggle-icon" />
|
||||||
v-model="passwordRepeat"
|
<span>{{
|
||||||
placeholder="repeat password"
|
showGenerator
|
||||||
icon="Keyhole"
|
? "Hide Password Generator"
|
||||||
type="password"
|
: "Generate Strong Password"
|
||||||
@keydown.enter="submit"
|
}}</span>
|
||||||
/>
|
</button>
|
||||||
|
<div v-if="showGenerator" class="generator-content">
|
||||||
|
<password-generator
|
||||||
|
@password-generated="handlePasswordGenerated"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<seasoned-button @click="submit">Register</seasoned-button>
|
<seasoned-input
|
||||||
</form>
|
v-model="password"
|
||||||
|
placeholder="Password"
|
||||||
|
icon="Keyhole"
|
||||||
|
type="password"
|
||||||
|
class="password-input"
|
||||||
|
@keydown.enter="focusOnNextElement"
|
||||||
|
/>
|
||||||
|
|
||||||
<router-link class="link" to="/login"
|
<seasoned-input
|
||||||
>Have a user? Sign in here</router-link
|
v-model="passwordRepeat"
|
||||||
>
|
placeholder="Confirm password"
|
||||||
|
icon="Keyhole"
|
||||||
|
type="password"
|
||||||
|
class="password-input"
|
||||||
|
@keydown.enter="submit"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<seasoned-messages v-model:messages="messages"></seasoned-messages>
|
<div v-if="password.length > 0" class="register__password-requirements">
|
||||||
</section>
|
<p class="requirements-title">Password must contain:</p>
|
||||||
|
<div class="requirements-grid">
|
||||||
|
<div class="requirement" :class="{ met: password.length >= 8 }">
|
||||||
|
<span class="requirement-icon">{{
|
||||||
|
password.length >= 8 ? "✓" : "✗"
|
||||||
|
}}</span>
|
||||||
|
<span class="requirement-text">At least 8 characters</span>
|
||||||
|
</div>
|
||||||
|
<div class="requirement" :class="{ met: /[A-Z]/.test(password) }">
|
||||||
|
<span class="requirement-icon">{{
|
||||||
|
/[A-Z]/.test(password) ? "✓" : "✗"
|
||||||
|
}}</span>
|
||||||
|
<span class="requirement-text">One uppercase letter</span>
|
||||||
|
</div>
|
||||||
|
<div class="requirement" :class="{ met: /[a-z]/.test(password) }">
|
||||||
|
<span class="requirement-icon">{{
|
||||||
|
/[a-z]/.test(password) ? "✓" : "✗"
|
||||||
|
}}</span>
|
||||||
|
<span class="requirement-text">One lowercase letter</span>
|
||||||
|
</div>
|
||||||
|
<div class="requirement" :class="{ met: /[0-9]/.test(password) }">
|
||||||
|
<span class="requirement-icon">{{
|
||||||
|
/[0-9]/.test(password) ? "✓" : "✗"
|
||||||
|
}}</span>
|
||||||
|
<span class="requirement-text">One number</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<seasoned-button class="auth-button" @click="submit">
|
||||||
|
Create Account
|
||||||
|
</seasoned-button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="auth-footer">
|
||||||
|
<p class="auth-footer-text">
|
||||||
|
Already have an account?
|
||||||
|
<router-link class="auth-link" to="/login">
|
||||||
|
Sign in here
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<seasoned-messages v-model:messages="messages"></seasoned-messages>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -44,6 +111,8 @@
|
|||||||
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
|
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
|
||||||
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
|
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
|
||||||
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
|
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
|
||||||
|
import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
|
||||||
|
import IconKey from "@/icons/IconKey.vue";
|
||||||
import type { Ref } from "vue";
|
import type { Ref } from "vue";
|
||||||
import { register } from "../api";
|
import { register } from "../api";
|
||||||
import { focusFirstFormInput, focusOnNextElement } from "../utils";
|
import { focusFirstFormInput, focusOnNextElement } from "../utils";
|
||||||
@@ -55,6 +124,7 @@
|
|||||||
const passwordRepeat: Ref<string> = ref("");
|
const passwordRepeat: Ref<string> = ref("");
|
||||||
const messages: Ref<IErrorMessage[]> = ref([]);
|
const messages: Ref<IErrorMessage[]> = ref([]);
|
||||||
const formElement: Ref<HTMLFormElement> = ref(null);
|
const formElement: Ref<HTMLFormElement> = ref(null);
|
||||||
|
const showGenerator = ref(false);
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
@@ -70,99 +140,198 @@
|
|||||||
message,
|
message,
|
||||||
title,
|
title,
|
||||||
type: ErrorMessageTypes.Error
|
type: ErrorMessageTypes.Error
|
||||||
} as IErrorMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addWarningMessage(message: string, title?: string) {
|
|
||||||
messages.value.push({
|
|
||||||
message,
|
|
||||||
title,
|
|
||||||
type: ErrorMessageTypes.Warning
|
|
||||||
} as IErrorMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
function validate(): Promise<boolean> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (!username.value || username?.value?.length === 0) {
|
|
||||||
addWarningMessage("Missing username", "Validation error");
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!password.value || password?.value?.length === 0) {
|
|
||||||
addWarningMessage("Missing password", "Validation error");
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (passwordRepeat.value == null || passwordRepeat.value.length === 0) {
|
|
||||||
addWarningMessage("Missing repeat password", "Validation error");
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
if (passwordRepeat.value !== password.value) {
|
|
||||||
addWarningMessage("Passwords do not match", "Validation error");
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
|
|
||||||
resolve(true);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function registerUser() {
|
function addSuccessMessage(message: string, title?: string) {
|
||||||
register(username.value, password.value)
|
messages.value.push({
|
||||||
.then(data => {
|
message,
|
||||||
if (data?.success && store.dispatch("user/login")) {
|
title,
|
||||||
router.push({ name: "profile" });
|
type: ErrorMessageTypes.Success
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function validate() {
|
||||||
|
const errors = [];
|
||||||
|
|
||||||
|
if (username.value.length === 0) {
|
||||||
|
errors.push("Email must not be empty");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.value.length === 0) {
|
||||||
|
errors.push("Password must not be empty");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.value.length < 8) {
|
||||||
|
errors.push("Password must be at least 8 characters");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/[A-Z]/.test(password.value)) {
|
||||||
|
errors.push("Password must contain at least one uppercase letter");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/[a-z]/.test(password.value)) {
|
||||||
|
errors.push("Password must contain at least one lowercase letter");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!/[0-9]/.test(password.value)) {
|
||||||
|
errors.push("Password must contain at least one number");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.value !== passwordRepeat.value) {
|
||||||
|
errors.push("Passwords do not match");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errors.length > 0) {
|
||||||
|
errors.forEach(error => addErrorMessage(error, "Validation error"));
|
||||||
|
return Promise.reject();
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.resolve(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
function createUser() {
|
||||||
|
return register(username.value, password.value)
|
||||||
|
.then(response => {
|
||||||
|
addSuccessMessage(
|
||||||
|
"Account created successfully! Redirecting to login...",
|
||||||
|
"Success"
|
||||||
|
);
|
||||||
|
setTimeout(() => {
|
||||||
|
router.push("/login");
|
||||||
|
}, 2000);
|
||||||
|
return response;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
if (error?.status === 401) {
|
addErrorMessage(error?.message || "Registration failed", "Error");
|
||||||
addErrorMessage("Incorrect username or password", "Access denied");
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
addErrorMessage(error?.message, "Unexpected error");
|
|
||||||
return null;
|
return null;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function submit() {
|
function submit() {
|
||||||
clearMessages();
|
clearMessages();
|
||||||
validate().then(registerUser);
|
validate().then(createUser);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlePasswordGenerated(generatedPassword: string) {
|
||||||
|
password.value = generatedPassword;
|
||||||
|
passwordRepeat.value = generatedPassword;
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleGenerator() {
|
||||||
|
showGenerator.value = !showGenerator.value;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "scss/variables";
|
@import "scss/shared-auth";
|
||||||
|
|
||||||
section {
|
.register {
|
||||||
padding: 1.3rem;
|
// Password inputs use monospace font
|
||||||
|
:deep(.password-input input[type="password"]),
|
||||||
@include tablet-min {
|
:deep(.password-input input[type="text"]) {
|
||||||
padding: 4rem;
|
font-family: "Courier New", monospace;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.form > div,
|
.register__password-section {
|
||||||
input,
|
display: flex;
|
||||||
button {
|
flex-direction: column;
|
||||||
margin-bottom: 1rem;
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
.password-generator {
|
||||||
margin-bottom: 0px;
|
.generator-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.875rem 1rem;
|
||||||
|
background: var(--background-ui);
|
||||||
|
border: 1px solid var(--text-color-10);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--background-color-secondary);
|
||||||
|
border-color: var(--text-color-20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle-icon {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
color: var(--highlight-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
.generator-content {
|
||||||
margin: 0;
|
margin-top: 1rem;
|
||||||
line-height: 16px;
|
padding-top: 1rem;
|
||||||
|
border-top: 1px solid var(--text-color-10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register__password-requirements {
|
||||||
|
background: var(--background-ui);
|
||||||
|
border: 1px solid var(--text-color-10);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1.25rem;
|
||||||
|
margin-top: -0.25rem;
|
||||||
|
|
||||||
|
.requirements-title {
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
font-weight: 300;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.requirements-grid {
|
||||||
display: block;
|
display: grid;
|
||||||
width: max-content;
|
grid-template-columns: repeat(2, 1fr);
|
||||||
margin-top: 1rem;
|
gap: 0.75rem;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.requirement {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--text-color-60);
|
||||||
|
|
||||||
|
&-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--text-color-10);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--text-color-60);
|
||||||
|
}
|
||||||
|
|
||||||
|
&-text {
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.met {
|
||||||
|
color: var(--success-color, #51cf66);
|
||||||
|
|
||||||
|
.requirement-icon {
|
||||||
|
background: var(--success-color, #51cf66);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,31 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<section>
|
<div class="signin auth-page">
|
||||||
<h1>Sign in</h1>
|
<div class="auth-content">
|
||||||
|
<div class="auth-header">
|
||||||
|
<h1 class="auth-title">Sign in</h1>
|
||||||
|
<p class="auth-subtitle">Welcome back! Please enter your credentials</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form ref="formElement" class="form">
|
<form ref="formElement" class="auth-form">
|
||||||
<seasoned-input
|
<seasoned-input
|
||||||
v-model="username"
|
v-model="username"
|
||||||
placeholder="username"
|
placeholder="Email address"
|
||||||
icon="Email"
|
icon="Email"
|
||||||
type="email"
|
type="email"
|
||||||
@keydown.enter="focusOnNextElement"
|
@keydown.enter="focusOnNextElement"
|
||||||
/>
|
/>
|
||||||
<seasoned-input
|
<seasoned-input
|
||||||
v-model="password"
|
v-model="password"
|
||||||
placeholder="password"
|
placeholder="Password"
|
||||||
icon="Keyhole"
|
icon="Keyhole"
|
||||||
type="password"
|
type="password"
|
||||||
@keydown.enter="submit"
|
@keydown.enter="submit"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<seasoned-button @click="submit">sign in</seasoned-button>
|
<seasoned-button class="auth-button" @click="submit">
|
||||||
</form>
|
Sign In
|
||||||
<router-link class="link" to="/register"
|
</seasoned-button>
|
||||||
>Don't have a user? Register here</router-link
|
</form>
|
||||||
>
|
|
||||||
|
|
||||||
<seasoned-messages v-model:messages="messages" />
|
<div class="auth-footer">
|
||||||
</section>
|
<p class="auth-footer-text">
|
||||||
|
Don't have an account?
|
||||||
|
<router-link class="auth-link" to="/register">
|
||||||
|
Register here
|
||||||
|
</router-link>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<seasoned-messages v-model:messages="messages" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -60,43 +73,38 @@
|
|||||||
message,
|
message,
|
||||||
title,
|
title,
|
||||||
type: ErrorMessageTypes.Error
|
type: ErrorMessageTypes.Error
|
||||||
} as IErrorMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addWarningMessage(message: string, title?: string) {
|
|
||||||
messages.value.push({
|
|
||||||
message,
|
|
||||||
title,
|
|
||||||
type: ErrorMessageTypes.Warning
|
|
||||||
} as IErrorMessage);
|
|
||||||
}
|
|
||||||
|
|
||||||
function validate(): Promise<boolean> {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
if (!username.value || username?.value?.length === 0) {
|
|
||||||
addWarningMessage("Missing username", "Validation error");
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!password.value || password?.value?.length === 0) {
|
|
||||||
addWarningMessage("Missing password", "Validation error");
|
|
||||||
reject();
|
|
||||||
}
|
|
||||||
|
|
||||||
resolve(true);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function validate() {
|
||||||
|
const errors = [];
|
||||||
|
|
||||||
|
if (username.value.length === 0) {
|
||||||
|
errors.push("Username must not be empty");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (password.value.length === 0) {
|
||||||
|
errors.push("Password must not be empty");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (errors.length > 0) {
|
||||||
|
errors.forEach(error => addErrorMessage(error, "Validation error"));
|
||||||
|
return Promise.reject();
|
||||||
|
}
|
||||||
|
|
||||||
|
return Promise.resolve(true);
|
||||||
|
}
|
||||||
|
|
||||||
function signin() {
|
function signin() {
|
||||||
login(username.value, password.value, true)
|
return login(username.value, password.value)
|
||||||
.then(data => {
|
.then(response => {
|
||||||
if (data?.success && store.dispatch("user/login")) {
|
store.dispatch("user/login", response.user);
|
||||||
router.push({ name: "profile" });
|
router.push("/");
|
||||||
}
|
return response;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
if (error?.status === 401) {
|
if (error.error === "Incorrect username or password.") {
|
||||||
addErrorMessage("Incorrect username or password", "Access denied");
|
addErrorMessage(error.error, "Authentication failed");
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -112,28 +120,13 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "scss/variables";
|
@import "scss/shared-auth";
|
||||||
|
|
||||||
section {
|
.signin {
|
||||||
padding: 1.3rem;
|
// Password input uses monospace font
|
||||||
|
:deep(input[type="password"]),
|
||||||
@include tablet-min {
|
:deep(input[type="text"][placeholder="Password"]) {
|
||||||
padding: 4rem;
|
font-family: "Courier New", monospace;
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 16px;
|
|
||||||
color: $text-color;
|
|
||||||
font-weight: 300;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
display: block;
|
|
||||||
width: max-content;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import type { RouteRecordRaw, RouteLocationNormalized } from "vue-router";
|
|||||||
/* eslint-disable-next-line import-x/no-cycle */
|
/* eslint-disable-next-line import-x/no-cycle */
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
import { usePlexAuth } from "./composables/usePlexAuth";
|
import { usePlexAuth } from "./composables/usePlexAuth";
|
||||||
|
|
||||||
const { getPlexAuthCookie } = usePlexAuth();
|
const { getPlexAuthCookie } = usePlexAuth();
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
@@ -79,12 +80,6 @@ const routes: RouteRecordRaw[] = [
|
|||||||
path: "/password",
|
path: "/password",
|
||||||
component: () => import("./pages/GenPasswordPage.vue")
|
component: () => import("./pages/GenPasswordPage.vue")
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: "admin",
|
|
||||||
path: "/admin",
|
|
||||||
meta: { requiresAuth: true },
|
|
||||||
component: () => import("./pages/AdminPage.vue")
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "missing-plex-auth",
|
name: "missing-plex-auth",
|
||||||
path: "/missing/plex",
|
path: "/missing/plex",
|
||||||
|
|||||||
100
src/scss/shared-auth.scss
Normal file
100
src/scss/shared-auth.scss
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
// Shared styles for authentication pages (signin, register)
|
||||||
|
@import "variables";
|
||||||
|
@import "media-queries";
|
||||||
|
|
||||||
|
// Base auth page layout
|
||||||
|
.auth-page {
|
||||||
|
padding: 3rem;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
padding: 0.75rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-content {
|
||||||
|
max-width: 600px;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--wide {
|
||||||
|
max-width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-header {
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-title {
|
||||||
|
margin: 0 0 0.75rem 0;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $text-color;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-subtitle {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
color: var(--text-color-60);
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1.25rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-button {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
max-width: 200px;
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer {
|
||||||
|
padding-top: 2rem;
|
||||||
|
border-top: 1px solid var(--text-color-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-text {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--text-color-60);
|
||||||
|
|
||||||
|
@include mobile-only {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-link {
|
||||||
|
color: var(--highlight-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -89,8 +89,9 @@ export function setUrlQueryParameter(parameter: string, value: string): void {
|
|||||||
const params = new URLSearchParams();
|
const params = new URLSearchParams();
|
||||||
params.append(parameter, value);
|
params.append(parameter, value);
|
||||||
|
|
||||||
const url = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""
|
const url = `${window.location.protocol}//${window.location.hostname}${
|
||||||
}${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
|
window.location.port ? `:${window.location.port}` : ""
|
||||||
|
}${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
|
||||||
|
|
||||||
window.history.pushState({}, "search", url);
|
window.history.pushState({}, "search", url);
|
||||||
}
|
}
|
||||||
@@ -141,5 +142,5 @@ export function formatBytes(bytes: number): string {
|
|||||||
const k = 1024;
|
const k = 1024;
|
||||||
const sizes = ["Bytes", "KB", "MB"];
|
const sizes = ["Bytes", "KB", "MB"];
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
|
return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user