merge components into table, first experiments with jquery get

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-category-dashboard" title="Top" />
-				<AppNavigationItem icon="icon-recent" title="Recent" />
+				<AppNavigationItem icon="icon-category-monitoring" title="Recent" />
-				<AppNavigationItem icon="icon-favorites" title="Favorites" />
+				<AppNavigationItem icon="icon-favorite" title="Favorites" />
-				<AppNavigationItem icon="icon-folder" title="Categories" />
+				<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() {
+	data: () => ({
-		return {
+		tableData: undefined,
-			loading: false,
+	}),
-			date: Date.now() + 86400000 * 3,
+	mounted() {
-			date2: Date.now() + 86400000 * 3 + Math.floor(Math.random() * 86400000 / 2),
+		this.$jquery.get('https://de1.api.radio-browser.info/json/stations/topclick?limit=10')
-			show: true,
+			.function((data) => {
-			starred: false,
+				this.tableData = data
-		}
+			})
-	},
-	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)
-		},
 	},
 }
 </script>

src/components/Table/Table.vue

@@ -10,22 +10,62 @@
 			</tr>
 		</thead>
 		<tbody>
-			<TableItem
+			<tr v-if="tableData">
-				station-name="SRF Virus"
+				<td>
-				station-uuid="960b6cd6-0601-11e8-ae97-52543be04c81"
+					<div class="stationIcon" :style="style" />
-				station-isfav="false"
+				</td>
-				station-img="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png" />
+				<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>

src/components/TableItem/TableItem.vue

@@ -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>

src/main.js

@@ -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',