SAE_RIOT_2024/index.html

50 lines
1.1 KiB
HTML
Raw Normal View History

2024-06-20 15:08:44 +02:00
<!DOCTYPE html>
<html>
2024-06-29 00:04:13 +02:00
<head>
<meta charset="utf-8">
<title>Riot App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-50">
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
<onzer></onzer>
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
<script src="https://unpkg.com/animore/animore.js"></script>
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
<script type="riot" src="./onzer.riot"></script>
<script type="riot" src="./playlists.riot"></script>
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
<script type="text/javascript">
async function fetch_data() {
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
return response.json();
});
}
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
function mountComponent(component) {
const app = document.getElementById('app');
app.innerHTML = '';
riot.mount(app, component);
}
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
riot.compile().then(async () => {
const data = await fetch_data();
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
route('/', () => {
riot.mount('onzer', { items: data });
});
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
route('/playlists', () => {
riot.mount('playlists');
});
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
router.start();
router.exec();
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
});
</script>
2024-06-28 23:59:56 +02:00
2024-06-29 00:04:13 +02:00
</body>
2024-06-20 15:08:44 +02:00
</html>