Added more info to list view

This commit is contained in:
Kalle Fagerberg 2022-07-17 20:08:08 +02:00 committed by thrillfall
parent 71e8faf8cd
commit 82bcd0c6ea
3 changed files with 91 additions and 36 deletions

43
package-lock.json generated
View File

@ -12,7 +12,8 @@
"@nextcloud/dialogs": "^3.1.2", "@nextcloud/dialogs": "^3.1.2",
"@nextcloud/router": "^2.0.0", "@nextcloud/router": "^2.0.0",
"@nextcloud/vue": "^5.3.1", "@nextcloud/vue": "^5.3.1",
"vue": "^2.7.0" "vue": "^2.7.7",
"vue-material-design-icons": "^5.1.2"
}, },
"devDependencies": { "devDependencies": {
"@nextcloud/babel-config": "^1.0.0", "@nextcloud/babel-config": "^1.0.0",
@ -2521,9 +2522,9 @@
} }
}, },
"node_modules/@vue/compiler-sfc": { "node_modules/@vue/compiler-sfc": {
"version": "2.7.4", "version": "2.7.7",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==", "integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
"dependencies": { "dependencies": {
"@babel/parser": "^7.18.4", "@babel/parser": "^7.18.4",
"postcss": "^8.4.14", "postcss": "^8.4.14",
@ -10867,11 +10868,11 @@
"peer": true "peer": true
}, },
"node_modules/vue": { "node_modules/vue": {
"version": "2.7.4", "version": "2.7.7",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==", "integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
"dependencies": { "dependencies": {
"@vue/compiler-sfc": "2.7.4", "@vue/compiler-sfc": "2.7.7",
"csstype": "^3.1.0" "csstype": "^3.1.0"
} }
}, },
@ -11023,9 +11024,9 @@
} }
}, },
"node_modules/vue-material-design-icons": { "node_modules/vue-material-design-icons": {
"version": "5.1.1", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz", "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w==" "integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
}, },
"node_modules/vue-multiselect": { "node_modules/vue-multiselect": {
"version": "2.1.6", "version": "2.1.6",
@ -13552,9 +13553,9 @@
} }
}, },
"@vue/compiler-sfc": { "@vue/compiler-sfc": {
"version": "2.7.4", "version": "2.7.7",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==", "integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
"requires": { "requires": {
"@babel/parser": "^7.18.4", "@babel/parser": "^7.18.4",
"postcss": "^8.4.14", "postcss": "^8.4.14",
@ -20002,11 +20003,11 @@
"peer": true "peer": true
}, },
"vue": { "vue": {
"version": "2.7.4", "version": "2.7.7",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==", "integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
"requires": { "requires": {
"@vue/compiler-sfc": "2.7.4", "@vue/compiler-sfc": "2.7.7",
"csstype": "^3.1.0" "csstype": "^3.1.0"
} }
}, },
@ -20120,9 +20121,9 @@
} }
}, },
"vue-material-design-icons": { "vue-material-design-icons": {
"version": "5.1.1", "version": "5.1.2",
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz", "resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w==" "integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
}, },
"vue-multiselect": { "vue-multiselect": {
"version": "2.1.6", "version": "2.1.6",

View File

@ -30,7 +30,8 @@
"@nextcloud/dialogs": "^3.1.2", "@nextcloud/dialogs": "^3.1.2",
"@nextcloud/router": "^2.0.0", "@nextcloud/router": "^2.0.0",
"@nextcloud/vue": "^5.3.1", "@nextcloud/vue": "^5.3.1",
"vue": "^2.7.0" "vue": "^2.7.7",
"vue-material-design-icons": "^5.1.2"
}, },
"browserslist": [ "browserslist": [
"extends @nextcloud/browserslist-config" "extends @nextcloud/browserslist-config"

View File

@ -2,11 +2,12 @@
<div class="gpoddersync_settings"> <div class="gpoddersync_settings">
<SettingsSection :title="t('gpoddersync', 'Synced subscriptions')" <SettingsSection :title="t('gpoddersync', 'Synced subscriptions')"
:description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')"> :description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')">
<span>Hello <span class="red_text">world</span> :)</span> <div v-if="subscriptions.length > 0">
<ul> <ul>
<ListItem v-for="sub in subscriptions" <ListItem v-for="sub in subscriptions"
:key="sub.url" :key="sub.url"
:title="sub.podcast?.title ?? sub.url"> :title="sub.podcast?.title ?? sub.url"
:details="formatSubscriptionDetails(sub)">
<template #icon> <template #icon>
<Avatar :size="44" <Avatar :size="44"
:url="sub.podcast?.image" :url="sub.podcast?.image"
@ -15,17 +16,50 @@
<template #subtitle> <template #subtitle>
{{ sub.podcast?.description }} {{ sub.podcast?.description }}
</template> </template>
<template #actions>
<ActionLink :href="sub.podcast?.link"
target="_blank"
icon="icon-external">
Podcast's homepage
</ActionLink>
<ActionLink :href="sub.url"
target="_blank">
<template #icon>
<Rss />
</template>
RSS feed
</ActionLink>
</template>
</ListItem> </ListItem>
</ul> </ul>
</div>
<div v-if="subscriptions.length === 0 && !isLoading">
<EmptyContent>
No subscriptions
<template #icon>
<Podcast />
</template>
<template #desc>
Start syncing podcasts from your favorite podcast client, such as
<a class="link" href="https://antennapod.org/" target="_blank">Antennapod</a>,
and then refresh this page to see them pop up here.
</template>
</EmptyContent>
</div>
</SettingsSection> </SettingsSection>
</div> </div>
</template> </template>
<script> <script>
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
import Avatar from '@nextcloud/vue/dist/Components/Avatar' import Avatar from '@nextcloud/vue/dist/Components/Avatar'
import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
import ListItem from '@nextcloud/vue/dist/Components/ListItem' import ListItem from '@nextcloud/vue/dist/Components/ListItem'
import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection' import SettingsSection from '@nextcloud/vue/dist/Components/SettingsSection'
import Podcast from 'vue-material-design-icons/Podcast'
import Rss from 'vue-material-design-icons/Rss.vue'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios' import axios from '@nextcloud/axios'
import { showError } from '@nextcloud/dialogs' import { showError } from '@nextcloud/dialogs'
@ -33,8 +67,12 @@ import { showError } from '@nextcloud/dialogs'
export default { export default {
name: 'PersonalSettingsPage', name: 'PersonalSettingsPage',
components: { components: {
ActionLink,
Avatar, Avatar,
EmptyContent,
ListItem, ListItem,
Podcast,
Rss,
SettingsSection, SettingsSection,
}, },
data() { data() {
@ -57,11 +95,26 @@ export default {
this.isLoading = false this.isLoading = false
} }
}, },
methods: {
formatSubscriptionDetails(sub) {
if (sub.listenedSeconds <= 0) {
return '(no time listened)'
}
const hours = Math.floor(sub.listenedSeconds / 3600)
const modMinutes = Math.floor(sub.listenedSeconds / 60) % 60
if (hours === 0) {
const modSeconds = sub.listenedSeconds % 60
return `(${modMinutes}min ${modSeconds}s listened)`
}
return `(${hours}h ${modMinutes}min listened)`
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.red_text { a.link {
color: red; text-decoration: underline;
color: var(--color-primary-element-light);
} }
</style> </style>