2024-06-20 15:08:44 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2024-06-28 23:59:56 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Riot App</title>
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="bg-neutral-50">
|
|
|
|
|
|
|
|
|
|
<div id="app"></div>
|
|
|
|
|
|
|
|
|
|
<script src="https://unpkg.com/animore/animore.js"></script>
|
|
|
|
|
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
|
|
|
|
|
<script src="https://unpkg.com/@riotjs/route@6/route.umd.js"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Composant Onzer -->
|
|
|
|
|
<script type="riot" src="./onzer.riot"></script>
|
|
|
|
|
|
|
|
|
|
<!-- Composant Playlists -->
|
|
|
|
|
<script type="riot">
|
|
|
|
|
<playlists>
|
|
|
|
|
<h1>Playlists Page</h1>
|
|
|
|
|
<p>This is the playlists page. It is currently empty.</p>
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
// Your component logic here
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
/* Your style here */
|
|
|
|
|
</style>
|
|
|
|
|
</playlists>
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
async function fetch_data() {
|
|
|
|
|
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => response.json());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function mountComponent(component) {
|
|
|
|
|
const app = document.getElementById('app');
|
|
|
|
|
app.innerHTML = '';
|
|
|
|
|
riot.mount(app, component);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
riot.compile().then(async () => {
|
|
|
|
|
const data = await fetch_data();
|
|
|
|
|
|
|
|
|
|
// Définir les routes
|
|
|
|
|
route('/', () => {
|
|
|
|
|
riot.mount('onzer', { items: data });
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
route('/playlists', () => {
|
|
|
|
|
riot.mount('playlists');
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Démarrer le routeur
|
|
|
|
|
router.start();
|
|
|
|
|
router.exec();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
2024-06-20 15:08:44 +02:00
|
|
|
</html>
|
