Client: Added toggles for all label contents

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

client/public/locales/en/common.json

@@ -85,9 +85,20 @@
     "qrcode": {
       "button": "Print QR Codes",
       "title": "QR Code Printing",
+      "spoolWeight": "Spool Weight: {{weight}}",
+      "lotNr": "Lot Nr: {{lot}}",
+      "bedTemp": "BT: {{temp}}",
+      "extruderTemp": "ET: {{temp}}",
       "textSize": "Content Text Size",
       "showSpoolmanIcon": "Show Spoolman Icon",
-      "showContent": "Print Label"
+      "showVendor": "Vendor",
+      "showContent": "Print Label",
+      "showLotNr": "Lot Nr",
+      "showSpoolWeight": "Spool Weight",
+      "showTemperatures": "Temperatures",
+      "showSpoolComment": "Spool Comment",
+      "showFilamentComment": "Filament Comment",
+      "showVendorComment": "Vendor Comment"
     },
     "spoolSelect": {
       "title": "Select Spools",

client/public/locales/sv/common.json

@@ -65,6 +65,7 @@
       "paperSize": "Papperstyp",
       "showBorder": "Visa ram",
       "previewScale": "Skala förhandsgranskning",
+      "skipItems": "Hoppa över objekt",
       "contentSettings": "Innehållsinställningar",
       "layoutSettings": "Layoutinställningar",
       "marginLeft": "Marginal - vänster",
@@ -84,9 +85,20 @@
     "qrcode": {
       "button": "Skriv ut QR-koder",
       "title": "QR-kod utskrift",
+      "spoolWeight": "Spolvikt: {{weight}}",
+      "lotNr": "Batch: {{lot}}",
+      "bedTemp": "BT: {{temp}}",
+      "extruderTemp": "ET: {{temp}}",
       "textSize": "Textstorlek",
       "showSpoolmanIcon": "Visa Spoolman-ikon",
-      "showContent": "Visa QR-kodsinnehåll"
+      "showContent": "Etikett",
+      "showVendor": "Leverantör",
+      "showLotNr": "Batchnummer",
+      "showSpoolWeight": "Spolvikt",
+      "showTemperatures": "Temperaturer",
+      "showSpoolComment": "Spolkommentar",
+      "showFilamentComment": "Filamentkommentar",
+      "showVendorComment": "Leverantörskommentar"
     },
     "spoolSelect": {
       "title": "Välj spolar",

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) {
+        items={selectedSpools}
-          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",
-          };
-        })}
       />
     </>
   );