Most of the interface done

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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>