diff --git a/package-lock.json b/package-lock.json index 1800c8e..0257d05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "axios": "^1.2.1", "bootstrap": "^5.2.3", "env-cmd": "^10.1.0", + "qr-code-styling": "^1.6.0-rc.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-repeatable": "^2.0.1", @@ -13756,6 +13757,19 @@ "teleport": ">=0.2.0" } }, + "node_modules/qr-code-styling": { + "version": "1.6.0-rc.1", + "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz", + "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==", + "dependencies": { + "qrcode-generator": "^1.4.3" + } + }, + "node_modules/qrcode-generator": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz", + "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==" + }, "node_modules/qs": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz", diff --git a/package.json b/package.json index 9019284..20f2077 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "axios": "^1.2.1", "bootstrap": "^5.2.3", "env-cmd": "^10.1.0", + "qr-code-styling": "^1.6.0-rc.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-repeatable": "^2.0.1", diff --git a/php/php-dog/upload.php b/php/php-dog/upload.php index d09d5a1..8a340a7 100644 --- a/php/php-dog/upload.php +++ b/php/php-dog/upload.php @@ -97,8 +97,15 @@ try { $conn = $db_connection->dbConnection(); // echo var_dump($conn); // Insert image file name into database - $statement = $conn->prepare("UPDATE dogs SET picture = :filePic WHERE qr_id = :user_qr_id"); - $update = $statement->execute(array('filePic' => $newPathFilename, 'user_qr_id' => $user["qr_id"])); + if(isset($_POST["qr"])) + { + $statement = $conn->prepare("UPDATE dogs SET qr_code = :filePath WHERE qr_id = :user_qr_id"); + } + else + { + $statement = $conn->prepare("UPDATE dogs SET picture = :filePath WHERE qr_id = :user_qr_id"); + } + $update = $statement->execute(array('filePath' => $newPathFilename, 'user_qr_id' => $user["qr_id"])); // echo var_dump($update); $count = $statement->rowCount(); // echo 'rowcount ' . $count . '\n'; diff --git a/src/components/Profil.tsx b/src/components/Profil.tsx index 475844d..f4bbceb 100644 --- a/src/components/Profil.tsx +++ b/src/components/Profil.tsx @@ -1,6 +1,7 @@ import React, { useContext, useState } from 'react' import { Link } from 'react-router-dom'; import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext'; +import CreateQr from '../services/CreateQr'; import Img from './Img'; import './Profil.css'; @@ -30,7 +31,14 @@ function Profil() email: resDog.data.data.email, name: resDog.data.data.name, phone: resDog.data.data.phone - }); + }); + if(resDog.data.data.qr_code === null) + { + // qrcode generieren und in der Datenbank speichern + CreateQr({qr_id: user.qr_id}); + } + + }) .catch((err) => console.error(err)); } diff --git a/src/services/CreateQr.ts b/src/services/CreateQr.ts new file mode 100644 index 0000000..f40f5c8 --- /dev/null +++ b/src/services/CreateQr.ts @@ -0,0 +1,49 @@ +import { Axios } from '../context/UserContext'; + +import React from 'react' +import QRCodeStyling from 'qr-code-styling'; + + +const upload = (file: File): Promise => +{ + let formData = new FormData(); + + formData.append("file", file); + formData.append("submit", "1"); + formData.append("qr", "1"); + + let uploadRes = Axios.post("upload.php", formData, { + headers: + { + "Content-Type": "multipart/form-data", + } + }); + + // let a: number = 1+3; + // a++; + return uploadRes; + }; + +export default function CreateQr({qr_id}:{qr_id: string | undefined}) +{ + const qrCode = new QRCodeStyling( + { + width: 200, + height: 200, + image: + "", + data: 'https://hope-fly.de/dog/'+ qr_id, + dotsOptions: + { + color: "#000", + type: "square" + }, + imageOptions: + { + crossOrigin: "anonymous", + margin: 0 + } + }); +// upload(qrCode._svg as File); + console.log(qrCode); +}