merge components into table, first experiments with jquery get
This commit is contained in:
Jonas Heinrich
parent
ae0c27bca6
commit
1539608790
53
src/App.vue
53
src/App.vue
@ -2,10 +2,10 @@
|
||||
<Content :class="{'icon-loading': loading}" app-name="Radio">
|
||||
<AppNavigation>
|
||||
<template id="app-radio-navigation" #list>
|
||||
<AppNavigationItem icon="icon-folder" title="Top" />
|
||||
<AppNavigationItem icon="icon-recent" title="Recent" />
|
||||
<AppNavigationItem icon="icon-favorites" title="Favorites" />
|
||||
<AppNavigationItem icon="icon-folder" title="Categories" />
|
||||
<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" />
|
||||
@ -16,7 +16,13 @@
|
||||
<Breadcrumb title="Home" href="/" />
|
||||
<Breadcrumb title="Top" href="/Top" />
|
||||
</Breadcrumbs>
|
||||
<Table />
|
||||
<Table
|
||||
:data="tableData"
|
||||
station-name="SRF Virus"
|
||||
station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
|
||||
station-isfav="false"
|
||||
station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
|
||||
{{ tableData }}
|
||||
</AppContent>
|
||||
</Content>
|
||||
</template>
|
||||
@ -41,35 +47,14 @@ export default {
|
||||
Breadcrumb,
|
||||
Table,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
date: Date.now() + 86400000 * 3,
|
||||
date2: Date.now() + 86400000 * 3 + Math.floor(Math.random() * 86400000 / 2),
|
||||
show: true,
|
||||
starred: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addOption(val) {
|
||||
this.options.push(val)
|
||||
this.select.push(val)
|
||||
},
|
||||
previous(data) {
|
||||
console.debug(data)
|
||||
},
|
||||
next(data) {
|
||||
console.debug(data)
|
||||
},
|
||||
close(data) {
|
||||
console.debug(data)
|
||||
},
|
||||
newButtonAction(e) {
|
||||
console.debug(e)
|
||||
},
|
||||
log(e) {
|
||||
console.debug(e)
|
||||
},
|
||||
data: () => ({
|
||||
tableData: undefined,
|
||||
}),
|
||||
mounted() {
|
||||
this.$jquery.get('https://de1.api.radio-browser.info/json/stations/topclick?limit=10')
|
||||
.function((data) => {
|
||||
this.tableData = data
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -10,22 +10,62 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<TableItem
|
||||
station-name="SRF Virus"
|
||||
station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
|
||||
station-isfav="false"
|
||||
station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
|
||||
<tr v-if="tableData">
|
||||
<td>
|
||||
<div class="stationIcon" :style="style" />
|
||||
</td>
|
||||
<td class="filenameColumn">
|
||||
<span class="innernametext">
|
||||
{{ stationName }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actionColumn">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-star" :close-after-click="true" @click="onFavorite">
|
||||
Add to favorites
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-info" :close-after-click="true" @click="onDetails">
|
||||
Details
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableItem from '../TableItem/TableItem.vue'
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
|
||||
export default {
|
||||
name: 'Table',
|
||||
components: {
|
||||
TableItem,
|
||||
Actions,
|
||||
ActionButton,
|
||||
},
|
||||
props: {
|
||||
stationName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stationIsfav: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stationUuid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stationImg: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
return 'background-image: url(' + this.stationImg + ')'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -53,7 +93,7 @@ table {
|
||||
|
||||
th.nameColumn {
|
||||
width: 100%;
|
||||
padding-left: 35px;
|
||||
padding-left: 57px;
|
||||
}
|
||||
|
||||
}
|
||||
@ -76,4 +116,45 @@ table td {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
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 {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="stationIcon" :style="style" />
|
||||
</td>
|
||||
<td class="filenameColumn">
|
||||
<span class="innernametext">
|
||||
{{ stationName }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="actionColumn">
|
||||
<Actions>
|
||||
<ActionButton icon="icon-star" :close-after-click="true" @click="onFavorite">
|
||||
Add to favorites
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-info" :close-after-click="true" @click="onDetails">
|
||||
Details
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
||||
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
||||
|
||||
export default {
|
||||
name: 'TableItem',
|
||||
components: {
|
||||
Actions,
|
||||
ActionButton,
|
||||
},
|
||||
props: {
|
||||
stationName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stationIsfav: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stationUuid: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stationImg: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
return 'background-image: url(' + this.stationImg + ')'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
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 {
|
||||
margin-left: 20px;
|
||||
width: 32px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.filenameColumn {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -24,8 +24,11 @@ import { translate, translatePlural } from '@nextcloud/l10n'
|
||||
|
||||
import App from './App'
|
||||
|
||||
import jquery from 'jquery'
|
||||
|
||||
Vue.prototype.t = translate
|
||||
Vue.prototype.n = translatePlural
|
||||
Vue.prototype.$jquery = jquery
|
||||
|
||||
export default new Vue({
|
||||
el: '#content',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user