View data on select

frontend_remade/src/components/ScrapeConfigView/AddEditScrapeConfigDialog/AddEditScrapeConfigDialog.tsx

@@ -24,9 +24,9 @@ const AddEditObjDialog = ({
   const [scrapeParametersArray, setScrapeParametersArray] = useState<any[]>(
     scrapeConfig?.scrapeParameters
       ? [
-          ...scrapeConfig.scrapeParameters,
-          { id: 0, name: "", value: "", description: "" },
-        ]
+        ...scrapeConfig.scrapeParameters,
+        { id: 0, name: "", value: "", description: "" },
+      ]
       : [{ id: 0, name: "", value: "", description: "" }]
   );
 
@@ -91,7 +91,7 @@ const AddEditObjDialog = ({
   return (
     <Modal show onHide={onDismiss} fullscreen={true}>
       <Modal.Header closeButton>
-        <Modal.Title>
+        <Modal.Title style={{ fontSize: '18px' }}>
           {scrapeConfig ? "Edit Configuration" : "Create Configuration"}
         </Modal.Title>
       </Modal.Header>
@@ -174,7 +174,7 @@ const AddEditObjDialog = ({
                 scrapeParametersArray={scrapeParametersArray}
                 setScrapeParametersArray={setScrapeParametersArray}
               />
-              <Button style={{ marginBottom: '20px' }}disabled={isSubmitting} variant="contained" type="submit">
+              <Button style={{ marginBottom: '20px' }} disabled={isSubmitting} variant="contained" type="submit">
                 Save
               </Button>
             </Form>

frontend_remade/src/components/ScrapeConfigView/ObjsPageLoggedInView.tsx

@@ -11,7 +11,7 @@ import { ScrapeConfig } from "../../models/scrapeConfig";
 import * as ObjsApi from "../../network/objs_api";
 import styleUtils from "../../styles/utils.module.css";
 import AddEditObjDialog from "./AddEditScrapeConfigDialog/AddEditScrapeConfigDialog";
-import ViewStringDialog from "./ViewData/ViewDataDialog";
+import ViewDataDialog from "./ViewDataDialog/ViewDataDialog";
 
 const ObjsPageLoggedInView = () => {
   const [objs, setObjs] = useState<ScrapeConfig[]>([]);
@@ -196,7 +196,7 @@ const ObjsPageLoggedInView = () => {
         />
       )}
       {stringToView && (
-        <ViewStringDialog
+        <ViewDataDialog
           dataToView={dataToView}
           stringToView={stringToView}
           onDismiss={() => setStringToView(null)}

frontend_remade/src/components/ScrapeConfigView/ViewDataDialog/DataArrayTable.tsx

@@ -0,0 +1,40 @@
+import Table, { ColumnsType } from "antd/es/table";
+import { Button } from "react-bootstrap";
+
+interface DataArrayTableProps {
+    dataSource: any;
+    setIndex: (index: number) => void;
+}
+
+const DataArrayTable = ({ dataSource, setIndex }: DataArrayTableProps) => {
+    const columns: ColumnsType<any> = [
+        {
+            title: "Timestamp",
+            dataIndex: "timestamp",
+            key: "timestamp",
+            render: (text) => {
+                return new Date(text).toLocaleString();
+            },
+        },
+        {
+            title: "Data",
+            key: "select",
+            render: (_, __, index) => (
+                <>
+                    <Button href="#" variant="outlined" onClick={() => setIndex(index)}>
+                        Select
+                    </Button>
+                </>
+            ),
+        },
+    ];
+
+    return (
+        <Table
+            dataSource={dataSource}
+            columns={columns}
+        />
+    );
+};
+
+export default DataArrayTable;

frontend_remade/src/components/ScrapeConfigView/ViewDataDialog/DataTable.tsx

@@ -0,0 +1,36 @@
+import Table, { ColumnsType } from "antd/es/table";
+
+interface DataTableProps {
+    dataSource: any;
+}
+
+const DataTable = ({ dataSource }: DataTableProps) => {
+    const columns: ColumnsType<any> = [
+        {
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
+        },
+        {
+            title: "Selector",
+            dataIndex: "value",
+        },
+        {
+            title: "Description",
+            dataIndex: "description",
+        },
+        {
+            title: "Content",
+            dataIndex: "content",
+        }
+    ];
+
+    return (
+        <Table
+            dataSource={dataSource}
+            columns={columns}
+        />
+    );
+};
+
+export default DataTable;

frontend_remade/src/components/ScrapeConfigView/ViewDataDialog/SelectorsTable.tsx

@@ -0,0 +1,32 @@
+import Table, { ColumnsType } from "antd/es/table";
+
+interface SelectorsTableProps {
+    dataSource: any;
+}
+
+const SelectorsTable = ({ dataSource }: SelectorsTableProps) => {
+    const columns: ColumnsType<any> = [
+        {
+            title: "Name",
+            dataIndex: "name",
+            key: "name",
+        },
+        {
+            title: "Selector",
+            dataIndex: "value",
+        },
+        {
+            title: "Description",
+            dataIndex: "description",
+        },
+    ];
+
+    return (
+        <Table
+            dataSource={dataSource}
+            columns={columns}
+        />
+    );
+};
+
+export default SelectorsTable;

frontend_remade/src/components/ScrapeConfigView/ViewData/ViewDataDialog.tsx → frontend_remade/src/components/ScrapeConfigView/ViewDataDialog/ViewDataDialog.tsx

@@ -1,68 +1,32 @@
-import Table, { ColumnsType } from "antd/es/table";
+import { Button } from "@mui/material";
 import { useRef, useState } from "react";
 import { Form, Modal, Tab, Tabs } from "react-bootstrap";
 import DiffViewer from "./DiffViewer";
-import { Button } from "@mui/material";
+import SelectorsTable from "./SelectorsTable";
+import DataArrayTable from "./DataArrayTable";
+import DataTable from "./DataTable";
 
 interface ViewDataDialogProps {
-  dataToView?: any;
+  dataToView?: any[];
   stringToView?: string;
   onDismiss: () => void;
   scrapeParametersArray: any[];
 }
 
-const ViewStringDialog = ({
-  dataToView,
-  stringToView,
-  onDismiss,
-  scrapeParametersArray,
-}: ViewDataDialogProps) => {
-  const parameterColumns: ColumnsType<any> = [
-    {
-      title: "Name",
-      dataIndex: "name",
-      key: "name",
-    },
-    {
-      title: "Selector",
-      dataIndex: "value",
-    },
-    {
-      title: "Description",
-      dataIndex: "description",
-    },
-  ];
+const ViewDataDialog = ({ dataToView, stringToView, onDismiss, scrapeParametersArray }: ViewDataDialogProps) => {
+  if (dataToView === undefined) {
+    dataToView = [];
+  }
 
-  const dataColumns: ColumnsType<any> = [
-    {
-      title: "Timestamp",
-      dataIndex: "timestamp",
-      key: "timestamp",
-      render: (record) => {
-        return new Date(record).toLocaleString();
-      },
-    },
-    {
-      title: "Data",
-      key: "select",
-      render: () => (
-        <>
-          <Button href="#" variant="outlined">
-            Select
-          </Button>
-        </>
-      ),
-    },
-  ];
+  const [index, setIndex] = useState<number | null>(null);
+  const [oldText, setOldText] = useState("");
+  const [newText, setNewText] = useState("");
 
   const textareaScrapeParamsRef = useRef<HTMLTextAreaElement>(null);
   const textareaScrapedDataRef = useRef<HTMLTextAreaElement>(null);
   const textareaOldTextRef = useRef<HTMLTextAreaElement>(null);
   const textareaNewTextRef = useRef<HTMLTextAreaElement>(null);
 
-  const [oldText, setOldText] = useState("");
-  const [newText, setNewText] = useState("");
-
   const adjustHeight = (textareaRef: any) => {
     const textarea = textareaRef.current;
     if (textarea) {
@@ -95,15 +59,16 @@ const ViewStringDialog = ({
           onSelect={handleSelect}
         >
           <Tab eventKey="table" title="Table Format">
-            <Form.Label style={{ marginBottom: "20px" }}>
-              Selectors Table
-            </Form.Label>
-            <Table
-              dataSource={scrapeParametersArray}
-              columns={parameterColumns}
-            />
+            <Form.Label style={{ marginBottom: "20px" }}>Selectors Table</Form.Label>
+            <SelectorsTable dataSource={scrapeParametersArray} />
+            {index !== null && (
+              <>
+                <Form.Label style={{ marginBottom: "20px" }}>{new Date(dataToView[index].timestamp).toLocaleString()} Scraped Data</Form.Label>
+                <DataTable dataSource={dataToView[index].selectors} />
+              </>
+            )}
             <Form.Label style={{ marginBottom: "20px" }}>Data Table</Form.Label>
-            <Table dataSource={dataToView} columns={dataColumns} />
+            <DataArrayTable dataSource={dataToView} setIndex={setIndex} />
           </Tab>
           <Tab eventKey="json" title="JSON Format">
             <Form.Label style={{ marginBottom: "20px" }}>
@@ -148,6 +113,10 @@ const ViewStringDialog = ({
             />
             <DiffViewer oldText={oldText} newText={newText} />
           </Tab>
+          {index !== null && (
+            <Tab eventKey="data" title="Data">
+            </Tab>
+          )}
         </Tabs>
       </Modal.Body>
       <Modal.Footer>
@@ -159,4 +128,4 @@ const ViewStringDialog = ({
   );
 };
 
-export default ViewStringDialog;
+export default ViewDataDialog;