mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-08-30 22:59:35 +02:00
Show user stats nav only when connected to server, remove tooltip, remove icons on stats
This commit is contained in:
advplyr
parent
87e277fad1
commit
be6c675ded
3 changed files with 52 additions and 63 deletions
|
|
@ -99,12 +99,12 @@ export default {
|
||||||
text: 'Account',
|
text: 'Account',
|
||||||
to: '/account'
|
to: '/account'
|
||||||
})
|
})
|
||||||
|
items.push({
|
||||||
|
icon: 'equalizer',
|
||||||
|
text: 'User Stats',
|
||||||
|
to: '/stats'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
items.push({
|
|
||||||
icon: 'equalizer',
|
|
||||||
text: 'User Stats',
|
|
||||||
to: '/stats'
|
|
||||||
})
|
|
||||||
|
|
||||||
if (this.$platform !== 'ios') {
|
if (this.$platform !== 'ios') {
|
||||||
items.push({
|
items.push({
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,7 @@
|
||||||
<div :key="n" class="absolute pointer-events-none left-0 h-px bg-white bg-opacity-10" :style="{ top: n * lineSpacing - lineSpacing / 2 + 'px', width: '360px', marginLeft: '24px' }" />
|
<div :key="n" class="absolute pointer-events-none left-0 h-px bg-white bg-opacity-10" :style="{ top: n * lineSpacing - lineSpacing / 2 + 'px', width: '360px', marginLeft: '24px' }" />
|
||||||
|
|
||||||
<div :key="`dot-${n}`" class="absolute z-10" :style="{ left: points[n - 1].x + 'px', bottom: points[n - 1].y + 'px' }">
|
<div :key="`dot-${n}`" class="absolute z-10" :style="{ left: points[n - 1].x + 'px', bottom: points[n - 1].y + 'px' }">
|
||||||
<ui-tooltip :text="last7DaysOfListening[n - 1].minutesListening" direction="top">
|
<div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
|
||||||
<div class="h-2 w-2 bg-yellow-400 hover:bg-yellow-300 rounded-full transform duration-150 transition-transform hover:scale-125" />
|
|
||||||
</ui-tooltip>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
101
pages/stats.vue
101
pages/stats.vue
|
|
@ -1,66 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full h-full px-0 py-4 overflow-y-auto">
|
<div class="w-full h-full px-0 py-4 overflow-y-auto">
|
||||||
<!-- <div class="bg-bg rounded-md overflow-y-auto shadow-lg border border-white border-opacity-5 p-4 mb-8"> -->
|
<h1 class="text-xl px-4">
|
||||||
<h1 class="text-xl px-4">Stats for <b>{{ username }}</b></h1>
|
Stats for <b>{{ username }}</b>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<div class="flex text-center justify-center">
|
<div class="flex text-center justify-center">
|
||||||
<div class="flex p-2">
|
<div class="flex p-2">
|
||||||
<div class="px-3">
|
<div class="px-3">
|
||||||
<p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
|
<p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
|
||||||
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
|
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Items Finished</p>
|
||||||
<div class="flex justify-center">
|
|
||||||
<svg class="h-14 w-14 lg:h-18 lg:w-18" viewBox="0 0 24 24">
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M19 1L14 6V17L19 12.5V1M21 5V18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5M10 18.41C8.75 18.09 7.5 18 6.5 18C5.44 18 4.18 18.19 3 18.5V7.13C3.91 6.73 5.14 6.5 6.5 6.5C7.86 6.5 9.09 6.73 10 7.13V18.41Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex p-2">
|
|
||||||
<div class="px-1">
|
|
||||||
<p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
|
|
||||||
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
|
|
||||||
<span class="hidden sm:block material-icons-outlined py-1 text-5xl lg:text-6xl">event</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex p-2">
|
|
||||||
<div class="px-1">
|
|
||||||
<p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
|
|
||||||
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
|
|
||||||
<span class="material-icons-outlined text-5xl py-1 lg:text-6xl">watch_later</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col md:flex-row overflow-hidden max-w-full">
|
|
||||||
<stats-daily-listening-chart :listening-stats="listeningStats" class="lg:scale-100 transform scale-90 px-0"/>
|
<div class="flex p-2">
|
||||||
<div class="w-80 my-6 mx-auto">
|
<div class="px-1">
|
||||||
<div class="flex mb-4 items-center">
|
<p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
|
||||||
<h1 class="text-2xl font-book">Recent Sessions</h1>
|
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Days Listened</p>
|
||||||
<div class="flex-grow" />
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
|
|
||||||
<template v-for="(item, index) in mostRecentListeningSessions">
|
<div class="flex p-2">
|
||||||
<div :key="item.id" class="w-full py-0.5">
|
<div class="px-1">
|
||||||
<div class="flex items-center mb-1">
|
<p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
|
||||||
<p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}. </p>
|
<p class="font-book text-xs md:text-sm text-white text-opacity-80">Minutes Listening</p>
|
||||||
<div class="w-56">
|
|
||||||
<p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
|
|
||||||
<p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow" />
|
|
||||||
<div class="w-18 text-right">
|
|
||||||
<p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-col md:flex-row overflow-hidden max-w-full">
|
||||||
|
<stats-daily-listening-chart :listening-stats="listeningStats" class="lg:scale-100 transform scale-90 px-0" />
|
||||||
|
<div class="w-80 my-6 mx-auto">
|
||||||
|
<div class="flex mb-4 items-center">
|
||||||
|
<h1 class="text-2xl font-book">Recent Sessions</h1>
|
||||||
|
<div class="flex-grow" />
|
||||||
|
</div>
|
||||||
|
<p v-if="!mostRecentListeningSessions.length">No Listening Sessions</p>
|
||||||
|
<template v-for="(item, index) in mostRecentListeningSessions">
|
||||||
|
<div :key="item.id" class="w-full py-0.5">
|
||||||
|
<div class="flex items-center mb-1">
|
||||||
|
<p class="text-sm font-book text-white text-opacity-70 w-8">{{ index + 1 }}. </p>
|
||||||
|
<div class="w-56">
|
||||||
|
<p class="text-sm font-book text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
|
||||||
|
<p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-grow" />
|
||||||
|
<div class="w-18 text-right">
|
||||||
|
<p class="text-sm font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue