Merge pull request #461 from samturner3/master

Feature: Add option to use full URL in QR codes instead of web+spoolman: prefix

client/public/locales/cs/common.json

@@ -118,6 +118,15 @@
             "showSpoolComment": "Poznámka k cívce",
             "showFilamentComment": "Poznámka k filamentu",
             "showVendorComment": "Poznámka k výrobci",
+            "useHTTPUrl": {
+                "label": "Odkaz na QR kód",
+                "tooltip": "Použije proprietární odkaz, který bude fungovat pouze v případě, že bude skenován pomocí funkce skenování Spoolman (výchozí). Adresa URL používá buď základní adresu URL zadanou v nastavení, nebo adresu URL aktuální stránky, pokud není nastavena.",
+                "options": {
+                    "default": "Výchozí",
+                    "url": "URL"
+                },
+                "preview": "Náhled:"
+            },
             "template": "Šablona štítku",
             "templateHelp": "Pomocí {} vložíte hodnoty objektu cívky jako text. Například {id} bude nahrazeno ID cívky nebo {filament.material} bude nahrazeno materiálem cívky. Text uzavřete dvojitou hvězdičkou **, aby byl tučný. Kliknutím na tlačítko zobrazíte seznam všech dostupných značek.",
             "showQRCode": "Tisk QR kódu",
@@ -374,6 +383,10 @@
             "tab": "Obecné",
             "currency": {
                 "label": "Měna"
+            },
+            "base_url": {
+                "label": "Základní URL",
+                "tooltip": "Základní adresa URL, která se má použít při generování funkcí, jako jsou QR kódy"
             }
         },
         "settings": "Nastavení"

client/public/locales/en/common.json

@@ -109,6 +109,15 @@
             "templateHelp": "Use {} to insert values of the spool object as text. For example {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
             "textSize": "Label Text Size",
             "showContent": "Print Label",
+            "useHTTPUrl": {
+                "label": "QR code link",
+                "tooltip": "Will use proprietary link that will work only if scanned from Spoolman's scanning feature (default). URL uses either the base URL specified in settings, or the current page URL if not set.",
+                "options": {
+                    "default": "Default",
+                    "url": "URL"
+                },
+                "preview": "Preview:"
+            },
             "showQRCode": "Print QR Code",
             "showQRCodeMode": {
                 "no": "No",
@@ -300,6 +309,10 @@
             "tab": "General",
             "currency": {
                 "label": "Currency"
+            },
+            "base_url": {
+                "label": "Base URL",
+                "tooltip": "The base URL to use when generating features such as QR codes."
             }
         },
         "extra_fields": {

client/src/components/qrCodeScanner.tsx

@@ -18,6 +18,11 @@ const QRCodeScannerModal: React.FC = () => {
       setVisible(false);
       navigate(`/spool/show/${match.groups.id}`);
     }
+    const fullURLmatch = result.match(/^https?:\/\/[^/]+\/spool\/show\/(?<id>[0-9]+)$/);
+    if (fullURLmatch && fullURLmatch.groups) {
+      setVisible(false);
+      navigate(`/spool/show/${fullURLmatch.groups.id}`);
+    }
   };
 
   return (

client/src/pages/printing/qrCodePrintingDialog.tsx

@@ -1,8 +1,10 @@
 import { useTranslate } from "@refinedev/core";
-import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch } from "antd";
+import { Col, Form, InputNumber, QRCode, Radio, RadioChangeEvent, Row, Slider, Switch, Typography } from "antd";
 import { QRCodePrintSettings } from "./printing";
 import PrintingDialog from "./printingDialog";
 
+const { Text } = Typography;
+
 interface QRCodeData {
   value: string;
   label?: JSX.Element;
@@ -16,6 +18,9 @@ interface QRCodePrintingDialogProps {
   extraSettings?: JSX.Element;
   extraSettingsStart?: JSX.Element;
   extraButtons?: JSX.Element;
+  baseUrlRoot: string;
+  useHTTPUrl: boolean;
+  setUseHTTPUrl: (value: boolean) => void;
 }
 
 const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
@@ -25,6 +30,9 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
   extraSettings,
   extraSettingsStart,
   extraButtons,
+  baseUrlRoot,
+  useHTTPUrl,
+  setUseHTTPUrl,
 }) => {
   const t = useTranslate();
 
@@ -87,6 +95,23 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
               buttonStyle="solid"
             />
           </Form.Item>
+          {showQRCodeMode !== "no" && (
+            <>
+              <Form.Item
+                label={t("printing.qrcode.useHTTPUrl.label")}
+                tooltip={t("printing.qrcode.useHTTPUrl.tooltip")}
+                style={{ marginBottom: 0 }}
+              >
+                <Radio.Group onChange={(e) => setUseHTTPUrl(e.target.value)} value={useHTTPUrl}>
+                  <Radio value={false}>{t("printing.qrcode.useHTTPUrl.options.default")}</Radio>
+                  <Radio value={true}>{t("printing.qrcode.useHTTPUrl.options.url")}</Radio>
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item label={t("printing.qrcode.useHTTPUrl.preview")}>
+                <Text> {useHTTPUrl ? `${baseUrlRoot}/spool/show/{id}` : `web+spoolman:s-{id}`}</Text>
+              </Form.Item>
+            </>
+          )}
           <Form.Item label={t("printing.qrcode.showContent")}>
             <Switch
               checked={showContent}

client/src/pages/printing/spoolQrCodePrintingDialog.tsx

@@ -1,4 +1,5 @@
 import { CopyOutlined, DeleteOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
+import { useGetSetting } from "../../utils/querySettings";
 import { useTranslate } from "@refinedev/core";
 import { Button, Flex, Form, Input, Modal, Popconfirm, Select, Table, Typography, message } from "antd";
 import TextArea from "antd/es/input/TextArea";
@@ -24,7 +25,13 @@ interface SpoolQRCodePrintingDialog {
 
 const SpoolQRCodePrintingDialog: React.FC<SpoolQRCodePrintingDialog> = ({ spoolIds }) => {
   const t = useTranslate();
+  const baseUrlSetting = useGetSetting("base_url");
+  const baseUrlRoot =
+    baseUrlSetting.data?.value !== undefined && JSON.parse(baseUrlSetting.data?.value) !== ""
+      ? JSON.parse(baseUrlSetting.data?.value)
+      : window.location.origin;
   const [messageApi, contextHolder] = message.useMessage();
+  const [useHTTPUrl, setUseHTTPUrl] = useSavedState("print-useHTTPUrl", false);
 
   const itemQueries = useGetSpoolsByIds(spoolIds);
   const items = itemQueries
@@ -231,6 +238,9 @@ Lot Nr: {lot_nr}
           curPreset.labelSettings = newSettings;
           updateCurrentPreset(curPreset);
         }}
+        baseUrlRoot={baseUrlRoot}
+        useHTTPUrl={useHTTPUrl}
+        setUseHTTPUrl={setUseHTTPUrl}
         extraSettingsStart={
           <>
             <Form.Item label={t("printing.generic.settings")}>
@@ -290,7 +300,7 @@ Lot Nr: {lot_nr}
           </>
         }
         items={items.map((spool) => ({
-          value: `web+spoolman:s-${spool.id}`,
+          value: useHTTPUrl ? `${baseUrlRoot}/spool/show/${spool.id}` : `web+spoolman:s-${spool.id}`,
           label: (
             <p
               style={{

client/src/pages/settings/generalSettings.tsx

@@ -5,6 +5,7 @@ import { useGetSettings, useSetSetting } from "../../utils/querySettings";
 
 export function GeneralSettings() {
   const settings = useGetSettings();
+  const setBaseUrl = useSetSetting("base_url");
   const setCurrency = useSetSetting("currency");
   const [form] = Form.useForm();
   const [messageApi, contextHolder] = message.useMessage();
@@ -15,6 +16,7 @@ export function GeneralSettings() {
     if (settings.data) {
       form.setFieldsValue({
         currency: JSON.parse(settings.data.currency.value),
+        base_url: JSON.parse(settings.data.base_url.value),
       });
     }
   }, [settings.data, form]);
@@ -27,11 +29,15 @@ export function GeneralSettings() {
   }, [setCurrency.isSuccess, messageApi, t]);
 
   // Handle form submit
-  const onFinish = (values: { currency: string }) => {
+  const onFinish = (values: { currency: string; base_url: string }) => {
     // Check if the currency has changed
     if (settings.data?.currency.value !== JSON.stringify(values.currency)) {
       setCurrency.mutate(values.currency);
     }
+    // Check if the base URL has changed
+    if (settings.data?.base_url.value !== JSON.stringify(values.base_url)) {
+      setBaseUrl.mutate(values.base_url);
+    }
   };
 
   return (
@@ -64,6 +70,22 @@ export function GeneralSettings() {
           <Input />
         </Form.Item>
 
+        <Form.Item
+          label={t("settings.general.base_url.label")}
+          tooltip={t("settings.general.base_url.tooltip")}
+          name="base_url"
+          rules={[
+            {
+              required: false,
+            },
+            {
+              pattern: /^https?:\/\/.+(?<!\/)$/,
+            },
+          ]}
+        >
+          <Input placeholder="https://example.com:8000" />
+        </Form.Item>
+
         <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
           <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
             {t("buttons.save")}