Client: Added some info to qr code printing label

client/public/locales/en/common.json

@@ -82,7 +82,7 @@
       "title": "QR Code Printing",
       "textSize": "Content Text Size",
       "showSpoolmanIcon": "Show Spoolman Icon",
-      "showContent": "Show QR Code Content"
+      "showContent": "Print Label"
     },
     "spoolSelect": {
       "title": "Select Spools",

client/src/components/printing/printingDialog.tsx

@@ -160,14 +160,10 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
               <div
                 key={index}
                 style={{
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
                   width: `${
                     (paperWidth - marginLeft - marginRight) / paperColumns
                   }mm`,
                   height: `${calculatedRowHeight}mm`,
-                  flexDirection: "column",
                   border: borderShowMode === "grid" ? "1px solid #000" : "none",
                 }}
               >

client/src/components/printing/qrCodePrintingDialog.tsx

@@ -5,7 +5,7 @@ import { useTranslate } from "@refinedev/core";
 
 interface QRCodeData {
   value: string;
-  label?: string;
+  label?: JSX.Element;
   errorLevel?: "L" | "M" | "Q" | "H";
 }
 
@@ -26,7 +26,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
     "print-showContent",
     true
   );
-  const [textSize, setTextSize] = useSavedState("print-textSize", 5);
+  const [textSize, setTextSize] = useSavedState("print-textSize", 3);
   const [showSpoolmanIcon, setShowSpoolmanIcon] = useSavedState(
     "print-showSpoolmanIcon",
     true
@@ -34,7 +34,15 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
 
   const elements = items.map((item) => {
     return (
-      <>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          width: "100%",
+          maxHeight: "100%",
+          flexDirection: "row",
+        }}
+      >
         <QRCode
           className="print-qrcode"
           icon={showSpoolmanIcon ? "/favicon.ico" : undefined}
@@ -46,12 +54,12 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
         {showContent && (
           <div
             className="print-qrcode-title"
-            style={{ textAlign: "center", color: "#000" }}
+            style={{ textAlign: "left", color: "#000", overflow: "hidden" }}
           >
             {item.label ?? item.value}
           </div>
         )}
-      </>
+      </div>
     );
   });
 
@@ -74,8 +82,8 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
                 <Slider
                   disabled={!showContent}
                   tooltip={{ formatter: (value) => `${value} mm` }}
-                  min={3}
+                  min={2}
-                  max={15}
+                  max={7}
                   value={textSize}
                   step={0.1}
                   onChange={(value) => {
@@ -113,6 +121,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
             }
 
             .print-page .print-qrcode-title {
+                width: 100%;
                 font-size: ${textSize}mm;
             }
 

client/src/components/selectAndPrintDialog.tsx

@@ -7,12 +7,26 @@ import { Button } from "antd";
 import { ISpool } from "../pages/spools/model";
 import { PrinterOutlined } from "@ant-design/icons";
 import { useTranslate } from "@refinedev/core";
+import { IFilament } from "../pages/filaments/model";
 
 const SelectAndPrint: React.FC = () => {
   const t = useTranslate();
 
   const [step, setStep] = React.useState(0);
   const [selectedSpools, setSelectedSpools] = React.useState<ISpool[]>([]);
+
+  const formatFilament = (filament: IFilament) => {
+    let vendorPrefix = "";
+    if (filament.vendor) {
+      vendorPrefix = `${filament.vendor.name} - `;
+    }
+    let name = filament.name;
+    if (!name) {
+      name = `ID: ${filament.id}`;
+    }
+    return `${vendorPrefix}${name}`;
+  };
+
   return (
     <>
       <Button
@@ -40,11 +54,53 @@ const SelectAndPrint: React.FC = () => {
         onCancel={() => {
           setStep(1);
         }}
-        items={selectedSpools.map((spool) => ({
+        items={selectedSpools.map(function (spool) {
-          value: `web+spoolman:s-${spool.id}`,
+          const temps = [];
-          label: `s-${spool.id}`,
+          if (spool.filament.settings_extruder_temp) {
-          errorLevel: "H",
+            temps.push(`ET: ${spool.filament.settings_extruder_temp} °C`);
-        }))}
+          }
+          if (spool.filament.settings_bed_temp) {
+            temps.push(`BT: ${spool.filament.settings_bed_temp} °C`);
+          }
+          const tempLine = temps.join(" - ");
+
+          return {
+            value: `web+spoolman:s-${spool.id}`,
+            label: (
+              <p
+                style={{
+                  padding: "1mm 1mm 1mm 0",
+                }}
+              >
+                <b>{formatFilament(spool.filament)}</b>
+                <br />
+                <b>
+                  #{spool.id}
+                  {spool.filament.material && <> - {spool.filament.material}</>}
+                </b>
+                {spool.filament.spool_weight && (
+                  <>
+                    <br />
+                    Spool Weight: {spool.filament.spool_weight ?? "?"} g
+                  </>
+                )}
+                {tempLine && (
+                  <>
+                    <br />
+                    {tempLine}
+                  </>
+                )}
+                {spool.lot_nr && (
+                  <>
+                    <br />
+                    Lot Nr: {spool.lot_nr}
+                  </>
+                )}
+              </p>
+            ),
+            errorLevel: "H",
+          };
+        })}
       />
     </>
   );

client/src/pages/spools/create.tsx

@@ -41,8 +41,8 @@ export const SpoolCreate: React.FC<
     if (!name) {
       name = `ID: ${item.id}`;
     }
-    let material = ""
+    let material = "";
-	  if (item.material) {
+    if (item.material) {
       material = ` - ${item.material}`;
     }
     const label = `${vendorPrefix}${name}${material}`;

client/src/pages/spools/edit.tsx

@@ -25,8 +25,8 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     if (!name) {
       name = `ID: ${item.id}`;
     }
-    let material = ""
+    let material = "";
-	  if (item.material) {
+    if (item.material) {
       material = ` - ${item.material}`;
     }
     const label = `${vendorPrefix}${name}${material}`;