From 45f7defa09e9edc2a174d464039a76aa8a1a00f1 Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer Date: Sat, 22 Feb 2025 11:22:29 +0100 Subject: [PATCH] [web] Simplify the about page --- web-src/src/filter/index.js | 9 +- web-src/src/i18n/de.json | 15 ++-- web-src/src/i18n/en.json | 13 ++- web-src/src/i18n/fr.json | 13 ++- web-src/src/i18n/zh-CN.json | 13 ++- web-src/src/i18n/zh-TW.json | 13 ++- web-src/src/pages/PageAbout.vue | 130 ++++++++++------------------ web-src/src/stores/configuration.js | 1 + 8 files changed, 82 insertions(+), 125 deletions(-) diff --git a/web-src/src/filter/index.js b/web-src/src/filter/index.js index 13b24063..1ef47f54 100644 --- a/web-src/src/filter/index.js +++ b/web-src/src/filter/index.js @@ -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'] + }) } } diff --git a/web-src/src/i18n/de.json b/web-src/src/i18n/de.json index 20ebed9f..51a2ec6d 100644 --- a/web-src/src/i18n/de.json +++ b/web-src/src/i18n/de.json @@ -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": { diff --git a/web-src/src/i18n/en.json b/web-src/src/i18n/en.json index d952f3fb..eb93d408 100644 --- a/web-src/src/i18n/en.json +++ b/web-src/src/i18n/en.json @@ -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": { diff --git a/web-src/src/i18n/fr.json b/web-src/src/i18n/fr.json index 62af3566..2324a4d1 100644 --- a/web-src/src/i18n/fr.json +++ b/web-src/src/i18n/fr.json @@ -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": { diff --git a/web-src/src/i18n/zh-CN.json b/web-src/src/i18n/zh-CN.json index 6f19b00f..e7dcccde 100644 --- a/web-src/src/i18n/zh-CN.json +++ b/web-src/src/i18n/zh-CN.json @@ -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": { diff --git a/web-src/src/i18n/zh-TW.json b/web-src/src/i18n/zh-TW.json index fe9b616d..5c14bb41 100644 --- a/web-src/src/i18n/zh-TW.json +++ b/web-src/src/i18n/zh-TW.json @@ -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": { diff --git a/web-src/src/pages/PageAbout.vue b/web-src/src/pages/PageAbout.vue index da7db9bf..31e82c05 100644 --- a/web-src/src/pages/PageAbout.vue +++ b/web-src/src/pages/PageAbout.vue @@ -11,7 +11,7 @@
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ - () -
-
-
-
-
- - ()
@@ -118,14 +57,16 @@

@@ -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 - }, - library() { - return this.libraryStore.$state + properties() { + return [ + { + label: 'property.name', + value: this.configurationStore.library_name + }, + { + 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 diff --git a/web-src/src/stores/configuration.js b/web-src/src/stores/configuration.js index 8a1a8828..541f7011 100644 --- a/web-src/src/stores/configuration.js +++ b/web-src/src/stores/configuration.js @@ -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,