Client: Added toggles for all label contents

Can now print spool/filament/vendor comments on the labels.
Translated label contents

client/src/components/printing/qrCodePrintingDialog.tsx

@@ -13,9 +13,10 @@ interface QRCodePrintingDialogProps {
   visible: boolean;
   items: QRCodeData[];
   onCancel: () => void;
+  extraSettings?: JSX.Element;
 }
 
-const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, items, onCancel }) => {
+const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, items, onCancel, extraSettings }) => {
   const t = useTranslate();
 
   const [showContent, setShowContent] = useSavedState("print-showContent", true);
@@ -28,7 +29,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, it
         <div className="print-qrcode-container">
           <QRCode
             className="print-qrcode"
-            icon={showSpoolmanIcon ? "/favicon.ico" : undefined}
+            icon={showSpoolmanIcon ? "/favicon.svg" : undefined}
             value={item.value}
             errorLevel={item.errorLevel}
             type="svg"
@@ -83,6 +84,7 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, it
           <Form.Item label={t("printing.qrcode.showSpoolmanIcon")}>
             <Switch checked={showSpoolmanIcon} onChange={(checked) => setShowSpoolmanIcon(checked)} />
           </Form.Item>
+          {extraSettings}
         </>
       }
       style={`
@@ -90,10 +92,11 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({ visible, it
               display: flex;
               width: 100%;
               max-height: 100%;
+              justify-content: center;
             }
 
             .print-page .print-qrcode-container {
-              max-width: 50%;
+              max-width: ${showContent ? "50%" : "100%"};
               display: flex;
             }
 

client/src/components/printing/spoolQrCodePrintingDialog.tsx

@@ -0,0 +1,135 @@
+import { Form, Switch } from "antd";
+import { IFilament } from "../../pages/filaments/model";
+import { ISpool } from "../../pages/spools/model";
+import QRCodePrintingDialog from "./qrCodePrintingDialog";
+import { useSavedState } from "../../utils/saveload";
+import { useTranslate } from "@refinedev/core";
+
+interface SpoolQRCodePrintingDialog {
+  visible: boolean;
+  items: ISpool[];
+  onCancel: () => void;
+}
+
+const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ visible, items, onCancel }) => {
+  const t = useTranslate();
+
+  const [showVendor, setShowVendor] = useSavedState("print-showVendor", true);
+  const [showLotNr, setShowLotNr] = useSavedState("print-showLotNr", true);
+  const [showSpoolWeight, setShowSpoolWeight] = useSavedState("print-showSpoolWeight", true);
+  const [showTemperatures, setShowTemperatures] = useSavedState("print-showTemperatures", true);
+  const [showSpoolComment, setShowSpoolComment] = useSavedState("print-showSpoolComment", false);
+  const [showFilamentComment, setShowFilamentComment] = useSavedState("print-showFilamentComment", false);
+  const [showVendorComment, setShowVendorComment] = useSavedState("print-showVendorComment", false);
+
+  const formatFilament = (filament: IFilament) => {
+    let vendorPrefix = "";
+    if (showVendor && filament.vendor) {
+      vendorPrefix = `${filament.vendor.name} - `;
+    }
+    let name = filament.name;
+    if (!name) {
+      name = `Filament #${filament.id}`;
+    }
+    return `${vendorPrefix}${name}`;
+  };
+
+  return (
+    <QRCodePrintingDialog
+      visible={visible}
+      onCancel={onCancel}
+      items={items.map(function (spool) {
+        const temps = [];
+        if (spool.filament.settings_extruder_temp) {
+          temps.push(t("printing.qrcode.extruderTemp", { temp: `${spool.filament.settings_extruder_temp} °C` }));
+        }
+        if (spool.filament.settings_bed_temp) {
+          temps.push(t("printing.qrcode.bedTemp", { temp: `${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>
+              {showSpoolWeight && (
+                <>
+                  <br />
+                  {t("printing.qrcode.spoolWeight", { weight: `${spool.filament.spool_weight ?? "?"} g` })}
+                </>
+              )}
+              {showTemperatures && tempLine && (
+                <>
+                  <br />
+                  {tempLine}
+                </>
+              )}
+              {showLotNr && (
+                <>
+                  <br />
+                  {t("printing.qrcode.lotNr", { lot: spool.lot_nr ?? "?" })}
+                </>
+              )}
+              {showSpoolComment && spool.comment && (
+                <>
+                  <br />
+                  {spool.comment}
+                </>
+              )}
+              {showFilamentComment && spool.filament.comment && (
+                <>
+                  <br />
+                  {spool.filament.comment}
+                </>
+              )}
+              {showVendorComment && spool.filament.vendor?.comment && (
+                <>
+                  <br />
+                  {spool.filament.vendor.comment}
+                </>
+              )}
+            </p>
+          ),
+          errorLevel: "H",
+        };
+      })}
+      extraSettings={
+        <>
+          <Form.Item label={t("printing.qrcode.showVendor")}>
+            <Switch checked={showVendor} onChange={(checked) => setShowVendor(checked)} />
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.showSpoolWeight")}>
+            <Switch checked={showSpoolWeight} onChange={(checked) => setShowSpoolWeight(checked)} />
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.showTemperatures")}>
+            <Switch checked={showTemperatures} onChange={(checked) => setShowTemperatures(checked)} />
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.showLotNr")}>
+            <Switch checked={showLotNr} onChange={(checked) => setShowLotNr(checked)} />
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.showSpoolComment")}>
+            <Switch checked={showSpoolComment} onChange={(checked) => setShowSpoolComment(checked)} />
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.showFilamentComment")}>
+            <Switch checked={showFilamentComment} onChange={(checked) => setShowFilamentComment(checked)} />
+          </Form.Item>
+          <Form.Item label={t("printing.qrcode.showVendorComment")}>
+            <Switch checked={showVendorComment} onChange={(checked) => setShowVendorComment(checked)} />
+          </Form.Item>
+        </>
+      }
+    />
+  );
+};
+
+export default SpoolQRCodePrintingDialog;

client/src/components/selectAndPrintDialog.tsx

@@ -2,12 +2,11 @@
 
 import React from "react";
 import SpoolSelectModal from "./spoolSelectModal";
-import QRCodePrintingDialog from "./printing/qrCodePrintingDialog";
 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";
+import SpoolQRCodePrintingDialog from "./printing/spoolQrCodePrintingDialog";
 
 const SelectAndPrint: React.FC = () => {
   const t = useTranslate();
@@ -15,18 +14,6 @@ const SelectAndPrint: React.FC = () => {
   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
@@ -49,58 +36,12 @@ const SelectAndPrint: React.FC = () => {
           setStep(2);
         }}
       />
-      <QRCodePrintingDialog
+      <SpoolQRCodePrintingDialog
         visible={step === 2}
         onCancel={() => {
-          setStep(1);
+          setStep(0);
         }}
-        items={selectedSpools.map(function (spool) {
-          const temps = [];
-          if (spool.filament.settings_extruder_temp) {
-            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",
-          };
-        })}
+        items={selectedSpools}
       />
     </>
   );