tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client: Added a colored spool icon in the lists

Browse Source 
To indicate the filament color_hex field

Resolves #23
This commit is contained in:
Donkie
2023-07-08 23:11:50 +02:00
parent 936b11de24
commit 9561111b90
3 changed files with 80 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
client/src/icon_spool.svg Normal file
View File

@@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
width="100%" height="100%" viewBox="0 0 235 500" xml:space="preserve">
<desc>Created with Fabric.js 5.3.0</desc>
<defs>
</defs>
<g transform="matrix(0.5875748337 0 0 3.9476902309 197.1354865303 250.0467513161)" id="z-gD78pOtWjQii31Q-6Ze" >
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.3815761198 0 0 3.4623174046 197.1354865303 250.0467382769)" id="qCAOML5j7kpAVIP3Df73i" >
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4;fill-rule: nonzero; opacity: 1;" fill="current" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
<g transform="matrix(2.0736420266 0 0 3.3577085856 117.2947215155 250.0467440227)" id="DwEIaQUSPW4DgKfkdPWoC" >
<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4;fill-rule: nonzero; opacity: 1;" fill="current" vector-effect="non-scaling-stroke" transform=" translate(-0.000005, 0)" d="M -38.50267 -65.24064 L 38.502680000000005 -65.24064 L 38.502680000000005 65.24064 L -38.50267 65.24064 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.5875748337 0 0 3.9476902309 37.4539565008 250.0467440227)" id="OvgM38-6CZm9R47a1TDIX" >
<filter id="SVGID_90" y="-24.74162191%" height="149.48324381999998%" x="-40.54702828%" width="181.09405656%" >
<feGaussianBlur in="SourceAlpha" stdDeviation="20"></feGaussianBlur>
<feOffset dx="30" dy="0" result="oBlur" ></feOffset>
<feFlood flood-color="rgb(0,0,0)" flood-opacity="0.8"/>
<feComposite in2="oBlur" operator="in" />
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(52,52,52); fill-rule: nonzero; opacity: 1;filter: url(#SVGID_90);" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.2435597948 0 0 1.6363849628 37.4539565008 250.0467440227)" id="woBV3Wt7ijQ6puNeMgAQD" >
<path style="stroke: rgb(110,11,48); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(17,17,17); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(0, 0)" d="M 0 -63.26949 C 34.92476 -63.26949 63.26949 -34.92476 63.26949 0 C 63.26949 34.92476 34.92476 63.26949 0 63.26949 C -34.92476 63.26949 -63.26949 34.92476 -63.26949 0 C -63.26949 -34.92476 -34.92476 -63.26949 0 -63.26949 z" stroke-linecap="round" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

25
client/src/pages/filaments/list.tsx
View File

@@ -24,11 +24,12 @@ import {
typeFilters, typeFilters,
useListFiltersForField, useListFiltersForField,
} from "../../utils/filtering"; } from "../../utils/filtering";
import { FilterOutlined } from "@ant-design/icons"; import Icon, { FilterOutlined } from "@ant-design/icons";
import { import {
useInitialTableState, useInitialTableState,
useStoreInitialState, useStoreInitialState,
} from "../../utils/saveload"; } from "../../utils/saveload";
import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
dayjs.extend(utc); dayjs.extend(utc);
@@ -151,10 +152,32 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<Table.Column <Table.Column
dataIndex="name" dataIndex="name"
title="Name" title="Name"
width={150}
sorter={true} sorter={true}
sortOrder={getSortOrderForField(typedSorters, "name")} sortOrder={getSortOrderForField(typedSorters, "name")}
filters={useListFiltersForField(dataSource, "name")} filters={useListFiltersForField(dataSource, "name")}
filteredValue={getFiltersForField(typedFilters, "name")} filteredValue={getFiltersForField(typedFilters, "name")}
render={(value, record: IFilament) => {
return (
<>
{record.color_hex && (
<Icon
component={SpoolIcon}
style={{
color: "#" + record.color_hex,
fontSize: 40,
verticalAlign: "middle",
marginLeft: -10,
marginRight: 0,
marginTop: -20,
marginBottom: -20,
}}
/>
)}
{value}
</>
);
}}
/> />
<Table.Column <Table.Column
dataIndex="material" dataIndex="material"

24
client/src/pages/spools/list.tsx
View File

@@ -29,7 +29,8 @@ import {
useInitialTableState, useInitialTableState,
useStoreInitialState, useStoreInitialState,
} from "../../utils/saveload"; } from "../../utils/saveload";
import { FilterOutlined } from "@ant-design/icons"; import Icon, { FilterOutlined } from "@ant-design/icons";
import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
dayjs.extend(utc); dayjs.extend(utc);
@@ -149,6 +150,27 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
sortOrder={getSortOrderForField(typedSorters, "filament_name")} sortOrder={getSortOrderForField(typedSorters, "filament_name")}
filters={useListFiltersForField(dataSource, "filament_name")} filters={useListFiltersForField(dataSource, "filament_name")}
filteredValue={getFiltersForField(typedFilters, "filament_name")} filteredValue={getFiltersForField(typedFilters, "filament_name")}
render={(value, record: ISpool) => {
return (
<>
{record.filament.color_hex && (
<Icon
component={SpoolIcon}
style={{
color: "#" + record.filament.color_hex,
fontSize: 40,
verticalAlign: "middle",
marginLeft: -10,
marginRight: 0,
marginTop: -20,
marginBottom: -20,
}}
/>
)}
{value}
</>
);
}}
/> />
<Table.Column <Table.Column
dataIndex="used_weight" dataIndex="used_weight"