cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-20 14:39:06 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style + ui changes

Browse Source
This commit is contained in:
cv
2021-03-25 15:38:20 +01:00
parent 395e5ebaed
commit 3681f7bab5
15 changed files with 358 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/components/countdown/Countdown.jsx
+10 -3
View File
@@ -13,11 +13,18 @@ function display(seconds) {
export default function Countdown({ time, small }) { export default function Countdown({ time, small }) {
const [counter, setCounter] = useState(time); const [counter, setCounter] = useState(time);
useEffect(() => {
console.log('setting time here');
setCounter(time);
}, [time]);
useEffect(() => { useEffect(() => {
counter > 0 && setTimeout(() => setCounter(counter - 1), 1000); counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);
}, [counter]); }, [counter]);
return <div return (
className={small ? styles.countdownClockSmall : styles.countdownClock} <div className={small ? styles.countdownClockSmall : styles.countdownClock}>
>{display(counter)}</div>; {display(counter)}
</div>
);
} }
src/common/components/countdown/Countdown.module.css
+4 -2
View File
@@ -14,6 +14,8 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-size: 6em; font-size: 6em;
text-align: center; text-align: center;
letter-spacing: 0.125em; letter-spacing: 0.1em;
line-height: 0.9; line-height: 0.9;
} font-weight: 600;
color: #333;
}
src/common/components/myProgressBar/MyProgressBar.module.css
+2 -2
View File
@@ -1,5 +1,5 @@
.progress { .progress {
padding: 6px; padding: 1vh;
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
@@ -8,7 +8,7 @@
} }
.progressBar { .progressBar {
height: 18px; height: 2vh;
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgb(145, 255, 191, 1) 0%, rgb(145, 255, 191, 1) 0%,
src/common/input/TimeInput.jsx
+31 -30
View File
@@ -1,35 +1,36 @@
import { Text } from '@chakra-ui/layout'; import { FormErrorMessage } from '@chakra-ui/form-control';
import { import { FormLabel } from '@chakra-ui/form-control';
NumberDecrementStepper, import { FormControl } from '@chakra-ui/form-control';
NumberIncrementStepper, import DatePicker from 'react-datepicker';
NumberInput, import { Field } from 'formik';
NumberInputField, import 'react-datepicker/dist/react-datepicker.css';
NumberInputStepper, import './timeInput.css';
} from '@chakra-ui/number-input';
import styles from './TimeInput.module.css';
export default function TimeInput(props) { export default function TimeInput(props) {
const { label, name, ...rest } = props;
return ( return (
<div className={styles.container}> <Field name={name}>
<Text className={styles.label}>{props.label}</Text> {({ field, form }) => {
<Text className={styles.label}>hour / min</Text> const { setFieldValue } = form;
<div className={styles.timeInput}> const { value } = field;
<NumberInput min={0} max={24} maxW={20} allowMouseWheel> return (
<NumberInputField /> <FormControl isInvalid={form.errors[name] && form.touched[name]}>
<NumberInputStepper> <FormLabel htmlFor={name}>{label}</FormLabel>
<NumberIncrementStepper /> <DatePicker
<NumberDecrementStepper /> id={name}
</NumberInputStepper> {...field}
</NumberInput> {...rest}
<div className={styles.spacer} /> showTimeSelect
<NumberInput min={0} max={59} maxW={20} allowMouseWheel> showTimeSelectOnly
<NumberInputField /> timeIntervals={15}
<NumberInputStepper> dateFormat='hh:mm'
<NumberIncrementStepper /> selected={value}
<NumberDecrementStepper /> onChange={(val) => setFieldValue(name, val)}
</NumberInputStepper> />
</NumberInput> <FormErrorMessage>{form.errors[name]}</FormErrorMessage>
</div> </FormControl>
</div> );
}}
</Field>
); );
} }
src/common/input/timeInput.css
+122
View File
@@ -0,0 +1,122 @@
.react-datepicker {
font-family: unset;
font-size: 0.9rem;
}
.react-datepicker-wrapper,
.react-datepicker__input-container {
display: block;
}
.react-datepicker-popper {
background-color: white;
}
.react-datepicker__input-container {
font-size: 1rem;
padding-left: 1rem;
padding-right: 1rem;
height: 2.5rem;
border-radius: 0.25rem;
border: 1px solid;
border-color: hsl(0,0%,80%);
}
.react-datepicker__input-container:hover {
border-color: hsl(0,0%,70%);
}
.react-datepicker__input-container:focus-within {
z-index: 1;
border-color: #3182ce;
box-shadow: 0 0 0 1px #3182ce;
}
.react-datepicker__input-container > input {
width: 100%;
height: 100%;
outline: 0;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 90px;
}
.react-datepicker__navigation--previous,
.react-datepicker__navigation--next {
height: 8px;
}
.react-datepicker__navigation--previous {
border-right-color: #cbd5e0;
}
.react-datepicker__navigation--previous:hover {
border-right-color: #a0aec0;
}
.react-datepicker__navigation--next {
border-left-color: #cbd5e0;
}
.react-datepicker__navigation--next:hover {
border-left-color: #a0aec0;
}
.react-datepicker__header {
background: #f7fafc;
}
.react-datepicker__header,
.react-datepicker__time-container {
border-color: #E2E8F0;
}
.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
font-size: inherit;
font-weight: 600;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
margin: 0 1px 0 0;
height: auto;
padding: 7px 10px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
background: #edf2f7;
}
.react-datepicker__day:hover {
background: #edf2f7;
}
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background: #3182ce;
font-weight: normal;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background: #2a69ac;
}
.react-datepicker__close-icon::after {
background-color: unset;
border-radius: unset;
font-size: 1.5rem;
font-weight: bold;
color: hsl(0,0%,80%);
height: 20px;
width: 20px;
}
.react-datepicker__close-icon::after:hover {
color: hsl(0,0%,70%)
}
src/features/control/PlaybackControl.jsx
+89 -13
View File
@@ -1,47 +1,123 @@
import { Button } from '@chakra-ui/button'; import { Button } from '@chakra-ui/button';
import style from './PlaybackControl.module.css'; import style from './PlaybackControl.module.css';
import Countdown from '../../common/components/countdown/Countdown'; import Countdown from '../../common/components/countdown/Countdown';
import { useState } from 'react';
import { clamp } from '../../app/utils';
import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
export default function PlaybackControl() { export default function PlaybackControl() {
const [time, setTime] = useState(15);
const [roll, setRoll] = useState(false);
const incrementTimer = (amount = 1) => {
const t = clamp(time + amount * 60, 0, 3600);
setTime(t);
};
const defProps = {
colorScheme: 'blackAlpha',
variant: 'outline',
};
const smallSize = 50;
const midSize = 100;
const bigSize = 120;
return ( return (
<div className={style.mainContainer}> <div className={style.mainContainer}>
<div className={style.timeContainer}> <div className={style.timeContainer}>
<div className={style.timer}> <div className={style.timer}>
<Countdown time={15} small /> <Countdown time={time} small />
</div> </div>
<Button width={50} colorScheme='blackAlpha' className={style.minu1}> {/* <Button
width={smallSize}
{...defProps}
className={style.minu1}
disabled={roll}
onClick={() => incrementTimer(-1)}
>
-1 -1
</Button> </Button>
<Button width={50} colorScheme='blackAlpha' className={style.plus1}> <Button
width={smallSize}
{...defProps}
className={style.plus1}
disabled={roll}
onClick={() => incrementTimer()}
>
+1 +1
</Button> </Button>
<Button width={50} colorScheme='blackAlpha' className={style.minu5}> <Button
width={smallSize}
{...defProps}
className={style.minu5}
disabled={roll}
onClick={() => incrementTimer(5)}
>
-5 -5
</Button> </Button>
<Button width={50} colorScheme='blackAlpha' className={style.plus5}> <Button
width={smallSize}
{...defProps}
className={style.plus5}
disabled={roll}
onClick={() => incrementTimer(5)}
>
+5 +5
</Button> </Button> */}
</div> </div>
<div className={style.playbackContainer}> <div className={style.playbackContainer}>
<Button width={120} colorScheme='green' className={style.start}> <Button
width={bigSize}
colorScheme='green'
className={style.start}
disabled={roll}
>
Start Start
</Button> </Button>
<Button width={120} colorScheme='orange' className={style.pause}> <Button
width={bigSize}
colorScheme='orange'
className={style.pause}
disabled={roll}
>
Pause Pause
</Button> </Button>
<Button width={120} colorScheme='yellow' className={style.reset}> {/* <Button
width={bigSize}
colorScheme='yellow'
className={style.reset}
disabled={roll}
>
Reset Reset
</Button> </Button> */}
</div> </div>
<div className={style.trackContainer}> <div className={style.trackContainer}>
<Button width={100} colorScheme='blackAlpha' className={style.prev}> <Button
width={bigSize}
{...defProps}
leftIcon={<ArrowBackIcon />}
className={style.prev}
disabled={roll}
>
Prev Prev
</Button> </Button>
<Button width={100} colorScheme='blackAlpha' className={style.next}> <Button
width={bigSize}
{...defProps}
rightIcon={<ArrowForwardIcon />}
className={style.next}
disabled={roll}
>
Next Next
</Button> </Button>
<Button width={100} colorScheme='blackAlpha' className={style.reset}> <Button
width={bigSize}
colorScheme='blue'
className={style.reset}
onClick={() => setRoll(!roll)}
>
Roll Roll
</Button> </Button>
</div> </div>
src/features/editors/Editor.jsx
+18 -24
View File
@@ -27,17 +27,17 @@ export default function Editor() {
return ( return (
<Grid <Grid
templateRows='60% 40%' templateRows='1fr 1fr 1fr'
templateColumns='repeat(3, 1fr)' templateColumns='1fr 25vw 25vw 5vw'
gap={5} gap={5}
className={styles.mainContainer} className={styles.mainContainer}
> >
<GridItem rowSpan={2} colSpan={1}> <GridItem rowSpan={3}>
<Box className={styles.editor} borderRadius='0.5em'> <Box className={styles.editor} borderRadius='0.5em'>
<Heading style={{ paddingBottom: '0.25em' }}>List Events</Heading> <Heading style={{ paddingBottom: '0.25em' }}>Event List</Heading>
<NumberedText <NumberedText
number={1} number={1}
text={'Select event or click Add Event to create new'} text={'Manage and select event to run'}
/> />
<div className={styles.cornerButtonContainer}> <div className={styles.cornerButtonContainer}>
<Button <Button
@@ -57,43 +57,37 @@ export default function Editor() {
</Box> </Box>
</GridItem> </GridItem>
<GridItem colStart={2} rowSpan={1} colSpan={1}> <GridItem colStart={2} rowStart={2} rowSpan={2} colSpan={2}>
<Box className={styles.editor} borderRadius='0.5em'>
<Heading style={{ paddingBottom: '0.25em' }}>Event Details</Heading>
<NumberedText number={2} text={'Edit event info'} />
<div className={styles.content}>
<EventForm formMode={formMode} setFormMode={setFormMode} />
</div>
</Box>
</GridItem>
<GridItem colStart={3} rowStart={1} rowSpan={1} colSpan={1}>
<Box className={styles.editor} borderRadius='0.5em' overflowX='auto'> <Box className={styles.editor} borderRadius='0.5em' overflowX='auto'>
<Heading style={{ paddingBottom: '0.25em' }}>Screens</Heading> <Heading style={{ paddingBottom: '0.25em' }}>Preview Displays</Heading>
<NumberedText number={3} text={'Preview layout'} /> <NumberedText number={4} text={'Realtime screen preview'} />
<div className={styles.content}> <div className={styles.content}>
{/* <PreviewContainer data={selectedData} /> */} <PreviewContainer />
</div> </div>
</Box> </Box>
</GridItem> </GridItem>
<GridItem colStart={2} rowStart={2} rowSpan={1} colSpan={1}> <GridItem colStart={2} rowStart={1} rowSpan={1} colSpan={1}>
<Box className={styles.editor} borderRadius='0.5em'> <Box className={styles.editor} borderRadius='0.5em'>
<Heading style={{ paddingBottom: '0.25em' }}>Screen Messages</Heading> <Heading style={{ paddingBottom: '0.25em' }}>Display Messages</Heading>
<NumberedText number={3} text={'Show / Hide messages on screens'} /> <NumberedText number={2} text={'Show realtime messages on separate screen types'} />
<div className={styles.content}></div> <div className={styles.content}></div>
<MessageForm /> <MessageForm />
</Box> </Box>
</GridItem> </GridItem>
<GridItem colStart={3} rowStart={2} rowSpan={1} colSpan={1}> <GridItem colStart={3} rowStart={1}>
<Box className={styles.editor} borderRadius='0.5em'> <Box className={styles.editor} borderRadius='0.5em'>
<Heading style={{ paddingBottom: '0.25em' }}>Time Control</Heading> <Heading style={{ paddingBottom: '0.25em' }}>Time Control</Heading>
<NumberedText number={0} text={'Control Timer'} /> <NumberedText number={3} text={'Control Timer'} />
<div className={styles.content}></div> <div className={styles.content}></div>
<PlaybackControl /> <PlaybackControl />
</Box> </Box>
</GridItem> </GridItem>
<GridItem colStart={4} rowSpan={3}>
<Box className={styles.editor} borderRadius='0.5em'>S</Box>
</GridItem>
</Grid> </Grid>
); );
} }
src/features/editors/Editor.module.css
+12 -5
View File
@@ -6,20 +6,27 @@
.editor { .editor {
height: 100%; height: 100%;
margin-top: 2.5vh; margin-top: 1.5vh;
background-color: #fcfcfa; background-color: #fcfcfa;
padding: 2em; padding: 1em 1.5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.content { .content {
padding-top: 2em; padding-top: 1.5em;
} }
.buttonContainer { .cornerButtonContainer {
padding-top: 2em; position: relative;
top: -4.5em;
display: flex;
justify-content: flex-end;
}
.buttonContainer {
padding-bottom: 2em;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
src/features/editors/list/EventList.jsx
+4 -3
View File
@@ -3,10 +3,10 @@ import { useContext } from 'react';
import { EventContext } from '../../../app/context/eventContext'; import { EventContext } from '../../../app/context/eventContext';
import { EventListContext } from '../../../app/context/eventListContext'; import { EventListContext } from '../../../app/context/eventListContext';
import EventListItem from './EventListItem'; import EventListItem from './EventListItem';
import { sortByDate } from './listUtils'; import { sortByDate, sortByNumber } from './listUtils';
export default function EventList(props) { export default function EventList(props) {
const [events, ] = useContext(EventListContext); const [events] = useContext(EventListContext);
const [event, setEvent] = useContext(EventContext); const [event, setEvent] = useContext(EventContext);
const handleSetSelected = (id) => { const handleSetSelected = (id) => {
@@ -21,6 +21,7 @@ export default function EventList(props) {
<Thead> <Thead>
<Tr> <Tr>
<Th>Event Title</Th> <Th>Event Title</Th>
<Th>Event Subtitle</Th>
<Th>Presenter Name</Th> <Th>Presenter Name</Th>
<Th>Time Start</Th> <Th>Time Start</Th>
<Th>Time End</Th> <Th>Time End</Th>
@@ -28,7 +29,7 @@ export default function EventList(props) {
</Tr> </Tr>
</Thead> </Thead>
<Tbody> <Tbody>
{sortByDate(events).map((e) => ( {sortByNumber(events).map((e) => (
<EventListItem <EventListItem
key={e.id} key={e.id}
data={e} data={e}
src/features/editors/list/EventListItem.jsx
+19 -3
View File
@@ -2,10 +2,11 @@ import { IconButton } from '@chakra-ui/button';
import { Td, Tr } from '@chakra-ui/table'; import { Td, Tr } from '@chakra-ui/table';
import { format } from 'date-fns'; import { format } from 'date-fns';
import { timeFormat } from '../../../common/dateConfig'; import { timeFormat } from '../../../common/dateConfig';
import { ChevronRightIcon } from '@chakra-ui/icons'; import { LockIcon, ChevronRightIcon } from '@chakra-ui/icons';
export default function EventListItem(props) { export default function EventListItem(props) {
const isSelected = props.selectedId === props.data.id; const isSelected = props.selectedId === props.data.id;
console.log(props);
return ( return (
<Tr <Tr
style={ style={
@@ -15,9 +16,24 @@ export default function EventListItem(props) {
} }
> >
<Td>{props.data.title}</Td> <Td>{props.data.title}</Td>
<Td>{props.data.subtitle}</Td>
<Td>{props.data.presenter}</Td> <Td>{props.data.presenter}</Td>
<Td>{format(props.data.timeStart, timeFormat)}</Td> <Td>
<Td>{format(props.data.timeEnd, timeFormat)}</Td> {props.data.timeStart && format(props.data.timeStart, timeFormat)}
</Td>
<Td>{props.data?.timeEnd && format(props.data?.timeEnd, timeFormat)}</Td>{' '}
<Td>{props.data?.timerDuration}</Td>
<Td>
<IconButton
colorScheme='teal'
variant={isSelected ? 'solid' : 'outline'}
onClick={() => props.setSelected(props.data.id)}
disabled={props.disabled}
size='sm'
aria-label='Select Item'
icon={<LockIcon />}
/>
</Td>
<Td> <Td>
<IconButton <IconButton
colorScheme='teal' colorScheme='teal'
src/features/editors/list/listUtils.js
+7
View File
@@ -4,3 +4,10 @@ export const sortByDate = (arr) => {
}; };
return arr.sort(sorter); return arr.sort(sorter);
}; };
export const sortByNumber = (arr) => {
const sorter = (a, b) => {
return a.order - b.order;
};
return arr.sort(sorter);
};
src/features/form/EventForm.jsx
+20 -11
View File
@@ -12,6 +12,8 @@ import styles from './EventForm.module.css';
import 'react-datepicker/dist/react-datepicker-cssmodules.css'; import 'react-datepicker/dist/react-datepicker-cssmodules.css';
import ReactDatePicker from 'react-datepicker'; import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css'; import 'react-datepicker/dist/react-datepicker.css';
import { Wrap } from '@chakra-ui/layout';
import { Flex } from '@chakra-ui/layout';
const sampleInitialValues = { const sampleInitialValues = {
title: '', title: '',
@@ -103,16 +105,19 @@ export default function EventForm(props) {
label='Event Title' label='Event Title'
placeholder='eg. Is the Internet a fad?' placeholder='eg. Is the Internet a fad?'
/> />
<ChakraInput <Flex direction='row'>
name='subtitle' <ChakraInput
label='Event Subtitle' name='subtitle'
placeholder='eg. After tea thoughts' label='Event Subtitle'
/> placeholder='eg. After tea thoughts'
<ChakraInput />
name='presenter' <ChakraInput
label='Presenter Name' name='presenter'
placeholder='eg. Duran Duran' label='Presenter Name'
/> placeholder='eg. Duran Duran'
/>
</Flex>
{/* <TimeInput name='timeStart' label='Scheduled Start' /> */} {/* <TimeInput name='timeStart' label='Scheduled Start' /> */}
<ChakraNumberInput <ChakraNumberInput
name='timerDuration' name='timerDuration'
@@ -123,7 +128,11 @@ export default function EventForm(props) {
maxW={24} maxW={24}
/> />
<DatePicker /> <Flex direction='row'>
<TimeInput name='timeStart' label='Scheduled Start' />
<TimeInput name='timeEnd' label='Scheduled End' />
</Flex>
<div className={styles.buttons}> <div className={styles.buttons}>
<Button <Button
variant='outline' variant='outline'
src/features/viewers/PreviewContainer.jsx
+12 -9
View File
@@ -6,24 +6,27 @@ export default function PreviewContainer() {
return ( return (
<div className={styles.previewContainer}> <div className={styles.previewContainer}>
<div className={styles.previewItem}> <div className={styles.previewItem}>
<div className={styles.preview}> <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
<AspectRatio maxW='250' ratio={16/10}> <iframe src='http://localhost:3000/'></iframe>
<iframe src='http://localhost:3000/'></iframe> </AspectRatio>
</AspectRatio>
{/* <DefaultPresenter data={props.data} /> */}
</div>
<div className={styles.label}>Default Presenter</div> <div className={styles.label}>Default Presenter</div>
</div> </div>
<div className={styles.previewItem}> <div className={styles.previewItem}>
<div className={styles.preview}></div> <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
<iframe src='http://localhost:3000/'></iframe>
</AspectRatio>
<div className={styles.label}>Audience</div> <div className={styles.label}>Audience</div>
</div> </div>
<div className={styles.previewItem}> <div className={styles.previewItem}>
<div className={styles.preview}></div> <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
<iframe src='http://localhost:3000/'></iframe>
</AspectRatio>
<div className={styles.label}>Stage Manager</div> <div className={styles.label}>Stage Manager</div>
</div> </div>
<div className={styles.previewItem}> <div className={styles.previewItem}>
<div className={styles.preview}></div> <AspectRatio maxW='300' ratio={16 / 9} className={styles.preview}>
<iframe src='http://localhost:3000/'></iframe>
</AspectRatio>
<div className={styles.label}>Lower third</div> <div className={styles.label}>Lower third</div>
</div> </div>
</div> </div>
src/features/viewers/PreviewContainer.module.css
+4 -5
View File
@@ -3,19 +3,18 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-content: center;
gap: 1em; gap: 1em;
} }
.previewItem { .previewItem {
width: 47%; width: 45%;
} }
.preview { .preview {
aspect-ratio: 16 / 9; margin: auto;
border-color: #222;
background-color: #888;
} }
.label { .label {
padding: 0.1em; padding: 0.1em 4em;
} }
src/features/viewers/viewers.css
+4 -4
View File
@@ -1,12 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
.presenter { .presenter {
font-size: 24px; font-size: 1vh;
height: 100%; height: 100%;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em; padding-left: 4vh;
} }
.presentationTitle { .presentationTitle {
@@ -20,7 +20,7 @@
} }
.userMessage { .userMessage {
font-size: 10em; font-size: 10vw;
text-align: center; text-align: center;
} }
@@ -38,4 +38,4 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }