Merge pull request #32 from Maker-Management-Platform/30-integrate-3m…

…f-assets-in-the-ui 30 integrate 3mf assets in the UI
Maker-Management-Platform · Dec 22, 2023 · 9fc1c9d · 9fc1c9d
2 parents 46a324d + 1c07f8b
commit 9fc1c9d
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 25 deletions.
diff --git a/src/assets/components/model/model-card/ModelCard.tsx b/src/assets/components/model/model-card/ModelCard.tsx
@@ -1,50 +1,58 @@
-import {AspectRatio, Card, Group, Image, LoadingOverlay, rem, Text} from '@mantine/core';
+import { AspectRatio, Card, Group, Image, LoadingOverlay, rem, Text } from '@mantine/core';
 import classes from './ModelCard.module.css';
-import {SelectBtn} from "@/assets/components/parts/select-btn/SelectBtn.tsx";
+import { SelectBtn } from "@/assets/components/parts/select-btn/SelectBtn.tsx";
 import { DropDownMenu } from '../../parts/drop-down-menu/DropDownMenu';
 import { Icon3dRotate } from '@tabler/icons-react';
 import { AssetCardProps } from '../../AssetCardProps';
 import { SettingsContext } from '@/core/utils/settingsContext';
 import { useCallback, useContext, useState } from 'react';
 
-export function ModelCard({projectUuid, asset, selected, onSelectChange, view3d, onView3dChange, onDelete}: AssetCardProps) {
-    const {local_backend} = useContext(SettingsContext);
+export function ModelCard({ projectUuid, asset, selected, onSelectChange, view3d, onView3dChange, onDelete }: AssetCardProps) {
+    const { local_backend } = useContext(SettingsContext);
     const [loading, setLoading] = useState(false);
     const toggleLoadingCallback = useCallback(() => {
-        setLoading((l)=>{
+        setLoading((l) => {
             return !l
         })
-    },[loading])
+    }, [loading])
     const size = rem('280px');
     return (
-        <Card withBorder padding="lg" radius="md" className={classes.card} style={{ minWidth: size, width: size, borderColor: selected?'red':''}} >
-            <Card.Section mb="sm" onClick={()=>onSelectChange(true)}>
-                <AspectRatio ratio={16/9}>
-
-                    <Image
-                        src={`${local_backend}/projects/${projectUuid}/assets/${asset?.model?.image_sha1}`}
-                        alt={asset.name}
-                    />
+        <Card withBorder padding="lg" radius="md" className={classes.card} style={{ minWidth: size, width: size, borderColor: selected ? 'red' : '' }} >
+            <Card.Section mb="sm" onClick={() => onSelectChange(true)}>
+                <AspectRatio ratio={16 / 9}>
+                    {asset?.model?.image_sha1 &&
+                        <Image
+                            src={`${local_backend}/projects/${projectUuid}/assets/${asset?.model?.image_sha1}`}
+                            alt={asset.name}
+                        />}
+                    {!asset?.model?.image_sha1 &&
+                        <Image
+                            src={`https://picsum.photos/seed/${asset.sha1}/280`}
+                            alt={asset.name}
+                        />}
                 </AspectRatio>
             </Card.Section>
 
-            <Text fw={700} className={classes.title} mt="xs" onClick={()=>onSelectChange(true)}>
+            <Text fw={700} className={classes.title} mt="xs" onClick={() => onSelectChange(true)}>
                 {asset.name}
             </Text>
 
             <LoadingOverlay visible={loading} zIndex={1000} overlayProps={{ blur: 2 }} />
             <Card.Section className={classes.footer}>
                 <Group justify="flex-end">
                     <Group gap={0}>
-                        {onView3dChange && view3d!==undefined && <SelectBtn selected={view3d} onChange={onView3dChange} icon={<Icon3dRotate/>}/>}
+                        {asset.extension == '.stl' &&
+                            onView3dChange &&
+                            view3d !== undefined &&
+                            <SelectBtn selected={view3d} onChange={onView3dChange} icon={<Icon3dRotate />} />}
                         <DropDownMenu
                             projectUuid={projectUuid}
                             sha1={asset.sha1}
-                                openDetails={()=>onSelectChange(true)}
-                                downloadURL={`${local_backend}/projects/${projectUuid}/assets/${asset?.sha1}?download=true'`}
-                                onDelete={() => onDelete(projectUuid, asset.sha1)}
-                                toggleLoad={toggleLoadingCallback}>
-                            </DropDownMenu>
+                            openDetails={() => onSelectChange(true)}
+                            downloadURL={`${local_backend}/projects/${projectUuid}/assets/${asset?.sha1}?download=true'`}
+                            onDelete={() => onDelete(projectUuid, asset.sha1)}
+                            toggleLoad={toggleLoadingCallback}>
+                        </DropDownMenu>
                     </Group>
                 </Group>
             </Card.Section>

diff --git a/src/printers/components/edit-printer-page/EditPrinterPage.tsx b/src/printers/components/edit-printer-page/EditPrinterPage.tsx
@@ -1,10 +1,11 @@
 import { SettingsContext } from "@/core/utils/settingsContext";
 import useAxios from "axios-hooks";
 import { useContext } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { PrinterForm } from "../parts/printer-form/PrinterForm";
 
 export function EditPrinterPage() {
+    const navigate = useNavigate();
     const { local_backend } = useContext(SettingsContext);
     const { id } = useParams();
 
@@ -13,7 +14,7 @@ export function EditPrinterPage() {
     );
     return (<>
         <PrinterForm printer={data} onPrinterChange={function (p: any): void {
-            throw new Error("Function not implemented.");
-        } }/>
+            navigate("/printers")
+        }} />
     </>)
 }
diff --git a/src/printers/components/printers-page/parts/add-printer/AddPrinter.tsx b/src/printers/components/printers-page/parts/add-printer/AddPrinter.tsx
@@ -1,12 +1,14 @@
 import { Container } from "@mantine/core";
 import { Printer } from "@/printers/entities/Printer";
 import { PrinterForm } from "../../../parts/printer-form/PrinterForm";
+import { useNavigate } from "react-router-dom";
 
 export function AddPrinter() {
+    const navigate = useNavigate();
     return (<>
         <Container>
             <PrinterForm printer={{ name: '', type: '', address: '' } as Printer} onPrinterChange={function (p: Printer): void {
-                throw new Error("Function not implemented.");
+                navigate("/printers")
             }} />
         </Container>
     </>)