Qr werte sichern

php/php-dog/getDog.php

@@ -42,7 +42,10 @@ else
 
     try
     {
-        $fetch_user_qr_id = "SELECT id, qr_id, email, name, phone, qr_code, picture FROM `dogs` WHERE `qr_id`=:qr_id";
+        $fetch_user_qr_id = 
+        "SELECT id, qr_id, email, name, phone, 
+        qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence,
+        qr_code, picture FROM `dogs` WHERE `qr_id`=:qr_id";
         $query_stmt = $conn->prepare($fetch_user_qr_id);
         $query_stmt->bindValue(':qr_id', $qr_id,PDO::PARAM_STR);
         $query_stmt->execute();

php/php-dog/updateQR.php

@@ -0,0 +1,106 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Headers: access");
+header("Access-Control-Allow-Methods: POST");
+header("Content-Type: application/json; charset=UTF-8");
+header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
+
+session_start();
+
+require __DIR__ . '/classes/Database.php';
+require __DIR__ . '/classes/lib.php';
+$db_connection = new Database();
+$conn = $db_connection->dbConnection();
+
+// DATA FORM REQUEST
+$data = json_decode(file_get_contents("php://input"));
+$returnData = new CMsg(0);
+
+if ($_SERVER["REQUEST_METHOD"] != "POST") 
+{
+    $returnData = new CMsg(0, 404, 'Page Not Found! REQUEST_METHOD');
+    echo $returnData->jsonarray();
+    return;
+}
+
+if (!isset($_SESSION["user"])) 
+{
+    $result = new CMsg(0, 401, "not logged in");
+    echo $result->jsonarray();
+    return;
+}
+
+$user = $_SESSION["user"];
+
+if (
+    !isset($data->qr_width_cm)
+    || !isset($data->qr_height_cm)
+    || !isset($data->qr_fontsize)
+    || !isset($data->qr_visible_items)
+    || !isset($data->qr_item_sequence)
+    || empty(trim($data->qr_width_cm))
+    || empty(trim($data->qr_height_cm))
+    || empty(trim($data->qr_fontsize))
+    || empty(trim($data->qr_visible_items))
+    || empty(trim($data->qr_item_sequence))
+) 
+{
+
+    $fields = ['fields' => ['qr_width_cm', 'qr_height_cm', 'qr_fontsize', 'qr_visible_items', 'qr_item_sequence']];
+    $returnData = new CMsg(0, 422, 'Please Fill in all Required Fields!', $fields);
+    echo $returnData->jsonarray();
+    return;
+}
+
+// IF THERE ARE NO EMPTY FIELDS THEN-
+$qr_width_cm = trim($data->qr_width_cm);
+$qr_height_cm = trim($data->qr_height_cm);
+$qr_fontsize = trim($data->qr_fontsize);
+$qr_visible_items = trim($data->qr_visible_items);
+$qr_item_sequence = trim($data->qr_item_sequence);
+
+try 
+{
+    $update_query =    
+"
+UPDATE
+    `dogs`
+SET
+    `qr_width_cm` = :qr_width_cm,                          
+    `qr_height_cm` = :qr_height_cm,
+    `qr_fontsize` = :qr_fontsize,
+    `qr_visible_items` = :qr_visible_items,
+    `qr_item_sequence` = :qr_item_sequence
+WHERE
+    `qr_id` = :qr_id";
+
+    $statement = $conn->prepare($update_query);
+    $update = $statement->execute(
+        array(
+            'qr_width_cm' => $qr_width_cm, 
+            'qr_height_cm' => $qr_height_cm, 
+            'qr_fontsize' => $qr_fontsize, 
+            'qr_visible_items' => $qr_visible_items, 
+            'qr_item_sequence' => $qr_item_sequence, 
+            'qr_id' => $user["qr_id"]
+        ));
+
+    $count = $statement->rowCount();
+        
+    if ($update && $count > 0) 
+    {
+        $returnData = new CMsg(1, 201, 'Updated');
+    }
+    else
+    {
+        $returnData = new CMsg(0, 304, 'No Update done!');
+    }
+
+} 
+catch (PDOException $e) 
+{
+    $returnData = new CMsg(0, 500, $e->getMessage());
+}
+
+echo $returnData->jsonarray();
+?>

src/App.css

@@ -12,3 +12,10 @@
     justify-content: center;
 }
 
+@media print 
+{
+  .noprint
+  {
+      display: none;
+  }
+}

src/components/Footer.tsx

@@ -3,7 +3,7 @@ import './Footer.css';
 
 function Footer() {
   return (
-    <div><Link to={'./Impressum'}>Impressum</Link></div>
+    <div className="noprint"><Link to={'./Impressum'}>Impressum</Link></div>
   );
 }
 

src/components/Header.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import './Header.css';
+import '../App.css';
 import {Axios, UserCtx, UserCtxT} from '../context/UserContext';
 import { useNavigate } from 'react-router-dom';
 
@@ -24,7 +25,7 @@ function Header() {
     
     return (
     <div className='logout'>
-        <div>Header</div>
+        <div className='noprint'>Header</div>
         <button onClick={logOut}>Logout</button>
     </div>
   );

src/components/Qr.css

@@ -4,16 +4,6 @@ img
     width: 2.4cm;
     background: #ffffff;
 }
-.qrCode
-{
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 3.7cm;
-    justify-content: space-evenly;
-    background: #fff;
-    width: 2.4cm;
-}
 
 .qrCodeBackFront
 {
@@ -34,17 +24,31 @@ img
     writing-mode: vertical-rl;
 }
 
-.qrCodeVert
+.column
 {
     align-items: center;
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+
+.qrCode
+{
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     height: 3.7cm;
     justify-content: space-evenly;
     background: #fff;
     width: 2.4cm;
 }
 
+.vert
+{
+    flex-direction: row-reverse;
+}
+
+
 .spinBtn
 {
     display: flex;
@@ -91,3 +95,20 @@ img
     margin-top:15px;
     cursor:move;
 }
+
+.printButton, .saveButton
+{
+    margin-bottom: 20px;
+}
+
+@media print 
+{
+    .qrSettings
+    {
+      display: none;
+    }
+    button, a
+    {
+      display: none;
+    }
+}

src/components/Qr.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, { MouseEventHandler, useCallback, useContext, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
 import Checkbox from './Checkbox';
@@ -11,13 +11,20 @@ type ListItemT =
     ordernum: number;
 }
 
+
+
+
 export default function Qr() 
 {
-    const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const { user, updateQR } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
-    const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
+    const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
+    const [width, setWidth] = useState(2.4);
+    const [height, setHeight] = useState(3.7);
     const [fontSize, setFontSize] = useState(100);
     const [visibleItem, setVisibleItem] = useState(0b111); // 100 name, 10 phone, 1 email
     const [itemOrder, setItemOrder] = useState(123); //  name first, phone second, email third
+    const [errMsg, setErrMsg] = useState("false");
+    const [successMsg, setSuccessMsg] = useState("false");
     const [itemList, setItemList] = useState([
                                                 {name:'Name', ordernum: 1},
                                                 {name:'Telefon', ordernum: 2},
@@ -28,23 +35,27 @@ export default function Qr()
     const dragItem = React.useRef<any>(null);
     const dragOverItem = React.useRef<any>(null);
 
-    const incrementFontSize = (():void =>
+    const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
     {
+        event.preventDefault();
         if(fontSize < 200)
         {
             setFontSize(fontSize + 1);
         }
 
         console.log("\nincrementFontSize " + fontSize);
+        return;
     });
 
-    const decrementFontSize = (():void =>  
+    const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>  
     {
+        event.preventDefault();
         if(fontSize > 1)
         {
             setFontSize(fontSize -1);
         }
         console.log("\ndecrementFontSize " + fontSize);
+        return;
     });
 
     function setBitField(val: number, checked: boolean, bit: number) : number
@@ -86,6 +97,16 @@ export default function Qr()
 
         return ordernum;
     }
+
+    function getItemOrderNumber_(order: number, digit: number)
+    {
+        let ordernum = order; // 123
+        ordernum = ordernum % (digit*10); // 123
+        ordernum = Math.trunc(ordernum / digit);
+
+        return ordernum;
+    }
+
 	//const handle drag sorting
 	function handleSort()
     {
@@ -116,6 +137,78 @@ export default function Qr()
         setItemOrder(newItemOrder);
 	}
     
+    function oneQrBlock()
+    {
+        return(
+    <div className='qrCodeBackFront'>
+        <div className='qrCode frame'>
+            <div className='qrCode__'>SCAN ME</div>
+            <Img pth={dog.data.qr_code}/>
+        </div>
+        <div className='qrCode vert frame' style={{ fontSize: fontSize + '%' }}>
+            {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
+            {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
+            {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
+        </div>
+    </div>);
+    }
+    
+
+
+    const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => 
+    {
+        event.preventDefault();
+        console.log("saveHandler \n");
+        console.log(event);
+        updateQR(
+            { 
+                qr_width_cm: width, 
+                qr_height_cm: height, 
+                qr_fontsize: fontSize, 
+                qr_visible_items: visibleItem, 
+                qr_item_sequence: itemOrder
+            }
+        ).then((resQR) =>
+        {
+            if(resQR.success)
+            {
+                setSuccessMsg('Daten gesichert!');
+                setErrMsg("false");
+            }
+            else if(!resQR.success && resQR.message)
+            {
+                setSuccessMsg("false");
+                setErrMsg(resQR.message);
+            }
+        })
+        .catch((err) => console.error(err));
+        return;
+    }
+
+    const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => 
+    {
+        event.preventDefault();
+        console.log("printHandler \n");
+        console.log(event);
+        window.print();
+        return;
+    }
+
+    function OrderItemList(order: number)
+    {
+		let _itemList: {name:string; ordernum: number}[] = [];
+        let oNum = getItemOrderNumber_(order, 100);
+        let item = itemList.find( x => x.ordernum === oNum);
+        _itemList.push(item!);
+        oNum = getItemOrderNumber_(order, 10);
+        item = itemList.find( x => x.ordernum === oNum);
+        _itemList.push(item!);
+        oNum = getItemOrderNumber_(order, 1);
+        item = itemList.find( x => x.ordernum === oNum);
+        _itemList.push(item!);
+        setItemList(_itemList);
+    }
+
     if(user && dog.success === undefined)
     {
         Axios.post<ResponseT>('getDog.php', 
@@ -124,7 +217,12 @@ export default function Qr()
         })
         .then((resDog) =>
         {
-            setDog(resDog.data);    
+            let locDog: DogT = resDog.data.data;
+            setDog(resDog.data); // ResponseT
+            setFontSize(locDog.qr_fontsize);
+            setVisibleItem(locDog.qr_visible_items);
+            setItemOrder(locDog.qr_item_sequence);
+            OrderItemList(locDog.qr_item_sequence);
         })
         .catch((err) => console.error(err));
     }
@@ -135,12 +233,15 @@ export default function Qr()
             <div>
                 <h1>Qr-Code Druck</h1>
                 <Link to={"/profil"}>Zurück zum Profil</Link>
+                <div className='qrSettings____'>
                 <div className='qrSettings'>
-                    <div>Schriftgröße</div>
+                    <div>
-                    <div className='spinBtn'> 
+                        <div>Schriftgröße</div>
-                        <button onClick={decrementFontSize}>-</button>
+                        <div className='spinBtn'> 
-                        <div>{fontSize}</div>
+                            <button onClick={decrementFontSize}>-</button>
-                        <button onClick={incrementFontSize}>+</button>
+                            <div>{fontSize}</div>
+                            <button onClick={incrementFontSize}>+</button>
+                        </div>
                     </div>
                     <div>
                     <div>Sichtbare Elemente</div>
@@ -163,104 +264,40 @@ export default function Qr()
                             changeEvent={checkBoxChange}
                             />
                     </div>
-                    <div>Reihenfolge</div>
+                    <div>
-                    <div className="list-container">
+                        <div>Reihenfolge</div>
-                    {itemList.map((item, index) => (
+                        <div className="list-container">
-                        <div
+                        {itemList.map((item, index) => (
-                            key={index}
+                            <div
-                            className="list-item"
+                                key={index}
-                            draggable
+                                className="list-item"
-                            onDragStart={(e) => (dragItem.current = index)}
+                                draggable
-                            onDragEnter={(e) => (dragOverItem.current = index)}
+                                onDragStart={(e) => (dragItem.current = index)}
-                            onDragEnd={handleSort}
+                                onDragEnter={(e) => (dragOverItem.current = index)}
-                            onDragOver={(e) => e.preventDefault()}>
+                                onDragEnd={handleSort}
-                            <h6>{item.name}</h6>
+                                onDragOver={(e) => e.preventDefault()}>
+                                <h6>{item.name}</h6>
+                            </div>
+                        ))}
                         </div>
-                    ))}
                     </div>
                 </div>
-                
+                <div className='column'>
+                <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
+                <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
+                {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
+                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
+                </div>
+                </div>
                 <div className='blockRepeat'>
-                <div className='qrCodeBackFront'>
+                {oneQrBlock()}
-                    <div className='qrCode frame'>
+                {oneQrBlock()}
-                        <div className='qrCode__'>SCAN ME</div>
+                {oneQrBlock()}
-                        <Img pth={dog.data.qr_code}/>
+                {oneQrBlock()}
-                    </div>
+                {oneQrBlock()}
-                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
+                {oneQrBlock()}
-                        {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
-                        {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
-                        {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
-                    </div>
-                </div>
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
-                        {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
-                        {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
-                        {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
-                    </div>
-                </div>
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
-                        {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
-                        {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
-                        {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
-                    </div>
-                </div>
-
-
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
-                        {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
-                        {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
-                        {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
-                    </div>
-                </div>
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
-                        {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
-                        {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
-                        {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
-                    </div>
-                </div>
-
-
-                <div className='qrCodeBackFront'>
-                    <div className='qrCode frame'>
-                        <div className='qrCode__'>SCAN ME</div>
-                        <Img pth={dog.data.qr_code}/>
-                    </div>
-                    <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
-                        {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
-                        {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
-                        {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
-                    </div>
-                </div>
                 </div>
             </div> }
-            {/* { !dog.data && user &&  
-                <>
-                    <h1>Qr-Code Druck</h1>
-                    <div>Logged in als:</div>
-                    <div>{user?.email}</div>
-                    <div>{user?.qr_id}</div>
-                </>
-            } */}
             { !dog.data && !user &&  
                 <>
                     <h1>Qr-Code Druck</h1>

src/context/UserContext.tsx

@@ -22,6 +22,11 @@ export type DogT =
   email: string,
   name: string,
   phone: string,
+  qr_width_cm: number,
+  qr_height_cm: number,
+  qr_fontsize: number,
+  qr_visible_items: number,
+  qr_item_sequence: number,
   qr_code: string,
   picture: string
 };
@@ -54,6 +59,14 @@ export type UserCtxT =
         phone: string;
     }) => Promise<any>,
     
+    updateQR: ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}: {
+        qr_width_cm: number;
+        qr_height_cm: number;
+        qr_fontsize: number;
+        qr_visible_items: number;
+        qr_item_sequence: number;
+    }) => Promise<any>,
+    
     loginUser: (
         { email, password } : 
         {
@@ -128,6 +141,26 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
         }
     }
 
+    const updateQR = async ({qr_width_cm, qr_height_cm, qr_fontsize, qr_visible_items, qr_item_sequence}:
+        {qr_width_cm: number, qr_height_cm: number, qr_fontsize: number, qr_visible_items: number, qr_item_sequence: number}) => {
+        setWait(true);
+        try{
+            const {data} = await Axios.post('updateQR.php',{
+                qr_width_cm,
+                qr_height_cm,
+                qr_fontsize,
+                qr_visible_items,
+                qr_item_sequence 
+            });
+            setWait(false);
+            return data;
+        }
+        catch(err){
+            setWait(false);
+            return {success:0, message:'Server Error!'};
+        }
+    }
+
     const loginUser = async ({email,password}:{email: string, password: string}) => 
     {
         setWait(true);
@@ -237,6 +270,7 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
             {
                 registerUser,
                 updateDog,
+                updateQR,
                 loginUser,
                 wait, 
                 user,