Add basic Availibility screen

This commit is contained in:
rui hildt 2020-06-03 11:14:04 +02:00
parent 27e0889737
commit fe1dafae3c
4 changed files with 169 additions and 1 deletions

View File

@ -0,0 +1,9 @@
import React from 'react'
export default function IntervalSelector() {
return (
<div>
It's empty for now
</div>
)
}

View File

@ -4,11 +4,13 @@ import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Schedule from './Schedule/Schedule';
import Availability from './Availability/Availability';
import Login from './Login';
import Register from './Register';
const titles = {
schedule: 'Schedule a meeting',
availability: 'Add you availability',
dashboard: 'Dashboard',
login: 'Login',
register: 'Registration',
@ -20,6 +22,12 @@ export default function App() {
<Router>
<Switch>
<Route path='/' exact>
<Availability title={titles.availability} />
</Route>
<Route path='/availability'>
<Availability title={titles.availability} />
</Route>
<Route path='/schedule'>
<Schedule title={titles.schedule} />
</Route>
<Route path='/dashboard'>

View File

@ -0,0 +1,123 @@
import React, { useState } from 'react';
import {
Panel,
Form,
FormControl,
ControlLabel,
Button,
ButtonGroup,
Message,
FormGroup,
} from 'rsuite';
import { DateTime } from 'luxon';
import NavBar from '../../components/Navbar/NavBar';
import TimezonePicker from '../../components/General/TimezonePicker';
import IntervalSelector from '../../components/Availability/IntervalSelector';
import './Availability.less';
const eventsList = [
{
start: '2020-06-10',
display: 'background',
},
{
start: '2020-06-11',
display: 'background',
},
{
start: '2020-06-12',
display: 'background',
},
{
start: '2020-06-13',
display: 'background',
},
];
export default function Availability({ title }) {
// const [eventsList, setEventsList] = useState([]);
const [availability, setAvailability] = useState([]);
const handleClear = () => {
setAvailability([]);
};
const handleSelect = () => {
console.log('Congrats, you have selected!');
};
return (
<>
<NavBar title={title} />
<Panel style={containerStyle}>
<Form className={'av-container'}>
<div className={'av-details'}>
<FormGroup>
<ControlLabel>Earliest time</ControlLabel>
<FormControl name='earliest-time' type='text' />
</FormGroup>
<FormGroup>
<ControlLabel>Latest time</ControlLabel>
<FormControl name='latest-time' type='text' />
</FormGroup>
<FormGroup className='av-timezone'>
<ControlLabel>Timezone</ControlLabel>
<TimezonePicker />
</FormGroup>
<div className='av-controls'>
<ButtonGroup justified>
<Button
appearance='ghost'
block
size='lg'
disabled={availability.length === 0}
onClick={() => handleClear()}
>
Clear selection
</Button>
<Button
appearance='primary'
size='lg'
block
disabled={availability.length === 0}
>
Save your availability
</Button>
</ButtonGroup>
</div>
</div>
<div className={'interval-selector'}>
<Message
showIcon
type='info'
description='Select your availibility on the calendar.'
/>
<IntervalSelector
eventsList={eventsList}
handleSelect={handleSelect}
handleClear={handleClear}
/>
</div>
</Form>
</Panel>
</>
);
}
// Convert events to Luxon Datetime objects
const eventsToDates = (events) => {
let dates = [];
events.forEach((event) => {
dates.push(DateTime.fromFormat(event.start, 'yyyy-MM-dd'));
});
return dates;
};
const containerStyle = {
// TODO Move to a .less file
maxWidth: '1200px',
margin: '30px auto',
backgroundColor: 'rgba(255,255,255,0.6)',
};

View File

@ -0,0 +1,28 @@
.av-container {
display: grid;
grid-template-columns: 6fr 3fr;
grid-template-rows: 1fr;
grid-template-areas:
'selector details';
column-gap: 2em;
row-gap: 2em;
grid-column-gap: 2em;
grid-row-gap: 2em;
}
.av-details {
grid-area: details;
margin: 1em 0 3em 0;
}
.interval-selector {
grid-area: selector;
margin: 1em 0 3em 0;
}
// Fix button alignment bug
// TODO Check if still needed
.rs-btn-block + .rs-btn-block {
margin-top: unset;
}