From 9794a918b44ff555c152266843b4968c2012b8c8 Mon Sep 17 00:00:00 2001 From: HalfManBear <89969229+halfmanbear@users.noreply.github.com> Date: Fri, 9 Aug 2024 00:21:08 +0100 Subject: [PATCH] Update index.jsx --- src/pages/Generator/index.jsx | 448 ++++++++++++++++++++-------------- 1 file changed, 263 insertions(+), 185 deletions(-) diff --git a/src/pages/Generator/index.jsx b/src/pages/Generator/index.jsx index f32bbb3..bdf86ca 100644 --- a/src/pages/Generator/index.jsx +++ b/src/pages/Generator/index.jsx @@ -1,217 +1,295 @@ -import './style.css'; -import { useEffect, useState } from 'preact/hooks'; -import compilePrinterList from './compilePrinterList'; -import compileFilamentList from './compileFilamentList'; -import compileProcessList from './compileProcessList'; -import { createZip } from './createZip'; -import { saveAs } from 'file-saver'; +import "./style.css"; +import { useEffect, useState } from "preact/hooks"; +import compilePrinterList from "./compilePrinterList"; +import compileFilamentList from "./compileFilamentList"; +import compileProcessList from "./compileProcessList"; +import { createZip } from "./createZip"; +import { saveAs } from "file-saver"; export function Generator() { - const [type, setType] = useState('base'); - const [printerList, setPrinterList] = useState([]); - const [selectedPrinters, setSelectedPrinters] = useState([]); - const [filamentList, setFilamentList] = useState([]); - const [selectedFilament, setSelectedFilament] = useState([]); - const [processesList, setProcessesList] = useState([]); - const [filteredProcessesList, setFilteredProcessesList] = useState([]); - const [selectedProcesses, setSelectedProcesses] = useState([]); - const [slicerList] = useState([{ "name": "OrcaSlicer", "identifier": "orcaslicer" }]); - const [selectedSlicer, setSelectedSlicer] = useState("orcaslicer"); - - useEffect(() => { - compilePrinterList().then(list => { - console.log('Printer List:', list); // Debug point: Verify printer list - setPrinterList(list); - }); - compileFilamentList().then(list => { - console.log('Filament List:', list); // Debug point: Verify filament list - setFilamentList(list); - }); - compileProcessList().then(list => { - console.log('Process List:', list); // Debug point: Verify process list - setProcessesList(list); - }); - }, []); - - useEffect(() => { - const extractPrinterName = (printer) => { - return printer.split(' (')[0].replace(/ /g, ''); - }; - - const getFilamentMatchKeyword = (filament) => { - if (filament.includes('PLA')) { - return 'Standard'; - } - if (filament.includes('PETG')) { - return 'PETG'; - } - return filament.split(' ').pop(); // Extract the last part of the filament name if not PLA or PETG - }; - - const filtered = processesList.filter(process => { - const processPrinterName = process.identifier.split('@')[1].split(' (')[0].replace(/ /g, ''); - const printerMatch = selectedPrinters.some(printer => { - const printerName = extractPrinterName(printer); - console.log(`Comparing printer name: ${printerName} with process printer name: ${processPrinterName}`); - return printerName === processPrinterName; - }); - const filamentMatch = selectedFilament.some(filament => { - const filamentKeyword = getFilamentMatchKeyword(filament); - console.log(`Checking if process identifier: ${process.identifier} includes filament keyword: ${filamentKeyword}`); - return process.identifier.includes(filamentKeyword); - }); - console.log(`Process: ${process.identifier}, Printer Match: ${printerMatch}, Filament Match: ${filamentMatch}`); - return printerMatch && filamentMatch; - }); + const [type, setType] = useState("base"); + const [printerList, setPrinterList] = useState([]); + const [selectedPrinters, setSelectedPrinters] = useState([]); + const [filamentList, setFilamentList] = useState([]); + const [selectedFilament, setSelectedFilament] = useState([]); + const [processesList, setProcessesList] = useState([]); + const [filteredProcessesList, setFilteredProcessesList] = useState([]); + const [selectedProcesses, setSelectedProcesses] = useState([]); + const [slicerList] = useState([ + { name: "OrcaSlicer", identifier: "orcaslicer" }, + ]); + const [selectedSlicer, setSelectedSlicer] = useState("orcaslicer"); - console.log('Filtered Processes List:', filtered); // Debug point: Verify filtered processes list - setFilteredProcessesList(filtered); - }, [selectedPrinters, selectedFilament, processesList]); + useEffect(() => { + compilePrinterList().then((list) => { + console.log("Printer List:", list); // Debug point: Verify printer list + setPrinterList(list); + }); + compileFilamentList().then((list) => { + console.log("Filament List:", list); // Debug point: Verify filament list + setFilamentList(list); + }); + compileProcessList().then((list) => { + console.log("Process List:", list); // Debug point: Verify process list + setProcessesList(list); + }); + }, []); - const isValidSelection = () => { - return selectedPrinters.length > 0 && selectedSlicer !== null; + useEffect(() => { + const extractPrinterName = (printer) => { + return printer.split(" (")[0].replace(/ /g, ""); }; - const updateSelectedPrinters = (printer) => { - if (selectedPrinters.includes(printer)) { - setSelectedPrinters(selectedPrinters.filter(p => p !== printer)); - } else { - setSelectedPrinters([...selectedPrinters, printer]); - } + const getFilamentMatchKeyword = (filament) => { + if (filament.includes("PLA")) { + return "Standard"; + } + if (filament.includes("PETG")) { + return "PETG"; + } + return filament.split(" ").pop(); // Extract the last part of the filament name if not PLA or PETG }; - const updateSelectedFilaments = (filament) => { - if (selectedFilament.includes(filament)) { - setSelectedFilament(selectedFilament.filter(p => p !== filament)); - } else { - setSelectedFilament([...selectedFilament, filament]); - } - }; + const filtered = processesList.filter((process) => { + const processPrinterName = process.identifier + .split("@")[1] + .split(" (")[0] + .replace(/ /g, ""); + const printerMatch = selectedPrinters.some((printer) => { + const printerName = extractPrinterName(printer); + console.log( + `Comparing printer name: ${printerName} with process printer name: ${processPrinterName}`, + ); + return printerName === processPrinterName; + }); + const filamentMatch = selectedFilament.some((filament) => { + const filamentKeyword = getFilamentMatchKeyword(filament); + console.log( + `Checking if process identifier: ${process.identifier} includes filament keyword: ${filamentKeyword}`, + ); + return process.identifier.includes(filamentKeyword); + }); + console.log( + `Process: ${process.identifier}, Printer Match: ${printerMatch}, Filament Match: ${filamentMatch}`, + ); + return printerMatch && filamentMatch; + }); - const updateSelectedProcesses = (process) => { - if (selectedProcesses.includes(process)) { - setSelectedProcesses(selectedProcesses.filter(p => p !== process)); - } else { - setSelectedProcesses([...selectedProcesses, process]); - } - }; + console.log("Filtered Processes List:", filtered); // Debug point: Verify filtered processes list + setFilteredProcessesList(filtered); + }, [selectedPrinters, selectedFilament, processesList]); - const generateTapped = async () => { - let filament; - let processes; - - if (type === "base") { - filament = filamentList; - processes = processesList; - } else { - filament = filamentList.filter(filament => selectedFilament.includes(filament.identifier)); - - // Filter processes based on exact printer name match - processes = processesList.filter(process => { - const processPrinterName = process.identifier.split('@')[1].split(' (')[0].replace(/ /g, ''); - - // Check if the selected printer matches exactly with the process printer name - return selectedPrinters.some(printer => { - const printerName = extractPrinterName(printer).replace(/ /g, ''); - console.log(`Comparing printer name: ${printerName} with process printer name: ${processPrinterName}`); - return printerName === processPrinterName; - }); - }); - } + const isValidSelection = () => { + return selectedPrinters.length > 0 && selectedSlicer !== null; + }; - // Create the ZIP file with selected printers, filaments, and processes - const zip = await createZip( - printerList.filter(printer => selectedPrinters.includes(printer.identifier)).map(printer => printer.profile), - filament.map(filament => filament.profile), - processes.map(process => process.profile) - ); + const updateSelectedPrinters = (printer) => { + if (selectedPrinters.includes(printer)) { + setSelectedPrinters(selectedPrinters.filter((p) => p !== printer)); + } else { + setSelectedPrinters([...selectedPrinters, printer]); + } + }; - // Save the ZIP file - saveAs(zip, "OpenNept4une.orca_printer"); - }; + const updateSelectedFilaments = (filament) => { + if (selectedFilament.includes(filament)) { + setSelectedFilament(selectedFilament.filter((p) => p !== filament)); + } else { + setSelectedFilament([...selectedFilament, filament]); + } + }; + + const updateSelectedProcesses = (process) => { + if (selectedProcesses.includes(process)) { + setSelectedProcesses(selectedProcesses.filter((p) => p !== process)); + } else { + setSelectedProcesses([...selectedProcesses, process]); + } + }; + + const generateTapped = async () => { + let filament; + let processes; - return ( -
-

OpenNeptune Slicer profile generator

-
- - -
-
- - {type === "custom" && } - {type === "custom" && } - {slicerList.length > 1 && } - {} -
-
Generate Profile
-
+ if (type === "base") { + filament = filamentList; + processes = processesList; + } else { + filament = filamentList.filter((filament) => + selectedFilament.includes(filament.identifier), + ); + + // Filter processes based on exact printer name match + processes = processesList.filter((process) => { + const processPrinterName = process.identifier + .split("@")[1] + .split(" (")[0] + .replace(/ /g, ""); + + // Check if the selected printer matches exactly with the process printer name + return selectedPrinters.some((printer) => { + const printerName = extractPrinterName(printer).replace(/ /g, ""); + console.log( + `Comparing printer name: ${printerName} with process printer name: ${processPrinterName}`, + ); + return printerName === processPrinterName; + }); + }); + } + + // Create the ZIP file with selected printers, filaments, and processes + const zip = await createZip( + printerList + .filter((printer) => selectedPrinters.includes(printer.identifier)) + .map((printer) => printer.profile), + filament.map((filament) => filament.profile), + processes.map((process) => process.profile), ); + + // Save the ZIP file + saveAs(zip, "OpenNept4une.orca_printer"); + }; + + return ( +
+

OpenNeptune Slicer profile generator

+
+ + +
+
+ + {type === "custom" && ( + + )} + {type === "custom" && ( + + )} + {slicerList.length > 1 && ( + + )} + {} +
+
+ Generate Profile +
+
+ ); } function Selection(props) { - const handleClick = () => { - props.select(props.identifier); - }; + const handleClick = () => { + props.select(props.identifier); + }; - return (); + return ( + + ); } function MultiSelectionSection(props) { - let emptyText = props.emptyText ? props.emptyText : "No options available"; - return ( -
-

{props.title}

- {props.options.length === 0 &&

{emptyText}

} - -
- ); + let emptyText = props.emptyText ? props.emptyText : "No options available"; + return ( +
+

{props.title}

+ {props.options.length === 0 &&

{emptyText}

} + +
+ ); } function SelectionSection(props) { - return ( -
-

{props.title}

- -
- ); + return ( +
+

{props.title}

+ +
+ ); } function TypeSection(props) { - function handleClick() { - props.onClick(props.type); - } + function handleClick() { + props.onClick(props.type); + } - return ( -
-

{props.title}

-
- ); + return ( +
+

{props.title}

+
+ ); } function SummarySection() { - return ( -
-

Summary

-
- ); + return ( +
+

Summary

+
+ ); }