diff --git a/src/components/common/advanced-job-options/advanced-job-options.tsx b/src/components/common/advanced-job-options/advanced-job-options.tsx index 6156a89..f563691 100644 --- a/src/components/common/advanced-job-options/advanced-job-options.tsx +++ b/src/components/common/advanced-job-options/advanced-job-options.tsx @@ -1,7 +1,8 @@ -import { Box, Link, Typography } from "@mui/material"; -import { SetStateAction, Dispatch, useState } from "react"; -import { AdvancedJobOptionsDialog } from "./dialog/advanced-job-options-dialog"; import { RawJobOptions } from "@/types"; +import SettingsIcon from "@mui/icons-material/Settings"; +import { Box, Button, Typography } from "@mui/material"; +import { Dispatch, SetStateAction, useState } from "react"; +import { AdvancedJobOptionsDialog } from "./dialog/advanced-job-options-dialog"; export type AdvancedJobOptionsProps = { jobOptions: RawJobOptions; @@ -17,26 +18,27 @@ export const AdvancedJobOptions = ({ const [open, setOpen] = useState(false); return ( - - + { const { @@ -50,19 +50,18 @@ export const Home = () => { flexDirection="column" justifyContent="center" alignItems="center" - height="100%" + minHeight="100vh" py={4} > - - - - {submittedURL.length > 0 ? ( + + + - ) : null} + {snackbarSeverity === "info" ? ( diff --git a/src/components/submit/job-submitter/element-table/element-table.tsx b/src/components/submit/job-submitter/element-table/element-table.tsx index 6e038f4..bc41c97 100644 --- a/src/components/submit/job-submitter/element-table/element-table.tsx +++ b/src/components/submit/job-submitter/element-table/element-table.tsx @@ -2,11 +2,12 @@ import { Element } from "@/types"; import AddIcon from "@mui/icons-material/Add"; +import DeleteIcon from "@mui/icons-material/Delete"; import { Box, - Button, Divider, IconButton, + Paper, Table, TableBody, TableCell, @@ -40,196 +41,224 @@ export const ElementTable = ({ rows, setRows, submittedURL }: Props) => { }; const handleDeleteRow = (elementName: string) => { - setRows( - rows.filter((r) => { - return elementName !== r.name; - }) - ); + setRows(rows.filter((r) => elementName !== r.name)); }; return ( - - - Elements to Scrape - - - + + + Elements to Scrape + + + Add elements to scrape from the target URL using XPath selectors + + + + - - - Name - XPath - - Actions - - - - - - - - setNewRow({ ...newRow, name: e.target.value }) - } - sx={{ - "& .MuiOutlinedInput-root": { - bgcolor: "background.default", - }, - }} - /> - - - - setNewRow({ ...newRow, xpath: e.target.value }) - } - sx={{ - "& .MuiOutlinedInput-root": { - bgcolor: "background.default", - }, - }} - /> - - - 0 && newRow.name.length > 0 - ? "Add Element" - : "Fill out all fields to add an element" - } - placement="top" - > - - 0 && newRow.name.length > 0) - } - sx={{ - bgcolor: "primary.main", - color: "primary.contrastText", +
+ + + Name + XPath + + Actions + + + + + + + + setNewRow({ ...newRow, name: e.target.value }) + } + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: 2, + bgcolor: "background.default", + transition: "all 0.2s ease-in-out", "&:hover": { - bgcolor: "primary.dark", + "& .MuiOutlinedInput-notchedOutline": { + borderColor: "primary.main", + }, }, - "&.Mui-disabled": { - bgcolor: "action.disabledBackground", - color: "action.disabled", + }, + }} + /> + + + + setNewRow({ ...newRow, xpath: e.target.value }) + } + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: 2, + bgcolor: "background.default", + transition: "all 0.2s ease-in-out", + "&:hover": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: "primary.main", + }, + }, + }, + }} + /> + + + 0 && newRow.name.length > 0 + ? "Add Element" + : "Fill out all fields to add an element" + } + placement="top" + > + + 0 && newRow.name.length > 0) + } + sx={{ + bgcolor: "primary.main", + color: "primary.contrastText", + borderRadius: 2, + transition: "all 0.2s ease-in-out", + "&:hover": { + bgcolor: "primary.dark", + transform: "translateY(-1px)", + }, + "&.Mui-disabled": { + bgcolor: "action.disabledBackground", + color: "action.disabled", + }, + }} + > + + + + + + + {rows.map((row, index) => ( + + + + {row.name} + + + + + {row.xpath} + + + + handleDeleteRow(row.name)} + size="small" + color="error" + sx={{ + transition: "all 0.2s ease-in-out", + "&:hover": { + bgcolor: "error.main", + color: "error.contrastText", + transform: "translateY(-1px)", }, }} > - + - - - - - {rows.map((row, index) => ( - - - - {row.name} - - - - - {row.xpath} - - - - - - - ))} - -
- - - - + + + ))} + + + + + + + + ); }; diff --git a/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx b/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx index 7a2fc87..85c897d 100644 --- a/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx +++ b/src/components/submit/job-submitter/job-submitter-header/job-submitter-header.tsx @@ -1,6 +1,5 @@ +import { Box, Typography } from "@mui/material"; import React, { ReactNode } from "react"; -import { Typography } from "@mui/material"; -import classes from "./job-submitter-header.module.css"; interface JobSubmitterHeaderProps { title?: string; @@ -8,13 +7,26 @@ interface JobSubmitterHeaderProps { } export const JobSubmitterHeader: React.FC = ({ - title = "Scraping Made Easy", + title = "Scrape Webpage", children, }) => { return ( -
- {title} - {children} -
+ + + {title} + + ); }; diff --git a/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx b/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx index 28e874d..c12c0bd 100644 --- a/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx +++ b/src/components/submit/job-submitter/job-submitter-input/job-submitter-input.tsx @@ -1,5 +1,4 @@ -import React from "react"; -import { TextField, Button, CircularProgress } from "@mui/material"; +import { Box, Button, CircularProgress, TextField } from "@mui/material"; import { useJobSubmitterProvider } from "../provider"; export type JobSubmitterInputProps = { @@ -17,7 +16,14 @@ export const JobSubmitterInput = ({ useJobSubmitterProvider(); return ( -
+ setSubmittedURL(e.target.value)} error={!isValidURL} helperText={!isValidURL ? urlError : ""} - className="rounded-md" + sx={{ + "& .MuiOutlinedInput-root": { + borderRadius: 2, + transition: "all 0.2s ease-in-out", + "&:hover": { + "& .MuiOutlinedInput-notchedOutline": { + borderColor: "primary.main", + }, + }, + }, + }} /> -
+ ); }; diff --git a/src/components/submit/job-submitter/job-submitter.tsx b/src/components/submit/job-submitter/job-submitter.tsx index f52ffce..56c6edf 100644 --- a/src/components/submit/job-submitter/job-submitter.tsx +++ b/src/components/submit/job-submitter/job-submitter.tsx @@ -4,6 +4,7 @@ import { AdvancedJobOptions } from "@/components/common/advanced-job-options"; import { useSubmitJob } from "@/hooks/use-submit-job"; import { parseJobOptions } from "@/lib"; import { useUser } from "@/store/hooks"; +import { Box, Fade, Paper } from "@mui/material"; import { useRouter } from "next/router"; import { useEffect } from "react"; import { JobSubmitterHeader } from "./job-submitter-header"; @@ -35,17 +36,36 @@ export const JobSubmitter = () => { }, [jobOptions]); return ( -
- - - -
+ + + + + + + + + + + ); }; diff --git a/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx b/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx index 43195bd..94f0487 100644 --- a/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx +++ b/src/components/submit/job-submitter/site-map/site-map-input/site-map-input.tsx @@ -1,17 +1,17 @@ -import { useState } from "react"; -import { useJobSubmitterProvider } from "../../provider"; +import { ActionOption } from "@/types/job"; import { + Box, + Button, + Checkbox, + FormControl, + FormControlLabel, + InputLabel, MenuItem, Select, TextField, - FormControl, - Button, - Checkbox, - FormControlLabel, } from "@mui/material"; -import { ActionOption } from "@/types/job"; -import classes from "./site-map-input.module.css"; -import { clsx } from "clsx"; +import { useState } from "react"; +import { useJobSubmitterProvider } from "../../provider"; export type SiteMapInputProps = { disabled?: boolean; @@ -28,7 +28,6 @@ export const SiteMapInput = ({ clickOnce, input, }: SiteMapInputProps) => { - console.log(clickOnce); const [optionState, setOptionState] = useState( option || "click" ); @@ -43,8 +42,6 @@ export const SiteMapInput = ({ const handleAdd = () => { if (!siteMap) return; - console.log(optionState, xpathState, clickOnceState, inputState); - setSiteMap((prevSiteMap) => ({ ...prevSiteMap, actions: [ @@ -60,6 +57,7 @@ export const SiteMapInput = ({ })); setXpathState(""); + setInputState(""); }; const handleRemove = () => { @@ -72,14 +70,22 @@ export const SiteMapInput = ({ }; return ( -
-
- + + + + Action Type