mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-03 23:30:09 -05:00
[web] Simplify the about page
This commit is contained in:
Alain Nussbaumer
parent
222e6ea2d7
commit
45f7defa09
@ -32,6 +32,10 @@ export const filters = {
|
||||
}
|
||||
return null
|
||||
},
|
||||
duration(value) {
|
||||
const diff = DateTime.now().diff(DateTime.fromISO(value))
|
||||
return this.durationInDays(diff.as('seconds'))
|
||||
},
|
||||
durationInDays(value) {
|
||||
const minutes = Math.floor(value / 60)
|
||||
if (minutes > 1440) {
|
||||
@ -53,7 +57,8 @@ export const filters = {
|
||||
return value.toLocaleString(locale.value)
|
||||
},
|
||||
timeFromNow(value) {
|
||||
const diff = DateTime.now().diff(DateTime.fromISO(value))
|
||||
return this.durationInDays(diff.as('seconds'))
|
||||
return DateTime.fromISO(value).toRelative({
|
||||
unit: ['years', 'months', 'days', 'hours', 'minutes', 'seconds']
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,19 +125,11 @@
|
||||
},
|
||||
"page": {
|
||||
"about": {
|
||||
"albums": "Albums",
|
||||
"artists": "Künstler",
|
||||
"built-with": "Oberfläche erstellt mit {bulma}, {mdi}, {vuejs}, {axios} und {others}.",
|
||||
"compiled-with": "Compiliert mit Unterstützung von {options}.",
|
||||
"library": "Bibliothek",
|
||||
"more": "mehr",
|
||||
"name": "Name",
|
||||
"total-playtime": "Gesamte Spielzeit",
|
||||
"tracks": "Tracks",
|
||||
"update": "Neu einlesen",
|
||||
"updated-on": "vor {time}",
|
||||
"updated": "Neu eingelesen",
|
||||
"uptime": "Laufzeit",
|
||||
"version": "Version {version}"
|
||||
},
|
||||
"album": {
|
||||
@ -463,14 +455,17 @@
|
||||
"album": "Album",
|
||||
"albums": "Alben",
|
||||
"album-artist": "Album-Künstler",
|
||||
"artist": "Album Künstler",
|
||||
"artist": "Künstler",
|
||||
"artists": "Künstler",
|
||||
"comment": "Kommentar",
|
||||
"composer": "Komponist",
|
||||
"duration": "Dauer",
|
||||
"genre": "Genre",
|
||||
"genres": "Genres",
|
||||
"name": "Name",
|
||||
"owner": "Besitzer",
|
||||
"path": "Pfad",
|
||||
"playtime": "Spielzeit",
|
||||
"popularity": "Popularität / Followers",
|
||||
"position": "Disc / Track",
|
||||
"quality": "Qualität",
|
||||
@ -478,6 +473,8 @@
|
||||
"release-date": "Erscheinungsdatum",
|
||||
"tracks": "Tracks",
|
||||
"type": "Art",
|
||||
"updated": "Neu eingelesen",
|
||||
"uptime": "Laufzeit",
|
||||
"year": "Jahr"
|
||||
},
|
||||
"server": {
|
||||
|
||||
@ -125,19 +125,11 @@
|
||||
},
|
||||
"page": {
|
||||
"about": {
|
||||
"albums": "Albums",
|
||||
"artists": "Artists",
|
||||
"built-with": "Web interface built with {bulma}, {mdi}, {vuejs}, {axios} and {others}.",
|
||||
"compiled-with": "Compiled with support for {options}.",
|
||||
"library": "Library",
|
||||
"more": "more",
|
||||
"name": "Name",
|
||||
"total-playtime": "Total playtime",
|
||||
"tracks": "Tracks",
|
||||
"update": "Update",
|
||||
"updated-on": "{time} ago",
|
||||
"updated": "Updated",
|
||||
"uptime": "Uptime",
|
||||
"version": "Version {version}"
|
||||
},
|
||||
"album": {
|
||||
@ -464,13 +456,16 @@
|
||||
"albums": "Albums",
|
||||
"album-artist": "Album Artist",
|
||||
"artist": "Artist",
|
||||
"artists": "Artists",
|
||||
"comment": "Comment",
|
||||
"composer": "Composer",
|
||||
"duration": "Duration",
|
||||
"genre": "Genre",
|
||||
"genres": "Genres",
|
||||
"name": "Name",
|
||||
"owner": "Owner",
|
||||
"path": "Path",
|
||||
"playtime": "Playtime",
|
||||
"popularity": "Popularity / Followers",
|
||||
"position": "Disc / Track",
|
||||
"quality": "Quality",
|
||||
@ -478,6 +473,8 @@
|
||||
"release-date": "Release Date",
|
||||
"tracks": "Tracks",
|
||||
"type": "Type",
|
||||
"updated": "Updated",
|
||||
"uptime": "Uptime",
|
||||
"year": "Year"
|
||||
},
|
||||
"server": {
|
||||
|
||||
@ -125,19 +125,11 @@
|
||||
},
|
||||
"page": {
|
||||
"about": {
|
||||
"albums": "Albums",
|
||||
"artists": "Artistes",
|
||||
"built-with": "Interface utilisateur construite avec {bulma}, {mdi}, {vuejs}, {axios} et {others}.",
|
||||
"compiled-with": "Compilé avec les options {options}.",
|
||||
"library": "Bibliothèque",
|
||||
"more": "plus",
|
||||
"name": "Nom",
|
||||
"total-playtime": "Durée totale de lecture",
|
||||
"tracks": "Pistes",
|
||||
"update": "Actualiser",
|
||||
"updated-on": "il y a {time}",
|
||||
"updated": "Mis à jour",
|
||||
"uptime": "Temps de fonctionnement",
|
||||
"version": "Version {version}"
|
||||
},
|
||||
"album": {
|
||||
@ -464,13 +456,16 @@
|
||||
"albums": "Albums",
|
||||
"album-artist": "Artiste de l’album",
|
||||
"artist": "Artiste",
|
||||
"artists": "Artistes",
|
||||
"comment": "Commentaire",
|
||||
"composer": "Compositeur",
|
||||
"duration": "Durée",
|
||||
"genre": "Genre",
|
||||
"genres": "Genres",
|
||||
"name": "Nom",
|
||||
"owner": "Propriétaire",
|
||||
"path": "Emplacement",
|
||||
"playtime": "Temps de lecture",
|
||||
"popularity": "Popularité / Abonnements",
|
||||
"position": "Disque / Piste",
|
||||
"quality": "Qualité",
|
||||
@ -478,6 +473,8 @@
|
||||
"release-date": "Date de sortie",
|
||||
"tracks": "Pistes",
|
||||
"type": "Type",
|
||||
"updated": "Mise à jour",
|
||||
"uptime": "Temps de fonctionnement",
|
||||
"year": "Année"
|
||||
},
|
||||
"server": {
|
||||
|
||||
@ -125,19 +125,11 @@
|
||||
},
|
||||
"page": {
|
||||
"about": {
|
||||
"albums": "专辑",
|
||||
"artists": "艺人",
|
||||
"built-with": "界面贡献者包括 {bulma}，{mdi}，{vuejs}，{axios} 和 {others}",
|
||||
"compiled-with": "编译支持来自于 {options}",
|
||||
"library": "资料库",
|
||||
"more": "更多",
|
||||
"name": "名称",
|
||||
"total-playtime": "总播放时长",
|
||||
"tracks": "曲目总数",
|
||||
"update": "更新",
|
||||
"updated-on": "{time} 前",
|
||||
"updated": "更新于",
|
||||
"uptime": "运行时长",
|
||||
"version": "版本 {version}"
|
||||
},
|
||||
"album": {
|
||||
@ -464,13 +456,16 @@
|
||||
"albums": "张专辑",
|
||||
"album-artist": "专辑艺人",
|
||||
"artist": "专辑艺人",
|
||||
"artists": "艺人",
|
||||
"comment": "评论",
|
||||
"composer": "作曲家",
|
||||
"duration": "时长",
|
||||
"genre": "流派",
|
||||
"genres": "流派",
|
||||
"name": "名称",
|
||||
"owner": "所有者",
|
||||
"path": "路径",
|
||||
"playtime": "总播放时长",
|
||||
"popularity": "流行度 / 粉丝数",
|
||||
"position": "盘符 / 曲目",
|
||||
"quality": "质量",
|
||||
@ -478,6 +473,8 @@
|
||||
"release-date": "发行日期",
|
||||
"tracks": "只曲目",
|
||||
"type": "类型",
|
||||
"updated": "更新于",
|
||||
"uptime": "运行时长",
|
||||
"year": "年份"
|
||||
},
|
||||
"server": {
|
||||
|
||||
@ -125,19 +125,11 @@
|
||||
},
|
||||
"page": {
|
||||
"about": {
|
||||
"albums": "專輯",
|
||||
"artists": "藝人",
|
||||
"built-with": "界面貢獻者包括 {bulma}，{mdi}，{vuejs}，{axios} 和 {others}",
|
||||
"compiled-with": "編譯支持來自於 {options}",
|
||||
"library": "資料庫",
|
||||
"more": "更多",
|
||||
"name": "名稱",
|
||||
"total-playtime": "總播放時長",
|
||||
"tracks": "曲目總數",
|
||||
"update": "更新",
|
||||
"updated-on": "{time} 前",
|
||||
"updated": "更新於",
|
||||
"uptime": "運行時長",
|
||||
"version": "版本 {version}"
|
||||
},
|
||||
"album": {
|
||||
@ -464,13 +456,16 @@
|
||||
"albums": "張專輯",
|
||||
"album-artist": "專輯藝人",
|
||||
"artist": "專輯藝人",
|
||||
"artists": "藝人",
|
||||
"comment": "評論",
|
||||
"composer": "作曲家",
|
||||
"duration": "時長",
|
||||
"genre": "音樂類型",
|
||||
"genres": "音樂類型",
|
||||
"name": "名稱",
|
||||
"owner": "所有者",
|
||||
"path": "路徑",
|
||||
"playtime": "總播放時長",
|
||||
"popularity": "流行度 / 粉絲數",
|
||||
"position": "盤符 / 曲目",
|
||||
"quality": "品質",
|
||||
@ -478,6 +473,8 @@
|
||||
"release-date": "發行日期",
|
||||
"tracks": "曲目",
|
||||
"type": "類型",
|
||||
"updated": "更新於",
|
||||
"uptime": "運行時長",
|
||||
"year": "年份"
|
||||
},
|
||||
"server": {
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div v-if="library.updating">
|
||||
<div v-if="libraryStore.updating">
|
||||
<a
|
||||
class="button is-small is-rounded is-loading"
|
||||
v-text="$t('page.about.update')"
|
||||
@ -26,83 +26,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="media">
|
||||
<div
|
||||
v-for="property in properties"
|
||||
:key="property.label"
|
||||
class="media is-align-items-center mb-0"
|
||||
>
|
||||
<div
|
||||
class="media-content has-text-weight-bold"
|
||||
v-text="$t('page.about.name')"
|
||||
/>
|
||||
<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')"
|
||||
v-text="$t(property.label)"
|
||||
/>
|
||||
<div class="media-right">
|
||||
<span v-text="property.value" />
|
||||
<span
|
||||
v-text="
|
||||
$t('page.about.updated-on', {
|
||||
time: $filters.timeFromNow(library.updated_at)
|
||||
})
|
||||
"
|
||||
/>
|
||||
(<span
|
||||
v-if="property.alternate"
|
||||
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')"
|
||||
v-text="` (${property.alternate})`"
|
||||
/>
|
||||
<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>
|
||||
@ -118,14 +57,16 @@
|
||||
<p
|
||||
class="is-size-7"
|
||||
v-text="
|
||||
$t('page.about.version', { version: configuration.version })
|
||||
$t('page.about.version', {
|
||||
version: configurationStore.version
|
||||
})
|
||||
"
|
||||
/>
|
||||
<p
|
||||
class="is-size-7"
|
||||
v-text="
|
||||
$t('page.about.compiled-with', {
|
||||
options: configuration.buildoptions.join(', ')
|
||||
options: configurationStore.buildoptions.join(', ')
|
||||
})
|
||||
"
|
||||
/>
|
||||
@ -170,7 +111,6 @@ import { useUIStore } from '@/stores/ui'
|
||||
|
||||
export default {
|
||||
name: 'PageAbout',
|
||||
|
||||
setup() {
|
||||
return {
|
||||
configurationStore: useConfigurationStore(),
|
||||
@ -178,16 +118,42 @@ export default {
|
||||
uiStore: useUIStore()
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
configuration() {
|
||||
return this.configurationStore.$state
|
||||
properties() {
|
||||
return [
|
||||
{
|
||||
label: 'property.name',
|
||||
value: this.configurationStore.library_name
|
||||
},
|
||||
library() {
|
||||
return this.libraryStore.$state
|
||||
{
|
||||
label: 'property.artists',
|
||||
value: this.$filters.number(this.libraryStore.artists)
|
||||
},
|
||||
{
|
||||
label: 'property.albums',
|
||||
value: this.$filters.number(this.libraryStore.albums)
|
||||
},
|
||||
{
|
||||
label: 'property.tracks',
|
||||
value: this.$filters.number(this.libraryStore.songs)
|
||||
},
|
||||
{
|
||||
label: 'property.playtime',
|
||||
value: this.$filters.durationInDays(this.libraryStore.db_playtime)
|
||||
},
|
||||
{
|
||||
label: 'property.updated',
|
||||
value: this.$filters.timeFromNow(this.libraryStore.updated_at),
|
||||
alternate: this.$filters.datetime(this.libraryStore.updated_at)
|
||||
},
|
||||
{
|
||||
label: 'property.uptime',
|
||||
value: this.$filters.duration(this.libraryStore.started_at),
|
||||
alternate: this.$filters.datetime(this.libraryStore.started_at)
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
showUpdateDialog() {
|
||||
this.uiStore.show_update_dialog = true
|
||||
|
||||
@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
|
||||
export const useConfigurationStore = defineStore('ConfigurationStore', {
|
||||
state: () => ({
|
||||
buildoptions: [],
|
||||
library_name: '',
|
||||
version: '',
|
||||
websocket_port: 0,
|
||||
allow_modifying_stored_playlists: false,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user