test route

This commit is contained in:
Matthis FAUVET 2024-06-29 01:12:09 +02:00
parent 07963bbe5d
commit 8c03a9c241

View File

@ -1,18 +1,4 @@
<onzer> <onzer>
<router initial-route={state.initialRoute} base={state.base}>
<nav>
<a each={ page in state.pages } href="/#{ page.id }">
{ page.title }
</a>
</nav>
<route path=":id?">
<h1>{getPageById(route).title}</h1>
<p>{getPageById(route).body}</p>
</route>
</router>
<div class="px-12"> <div class="px-12">
<div class="flex-row mb-2"> <div class="flex-row mb-2">
<input id="album" type="button" onclick={click} value="Albums" <input id="album" type="button" onclick={click} value="Albums"
@ -40,27 +26,13 @@
</div> </div>
<script> <script>
const pages = [
{ id: "home", title: "Home", body: "Onzer" },
{ id: "playlist", title: "Playlist", body: "Onzer" },
]
const initialRoute = `${window.location.hash ? window.location.hash.replace('#', '') : 'home'}`
export default { export default {
components: {
router: route.Router;
route: route.Route;
},
state: { state: {
placeholder: "Rechercher dans les albums", placeholder: "Rechercher dans les albums",
items: [], items: [],
search: "albums", search: "albums",
filter: undefined, filter: undefined,
id: undefined, id: undefined
pages,
initialRoute,
base: '/#'
}, },
onBeforeMount(props) { onBeforeMount(props) {
this.loadData(props.items); this.loadData(props.items);
@ -125,9 +97,8 @@
} }
return fetch(computeHttpRequest).then(response => response.json()); return fetch(computeHttpRequest).then(response => response.json());
}, },
getPageById(route) { navigateToPlaylists() {
const {id} = route.params route('/playlists');
return pages.find(page => page.id === id) || pages[0]
} }
} }
</script> </script>
@ -145,26 +116,5 @@
border-color: #6EE7B7; border-color: #6EE7B7;
width: 32%; width: 32%;
} }
:host {
display: block;
font-family: sans-serif;
margin: 0;
padding: 1em;
text-align: center;
color: #666;
}
nav {
display: block;
border-bottom: 1px solid #666;
padding: 0 0 1em;
}
nav > a {
display: inline-block;
padding: 0 .8em;
}
nav > a:not(:first-child) {
border-left: 1px solid #eee;
}
</style> </style>
</onzer> </onzer>