test route

This commit is contained in:
Matthis FAUVET 2024-06-29 00:04:13 +02:00
parent 86d1984095
commit b0b2b8020a
2 changed files with 36 additions and 51 deletions

View File

@ -2,5 +2,6 @@
<project version="4"> <project version="4">
<component name="VcsDirectoryMappings"> <component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" /> <mapping directory="" vcs="Git" />
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component> </component>
</project> </project>

View File

@ -1,65 +1,49 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Riot App</title> <title>Riot App</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
</head> </head>
<body class="bg-neutral-50"> <body class="bg-neutral-50">
<div id="app"></div> <onzer></onzer>
<script src="https://unpkg.com/animore/animore.js"></script> <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/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>
<script type="riot" src="./onzer.riot"></script> <script type="riot" src="./playlists.riot"></script>
<!-- Composant Playlists --> <script type="text/javascript">
<script type="riot"> async function fetch_data() {
<playlists> return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
<h1>Playlists Page</h1> return response.json();
<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"> function mountComponent(component) {
async function fetch_data() { const app = document.getElementById('app');
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => response.json()); app.innerHTML = '';
} riot.mount(app, component);
}
function mountComponent(component) { riot.compile().then(async () => {
const app = document.getElementById('app'); const data = await fetch_data();
app.innerHTML = '';
riot.mount(app, component);
}
riot.compile().then(async () => { route('/', () => {
const data = await fetch_data(); riot.mount('onzer', { items: data });
});
// Définir les routes route('/playlists', () => {
route('/', () => { riot.mount('playlists');
riot.mount('onzer', { items: data }); });
});
route('/playlists', () => { router.start();
riot.mount('playlists'); router.exec();
});
// Démarrer le routeur });
router.start(); </script>
router.exec();
});
</script>
</body> </body>
</html> </html>