MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-31 17:53:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web] Change about page

Browse Source
This commit is contained in:
Alain Nussbaumer 2024-09-09 21:02:00 +02:00
parent 3d9cec4ded
commit c377ae3a64
2 changed files with 159 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-src/src/filter/index.js
View File

@ -32,7 +32,7 @@ export const filters = {
.toLocaleString(DateTime.DATETIME_MED) .toLocaleString(DateTime.DATETIME_MED)
}, },
durationInDays(value) { durationInDays(value) {
const minutes = Math.floor(value / 60000) const minutes = Math.floor(value / 60)
if (minutes > 1440) { if (minutes > 1440) {
return Duration.fromObject({ minutes }) return Duration.fromObject({ minutes })
.shiftTo('days', 'hours', 'minutes') .shiftTo('days', 'hours', 'minutes')
@ -53,6 +53,6 @@ export const filters = {
}, },
timeFromNow(value) { timeFromNow(value) {
const diff = DateTime.now().diff(DateTime.fromISO(value)) const diff = DateTime.now().diff(DateTime.fromISO(value))
return this.durationInDays(diff.as('milliseconds')) return this.durationInDays(diff.as('seconds'))
} }
} }

108
web-src/src/pages/PageAbout.vue
View File

@ -1,24 +1,14 @@
<template> <template>
<div>
<section class="section">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths has-text-centered-mobile">
<h1 class="title is-4" v-text="configuration.library_name" />
</div>
</div>
</div>
</section>
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-four-fifths"> <div class="column is-four-fifths">
<div class="content"> <div class="content">
<nav class="level is-mobile"> <nav class="level">
<!-- Left side --> <!-- Left side -->
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
<p class="title is-5" v-text="$t('page.about.library')" /> <p class="title is-4" v-text="$t('page.about.library')" />
</div> </div>
</div> </div>
<!-- Right side --> <!-- Right side -->
@ -38,56 +28,59 @@
</div> </div>
</div> </div>
</nav> </nav>
<table class="table"> <div class="media">
<tbody> <div
<tr> class="media-content has-text-weight-bold"
<th v-text="$t('page.about.library')"
class="has-text-left" />
<div class="media-right" v-text="configuration.library_name" />
</div>
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.artists')" v-text="$t('page.about.artists')"
/> />
<td <div
class="has-text-right" class="media-right"
v-text="$filters.number(library.artists)" v-text="$filters.number(library.artists)"
/> />
</tr> </div>
<tr> <div class="media">
<th <div
class="has-text-left" class="media-content has-text-weight-bold"
v-text="$t('page.about.albums')" v-text="$t('page.about.albums')"
/> />
<td <div
class="has-text-right" media="media-right"
v-text="$filters.number(library.albums)" v-text="$filters.number(library.albums)"
/> />
</tr> </div>
<tr> <div class="media">
<th <div
class="has-text-left" class="media-content has-text-weight-bold"
v-text="$t('page.about.tracks')" v-text="$t('page.about.tracks')"
/> />
<td <div
class="has-text-right" class="media-right"
v-text="$filters.number(library.songs)" v-text="$filters.number(library.songs)"
/> />
</tr> </div>
<tr> <div class="media">
<th <div
class="has-text-left" class="media-content has-text-weight-bold"
v-text="$t('page.about.total-playtime')" v-text="$t('page.about.total-playtime')"
/> />
<td <div
class="has-text-right" class="media-right"
v-text=" v-text="$filters.durationInDays(library.db_playtime)"
$filters.durationInDays(library.db_playtime * 1000)
"
/> />
</tr> </div>
<tr> <div class="media">
<th <div
class="has-text-left" class="media-content has-text-weight-bold"
v-text="$t('page.about.updated')" v-text="$t('page.about.updated')"
/> />
<td class="has-text-right"> <div class="media-right">
<span <span
v-text=" v-text="
$t('page.about.updated-on', { $t('page.about.updated-on', {
@ -99,25 +92,21 @@
class="has-text-grey" class="has-text-grey"
v-text="$filters.datetime(library.updated_at)" v-text="$filters.datetime(library.updated_at)"
/>) />)
</td> </div>
</tr> </div>
<tr> <div class="media">
<th <div
class="has-text-left" class="media-content has-text-weight-bold"
v-text="$t('page.about.uptime')" v-text="$t('page.about.uptime')"
/> />
<td class="has-text-right"> <div class="media-right">
<span <span v-text="$filters.timeFromNow(library.started_at, true)" />
v-text="$filters.timeFromNow(library.started_at, true)"
/>
(<span (<span
class="has-text-grey" class="has-text-grey"
v-text="$filters.datetime(library.started_at)" v-text="$filters.datetime(library.started_at)"
/>) />)
</td> </div>
</tr> </div>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
@ -174,7 +163,6 @@
</div> </div>
</div> </div>
</section> </section>
</div>
</template> </template>
<script> <script>
@ -209,5 +197,3 @@ export default {
} }
} }
</script> </script>
<style></style>