Most of the interface done
This commit is contained in:
parent
4eea7769ff
commit
be8ff3466a
32 changed files with 983 additions and 7 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
26
ui/src/routes/alarms/+page.svelte
Normal file
26
ui/src/routes/alarms/+page.svelte
Normal file
|
|
@ -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>
|
||||
44
ui/src/routes/alarms/[kind]/+layout.svelte
Normal file
44
ui/src/routes/alarms/[kind]/+layout.svelte
Normal file
|
|
@ -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>
|
||||
42
ui/src/routes/alarms/[kind]/+page.svelte
Normal file
42
ui/src/routes/alarms/[kind]/+page.svelte
Normal file
|
|
@ -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>
|
||||
35
ui/src/routes/alarms/[kind]/[aid]/+page.svelte
Normal file
35
ui/src/routes/alarms/[kind]/[aid]/+page.svelte
Normal file
|
|
@ -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>
|
||||
100
ui/src/routes/alarms/[kind]/new/+page.svelte
Normal file
100
ui/src/routes/alarms/[kind]/new/+page.svelte
Normal file
|
|
@ -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>
|
||||
26
ui/src/routes/history/+page.svelte
Normal file
26
ui/src/routes/history/+page.svelte
Normal file
|
|
@ -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>
|
||||
24
ui/src/routes/musiks/+page.svelte
Normal file
24
ui/src/routes/musiks/+page.svelte
Normal file
|
|
@ -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>
|
||||
29
ui/src/routes/musiks/gongs/+layout.svelte
Normal file
29
ui/src/routes/musiks/gongs/+layout.svelte
Normal file
|
|
@ -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>
|
||||
17
ui/src/routes/musiks/gongs/+page.svelte
Normal file
17
ui/src/routes/musiks/gongs/+page.svelte
Normal file
|
|
@ -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>
|
||||
3
ui/src/routes/musiks/gongs/[gid]/+page.svelte
Normal file
3
ui/src/routes/musiks/gongs/[gid]/+page.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h2>
|
||||
Gong
|
||||
</h2>
|
||||
3
ui/src/routes/musiks/gongs/new/+page.svelte
Normal file
3
ui/src/routes/musiks/gongs/new/+page.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h2>
|
||||
Nouveau gong
|
||||
</h2>
|
||||
29
ui/src/routes/musiks/tracks/+layout.svelte
Normal file
29
ui/src/routes/musiks/tracks/+layout.svelte
Normal file
|
|
@ -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>
|
||||
17
ui/src/routes/musiks/tracks/+page.svelte
Normal file
17
ui/src/routes/musiks/tracks/+page.svelte
Normal file
|
|
@ -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>
|
||||
3
ui/src/routes/musiks/tracks/[tid]/+page.svelte
Normal file
3
ui/src/routes/musiks/tracks/[tid]/+page.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h2>
|
||||
Track
|
||||
</h2>
|
||||
3
ui/src/routes/musiks/tracks/new/+page.svelte
Normal file
3
ui/src/routes/musiks/tracks/new/+page.svelte
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<h2>
|
||||
Nouvelle musique
|
||||
</h2>
|
||||
27
ui/src/routes/routines/+page.svelte
Normal file
27
ui/src/routes/routines/+page.svelte
Normal file
|
|
@ -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 …
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
66
ui/src/routes/settings/+page.svelte
Normal file
66
ui/src/routes/settings/+page.svelte
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue