vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #865 from getmaxun/edit-page

Browse Source 
feat: main layout revamp
This commit is contained in:
Karishma
2025-11-05 23:18:48 +05:30
committed by GitHub
parent bf9679e9ea 5a18f61115
commit 674ce9ab87
8 changed files with 152 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/api/ApiKey.tsx
View File

@@ -26,7 +26,8 @@ const Container = styled(Box)`
flex-direction: column;
align-items: center;
margin-top: 50px;
margin-left: 50px;
margin-left: 70px;
margin-right: 70px;
`;
const ApiKeyManager = () => {
@@ -108,7 +109,7 @@ const ApiKeyManager = () => {
return (
<Container sx={{ alignSelf: 'flex-start' }}>
<Typography variant="body1" sx={{ marginTop: '10px', marginBottom: '40px' }}>
<Typography variant="body1" sx={{ marginBottom: '40px' }}>
Start by creating an API key below. Then,
<a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
test your API
@@ -139,7 +140,7 @@ const ApiKeyManager = () => {
<TableRow>
<TableCell>{apiKeyName}</TableCell>
<TableCell>
<Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
<Box sx={{ fontFamily: 'monospace', width: '20ch' }}>
{showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
</Box>
</TableCell>
@@ -174,6 +175,5 @@ const ApiKeyManager = () => {
)}
</Container>
);
};
}
export default ApiKeyManager;

2
src/components/dashboard/MainMenu.tsx
View File

@@ -72,7 +72,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
<Paper
sx={{
height: '100%',
width: '250px',
width: '230px',
backgroundColor: theme.palette.background.paper,
paddingTop: '0.5rem',
color: defaultcolor,

88
src/components/proxy/ProxyForm.tsx
View File

@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
}, []);
return (
<>
<FormContainer>
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
<Box sx={{
display: 'flex',
gap: 4,
p: 5,
width: '100%',
maxWidth: '100%',
boxSizing: 'border-box'
}}>
<Box sx={{
flex: 1,
minWidth: 0,
maxWidth: 600
}}>
<Typography variant="h6" gutterBottom component="div">
{t('proxy.title')}
</Typography>
<Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}>
<Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
<Tab label={t('proxy.tab_standard')} />
</Tabs>
{tabIndex === 0 && (
isProxyConfigured ? (
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
<Box sx={{ width: '100%', mt: 1 }}>
<TableContainer component={Paper} sx={{ mb: 2 }}>
<Table>
<TableHead>
<TableRow>
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
<Button variant="outlined" color="primary" onClick={testProxy}>
{t('proxy.test_proxy')}
</Button>
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ ml: 1 }}>
{t('proxy.remove_proxy')}
</Button>
</Box>
) : (
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}>
<FormControl>
<Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
<Box sx={{ mb: 2 }}>
<TextField
label={t('proxy.server_url')}
name="server_url"
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
</span>
}
/>
</FormControl>
<FormControl>
</Box>
<Box sx={{ mb: 2 }}>
<FormControlLabel
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
label={t('proxy.requires_auth')}
/>
</FormControl>
</Box>
{requiresAuth && (
<>
<FormControl>
<Box sx={{ mb: 2 }}>
<TextField
label={t('proxy.username')}
name="username"
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
error={!!errors.username}
helperText={errors.username || ''}
/>
</FormControl>
<FormControl>
</Box>
<Box sx={{ mb: 2 }}>
<TextField
label={t('proxy.password')}
name="password"
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
error={!!errors.password}
helperText={errors.password || ''}
/>
</FormControl>
</Box>
</>
)}
<Button
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
</Button>
</Box>
))}
</FormContainer>
</Box>
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}>
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
<br />
<b>{t('proxy.alert.right_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://proxy.com:1337
<br />
{t('proxy.alert.username')} myusername
<br />
{t('proxy.alert.password')} mypassword
<br />
<br />
<b>{t('proxy.alert.wrong_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
</Alert>
</>
{/* Instructions Section */}
<Box sx={{
flex: 1,
minWidth: 0,
maxWidth: 600
}}>
<Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
<br />
<b>{t('proxy.alert.right_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://proxy.com:1337
<br />
{t('proxy.alert.username')} myusername
<br />
{t('proxy.alert.password')} mypassword
<br />
<br />
<b>{t('proxy.alert.wrong_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
</Alert>
</Box>
</Box>
);
};
export default ProxyForm;

23
src/components/robot/pages/RobotConfigPage.tsx
View File

@@ -64,11 +64,10 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
margin: '50px auto',
display: 'flex',
flexDirection: 'column',
width: '1000px',
height: '100%',
overflowY: 'auto', // Allow scrolling if content exceeds height
width: '100%',
height: 'auto',
boxSizing: 'border-box'
}}>
{/* Header Section - Fixed Position */}
<Box sx={{
display: 'flex',
alignItems: 'center',
@@ -117,32 +116,29 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
</Box>
<Divider sx={{ mb: 4, flexShrink: 0 }} />
{/* Content Section */}
<Box sx={{
flex: 1,
display: 'flex',
flexDirection: 'column',
minHeight: 0,
mt: 2,
mb: 3,
mt: 1.8,
mb: 5,
}}>
{children}
</Box>
{/* Action Buttons */}
{(showSaveButton || showCancelButton || onBackToSelection) && (
<Box
sx={{
display: 'flex',
justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
gap: 2,
pt: 3, // Reduce padding top to minimize space above
pt: 3,
borderTop: `1px solid ${theme.palette.divider}`,
flexShrink: 0,
width: '100%',
}}
>
{/* Left side - Back to Selection button */}
{onBackToSelection && (
<Button
variant="outlined"
@@ -157,7 +153,6 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
</Button>
)}
{/* Right side - Save/Cancel buttons */}
<Box sx={{ display: 'flex', gap: 2 }}>
{showCancelButton && (
<Button
@@ -165,9 +160,7 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
onClick={handleBack}
disabled={isLoading}
sx={{
color: '#ff00c3 !important',
borderColor: '#ff00c3 !important',
backgroundColor: 'white !important',
backgroundColor: 'inherit !important',
}} >
{cancelButtonText || t("buttons.cancel")}
</Button>
@@ -197,4 +190,4 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
)}
</Box>
);
};
}

27
src/components/robot/pages/ScheduleSettingsPage.tsx
View File

@@ -7,7 +7,6 @@ import {
Box,
Button,
} from "@mui/material";
import { Schedule } from "@mui/icons-material";
import { Dropdown } from "../../ui/DropdownMui";
import { validMomentTimezones } from "../../../constants/const";
import { useGlobalInfoStore } from "../../../context/globalInfo";
@@ -188,8 +187,8 @@ export const ScheduleSettingsPage = ({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
"& > *": { marginBottom: "20px" },
marginTop: "-20px",
gap: 3,
width: "100%",
}}
>
<>
@@ -215,7 +214,7 @@ export const ScheduleSettingsPage = ({
{t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
{schedule.timezone} {t("schedule_settings.timezone")}
</Typography>
<Box mt={2} display="flex" justifyContent="space-between">
<Box sx={{ mt: 2, width: "100%" }}>
<Button
onClick={deleteRobotSchedule}
variant="outlined"
@@ -231,7 +230,7 @@ export const ScheduleSettingsPage = ({
) : (
<>
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginRight: "10px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.labels.run_once_every")}
</Typography>
<TextField
@@ -263,7 +262,7 @@ export const ScheduleSettingsPage = ({
</Box>
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
? t("schedule_settings.labels.start_from_label")
: t("schedule_settings.labels.start_from_label")}
@@ -288,7 +287,7 @@ export const ScheduleSettingsPage = ({
{settings.runEveryUnit === "MONTHS" && (
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.labels.on_day_of_month")}
</Typography>
<TextField
@@ -305,10 +304,10 @@ export const ScheduleSettingsPage = ({
{["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Box sx={{ marginRight: "20px" }}>
<Typography sx={{ marginBottom: "5px" }}>
{t("schedule_settings.labels.in_between")}
</Typography>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.labels.in_between")}
</Typography>
<Box sx={{ display: "flex", gap: 1 }}>
<TextField
type="time"
value={settings.atTimeStart}
@@ -329,7 +328,7 @@ export const ScheduleSettingsPage = ({
</Box>
) : (
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.at_around")}
</Typography>
<TextField
@@ -344,7 +343,7 @@ export const ScheduleSettingsPage = ({
)}
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
<Typography sx={{ marginRight: "10px" }}>
<Typography sx={{ width: "200px", flexShrink: 0 }}>
{t("schedule_settings.timezone")}
</Typography>
<Dropdown
@@ -370,4 +369,4 @@ export const ScheduleSettingsPage = ({
</Box>
</RobotConfigPage>
);
};
}

33
src/pages/MainPage.tsx
View File

@@ -1,7 +1,7 @@
import React, { useCallback, useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { MainMenu } from "../components/dashboard/MainMenu";
import { Stack } from "@mui/material";
import { Stack, Box } from "@mui/material";
import { Recordings } from "../components/robot/Recordings";
import { Runs } from "../components/run/Runs";
import ProxyForm from '../components/proxy/ProxyForm';
@@ -318,12 +318,29 @@ export const MainPage = ({ handleEditRecording, initialContent }: MainPageProps)
}
}
return (
<Stack direction='row' spacing={0} sx={{ minHeight: '900px' }}>
<Stack sx={{ width: 250, flexShrink: 0 }}>
return (
<Box sx={{ display: 'flex', minHeight: 'calc(100vh - 64px)', width: '100%' }}>
<Box sx={{
width: 230,
flexShrink: 0,
position: 'sticky',
top: 64,
height: 'calc(100vh - 64px)',
overflowY: 'auto',
zIndex: 1000
}}>
<MainMenu value={content} handleChangeContent={setContent} />
</Stack>
</Box>
<Box sx={{
flex: 1,
minWidth: 0,
overflow: 'auto',
minHeight: 'calc(100vh - 64px)',
width: 'calc(100% - 250px)'
}}>
{DisplayContent()}
</Stack>
);
};
</Box>
</Box>
)
}

74
src/pages/PageWrapper.tsx
View File

@@ -13,6 +13,7 @@ import UserRoute from '../routes/userRoute';
import { Routes, Route, useNavigate, Navigate } from 'react-router-dom';
import { NotFoundPage } from '../components/dashboard/NotFound';
import RobotCreate from '../components/robot/pages/RobotCreate';
import { Box } from '@mui/material';
export const PageWrapper = () => {
const [open, setOpen] = useState(false);
@@ -84,40 +85,57 @@ export const PageWrapper = () => {
}
}
}, [location.pathname, navigate, setBrowserId, setRecordingId, setRecordingName, setRecordingUrl]);
const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
const isRecordingPage = location.pathname === '/recording';
return (
<div>
<AuthProvider>
<SocketProvider>
<React.Fragment>
{/* {!browserId && location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={!!browserId} />} */}
{location.pathname !== '/recording' && <NavBar recordingName={recordingName} isRecording={false} />}
<Routes>
<Route element={<UserRoute />}>
<Route path="/" element={<Navigate to="/robots" replace />} />
<Route path="/robots/create" element={<RobotCreate />} />
<Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
<Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
<Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
<Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
</Route>
<Route element={<UserRoute />}>
<Route path="/recording" element={
<BrowserDimensionsProvider>
<RecordingPage recordingName={recordingName} />
</BrowserDimensionsProvider>
} />
</Route>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/register"
element={<Register />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
{/* Show NavBar only for main app pages, not for recording pages */}
{!isRecordingPage && (
<Box sx={{
position: 'sticky',
top: 0,
zIndex: 1100,
backgroundColor: 'background.paper'
}}>
<NavBar recordingName={recordingName} isRecording={false} />
</Box>
)}
<Box sx={{
display: isAuthPage || isRecordingPage ? 'block' : 'flex',
minHeight: isAuthPage || isRecordingPage ? '100vh' : 'calc(100vh - 64px)'
}}>
<Routes>
<Route element={<UserRoute />}>
<Route path="/" element={<Navigate to="/robots" replace />} />
<Route path="/robots/create" element={<RobotCreate />} />
<Route path="/robots/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="robots" />} />
<Route path="/runs/*" element={<MainPage handleEditRecording={handleEditRecording} initialContent="runs" />} />
<Route path="/proxy" element={<MainPage handleEditRecording={handleEditRecording} initialContent="proxy" />} />
<Route path="/apikey" element={<MainPage handleEditRecording={handleEditRecording} initialContent="apikey" />} />
</Route>
<Route element={<UserRoute />}>
<Route path="/recording" element={
<BrowserDimensionsProvider>
<RecordingPage recordingName={recordingName} />
</BrowserDimensionsProvider>
} />
</Route>
<Route
path="/login"
element={<Login />}
/>
<Route
path="/register"
element={<Register />}
/>
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Box>
</React.Fragment>
</SocketProvider>
</AuthProvider>