test route

This commit is contained in:
Matthis FAUVET 2024-06-29 00:45:19 +02:00
parent b0b2b8020a
commit 216b0658b8
3 changed files with 34 additions and 34 deletions

View File

@ -13,7 +13,6 @@
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
<script type="riot" src="./onzer.riot"></script>
<script type="riot" src="./playlists.riot"></script>
<script type="text/javascript">
async function fetch_data() {
@ -22,26 +21,9 @@
});
}
function mountComponent(component) {
const app = document.getElementById('app');
app.innerHTML = '';
riot.mount(app, component);
}
riot.compile().then(async () => {
const data = await fetch_data();
route('/', () => {
riot.mount('onzer', { items: data });
});
route('/playlists', () => {
riot.mount('playlists');
});
router.start();
router.exec();
riot.mount('onzer', { items: data });
});
</script>

View File

@ -1,4 +1,18 @@
<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="flex-row mb-2">
<input id="album" type="button" onclick={click} value="Albums"
@ -26,13 +40,27 @@
</div>
<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 {
components: {
router: route.Router;
route: route.Route;
},
state: {
placeholder: "Rechercher dans les albums",
items: [],
search: "albums",
filter: undefined,
id: undefined
id: undefined,
pages,
initialRoute,
base: '/#'
},
onBeforeMount(props) {
this.loadData(props.items);
@ -99,6 +127,10 @@
},
navigateToPlaylists() {
route('/playlists');
},
getPageById(route) {
const {id} = route.params
return pages.find(page => page.id === id) || pages[0]
}
}
</script>

View File

@ -1,14 +0,0 @@
<playlists>
<h1>Playlists Page</h1>
<p>This is the playlists page. It is currently empty.</p>
<script>
export default {
// Votre code de composant ici (si nécessaire)
}
</script>
<style>
/* Votre style ici (si nécessaire) */
</style>
</playlists>