Most of the interface done
This commit is contained in:
parent
4eea7769ff
commit
be8ff3466a
32 changed files with 983 additions and 7 deletions
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue