mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-29 08:43:42 -04:00
[web] Change about page
This commit is contained in:
Alain Nussbaumer
parent
3d9cec4ded
commit
c377ae3a64
@ -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'))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,180 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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 has-text-centered-mobile">
|
<div class="content">
|
||||||
<h1 class="title is-4" v-text="configuration.library_name" />
|
<nav class="level">
|
||||||
</div>
|
<!-- Left side -->
|
||||||
</div>
|
<div class="level-left">
|
||||||
</div>
|
<div class="level-item">
|
||||||
</section>
|
<p class="title is-4" v-text="$t('page.about.library')" />
|
||||||
<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">
|
|
||||||
<!-- Left side -->
|
|
||||||
<div class="level-left">
|
|
||||||
<div class="level-item">
|
|
||||||
<p class="title is-5" v-text="$t('page.about.library')" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!-- Right side -->
|
</div>
|
||||||
<div class="level-right">
|
<!-- Right side -->
|
||||||
<div v-if="library.updating">
|
<div class="level-right">
|
||||||
<a
|
<div v-if="library.updating">
|
||||||
class="button is-small is-loading"
|
|
||||||
v-text="$t('page.about.update')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-else>
|
|
||||||
<a
|
|
||||||
class="button is-small"
|
|
||||||
@click="showUpdateDialog()"
|
|
||||||
v-text="$t('page.about.update')"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<table class="table">
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
class="has-text-left"
|
|
||||||
v-text="$t('page.about.artists')"
|
|
||||||
/>
|
|
||||||
<td
|
|
||||||
class="has-text-right"
|
|
||||||
v-text="$filters.number(library.artists)"
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
class="has-text-left"
|
|
||||||
v-text="$t('page.about.albums')"
|
|
||||||
/>
|
|
||||||
<td
|
|
||||||
class="has-text-right"
|
|
||||||
v-text="$filters.number(library.albums)"
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
class="has-text-left"
|
|
||||||
v-text="$t('page.about.tracks')"
|
|
||||||
/>
|
|
||||||
<td
|
|
||||||
class="has-text-right"
|
|
||||||
v-text="$filters.number(library.songs)"
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
class="has-text-left"
|
|
||||||
v-text="$t('page.about.total-playtime')"
|
|
||||||
/>
|
|
||||||
<td
|
|
||||||
class="has-text-right"
|
|
||||||
v-text="
|
|
||||||
$filters.durationInDays(library.db_playtime * 1000)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
class="has-text-left"
|
|
||||||
v-text="$t('page.about.updated')"
|
|
||||||
/>
|
|
||||||
<td class="has-text-right">
|
|
||||||
<span
|
|
||||||
v-text="
|
|
||||||
$t('page.about.updated-on', {
|
|
||||||
time: $filters.timeFromNow(library.updated_at)
|
|
||||||
})
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
(<span
|
|
||||||
class="has-text-grey"
|
|
||||||
v-text="$filters.datetime(library.updated_at)"
|
|
||||||
/>)
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<th
|
|
||||||
class="has-text-left"
|
|
||||||
v-text="$t('page.about.uptime')"
|
|
||||||
/>
|
|
||||||
<td class="has-text-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>
|
|
||||||
</section>
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<div class="columns is-centered">
|
|
||||||
<div class="column is-four-fifths">
|
|
||||||
<div class="content has-text-centered-mobile">
|
|
||||||
<p
|
|
||||||
class="is-size-7"
|
|
||||||
v-text="
|
|
||||||
$t('page.about.version', { version: configuration.version })
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<p
|
|
||||||
class="is-size-7"
|
|
||||||
v-text="
|
|
||||||
$t('page.about.compiled-with', {
|
|
||||||
options: configuration.buildoptions.join(', ')
|
|
||||||
})
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<i18n-t
|
|
||||||
tag="p"
|
|
||||||
class="is-size-7"
|
|
||||||
keypath="page.about.built-with"
|
|
||||||
scope="global"
|
|
||||||
>
|
|
||||||
<template #bulma>
|
|
||||||
<a href="https://bulma.io">Bulma</a>
|
|
||||||
</template>
|
|
||||||
<template #mdi>
|
|
||||||
<a href="https://pictogrammers.com/library/mdi/">
|
|
||||||
Material Design Icons
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
<template #vuejs>
|
|
||||||
<a href="https://vuejs.org/">Vue.js</a>
|
|
||||||
</template>
|
|
||||||
<template #axios>
|
|
||||||
<a href="https://github.com/axios/axios">axios</a>
|
|
||||||
</template>
|
|
||||||
<template #others>
|
|
||||||
<a
|
<a
|
||||||
href="https://github.com/owntone/owntone-server/network/dependencies"
|
class="button is-small is-loading"
|
||||||
v-text="$t('page.about.more')"
|
v-text="$t('page.about.update')"
|
||||||
/>
|
/>
|
||||||
</template>
|
</div>
|
||||||
</i18n-t>
|
<div v-else>
|
||||||
|
<a
|
||||||
|
class="button is-small"
|
||||||
|
@click="showUpdateDialog()"
|
||||||
|
v-text="$t('page.about.update')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<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')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="media-right"
|
||||||
|
v-text="$filters.number(library.artists)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div
|
||||||
|
class="media-content has-text-weight-bold"
|
||||||
|
v-text="$t('page.about.albums')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
media="media-right"
|
||||||
|
v-text="$filters.number(library.albums)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div
|
||||||
|
class="media-content has-text-weight-bold"
|
||||||
|
v-text="$t('page.about.tracks')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="media-right"
|
||||||
|
v-text="$filters.number(library.songs)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div
|
||||||
|
class="media-content has-text-weight-bold"
|
||||||
|
v-text="$t('page.about.total-playtime')"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="media-right"
|
||||||
|
v-text="$filters.durationInDays(library.db_playtime)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div
|
||||||
|
class="media-content has-text-weight-bold"
|
||||||
|
v-text="$t('page.about.updated')"
|
||||||
|
/>
|
||||||
|
<div class="media-right">
|
||||||
|
<span
|
||||||
|
v-text="
|
||||||
|
$t('page.about.updated-on', {
|
||||||
|
time: $filters.timeFromNow(library.updated_at)
|
||||||
|
})
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
(<span
|
||||||
|
class="has-text-grey"
|
||||||
|
v-text="$filters.datetime(library.updated_at)"
|
||||||
|
/>)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div
|
||||||
|
class="media-content has-text-weight-bold"
|
||||||
|
v-text="$t('page.about.uptime')"
|
||||||
|
/>
|
||||||
|
<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)"
|
||||||
|
/>)
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="columns is-centered">
|
||||||
|
<div class="column is-four-fifths">
|
||||||
|
<div class="content has-text-centered-mobile">
|
||||||
|
<p
|
||||||
|
class="is-size-7"
|
||||||
|
v-text="
|
||||||
|
$t('page.about.version', { version: configuration.version })
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
class="is-size-7"
|
||||||
|
v-text="
|
||||||
|
$t('page.about.compiled-with', {
|
||||||
|
options: configuration.buildoptions.join(', ')
|
||||||
|
})
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<i18n-t
|
||||||
|
tag="p"
|
||||||
|
class="is-size-7"
|
||||||
|
keypath="page.about.built-with"
|
||||||
|
scope="global"
|
||||||
|
>
|
||||||
|
<template #bulma>
|
||||||
|
<a href="https://bulma.io">Bulma</a>
|
||||||
|
</template>
|
||||||
|
<template #mdi>
|
||||||
|
<a href="https://pictogrammers.com/library/mdi/">
|
||||||
|
Material Design Icons
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
<template #vuejs>
|
||||||
|
<a href="https://vuejs.org/">Vue.js</a>
|
||||||
|
</template>
|
||||||
|
<template #axios>
|
||||||
|
<a href="https://github.com/axios/axios">axios</a>
|
||||||
|
</template>
|
||||||
|
<template #others>
|
||||||
|
<a
|
||||||
|
href="https://github.com/owntone/owntone-server/network/dependencies"
|
||||||
|
v-text="$t('page.about.more')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -209,5 +197,3 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user