|
|
@ -2,10 +2,13 @@ import {
|
|
|
|
Component,
|
|
|
|
Component,
|
|
|
|
createEffect,
|
|
|
|
createEffect,
|
|
|
|
createResource,
|
|
|
|
createResource,
|
|
|
|
|
|
|
|
createSignal,
|
|
|
|
JSX,
|
|
|
|
JSX,
|
|
|
|
|
|
|
|
Show,
|
|
|
|
splitProps,
|
|
|
|
splitProps,
|
|
|
|
} from "solid-js";
|
|
|
|
} from "solid-js";
|
|
|
|
import qrcode from "qrcode";
|
|
|
|
import qrcode from "qrcode";
|
|
|
|
|
|
|
|
import WarningIcon from "~icons/carbon/warning-alt-filled";
|
|
|
|
|
|
|
|
|
|
|
|
const QrCode: Component<
|
|
|
|
const QrCode: Component<
|
|
|
|
{
|
|
|
|
{
|
|
|
@ -21,15 +24,26 @@ const QrCode: Component<
|
|
|
|
]);
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
let ref: HTMLDivElement = undefined!;
|
|
|
|
let ref: HTMLDivElement = undefined!;
|
|
|
|
|
|
|
|
const [qrError, setQrError] = createSignal<string | undefined>();
|
|
|
|
|
|
|
|
|
|
|
|
const [svg] = createResource(
|
|
|
|
const [svg] = createResource(
|
|
|
|
() => props.value,
|
|
|
|
() => props.value,
|
|
|
|
(value) => {
|
|
|
|
async (value) => {
|
|
|
|
return qrcode.toString(value, {
|
|
|
|
let svg;
|
|
|
|
type: "svg",
|
|
|
|
|
|
|
|
margin: props.margin,
|
|
|
|
try {
|
|
|
|
errorCorrectionLevel: props.errorCorrectionLevel as any,
|
|
|
|
svg = await qrcode.toString(value, {
|
|
|
|
});
|
|
|
|
type: "svg",
|
|
|
|
|
|
|
|
margin: props.margin,
|
|
|
|
|
|
|
|
errorCorrectionLevel: props.errorCorrectionLevel as any,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
setQrError();
|
|
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
|
|
console.error(err);
|
|
|
|
|
|
|
|
setQrError((err as Error).message);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return svg;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
@ -40,7 +54,17 @@ const QrCode: Component<
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
return <div ref={ref} {...rest}></div>;
|
|
|
|
return (
|
|
|
|
|
|
|
|
<>
|
|
|
|
|
|
|
|
<Show when={qrError()}>
|
|
|
|
|
|
|
|
<div class="absolute h-full p-3 gap-2 rounded-sm flex items-start bg-error/80 backdrop-blur-sm ring-2 ring-error ring-offset-2 border border-error text-error-content overflow-y-auto">
|
|
|
|
|
|
|
|
<WarningIcon width="2em" height="2em" class="flex-shrink-0" /> Fehler:{" "}
|
|
|
|
|
|
|
|
{qrError()}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</Show>
|
|
|
|
|
|
|
|
<div ref={ref} {...rest}></div>
|
|
|
|
|
|
|
|
</>
|
|
|
|
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export default QrCode;
|
|
|
|
export default QrCode;
|
|
|
|