added vue-router
This commit is contained in:
Jonas Heinrich
parent
5cde1348d9
commit
0c077f3f12
5
package-lock.json
generated
5
package-lock.json
generated
@ -11067,6 +11067,11 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
|
||||
"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.4.7",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.7.tgz",
|
||||
"integrity": "sha512-CbHXue5BLrDivOk5O4eZ0WT4Yj8XwdXa4kCnsEIOzYUPF/07ZukayA2jGxDCJxLc9SgVQX9QX0OuGOwGlVB4Qg=="
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
|
||||
|
||||
@ -31,10 +31,12 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextcloud/l10n": "^1.4.1",
|
||||
"@nextcloud/router": "^1.2.0",
|
||||
"@nextcloud/vue": "^2.7.0",
|
||||
"howler": "^2.2.0",
|
||||
"jquery": "^3.5.1",
|
||||
"vue": "^2.6.12"
|
||||
"vue": "^2.6.12",
|
||||
"vue-router": "^3.4.7"
|
||||
},
|
||||
"browserslist": [
|
||||
"extends @nextcloud/browserslist-config"
|
||||
|
||||
88
src/App.vue
88
src/App.vue
@ -1,89 +1,3 @@
|
||||
<template>
|
||||
<Content app-name="Radio">
|
||||
<AppNavigation>
|
||||
<template id="app-radio-navigation" #list>
|
||||
<AppNavigationItem icon="icon-category-dashboard" title="Top" />
|
||||
<AppNavigationItem icon="icon-category-monitoring" title="Recent" />
|
||||
<AppNavigationItem icon="icon-favorite" title="Favorites" />
|
||||
<AppNavigationItem icon="icon-files-dark" title="Categories" />
|
||||
<AppNavigationItem title="First pinned item"
|
||||
icon="icon-category-enabled"
|
||||
:pinned="true" />
|
||||
<router-view />
|
||||
</template>
|
||||
</AppNavigation>
|
||||
<AppContent>
|
||||
<Breadcrumbs class="breadcrumbs">
|
||||
<Breadcrumb title="Home" href="/" />
|
||||
<Breadcrumb title="Top" href="/Top" />
|
||||
</Breadcrumbs>
|
||||
<Table :station-data="tableData" />
|
||||
</AppContent>
|
||||
</Content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Content from '@nextcloud/vue/dist/Components/Content'
|
||||
import AppContent from '@nextcloud/vue/dist/Components/AppContent'
|
||||
import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
|
||||
import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
|
||||
import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
|
||||
import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
|
||||
import Table from './components/Table/Table'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Content,
|
||||
AppContent,
|
||||
AppNavigation,
|
||||
AppNavigationItem,
|
||||
Breadcrumbs,
|
||||
Breadcrumb,
|
||||
Table,
|
||||
},
|
||||
data: () => ({
|
||||
tableData: undefined,
|
||||
}),
|
||||
mounted() {
|
||||
this.loadStations()
|
||||
this.scroll()
|
||||
},
|
||||
methods: {
|
||||
loadStations() {
|
||||
const vm = this
|
||||
this.$jquery.getJSON('https://de1.api.radio-browser.info/json/stations/topclick?limit=20')
|
||||
.done(function(data) {
|
||||
vm.tableData = data
|
||||
})
|
||||
},
|
||||
scroll() {
|
||||
window.onscroll = () => {
|
||||
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
|
||||
this.loadStations()
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.app-navigation-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-content-vue {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.breadcrumbs {
|
||||
background-color: var(--color-main-background-translucent);
|
||||
z-index: 60;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 50px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<table id="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
<th class="nameColumn">
|
||||
Name
|
||||
</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="stationData">
|
||||
<tr v-for="(station, idx) in stationData" :key="idx">
|
||||
<td>
|
||||
<div class="stationIcon"
|
||||
:style="{ backgroundImage: `url('${ station.favicon }')` }" />
|
||||
</td>
|
||||
<td class="filenameColumn">
|
||||
<span class="innernametext">
|
||||
{{ station.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actionColumn">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-star" :close-after-click="true">
|
||||
Add to favorites
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-info" :close-after-click="true">
|
||||
Details
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
|
||||
export default {
|
||||
name: 'Table',
|
||||
components: {
|
||||
Actions,
|
||||
ActionButton,
|
||||
},
|
||||
props: {
|
||||
stationData: {
|
||||
type: Array,
|
||||
default() { return [] },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
|
||||
thead {
|
||||
background-color: var(--color-main-background-translucent);
|
||||
z-index: 60;
|
||||
position: sticky;
|
||||
position: -webkit-sticky;
|
||||
top: 99px;
|
||||
|
||||
th {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
th, th a {
|
||||
color: var(--color-text-maxcontrast);
|
||||
}
|
||||
|
||||
th.nameColumn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
tbody {
|
||||
|
||||
td {
|
||||
padding: 0 15px;
|
||||
font-style: normal;
|
||||
background-position: 8px center;
|
||||
background-repeat: no-repeat;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
tr {
|
||||
height: 51px;
|
||||
background-color: var(--color-background-light);
|
||||
|
||||
tr:hover, tr:focus, tr.mouseOver td {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
padding-left: 40px;
|
||||
width: 32px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
td.filenameColumn .innernametext {
|
||||
color: var(--color-main-text);
|
||||
}
|
||||
|
||||
.stationIcon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.actionColumn {
|
||||
width: auto;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.filenameColumn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -20,6 +20,8 @@
|
||||
*
|
||||
*/
|
||||
import Vue from 'vue'
|
||||
import router from './router'
|
||||
|
||||
import { translate, translatePlural } from '@nextcloud/l10n'
|
||||
|
||||
import App from './App'
|
||||
@ -32,5 +34,6 @@ Vue.prototype.$jquery = jquery
|
||||
|
||||
export default new Vue({
|
||||
el: '#content',
|
||||
router,
|
||||
render: h => h(App),
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user