added vue-router

package-lock.json

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

package.json

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

src/App.vue

@@ -1,89 +1,3 @@
 <template>
-	<Content app-name="Radio">
+	<router-view />
-		<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" />
-			</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>

src/components/Table/Table.vue

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

src/main.js

@@ -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),
 })