fauvet/SAE_RIOT_2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test route

Browse Source
This commit is contained in:
Matthis FAUVET 2024-06-28 23:59:56 +02:00
parent 4c9af83342
commit 86d1984095
3 changed files with 74 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -1,31 +1,65 @@
<!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">
<onzer></onzer> <div id="app"></div>
<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>
<script type="riot" src="./onzer.riot"></script> <!-- Composant Onzer -->
<script type="riot" src="./onzer.riot"></script>
<script type="text/javascript"> <!-- 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() { async function fetch_data() {
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => { return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => response.json());
return response.json(); }
});
function mountComponent(component) {
const app = document.getElementById('app');
app.innerHTML = '';
riot.mount(app, component);
} }
riot.compile().then(async () => { riot.compile().then(async () => {
const data = await fetch_data(); const data = await fetch_data();
// Définir les routes
route('/', () => {
riot.mount('onzer', { items: data }); riot.mount('onzer', { items: data });
}); });
</script>
</body> route('/playlists', () => {
riot.mount('playlists');
});
// Démarrer le routeur
router.start();
router.exec();
});
</script>
</body>
</html> </html>

5
onzer.riot
View File

@ -13,7 +13,7 @@
<div class="flex flex-row items-baseline"> <div class="flex flex-row items-baseline">
<input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 h-20 pl-6 grow" <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 h-20 pl-6 grow"
placeholder={state.placeholder} onkeyup={edit} /> placeholder={state.placeholder} onkeyup={edit} />
<input type="button" value="Playlists" <input type="button" value="Playlists" onclick={navigateToPlaylists}
class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" /> class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" />
</div> </div>
</form> </form>
@ -96,6 +96,9 @@
computeHttpRequest = `${baseHttpRequest}${table}`; computeHttpRequest = `${baseHttpRequest}${table}`;
} }
return fetch(computeHttpRequest).then(response => response.json()); return fetch(computeHttpRequest).then(response => response.json());
},
navigateToPlaylists() {
route('/playlists');
} }
} }
</script> </script>

14
playlists.riot Normal file
View File

@ -0,0 +1,14 @@
<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>