Skip to content

Commit

Permalink
🛠️💅📕two different paths added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akhlak-Hossain-Jim
Akhlak-Hossain-Jim committed Nov 23, 2024
1 parent 839fff6 commit a4612c6
Showing 1 changed file with 143 additions and 175 deletions.
318 changes: 143 additions & 175 deletions react/src/views/Pathways.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,102 +11,8 @@ export default function Pathways() {
const [Sign1, setSign1] = useState(true);
const [Sign2, setSign2] = useState(false);

// latest reset index values for Raw Material Extraction, Material Processing, Manufacturing and Transportation respectively
const [latestIndexes, setLatestIndexes] = useState([0, 0, 0, 0]);

const hookOptions = {
// ... other options
refetchInterval: 2000, // Revalidate every 2 seconds
};
const perPage = 100;

// const {
// QueryManufacturingAll,
// QueryTransportationAll,
// QueryMaterialProcessingAll,
// QueryRawMaterialExtractionAll,
// QueryManufacturing,
// QueryMaterialProcessing,
// QueryRawMaterialExtraction,
// QueryTransportation,
// } = useEsgobservabilitydemoEsgobservabilitydemo();

// const rawMaterialAll = QueryRawMaterialExtractionAll(
// { "pagination.limit": perPage, "pagination.offset": 0, "pagination.count_total": true, "pagination.reverse": true },
// hookOptions,
// perPage,
// );

// const rawMaterialLatest = rawMaterialAll?.data?.pages?.[0]?.pagination?.total || 0;

// const {
// data: rawMaterialLatestData,
// error: rawMaterialLatestErro,
// isError: rawMaterialLatestIsError,
// isLoading: rawMaterialLatestIsLoading,
// } = QueryRawMaterialExtraction(latestIndexes?.[0]?.toString?.(), hookOptions);

// const materialProcessingAll = QueryMaterialProcessingAll(
// { "pagination.limit": 100, "pagination.offset": 0, "pagination.count_total": false, "pagination.reverse": true },
// hookOptions,
// perPage,
// );

// const materialProcessingLatest = materialProcessingAll?.data?.pages?.[0]?.pagination?.total || 0;

// const {
// data: materialProcessingLatestData,
// error: materialProcessingLatestError,
// isError: materialProcessingLatestIsError,
// isLoading: materialProcessingLatestIsLoading,
// } = QueryMaterialProcessing(latestIndexes?.[1]?.toString?.(), hookOptions);

// const manufacturingAll = QueryManufacturingAll(
// { "pagination.limit": 100, "pagination.offset": 0, "pagination.count_total": true, "pagination.reverse": true },
// hookOptions,
// perPage,
// );

// const manufacturingLatest = manufacturingAll?.data?.pages?.[0]?.pagination?.total || 0;

// const {
// data: manufacturingLatestData,
// error: manufacturingLatestError,
// isError: manufacturingLatestIsError,
// isLoading: manufacturingLatestIsLoading,
// } = QueryManufacturing(latestIndexes?.[2]?.toString?.(), hookOptions);

// const transportationAll = QueryTransportationAll(
// { "pagination.limit": 100, "pagination.offset": 0, "pagination.count_total": true, "pagination.reverse": true },
// hookOptions,
// perPage,
// );

// const transportationLatest = materialProcessingAll?.data?.pages?.[0]?.pagination?.total || 0;

// const {
// data: transportationLatestData,
// error: transportationLatestError,
// isError: transportationLatestIsError,
// isLoading: transportationLatestIsLoading,
// } = QueryTransportation(latestIndexes?.[3]?.toString?.(), hookOptions);

// const handleResetFlow = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
// event.preventDefault(); // Prevents default behavior, if needed
// console.log("Button clicked!");
// console.log("rawMaterialLatest: ", rawMaterialLatest);
// console.log("materialProcessingLatest: ", materialProcessingLatest);
// console.log("manufacturingLatest: ", manufacturingLatest);
// console.log("transportationLatest: ", transportationLatest);
// };

const step = {
title: "Raw Material Extracting",
hash: "asdfjakjhwnan",
primaryKey: "asdfjakjhwnan",
otherKey: "asdfjakjhwnan",
state: "completed",
};
// Change below state to change U shape to single line and vice-versa
const [UIChangeState, setUIChangeState] = useState(false);

const DATA = {
title: "Title Here",
Expand Down Expand Up @@ -163,6 +69,36 @@ export default function Pathways() {
state: "",
},
],
SingleFlow: [
{
title: "Doctor",
hash: "asdfjakjhwnan",
primaryKey: "asdfjakjhwnan",
otherKey: "asdfjakjhwnan",
state: "completed",
},
{
title: "Administrative Stuff",
hash: "asdfjakjhwnan",
primaryKey: "asdfjakjhwnan",
otherKey: "asdfjakjhwnan",
state: "completed",
},
{
title: "Nurses",
hash: "asdfjakjhwnan",
primaryKey: "asdfjakjhwnan",
otherKey: "asdfjakjhwnan",
state: "",
},
{
title: "Pharmacist",
hash: "asdfjakjhwnan",
primaryKey: "asdfjakjhwnan",
otherKey: "asdfjakjhwnan",
state: "",
},
],
RatingsData: [
{
title: "Raw Material Extraction Stage Emissions: ",
Expand All @@ -186,87 +122,119 @@ export default function Pathways() {
return (
<div className="am-esg-traceability">
<main className="am-bg-translucent">
<div className="content">
<div className="center">
{DATA?.centerSteps &&
Array.isArray(DATA?.centerSteps) &&
DATA?.centerSteps.length > 0 &&
React.Children.toArray(
DATA?.centerSteps.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
</div>
</div>
)),
)}
</div>
</div>
<div className="content">
<div className={`left ${DATA?.leftSteps?.[0]?.state === "completed" ? "active" : ""}`}>
<LeftSvg active={DATA?.leftSteps?.[0]?.state === "completed"} />
{DATA?.leftSteps &&
Array.isArray(DATA?.leftSteps) &&
DATA?.leftSteps.length > 0 &&
React.Children.toArray(
DATA?.leftSteps.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
</div>
</div>
)),
)}
</div>
<div className={`right ${DATA?.rightSteps?.[0]?.state === "completed" ? "active" : ""}`}>
<RightSvg active={DATA?.rightSteps?.[0]?.state === "completed"} />
{DATA?.rightSteps &&
Array.isArray(DATA?.rightSteps) &&
DATA?.rightSteps.length > 0 &&
React.Children.toArray(
DATA?.rightSteps.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
{UIChangeState ? (
<>
<div className="content">
<div className="center">
{DATA?.centerSteps &&
Array.isArray(DATA?.centerSteps) &&
DATA?.centerSteps.length > 0 &&
React.Children.toArray(
DATA?.centerSteps.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
</div>
</div>
)),
)}
</div>
</div>
<div className="content">
<div className={`left ${DATA?.leftSteps?.[0]?.state === "completed" ? "active" : ""}`}>
<LeftSvg active={DATA?.leftSteps?.[0]?.state === "completed"} />
{DATA?.leftSteps &&
Array.isArray(DATA?.leftSteps) &&
DATA?.leftSteps.length > 0 &&
React.Children.toArray(
DATA?.leftSteps.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
</div>
</div>
)),
)}
</div>
<div className={`right ${DATA?.rightSteps?.[0]?.state === "completed" ? "active" : ""}`}>
<RightSvg active={DATA?.rightSteps?.[0]?.state === "completed"} />
{DATA?.rightSteps &&
Array.isArray(DATA?.rightSteps) &&
DATA?.rightSteps.length > 0 &&
React.Children.toArray(
DATA?.rightSteps.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
</div>
</div>
)),
)}
</div>
</div>
</>
) : (
<div className="content">
<div className="center">
{DATA?.SingleFlow &&
Array.isArray(DATA?.SingleFlow) &&
DATA?.SingleFlow.length > 0 &&
React.Children.toArray(
DATA?.SingleFlow.map((step) => (
<div className="step">
<div className={`indicator ${step?.state === "completed" ? "active" : ""}`}>
{step?.state === "completed" ? (
<SiTicktick className="icon" />
) : (
<FaMinusCircle className="icon" />
)}
<span></span>
</div>
<div className="content">
<h2>{step?.title}</h2>
<p className="hash">Hash: {step?.hash}</p>
<p className="key primary">Primary Key: {step?.primaryKey}</p>
<p className="key others">Other Key: {step?.otherKey}</p>
</div>
</div>
</div>
)),
)}
)),
)}
</div>
</div>
</div>
)}
</main>
</div>
);
Expand Down

0 comments on commit a4612c6

Please sign in to comment.