Added more info to list view
This commit is contained in:
Kalle Fagerberg
thrillfall
parent
71e8faf8cd
commit
82bcd0c6ea
43
package-lock.json
generated
43
package-lock.json
generated
@ -12,7 +12,8 @@
|
||||
"@nextcloud/dialogs": "^3.1.2",
|
||||
"@nextcloud/router": "^2.0.0",
|
||||
"@nextcloud/vue": "^5.3.1",
|
||||
"vue": "^2.7.0"
|
||||
"vue": "^2.7.7",
|
||||
"vue-material-design-icons": "^5.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nextcloud/babel-config": "^1.0.0",
|
||||
@ -2521,9 +2522,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-sfc": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz",
|
||||
"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==",
|
||||
"version": "2.7.7",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
|
||||
"integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.18.4",
|
||||
"postcss": "^8.4.14",
|
||||
@ -10867,11 +10868,11 @@
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/vue": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz",
|
||||
"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==",
|
||||
"version": "2.7.7",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
|
||||
"integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
|
||||
"dependencies": {
|
||||
"@vue/compiler-sfc": "2.7.4",
|
||||
"@vue/compiler-sfc": "2.7.7",
|
||||
"csstype": "^3.1.0"
|
||||
}
|
||||
},
|
||||
@ -11023,9 +11024,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vue-material-design-icons": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
|
||||
"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
|
||||
"integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
|
||||
},
|
||||
"node_modules/vue-multiselect": {
|
||||
"version": "2.1.6",
|
||||
@ -13552,9 +13553,9 @@
|
||||
}
|
||||
},
|
||||
"@vue/compiler-sfc": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.4.tgz",
|
||||
"integrity": "sha512-WCaF33mlKLSvHDKvOD6FzTa5CI2FlMTeJf3MxJsNP0KDgRoI6RdXhHo9dtvCqV4Sywf9Owm17wTLT1Ymu/WsOQ==",
|
||||
"version": "2.7.7",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.7.tgz",
|
||||
"integrity": "sha512-Ah8dIuo6ZVPHTq9+s4rBU/YpJu3vGSNyeOTCrPrVPQnkUfnT5Ig+IKBhePuQWFXguYb2TuEWrEfiiX9DZ3aJlA==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.18.4",
|
||||
"postcss": "^8.4.14",
|
||||
@ -20002,11 +20003,11 @@
|
||||
"peer": true
|
||||
},
|
||||
"vue": {
|
||||
"version": "2.7.4",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.4.tgz",
|
||||
"integrity": "sha512-8KGyyzFSj/FrKj1y7jyEpv8J4osgZx6Lk1lVzh1aP4BqsXZhATH1r0gdJNz00MMyBhK0/m2cNoPuOZ1NzeiUEw==",
|
||||
"version": "2.7.7",
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.7.tgz",
|
||||
"integrity": "sha512-osfkncsGCWqtch+YWYxbqTNQ9hl/UQ6TFRkdmK/VqAjuMpxzr5QotFsYpmJ1AB1ez2LJeIKXDmtMkXUotMOTsA==",
|
||||
"requires": {
|
||||
"@vue/compiler-sfc": "2.7.4",
|
||||
"@vue/compiler-sfc": "2.7.7",
|
||||
"csstype": "^3.1.0"
|
||||
}
|
||||
},
|
||||
@ -20120,9 +20121,9 @@
|
||||
}
|
||||
},
|
||||
"vue-material-design-icons": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.1.tgz",
|
||||
"integrity": "sha512-f2M4+7GWIwrg106KJ9a4BU1G5kOxvemIuK1ZDkIdh3ehAJ0vvln7/5PZJ8u6ka4VWV8oA+26mBYSDbS1dpq05w=="
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.1.2.tgz",
|
||||
"integrity": "sha512-nD1qFM2qAkMlVoe23EfNKIeMfYl6YjHZjSty9q0mwc2gXmPmvEhixywJQhM+VF5KVBI1zAkVTNLoUEERPY10pA=="
|
||||
},
|
||||
"vue-multiselect": {
|
||||
"version": "2.1.6",
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
"@nextcloud/dialogs": "^3.1.2",
|
||||
"@nextcloud/router": "^2.0.0",
|
||||
"@nextcloud/vue": "^5.3.1",
|
||||
"vue": "^2.7.0"
|
||||
"vue": "^2.7.7",
|
||||
"vue-material-design-icons": "^5.1.2"
|
||||
},
|
||||
"browserslist": [
|
||||
"extends @nextcloud/browserslist-config"
|
||||
|
||||
@ -2,30 +2,64 @@
|
||||
<div class="gpoddersync_settings">
|
||||
<SettingsSection :title="t('gpoddersync', 'Synced subscriptions')"
|
||||
:description="t('gpoddersync', 'Podcast subscriptions that has so far been synchronized with this Nextcloud account.')">
|
||||
<span>Hello <span class="red_text">world</span> :)</span>
|
||||
<ul>
|
||||
<ListItem v-for="sub in subscriptions"
|
||||
:key="sub.url"
|
||||
:title="sub.podcast?.title ?? sub.url">
|
||||
<div v-if="subscriptions.length > 0">
|
||||
<ul>
|
||||
<ListItem v-for="sub in subscriptions"
|
||||
:key="sub.url"
|
||||
:title="sub.podcast?.title ?? sub.url"
|
||||
:details="formatSubscriptionDetails(sub)">
|
||||
<template #icon>
|
||||
<Avatar :size="44"
|
||||
:url="sub.podcast?.image"
|
||||
:display-name="sub.podcast?.author" />
|
||||
</template>
|
||||
<template #subtitle>
|
||||
{{ sub.podcast?.description }}
|
||||
</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="subscriptions.length === 0 && !isLoading">
|
||||
<EmptyContent>
|
||||
No subscriptions
|
||||
<template #icon>
|
||||
<Avatar :size="44"
|
||||
:url="sub.podcast?.image"
|
||||
:display-name="sub.podcast?.author" />
|
||||
<Podcast />
|
||||
</template>
|
||||
<template #subtitle>
|
||||
{{ sub.podcast?.description }}
|
||||
<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>
|
||||
</ListItem>
|
||||
</ul>
|
||||
</EmptyContent>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActionLink from '@nextcloud/vue/dist/Components/ActionLink'
|
||||
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 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 axios from '@nextcloud/axios'
|
||||
import { showError } from '@nextcloud/dialogs'
|
||||
@ -33,8 +67,12 @@ import { showError } from '@nextcloud/dialogs'
|
||||
export default {
|
||||
name: 'PersonalSettingsPage',
|
||||
components: {
|
||||
ActionLink,
|
||||
Avatar,
|
||||
EmptyContent,
|
||||
ListItem,
|
||||
Podcast,
|
||||
Rss,
|
||||
SettingsSection,
|
||||
},
|
||||
data() {
|
||||
@ -57,11 +95,26 @@ export default {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.red_text {
|
||||
color: red;
|
||||
a.link {
|
||||
text-decoration: underline;
|
||||
color: var(--color-primary-element-light);
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user