Most of the interface done

This commit is contained in:
nemunaire 2022-10-02 23:24:33 +02:00
commit be8ff3466a
32 changed files with 983 additions and 7 deletions

View file

@ -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>

View file

@ -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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -0,0 +1,3 @@
<h2>
Gong
</h2>

View file

@ -0,0 +1,3 @@
<h2>
Nouveau gong
</h2>

View 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>

View 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>

View file

@ -0,0 +1,3 @@
<h2>
Track
</h2>

View file

@ -0,0 +1,3 @@
<h2>
Nouvelle musique
</h2>

View 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 &hellip;
</Card>
</Col>
</Row>
</Container>

View 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>