MyFavMirrors
/
owntone-server
mirror of https://github.com/owntone/owntone-server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] Change about page

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)
},
durationInDays(value) {
const minutes = Math.floor(value / 60000)
const minutes = Math.floor(value / 60)
if (minutes > 1440) {
return Duration.fromObject({ minutes })
.shiftTo('days', 'hours', 'minutes')
@ -53,6 +53,6 @@ export const filters = {
},
timeFromNow(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>
<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">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<div class="content">
<nav class="level is-mobile">
<nav class="level">
<!-- Left side -->
<div class="level-left">
<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>
<!-- Right side -->
@ -38,56 +28,59 @@
</div>
</div>
</nav>
<table class="table">
<tbody>
<tr>
<th
class="has-text-left"
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.library')"
/>
<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')"
/>
<td
class="has-text-right"
<div
class="media-right"
v-text="$filters.number(library.artists)"
/>
</tr>
<tr>
<th
class="has-text-left"
</div>
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.albums')"
/>
<td
class="has-text-right"
<div
media="media-right"
v-text="$filters.number(library.albums)"
/>
</tr>
<tr>
<th
class="has-text-left"
</div>
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.tracks')"
/>
<td
class="has-text-right"
<div
class="media-right"
v-text="$filters.number(library.songs)"
/>
</tr>
<tr>
<th
class="has-text-left"
</div>
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.total-playtime')"
/>
<td
class="has-text-right"
v-text="
$filters.durationInDays(library.db_playtime * 1000)
"
<div
class="media-right"
v-text="$filters.durationInDays(library.db_playtime)"
/>
</tr>
<tr>
<th
class="has-text-left"
</div>
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.updated')"
/>
<td class="has-text-right">
<div class="media-right">
<span
v-text="
$t('page.about.updated-on', {
@ -99,25 +92,21 @@
class="has-text-grey"
v-text="$filters.datetime(library.updated_at)"
/>)
</td>
</tr>
<tr>
<th
class="has-text-left"
</div>
</div>
<div class="media">
<div
class="media-content has-text-weight-bold"
v-text="$t('page.about.uptime')"
/>
<td class="has-text-right">
<span
v-text="$filters.timeFromNow(library.started_at, true)"
/>
<div class="media-right">
<span v-text="$filters.timeFromNow(library.started_at, true)" />
(<span
class="has-text-grey"
v-text="$filters.datetime(library.started_at)"
/>)
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@ -174,7 +163,6 @@
</div>
</div>
</section>
</div>
</template>
<script>
@ -209,5 +197,3 @@ export default {
}
}
</script>
<style></style>