-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
9f6a2e6
commit bc19c21
Showing
1 changed file
with
23 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,171 +1,30 @@ | ||
| 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 => setPrinterList(list)); | ||
| compileFilamentList().then(list => setFilamentList(list)); | ||
| compileProcessList().then(list => setProcessesList(list)); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| const extractPrinterName = (printer) => { | ||
| return printer.split(' (')[0]; | ||
| }; | ||
|
|
||
| const filtered = processesList.filter(process => { | ||
| const processPrinterName = process.identifier.split('@')[1].split(' (')[0]; | ||
| const printerMatch = selectedPrinters.some(printer => extractPrinterName(printer) === processPrinterName); | ||
| const filamentMatch = selectedFilament.some(filament => process.identifier.includes(filament)); | ||
| return printerMatch && filamentMatch; | ||
| }); | ||
| setFilteredProcessesList(filtered); | ||
| }, [selectedPrinters, selectedFilament, processesList]); | ||
|
|
||
| const isValidSelection = () => { | ||
| return selectedPrinters.length > 0 && selectedSlicer !== null; | ||
| }; | ||
|
|
||
| const updateSelectedPrinters = (printer) => { | ||
| if (selectedPrinters.includes(printer)) { | ||
| setSelectedPrinters(selectedPrinters.filter(p => p !== printer)); | ||
| } else { | ||
| setSelectedPrinters([...selectedPrinters, 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]); | ||
| } | ||
| }; | ||
| import { LocationProvider, Router, Route, hydrate, prerender as ssr } from 'preact-iso'; | ||
|
|
||
| const generateTapped = async () => { | ||
| let filament; | ||
| let processes; | ||
| if (type === "base") { | ||
| filament = filamentList; | ||
| processes = processesList; | ||
| } else { | ||
| filament = filamentList.filter(filament => selectedFilament.includes(filament.identifier)); | ||
| processes = filteredProcessesList.filter(process => selectedProcesses.includes(process.identifier)); | ||
| } | ||
| 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) | ||
| ); | ||
| saveAs(zip, "OpenNept4une.orca_printer"); | ||
| }; | ||
|
|
||
| return ( | ||
| <div class="home"> | ||
| <h1>OpenNeptune Slicer profile generator</h1> | ||
| <section class="type-picker"> | ||
| <TypeSection title="Base Config" type="base" isActive={type === "base"} onClick={setType} /> | ||
| <TypeSection title="Custom" type="custom" isActive={type === "custom"} onClick={setType} /> | ||
| </section> | ||
| <section> | ||
| <MultiSelectionSection title="Printer Model" options={printerList} select={updateSelectedPrinters} selectedOptions={selectedPrinters} /> | ||
| {type === "custom" && <MultiSelectionSection title="Filament" options={filamentList} select={updateSelectedFilaments} selectedOptions={selectedFilament} />} | ||
| {type === "custom" && <MultiSelectionSection title="Print Settings" options={filteredProcessesList} select={updateSelectedProcesses} selectedOptions={selectedProcesses} />} | ||
| {slicerList.length > 1 && <SelectionSection title="Slicer" options={slicerList} select={setSelectedSlicer} selectedOption={selectedSlicer} />} | ||
| {<SummarySection />} | ||
| </section> | ||
| <div class={(isValidSelection() ? "generate-button" : "generate-button disabled")} onClick={generateTapped}>Generate Profile</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function Selection(props) { | ||
| const handleClick = () => { | ||
| props.select(props.identifier); | ||
| }; | ||
|
|
||
| return (<label> | ||
| <input | ||
| type="radio" | ||
| checked={props.checked} | ||
| onClick={handleClick} | ||
| /> | ||
| {props.label} | ||
| </label>); | ||
| } | ||
|
|
||
| function MultiSelectionSection(props) { | ||
| let emptyText = props.emptyText ? props.emptyText : "No options available"; | ||
| return ( | ||
| <div class="resource box"> | ||
| <h2>{props.title}</h2> | ||
| {props.options.length === 0 && <p class="empty">{emptyText}</p>} | ||
| <ul> | ||
| {props.options && props.options.map(option => ( | ||
| <li key={option.identifier}> | ||
| <Selection label={option.name} identifier={option.identifier} checked={props.selectedOptions.includes(option.identifier)} select={props.select} /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } | ||
| import { Header } from './components/Header.jsx'; | ||
| import { Generator } from './pages/Generator/index.jsx'; | ||
| import { About } from './pages/About/index.jsx'; | ||
| import { NotFound } from './pages/_404.jsx'; | ||
| import './style.css'; | ||
|
|
||
| function SelectionSection(props) { | ||
| return ( | ||
| <div class="resource box"> | ||
| <h2>{props.title}</h2> | ||
| <ul> | ||
| {props.options && props.options.map(option => ( | ||
| <li key={option.identifier}> | ||
| <Selection label={option.name} identifier={option.identifier} checked={props.selectedOption === option.identifier} select={props.select} /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| export function App() { | ||
| return ( | ||
| <LocationProvider> | ||
| <Header /> | ||
| <main> | ||
| <Router> | ||
| <Route path={import.meta.env.BASE_URL} component={Generator} /> | ||
| <Route path={import.meta.env.BASE_URL+"about"} component={About} /> | ||
| <Route default component={NotFound} /> | ||
| </Router> | ||
| </main> | ||
| </LocationProvider> | ||
| ); | ||
| } | ||
|
|
||
| function TypeSection(props) { | ||
| function handleClick() { | ||
| props.onClick(props.type); | ||
| } | ||
|
|
||
| return ( | ||
| <div class={props.isActive ? 'generator-type box active' : 'generator-type box'} onClick={handleClick}> | ||
| <h1>{props.title}</h1> | ||
| </div> | ||
| ); | ||
| if (typeof window !== 'undefined') { | ||
| hydrate(<App />, document.getElementById('app')); | ||
| } | ||
|
|
||
| function SummarySection() { | ||
| return ( | ||
| <div class="resource box"> | ||
| <h2>Summary</h2> | ||
| </div> | ||
| ); | ||
| export async function prerender(data) { | ||
| return await ssr(<App {...data} />); | ||
| } |