feat(wip): scheduler styling

This commit is contained in:
karishmas6
2024-09-12 22:27:32 +05:30
parent ce8344a1be
commit a09841372b

View File

@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { GenericModal } from "../atoms/GenericModal";
import { MenuItem, TextField, Typography } from "@mui/material";
import { MenuItem, TextField, Typography, Box } from "@mui/material";
import { Dropdown } from "../atoms/DropdownMui";
import Button from "@mui/material/Button";
import { modalStyle } from "./AddWhereCondModal";
@@ -38,19 +38,22 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
onClose={handleClose}
modalStyle={modalStyle}
>
<div style={{
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
marginLeft: '65px',
padding: '20px',
'& > *': { marginBottom: '20px' },
}}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
<Typography>Run once every</Typography>
<Typography variant="h6">Schedule Settings</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Typography sx={{ marginRight: '10px' }}>Run once every</Typography>
<TextField
type="number"
value={settings.runEvery}
onChange={(e) => handleChange('runEvery', parseInt(e.target.value))}
style={{ width: '60px', margin: '0 10px' }}
sx={{ width: '60px', marginRight: '10px' }}
/>
<Dropdown
label="unit"
@@ -64,10 +67,10 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
<MenuItem value="weeks">weeks</MenuItem>
<MenuItem value="months">months</MenuItem>
</Dropdown>
</div>
</Box>
<div style={{ marginBottom: '15px' }}>
<Typography>Start from</Typography>
<Box sx={{ width: '100%' }}>
<Typography sx={{ marginBottom: '5px' }}>Start from</Typography>
<Dropdown
label="start from"
id="startFrom"
@@ -82,36 +85,36 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose }: Sche
<MenuItem value="Saturday">Saturday</MenuItem>
<MenuItem value="Sunday">Sunday</MenuItem>
</Dropdown>
</div>
</Box>
<div style={{ marginBottom: '15px' }}>
<Typography>At around</Typography>
<TextField
type="time"
value={settings.atTime}
onChange={(e) => handleChange('atTime', e.target.value)}
/>
</div>
<Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
<Box sx={{ marginRight: '20px' }}>
<Typography sx={{ marginBottom: '5px' }}>At around</Typography>
<TextField
type="time"
value={settings.atTime}
onChange={(e) => handleChange('atTime', e.target.value)}
/>
</Box>
<Box>
<Typography sx={{ marginBottom: '5px' }}>Timezone</Typography>
<Dropdown
label="timezone"
id="timezone"
value={settings.timezone}
handleSelect={(e) => handleChange('timezone', e.target.value)}
>
<MenuItem value="UTC">UTC</MenuItem>
<MenuItem value="America/New_York">America/New_York</MenuItem>
<MenuItem value="Europe/London">Europe/London</MenuItem>
<MenuItem value="Asia/Tokyo">Asia/Tokyo</MenuItem>
<MenuItem value="Asia/Kolkata">Asia/Kolkata</MenuItem>
</Dropdown>
</Box>
</Box>
<div style={{ marginBottom: '15px' }}>
<Typography>Timezone</Typography>
<Dropdown
label="timezone"
id="timezone"
value={settings.timezone}
handleSelect={(e) => handleChange('timezone', e.target.value)}
>
<MenuItem value="UTC">UTC</MenuItem>
<MenuItem value="America/New_York">America/New_York</MenuItem>
<MenuItem value="Europe/London">Europe/London</MenuItem>
<MenuItem value="Asia/Tokyo">Asia/Tokyo</MenuItem>
<MenuItem value="Asia/Kolkata">Asia/Kolkata</MenuItem>
{/* Add more timezone options as needed */}
</Dropdown>
</div>
<Button onClick={() => handleStart(settings)}>Start</Button>
</div>
<Button variant="contained" onClick={() => handleStart(settings)}>Start</Button>
</Box>
</GenericModal>
);
}