From 9561111b90bf9abe23334bf34a9142a25204f343 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sat, 8 Jul 2023 23:11:50 +0200
Subject: [PATCH] Client: Added a colored spool icon in the lists

To indicate the filament color_hex field

Resolves #23
---
 client/src/icon_spool.svg           | 33 +++++++++++++++++++++++++++++
 client/src/pages/filaments/list.tsx | 25 +++++++++++++++++++++-
 client/src/pages/spools/list.tsx    | 24 ++++++++++++++++++++-
 3 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 client/src/icon_spool.svg

diff --git a/client/src/icon_spool.svg b/client/src/icon_spool.svg
new file mode 100644
index 0000000..aad88f1
--- /dev/null
+++ b/client/src/icon_spool.svg
@@ -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>
diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
index aaf5bc2..b88be17 100644
--- a/client/src/pages/filaments/list.tsx
+++ b/client/src/pages/filaments/list.tsx
@@ -24,11 +24,12 @@ import {
   typeFilters,
   useListFiltersForField,
 } from "../../utils/filtering";
-import { FilterOutlined } from "@ant-design/icons";
+import Icon, { FilterOutlined } from "@ant-design/icons";
 import {
   useInitialTableState,
   useStoreInitialState,
 } from "../../utils/saveload";
+import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
 
 dayjs.extend(utc);
 
@@ -151,10 +152,32 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
         <Table.Column
           dataIndex="name"
           title="Name"
+          width={150}
           sorter={true}
           sortOrder={getSortOrderForField(typedSorters, "name")}
           filters={useListFiltersForField(dataSource, "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
           dataIndex="material"
diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
index cb4e396..5bedc46 100644
--- a/client/src/pages/spools/list.tsx
+++ b/client/src/pages/spools/list.tsx
@@ -29,7 +29,8 @@ import {
   useInitialTableState,
   useStoreInitialState,
 } 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);
 
@@ -149,6 +150,27 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
           sortOrder={getSortOrderForField(typedSorters, "filament_name")}
           filters={useListFiltersForField(dataSource, "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
           dataIndex="used_weight"