From be8ff3466aec4b0c38e3fa8ced5d9276459edfa2 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Sun, 2 Oct 2022 23:24:33 +0200
Subject: [PATCH] Most of the interface done

---
 ui/routes.go                                  |   5 +
 ui/src/components/AlarmExceptionList.svelte   |  35 ++++++
 ui/src/components/AlarmRepeatedList.svelte    |  40 +++++++
 ui/src/components/AlarmSingleList.svelte      |  27 +++++
 ui/src/components/CardRoutine.svelte          |  59 +++++++++++
 ui/src/components/CardStatAlarms.svelte       |  27 +++++
 ui/src/components/CardStatRoutines.svelte     |  34 ++++++
 ui/src/components/CardStatTimeAwaking.svelte  |  19 ++++
 ui/src/components/GongsList.svelte            |  87 +++++++++++++++
 ui/src/components/Header.svelte               |  26 ++++-
 ui/src/components/MusiksLastPlayedList.svelte |  32 ++++++
 ui/src/components/TrackList.svelte            |  87 +++++++++++++++
 ui/src/reveil.scss                            |  12 +++
 ui/src/routes/+layout.svelte                  |   4 +-
 ui/src/routes/+page.svelte                    |   2 +-
 ui/src/routes/alarms/+page.svelte             |  26 +++++
 ui/src/routes/alarms/[kind]/+layout.svelte    |  44 ++++++++
 ui/src/routes/alarms/[kind]/+page.svelte      |  42 ++++++++
 .../routes/alarms/[kind]/[aid]/+page.svelte   |  35 ++++++
 ui/src/routes/alarms/[kind]/new/+page.svelte  | 100 ++++++++++++++++++
 ui/src/routes/history/+page.svelte            |  26 +++++
 ui/src/routes/musiks/+page.svelte             |  24 +++++
 ui/src/routes/musiks/gongs/+layout.svelte     |  29 +++++
 ui/src/routes/musiks/gongs/+page.svelte       |  17 +++
 ui/src/routes/musiks/gongs/[gid]/+page.svelte |   3 +
 ui/src/routes/musiks/gongs/new/+page.svelte   |   3 +
 ui/src/routes/musiks/tracks/+layout.svelte    |  29 +++++
 ui/src/routes/musiks/tracks/+page.svelte      |  17 +++
 .../routes/musiks/tracks/[tid]/+page.svelte   |   3 +
 ui/src/routes/musiks/tracks/new/+page.svelte  |   3 +
 ui/src/routes/routines/+page.svelte           |  27 +++++
 ui/src/routes/settings/+page.svelte           |  66 ++++++++++++
 32 files changed, 983 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/components/AlarmExceptionList.svelte
 create mode 100644 ui/src/components/AlarmRepeatedList.svelte
 create mode 100644 ui/src/components/AlarmSingleList.svelte
 create mode 100644 ui/src/components/CardRoutine.svelte
 create mode 100644 ui/src/components/CardStatAlarms.svelte
 create mode 100644 ui/src/components/CardStatRoutines.svelte
 create mode 100644 ui/src/components/CardStatTimeAwaking.svelte
 create mode 100644 ui/src/components/GongsList.svelte
 create mode 100644 ui/src/components/MusiksLastPlayedList.svelte
 create mode 100644 ui/src/components/TrackList.svelte
 create mode 100644 ui/src/routes/alarms/+page.svelte
 create mode 100644 ui/src/routes/alarms/[kind]/+layout.svelte
 create mode 100644 ui/src/routes/alarms/[kind]/+page.svelte
 create mode 100644 ui/src/routes/alarms/[kind]/[aid]/+page.svelte
 create mode 100644 ui/src/routes/alarms/[kind]/new/+page.svelte
 create mode 100644 ui/src/routes/history/+page.svelte
 create mode 100644 ui/src/routes/musiks/+page.svelte
 create mode 100644 ui/src/routes/musiks/gongs/+layout.svelte
 create mode 100644 ui/src/routes/musiks/gongs/+page.svelte
 create mode 100644 ui/src/routes/musiks/gongs/[gid]/+page.svelte
 create mode 100644 ui/src/routes/musiks/gongs/new/+page.svelte
 create mode 100644 ui/src/routes/musiks/tracks/+layout.svelte
 create mode 100644 ui/src/routes/musiks/tracks/+page.svelte
 create mode 100644 ui/src/routes/musiks/tracks/[tid]/+page.svelte
 create mode 100644 ui/src/routes/musiks/tracks/new/+page.svelte
 create mode 100644 ui/src/routes/routines/+page.svelte
 create mode 100644 ui/src/routes/settings/+page.svelte

diff --git a/ui/routes.go b/ui/routes.go
index a6cd979..cd554a5 100644
--- a/ui/routes.go
+++ b/ui/routes.go
@@ -64,10 +64,15 @@ func DeclareRoutes(router *gin.Engine, cfg *config.Config) {
 
 	router.GET("/", serveOrReverse("", cfg))
 	router.GET("/alarms", serveOrReverse("/", cfg))
+	router.GET("/alarms/*_", serveOrReverse("/", cfg))
 	router.GET("/settings", serveOrReverse("/", cfg))
+	router.GET("/settings/*_", serveOrReverse("/", cfg))
 	router.GET("/routines", serveOrReverse("/", cfg))
+	router.GET("/routines/*_", serveOrReverse("/", cfg))
 	router.GET("/musiks", serveOrReverse("/", cfg))
+	router.GET("/musiks/*_", serveOrReverse("/", cfg))
 	router.GET("/history", serveOrReverse("/", cfg))
+	router.GET("/history/*_", serveOrReverse("/", cfg))
 
 	router.GET("/_app/*_", serveOrReverse("", cfg))
 	router.GET("/img/*_", serveOrReverse("", cfg))
diff --git a/ui/src/components/AlarmExceptionList.svelte b/ui/src/components/AlarmExceptionList.svelte
new file mode 100644
index 0000000..21e2930
--- /dev/null
+++ b/ui/src/components/AlarmExceptionList.svelte
@@ -0,0 +1,35 @@
+<script>
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+ } from 'sveltestrap';
+
+ export let flush = false;
+</script>
+
+<div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
+    <h2>
+        Exceptions
+    </h2>
+    <Button
+        href="alarms/excepts/new"
+        color="outline-primary"
+        size="sm"
+        class="float-end {($page.params.kind === 'excepts' && $page.url.pathname.endsWith('/new'))?'active':''}"
+    >
+        <Icon name="plus-lg" />
+    </Button>
+</div>
+<div class="list-group" class:list-group-flush={flush}>
+    <a
+        href="alarms/excepts/1"
+        class="list-group-item list-group-item-action"
+        class:active={$page.params.kind === "excepts" && $page.params.aid === "1"}
+    >
+        <Icon name="x-octagon-fill" />
+        Du <abbr title="test">samedi 14</abbr>
+        au <abbr title="test">dimanche 26 février</abbr>
+    </a>
+</div>
diff --git a/ui/src/components/AlarmRepeatedList.svelte b/ui/src/components/AlarmRepeatedList.svelte
new file mode 100644
index 0000000..960de5f
--- /dev/null
+++ b/ui/src/components/AlarmRepeatedList.svelte
@@ -0,0 +1,40 @@
+<script>
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+ } from 'sveltestrap';
+
+ export let flush = false;
+</script>
+
+<div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
+    <h2>
+        Réveils habituels
+    </h2>
+    <Button
+        href="alarms/usuals/new"
+        color="outline-primary"
+        size="sm"
+        class="float-end {($page.params.kind === 'usuals' && $page.url.pathname.endsWith('/new'))?'active':''}"
+    >
+        <Icon name="plus-lg" />
+    </Button>
+</div>
+<div class="list-group" class:list-group-flush={flush}>
+    <a
+        href="alarms/usuals/1"
+        class="list-group-item list-group-item-action"
+        class:active={$page.params.kind === "usuals" && $page.params.aid === "1"}
+    >
+        Les lundis à 6h50
+    </a>
+    <a
+        href="alarms/usuals/2"
+        class="list-group-item list-group-item-action"
+        class:active={$page.params.kind === "usuals" && $page.params.aid === "2"}
+    >
+        Les mardis à 6h50
+    </a>
+</div>
diff --git a/ui/src/components/AlarmSingleList.svelte b/ui/src/components/AlarmSingleList.svelte
new file mode 100644
index 0000000..2e09240
--- /dev/null
+++ b/ui/src/components/AlarmSingleList.svelte
@@ -0,0 +1,27 @@
+<script>
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+ } from 'sveltestrap';
+
+ export let flush = false;
+</script>
+
+<div class="d-flex justify-content-between align-items-center" class:mx-2={flush}>
+    <h2>
+        Réveils manuels
+    </h2>
+    <Button
+        href="alarms/manuals/new"
+        color="outline-primary"
+        size="sm"
+        class="float-end {($page.params.kind === 'manuals' && $page.url.pathname.endsWith('/new'))?'active':''}"
+    >
+        <Icon name="plus-lg" />
+    </Button>
+</div>
+<div class="text-center">
+    <p class="fst-italic">Pas de prochain réveil manuel programmé</p>
+</div>
diff --git a/ui/src/components/CardRoutine.svelte b/ui/src/components/CardRoutine.svelte
new file mode 100644
index 0000000..872ddf5
--- /dev/null
+++ b/ui/src/components/CardRoutine.svelte
@@ -0,0 +1,59 @@
+<script>
+ import {
+     Button,
+     Card,
+     CardHeader,
+     Col,
+     Container,
+     ListGroup,
+     ListGroupItem,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ export let routine = {
+     title: "Classique",
+     steps: [
+         {
+             id: 1,
+             name: "Salutation & heure",
+             start: 0,
+         },
+         {
+             id: 2,
+             name: "7 min workout",
+             start: 60,
+         },
+         {
+             id: 3,
+             name: "RATP traffic",
+             start: 540,
+         },
+     ],
+ };
+</script>
+
+<Card>
+    <CardHeader>
+        <Button
+            color="outline-danger"
+            size="sm"
+            class="float-end ms-1"
+        >
+            <Icon name="trash" />
+        </Button>
+        <Button
+            color="outline-info"
+            size="sm"
+            class="float-end ms-1"
+        >
+            <Icon name="pencil" />
+        </Button>
+        {routine.title}
+    </CardHeader>
+    <ListGroup>
+        {#each routine.steps as step (step.id)}
+            <ListGroupItem action>{step.name}</ListGroupItem>
+        {/each}
+    </ListGroup>
+</Card>
diff --git a/ui/src/components/CardStatAlarms.svelte b/ui/src/components/CardStatAlarms.svelte
new file mode 100644
index 0000000..2d0de16
--- /dev/null
+++ b/ui/src/components/CardStatAlarms.svelte
@@ -0,0 +1,27 @@
+<script>
+ import {
+     Card,
+     CardHeader,
+     ListGroup,
+     ListGroupItem,
+     Icon,
+ } from 'sveltestrap';
+
+ export let awakingList = [
+     {
+         id: 1,
+         date: new Date("2022-10-01T09:15:00.000Z"),
+     },
+ ];
+</script>
+
+<Card>
+    <CardHeader>
+        Liste des réveils
+    </CardHeader>
+    <ListGroup>
+        {#each awakingList as awaking (awaking.id)}
+            <ListGroupItem>{awaking.date}</ListGroupItem>
+        {/each}
+    </ListGroup>
+</Card>
diff --git a/ui/src/components/CardStatRoutines.svelte b/ui/src/components/CardStatRoutines.svelte
new file mode 100644
index 0000000..6107295
--- /dev/null
+++ b/ui/src/components/CardStatRoutines.svelte
@@ -0,0 +1,34 @@
+<script>
+ import {
+     Badge,
+     Card,
+     CardHeader,
+     ListGroup,
+     ListGroupItem,
+     Icon,
+ } from 'sveltestrap';
+
+ export let routinesStats = [
+     {
+         id: 1,
+         name: "Classique",
+         nb: 10,
+     },
+ ];
+</script>
+
+<Card>
+    <CardHeader>
+        Routines favorites
+    </CardHeader>
+    <ListGroup numbered>
+        {#each routinesStats as routine (routine.id)}
+            <ListGroupItem>
+                {routine.name}
+                <Badge color="primary" class="float-end">
+                    {routine.nb}
+                </Badge>
+            </ListGroupItem>
+        {/each}
+    </ListGroup>
+</Card>
diff --git a/ui/src/components/CardStatTimeAwaking.svelte b/ui/src/components/CardStatTimeAwaking.svelte
new file mode 100644
index 0000000..4e271e4
--- /dev/null
+++ b/ui/src/components/CardStatTimeAwaking.svelte
@@ -0,0 +1,19 @@
+<script>
+ import {
+     Card,
+     CardHeader,
+     CardBody,
+     Icon,
+ } from 'sveltestrap';
+</script>
+
+<Card>
+    <CardHeader>
+        Temps moyen de éteindre le réveil
+    </CardHeader>
+    <CardBody>
+        <p class="card-text">
+            10 minutes
+        </p>
+    </CardBody>
+</Card>
diff --git a/ui/src/components/GongsList.svelte b/ui/src/components/GongsList.svelte
new file mode 100644
index 0000000..6af8935
--- /dev/null
+++ b/ui/src/components/GongsList.svelte
@@ -0,0 +1,87 @@
+<script>
+ import { goto } from '$app/navigation';
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+ } from 'sveltestrap';
+
+ let gongs = [
+     {
+         id: 1,
+         title: "Coq",
+     },
+     {
+         id: 2,
+         title: "Marseillaise",
+         enabled: true,
+     },
+     {
+         id: 3,
+         title: "Trompette de l'armée française",
+     },
+ ];
+
+ function chooseGong(gong) {
+     gongs = gongs.map((g) => {
+         g.enabled = g.id == gong.id
+         return g;
+     })
+ }
+
+ export let flush = false;
+ export let edit = false;
+
+ export { className as class };
+ let className = '';
+</script>
+
+<div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
+    <h2>
+        Gongs
+    </h2>
+    <div>
+        {#if !edit}
+            <Button
+                href="musiks/gongs"
+                color="outline-info"
+                size="sm"
+            >
+                <Icon name="pencil" />
+            </Button>
+        {/if}
+        <Button
+            href="musiks/gongs/new"
+            color="outline-primary"
+            size="sm"
+        >
+            <Icon name="plus-lg" />
+        </Button>
+        <Button
+            color="outline-dark"
+            size="sm"
+        >
+            <Icon name="arrow-clockwise" />
+        </Button>
+    </div>
+</div>
+<div class="list-group {className}" class:list-group-flush={flush}>
+    {#each gongs as gong (gong.id)}
+        <button
+            type="button"
+            class="list-group-item list-group-item-action"
+            class:active={(edit && $page.url.pathname.indexOf('/gongs/') !== -1 && $page.params.gid == gong.id) || (!edit && gong.enabled)}
+            aria-current="true"
+            on:click={() => {
+                     if (edit) {
+                         goto('musiks/gongs/' + gong.id);
+                     } else {
+                         chooseGong(gong);
+                     }
+                     }}
+        >
+            {gong.title}
+        </button>
+    {/each}
+</div>
diff --git a/ui/src/components/Header.svelte b/ui/src/components/Header.svelte
index 5950b8e..11d0fb8 100644
--- a/ui/src/components/Header.svelte
+++ b/ui/src/components/Header.svelte
@@ -1,4 +1,6 @@
 <script>
+ import { page } from '$app/stores'
+
  import {
      Icon,
      Navbar,
@@ -10,19 +12,35 @@
 
  const version = fetch('api/version', {headers: {'Accept': 'application/json'}}).then((res) => res.json())
 
- export let activemenu = '';
+ export let activemenu = "";
+ $: {
+     const path = $page.url.pathname.split("/");
+     if (path.length > 1) {
+         activemenu = path[1];
+     }
+ }
  export { className as class };
  let className = '';
 </script>
 
-<Navbar class={className} color="primary" dark expand="xs" style="overflow-x: auto">
+<Navbar container={false} class="{className} px-md-2" color="primary" dark expand="xs" style="overflow-x: auto">
     <NavbarBrand href="." class="d-none d-md-block" style="padding: 0; margin: -.5rem 0;">
         Réveil
     </NavbarBrand>
     <Nav navbar>
+        <NavItem class="d-block d-md-none">
+            <NavLink
+                active={activemenu === ''}
+                class="text-center"
+                href="."
+            >
+                <Icon name="house-fill" /><br class="d-inline d-md-none">
+                Accueil
+            </NavLink>
+        </NavItem>
         <NavItem>
             <NavLink
-                active={activemenu === 'recipes'}
+                active={activemenu === 'alarms'}
                 class="text-center"
                 href="alarms"
             >
@@ -34,7 +52,7 @@
             <NavLink
                 href="musiks"
                 class="text-center"
-                active={activemenu === 'explore'}
+                active={activemenu === 'musiks'}
             >
                 <Icon name="music-note-list" /><br class="d-inline d-md-none">
                 Musiques
diff --git a/ui/src/components/MusiksLastPlayedList.svelte b/ui/src/components/MusiksLastPlayedList.svelte
new file mode 100644
index 0000000..1f0cae9
--- /dev/null
+++ b/ui/src/components/MusiksLastPlayedList.svelte
@@ -0,0 +1,32 @@
+<script>
+ let musiks = [
+     {
+         id: 1,
+         title: "Hall Of Fame",
+         artist: "The Script",
+         enabled: true,
+     },
+     {
+         id: 2,
+         title: "Poker face",
+         artist: "Lady Gaga",
+     },
+     {
+         id: 3,
+         title: "Puisque tu m'aimes encore",
+         artist: "Céline Dion",
+         enabled: true,
+     },
+ ];
+
+ let tracks = [2,0,1];
+</script>
+
+<h2>
+    Dernières musiques jouées
+</h2>
+<ol class="list-group list-group-numbered">
+    {#each tracks as track}
+        <li class="list-group-item">{musiks[track].artist} &ndash; {musiks[track].title}</li>
+    {/each}
+</ol>
diff --git a/ui/src/components/TrackList.svelte b/ui/src/components/TrackList.svelte
new file mode 100644
index 0000000..1c557d2
--- /dev/null
+++ b/ui/src/components/TrackList.svelte
@@ -0,0 +1,87 @@
+<script>
+ import { goto } from '$app/navigation';
+ import { page } from '$app/stores';
+
+ import {
+     Button,
+     Icon,
+ } from 'sveltestrap';
+
+ let musiks = [
+     {
+         id: 1,
+         title: "Hall Of Fame",
+         artist: "The Script",
+         enabled: true,
+     },
+     {
+         id: 2,
+         title: "Poker face",
+         artist: "Lady Gaga",
+     },
+     {
+         id: 3,
+         title: "Puisque tu m'aimes encore",
+         artist: "Céline Dion",
+         enabled: true,
+     },
+ ];
+
+ export let flush = false;
+ export let edit = false;
+
+ export { className as class };
+ let className = '';
+</script>
+
+<div class="d-flex justify-content-between align-items-center" class:px-2={flush}>
+    <h2>
+        Musiques {#if !flush}du réveil{/if}
+    </h2>
+    <div>
+        {#if !edit}
+            <Button
+                href="musiks/tracks"
+                color="outline-info"
+                size="sm"
+            >
+                <Icon name="pencil" />
+            </Button>
+        {/if}
+        <Button
+            href="musiks/tracks/new"
+            color="outline-primary"
+            size="sm"
+        >
+            <Icon name="plus-lg" />
+        </Button>
+        <Button
+            color="outline-dark"
+            size="sm"
+        >
+            <Icon name="arrow-clockwise" />
+        </Button>
+    </div>
+</div>
+<div class="list-group {className}" class:list-group-flush={flush}>
+    {#each musiks as track (track.id)}
+        <button
+            type="button"
+            class="list-group-item list-group-item-action"
+            class:active={$page.url.pathname.indexOf('/tracks/') !== -1 && $page.params.tid == track.id}
+            aria-current="true"
+            on:click={() => {
+                     if (edit) {
+                         goto('musiks/tracks/' + track.id)
+                     } else {
+                         track.enabled = !track.enabled
+                     }
+                     }}
+        >
+            {#if !edit}
+                <input class="form-check-input me-1" type="checkbox" checked={track.enabled}>
+            {/if}
+            <span class:fw-bold={!edit && track.enabled}>{track.artist} &ndash; {track.title}</span>
+        </button>
+    {/each}
+</div>
diff --git a/ui/src/reveil.scss b/ui/src/reveil.scss
index 2c2c9f1..738dc8e 100644
--- a/ui/src/reveil.scss
+++ b/ui/src/reveil.scss
@@ -32,3 +32,15 @@ $navbar-padding-y: 0;
 $nav-link-padding-y: 0.2rem;
 
 @import "bootstrap/scss/bootstrap";
+
+a.btn, button.btn {
+    text-decoration: none !important;
+}
+
+.fixed-bottom .nav-item a {
+    border-top: 1px solid $pink;
+}
+.fixed-bottom .nav-item a.active {
+    background: white;
+    color: $pink;
+}
diff --git a/ui/src/routes/+layout.svelte b/ui/src/routes/+layout.svelte
index ccbd4f7..b5037bf 100644
--- a/ui/src/routes/+layout.svelte
+++ b/ui/src/routes/+layout.svelte
@@ -19,12 +19,12 @@
 <Header
     class="d-none d-lg-flex py-2"
 />
-<div class="flex-fill pb-4 pb-lg-2">
+<div class="flex-fill d-flex flex-column bg-light">
     <slot></slot>
 </div>
 <Toaster />
 <Header
-    class="d-flex d-lg-none py-1 fixed-bottom"
+    class="d-flex d-lg-none fixed-bottom"
 />
 
 <style>
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 6427d1e..9e13641 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -5,7 +5,7 @@
  } from 'sveltestrap';
 </script>
 
-<Container class="mh-100 h-100 d-flex flex-column justify-content-center text-center">
+<Container class="flex-fill d-flex flex-column justify-content-center text-center">
     <figure>
         <blockquote class="blockquote text-muted">
             <p class="display-6">A well-known quote, contained in a blockquote element.</p>
diff --git a/ui/src/routes/alarms/+page.svelte b/ui/src/routes/alarms/+page.svelte
new file mode 100644
index 0000000..8ed81d6
--- /dev/null
+++ b/ui/src/routes/alarms/+page.svelte
@@ -0,0 +1,26 @@
+<script>
+ import {
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import AlarmSingleList from '../../components/AlarmSingleList.svelte';
+ import AlarmRepeatedList from '../../components/AlarmRepeatedList.svelte';
+ import AlarmExceptionList from '../../components/AlarmExceptionList.svelte';
+</script>
+
+<Container fluid class="flex-fill d-flex flex-column py-2">
+    <Row>
+        <Col class="mb-4" md={4}>
+        <AlarmSingleList />
+        </Col>
+        <Col class="mb-4" md={4}>
+        <AlarmRepeatedList />
+        </Col>
+        <Col class="mb-4" md={4}>
+        <AlarmExceptionList />
+        </Col>
+    </Row>
+</Container>
diff --git a/ui/src/routes/alarms/[kind]/+layout.svelte b/ui/src/routes/alarms/[kind]/+layout.svelte
new file mode 100644
index 0000000..63f69a3
--- /dev/null
+++ b/ui/src/routes/alarms/[kind]/+layout.svelte
@@ -0,0 +1,44 @@
+<script>
+ import {
+     Button,
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import { page } from '$app/stores';
+
+ import AlarmSingleList from '../../../components/AlarmSingleList.svelte';
+ import AlarmRepeatedList from '../../../components/AlarmRepeatedList.svelte';
+ import AlarmExceptionList from '../../../components/AlarmExceptionList.svelte';
+
+ function slugToComponent(slug) {
+     switch(slug) {
+         case "singles":
+             return AlarmSingleList;
+         case "repeateds":
+             return AlarmRepeatedList;
+         case "excepts":
+             return AlarmExceptionList;
+     }
+ }
+</script>
+
+<div class="d-flex flex-fill flex-column">
+    <div class="d-flex flex-row justify-content-between d-block d-md-none">
+        <Button href="alarms" color="link" class="p-0">
+            <Icon name="chevron-left" /> Réveils
+        </Button>
+    </div>
+    <Container fluid class="flex-fill">
+        <Row class="mh-100 h-100">
+            <Col md={3} class="d-none d-md-block px-0 py-2" style="background: #e7e8e9">
+            <svelte:component this={slugToComponent($page.params["kind"])} flush={true} />
+            </Col>
+            <Col md={9} class="d-flex py-2">
+            <slot></slot>
+            </Col>
+        </Row>
+    </Container>
+</div>
diff --git a/ui/src/routes/alarms/[kind]/+page.svelte b/ui/src/routes/alarms/[kind]/+page.svelte
new file mode 100644
index 0000000..69bceee
--- /dev/null
+++ b/ui/src/routes/alarms/[kind]/+page.svelte
@@ -0,0 +1,42 @@
+<script>
+ import { page } from '$app/stores';
+
+ import {
+     Container,
+ } from 'sveltestrap';
+
+ import AlarmSingleList from '../../../components/AlarmSingleList.svelte';
+ import AlarmRepeatedList from '../../../components/AlarmRepeatedList.svelte';
+ import AlarmExceptionList from '../../../components/AlarmExceptionList.svelte';
+
+ function slugToComponent(slug) {
+     switch(slug) {
+         case "singles":
+             return AlarmSingleList;
+         case "repeateds":
+             return AlarmRepeatedList;
+         case "exceptions":
+             return AlarmExceptList;
+     }
+ }
+
+ function slugToText(slug) {
+     switch(slug) {
+         case "singles":
+             return "un réveil manuel";
+         case "repeateds":
+             return "un réveil habituel";
+         case "exceptions":
+             return "une exception";
+     }
+ }
+</script>
+
+<Container fluid class="py-2 d-none d-md-flex flex-column justify-content-center align-items-center">
+    <p class="fst-italic text-muted">
+        Choisissez {slugToText($page.params.kind)} dans la liste.
+    </p>
+</Container>
+<Container fluid class="d-block d-md-none">
+    <svelte:component this={slugToComponent($page.params.kind)} />
+</Container>
diff --git a/ui/src/routes/alarms/[kind]/[aid]/+page.svelte b/ui/src/routes/alarms/[kind]/[aid]/+page.svelte
new file mode 100644
index 0000000..db09d58
--- /dev/null
+++ b/ui/src/routes/alarms/[kind]/[aid]/+page.svelte
@@ -0,0 +1,35 @@
+<script>
+ import {
+     Button,
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import { page } from '$app/stores';
+
+ function slugToTitle(slug) {
+     switch(slug) {
+         case "manuals":
+             return "Réveil manuel";
+         case "usuals":
+             return "Réveil habituel";
+         case "excepts":
+             return "Exception";
+     }
+ }
+</script>
+
+<Container fluid class="flex-fill">
+    <h2 class="mb-0">
+        {slugToTitle($page.params["kind"])} du ...
+    </h2>
+    {#if $page.params["kind"] == "manuals"}
+        manuals
+    {:else if $page.params["kind"] == "usuals"}
+        ususlas
+    {:else if $page.params["kind"] == "excepts"}
+        excepts
+    {/if}
+</Container>
diff --git a/ui/src/routes/alarms/[kind]/new/+page.svelte b/ui/src/routes/alarms/[kind]/new/+page.svelte
new file mode 100644
index 0000000..5185d6a
--- /dev/null
+++ b/ui/src/routes/alarms/[kind]/new/+page.svelte
@@ -0,0 +1,100 @@
+<script>
+ import {
+     Button,
+     Col,
+     Container,
+     Form,
+     FormGroup,
+     Input,
+     Label,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import { page } from '$app/stores';
+
+ function slugToTitle(slug) {
+     switch(slug) {
+         case "manuals":
+             return "Nouveau réveil manuel";
+         case "usuals":
+             return "Nouveau réveil habituel";
+         case "excepts":
+             return "Nouvelle exception";
+     }
+ }
+</script>
+
+<Container fluid class="flex-fill">
+    <Form>
+        <Button type="submit" color="link" class="d-block d-md-none float-end">
+            Ajouter
+        </Button>
+        <h2 class="mb-0">
+            {slugToTitle($page.params["kind"])}
+        </h2>
+        {#if $page.params["kind"] == "manuals"}
+            <FormGroup>
+                <Label for="exampleHour">Heure</Label>
+                <Input id="exampleHour" type="datetime-local" required />
+            </FormGroup>
+
+            <FormGroup>
+                <Label for="routineSelect">Routines</Label>
+                <Input type="select" name="select" id="routineSelect">
+                  <option>1</option>
+                  <option>2</option>
+                  <option>3</option>
+                  <option>4</option>
+                  <option>5</option>
+                </Input>
+            </FormGroup>
+        {:else if $page.params["kind"] == "usuals"}
+            <FormGroup>
+                <Label for="daySelect">Jour de la semaine</Label>
+                <Input type="select" id="daySelect" required>
+                  <option value="1">Lundi</option>
+                  <option value="2">Mardi</option>
+                  <option value="3">Mercredi</option>
+                  <option value="4">Jeudi</option>
+                  <option value="5">Vendredi</option>
+                  <option value="6">Samedi</option>
+                  <option value="0">Dimanche</option>
+                </Input>
+            </FormGroup>
+
+            <FormGroup>
+                <Label for="exampleHour">Heure</Label>
+                <Input id="exampleHour" type="time" required />
+            </FormGroup>
+
+            <FormGroup>
+                <Label for="routineSelect">Routines</Label>
+                <Input type="select" id="routineSelect">
+                  <option>1</option>
+                  <option>2</option>
+                  <option>3</option>
+                  <option>4</option>
+                  <option>5</option>
+                </Input>
+            </FormGroup>
+
+            <FormGroup>
+                <Input id="ignoreExceptions" type="checkbox" label="Ignorer les exceptions" />
+            </FormGroup>
+        {:else if $page.params["kind"] == "excepts"}
+            <FormGroup>
+                <Label for="exceptionStart">Date de début</Label>
+                <Input id="exceptionStart" type="date" required />
+            </FormGroup>
+            <FormGroup>
+                <Label for="exceptionEnd">Date de fin</Label>
+                <Input id="exceptionEnd" type="date" required />
+            </FormGroup>
+        {/if}
+
+        <Button type="submit" color="primary" class="d-none d-md-block">
+            Ajouter
+        </Button>
+    </Form>
+</Container>
diff --git a/ui/src/routes/history/+page.svelte b/ui/src/routes/history/+page.svelte
new file mode 100644
index 0000000..fa16dd8
--- /dev/null
+++ b/ui/src/routes/history/+page.svelte
@@ -0,0 +1,26 @@
+<script>
+ import {
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import CardStatAlarms from '../../components/CardStatAlarms.svelte';
+ import CardStatTimeAwaking from '../../components/CardStatTimeAwaking.svelte';
+ import CardStatRoutines from '../../components/CardStatRoutines.svelte';
+</script>
+
+<Container fluid class="flex-fill d-flex flex-column justify-content-center py-2">
+    <Row cols={{xs: 1, md: 2, lg: 3}}>
+        <Col class="mb-4">
+        <CardStatAlarms />
+        </Col>
+        <Col class="mb-4">
+        <CardStatTimeAwaking />
+        </Col>
+        <Col class="mb-4">
+        <CardStatRoutines />
+        </Col>
+    </Row>
+</Container>
diff --git a/ui/src/routes/musiks/+page.svelte b/ui/src/routes/musiks/+page.svelte
new file mode 100644
index 0000000..d9c0c4e
--- /dev/null
+++ b/ui/src/routes/musiks/+page.svelte
@@ -0,0 +1,24 @@
+<script>
+ import {
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import MusiksLastPlayedList from '../../components/MusiksLastPlayedList.svelte';
+ import TrackList from '../../components/TrackList.svelte';
+ import GongsList from '../../components/GongsList.svelte';
+</script>
+
+<Container fluid class="flex-fill d-flex flex-column py-2">
+    <Row>
+        <Col class="mb-4" md={8}>
+        <TrackList class="mb-4" />
+        <GongsList />
+        </Col>
+        <Col class="mb-4" md={4}>
+        <MusiksLastPlayedList />
+        </Col>
+    </Row>
+</Container>
diff --git a/ui/src/routes/musiks/gongs/+layout.svelte b/ui/src/routes/musiks/gongs/+layout.svelte
new file mode 100644
index 0000000..8c7884a
--- /dev/null
+++ b/ui/src/routes/musiks/gongs/+layout.svelte
@@ -0,0 +1,29 @@
+<script>
+ import {
+     Button,
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import GongsList from '../../../components/GongsList.svelte';
+</script>
+
+<div class="d-flex flex-fill flex-column">
+    <div class="d-flex flex-row justify-content-between d-block d-md-none">
+        <Button href="musiks" color="link" class="p-0">
+            <Icon name="chevron-left" /> Musiques
+        </Button>
+    </div>
+    <Container fluid class="flex-fill">
+        <Row class="mh-100 h-100">
+            <Col md={3} class="d-none d-md-block px-0 py-2" style="background: #e7e8e9">
+            <GongsList edit flush />
+            </Col>
+            <Col md={9} class="d-flex py-2">
+            <slot></slot>
+            </Col>
+        </Row>
+    </Container>
+</div>
diff --git a/ui/src/routes/musiks/gongs/+page.svelte b/ui/src/routes/musiks/gongs/+page.svelte
new file mode 100644
index 0000000..fdc4e8e
--- /dev/null
+++ b/ui/src/routes/musiks/gongs/+page.svelte
@@ -0,0 +1,17 @@
+<script>
+ import {
+     Container,
+     Icon,
+ } from 'sveltestrap';
+
+ import TrackList from '../../../components/TrackList.svelte';
+</script>
+
+<Container fluid class="py-2 d-none d-md-flex flex-column justify-content-center align-items-center">
+    <p class="fst-italic text-muted">
+        Choisissez la piste dans la liste.
+    </p>
+</Container>
+<Container fluid class="d-block d-md-none">
+    <TrackList edit />
+</Container>
diff --git a/ui/src/routes/musiks/gongs/[gid]/+page.svelte b/ui/src/routes/musiks/gongs/[gid]/+page.svelte
new file mode 100644
index 0000000..61e1517
--- /dev/null
+++ b/ui/src/routes/musiks/gongs/[gid]/+page.svelte
@@ -0,0 +1,3 @@
+<h2>
+    Gong
+</h2>
diff --git a/ui/src/routes/musiks/gongs/new/+page.svelte b/ui/src/routes/musiks/gongs/new/+page.svelte
new file mode 100644
index 0000000..fe74ecb
--- /dev/null
+++ b/ui/src/routes/musiks/gongs/new/+page.svelte
@@ -0,0 +1,3 @@
+<h2>
+    Nouveau gong
+</h2>
diff --git a/ui/src/routes/musiks/tracks/+layout.svelte b/ui/src/routes/musiks/tracks/+layout.svelte
new file mode 100644
index 0000000..e2494bf
--- /dev/null
+++ b/ui/src/routes/musiks/tracks/+layout.svelte
@@ -0,0 +1,29 @@
+<script>
+ import {
+     Button,
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import TrackList from '../../../components/TrackList.svelte';
+</script>
+
+<div class="d-flex flex-fill flex-column">
+    <div class="d-flex flex-row justify-content-between d-block d-md-none">
+        <Button href="musiks" color="link" class="p-0">
+            <Icon name="chevron-left" /> Musiques
+        </Button>
+    </div>
+    <Container fluid class="flex-fill">
+        <Row class="mh-100 h-100">
+            <Col md={3} class="d-none d-md-block px-0 py-2" style="background: #e7e8e9">
+            <TrackList edit flush />
+            </Col>
+            <Col md={9} class="d-flex py-2">
+            <slot></slot>
+            </Col>
+        </Row>
+    </Container>
+</div>
diff --git a/ui/src/routes/musiks/tracks/+page.svelte b/ui/src/routes/musiks/tracks/+page.svelte
new file mode 100644
index 0000000..fdc4e8e
--- /dev/null
+++ b/ui/src/routes/musiks/tracks/+page.svelte
@@ -0,0 +1,17 @@
+<script>
+ import {
+     Container,
+     Icon,
+ } from 'sveltestrap';
+
+ import TrackList from '../../../components/TrackList.svelte';
+</script>
+
+<Container fluid class="py-2 d-none d-md-flex flex-column justify-content-center align-items-center">
+    <p class="fst-italic text-muted">
+        Choisissez la piste dans la liste.
+    </p>
+</Container>
+<Container fluid class="d-block d-md-none">
+    <TrackList edit />
+</Container>
diff --git a/ui/src/routes/musiks/tracks/[tid]/+page.svelte b/ui/src/routes/musiks/tracks/[tid]/+page.svelte
new file mode 100644
index 0000000..f736dca
--- /dev/null
+++ b/ui/src/routes/musiks/tracks/[tid]/+page.svelte
@@ -0,0 +1,3 @@
+<h2>
+    Track
+</h2>
diff --git a/ui/src/routes/musiks/tracks/new/+page.svelte b/ui/src/routes/musiks/tracks/new/+page.svelte
new file mode 100644
index 0000000..ff4047f
--- /dev/null
+++ b/ui/src/routes/musiks/tracks/new/+page.svelte
@@ -0,0 +1,3 @@
+<h2>
+    Nouvelle musique
+</h2>
diff --git a/ui/src/routes/routines/+page.svelte b/ui/src/routes/routines/+page.svelte
new file mode 100644
index 0000000..da730e9
--- /dev/null
+++ b/ui/src/routes/routines/+page.svelte
@@ -0,0 +1,27 @@
+<script>
+ import {
+     Card,
+     Col,
+     Container,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ import CardRoutine from '../../components/CardRoutine.svelte';
+</script>
+
+<Container fluid class="flex-fill d-flex flex-column py-2">
+    <Row cols={{xs: 1, md: 2, lg: 3}}>
+        <Col class="mb-4">
+        <CardRoutine />
+        </Col>
+        <Col class="mb-4">
+        <Card
+            class="h-100 d-flex justify-content-center align-items-center fst-italic"
+            style="cursor: pointer; border-style: dashed;"
+        >
+            Ajouter une routine &hellip;
+        </Card>
+        </Col>
+    </Row>
+</Container>
diff --git a/ui/src/routes/settings/+page.svelte b/ui/src/routes/settings/+page.svelte
new file mode 100644
index 0000000..b2e9b28
--- /dev/null
+++ b/ui/src/routes/settings/+page.svelte
@@ -0,0 +1,66 @@
+<script>
+ import {
+     Container,
+     Form,
+     FormGroup,
+     Icon,
+     Input,
+     InputGroup,
+     InputGroupText,
+     Label,
+ } from 'sveltestrap';
+</script>
+
+<Container class="flex-fill d-flex flex-column py-2">
+    <h2>
+        Paramètres
+    </h2>
+    <Form>
+        <FormGroup>
+            <Label for="gongIntervals">Intervalle entre les gongs</Label>
+            <InputGroup>
+                <Input
+                    type="number"
+                    id="gongIntervals"
+                    placeholder="20"
+                />
+                <InputGroupText>min</InputGroupText>
+            </InputGroup>
+        </FormGroup>
+
+        <FormGroup>
+            <Label for="weatherDelay">Annonce météo après</Label>
+            <InputGroup>
+                <Input
+                    type="number"
+                    id="weatherDelay"
+                    placeholder="5"
+                />
+                <InputGroupText>min</InputGroupText>
+            </InputGroup>
+        </FormGroup>
+
+        <FormGroup>
+            <Label for="weatherRituel">Rituel pour l'annonce météo</Label>
+            <Input
+                type="select"
+                id="weatherRituel"
+            >
+                <option value="1">test</option>
+            </Input>
+        </FormGroup>
+
+        <FormGroup>
+            <Label for="greetingLanguage">Langue de salutation</Label>
+            <Input
+                type="select"
+                id="greetingLanguage"
+            >
+                <option value="fr_FR">Français</option>
+                <option value="en_US">Anglais</option>
+                <option value="es_ES">Espagnol</option>
+                <option value="de_DE">Allemand</option>
+            </Input>
+        </FormGroup>
+    </Form>
+</Container>