createqr

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",

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",

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");
+            if(isset($_POST["qr"]))
-            $update = $statement->execute(array('filePic' => $newPathFilename, 'user_qr_id' => $user["qr_id"]));
+            {
+                $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';

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';
 
@@ -31,6 +32,13 @@ function Profil()
                     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));
     }

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<any> => 
+{
+    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);
+}