diff --git a/php/php-dog/getDog.php b/php/php-dog/getDog.php index 752c28b..c525871 100644 --- a/php/php-dog/getDog.php +++ b/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(); diff --git a/php/php-dog/updateQR.php b/php/php-dog/updateQR.php new file mode 100644 index 0000000..30c8592 --- /dev/null +++ b/php/php-dog/updateQR.php @@ -0,0 +1,106 @@ +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(); +?> diff --git a/src/App.css b/src/App.css index 99aecc8..c9fe660 100644 --- a/src/App.css +++ b/src/App.css @@ -12,3 +12,10 @@ justify-content: center; } +@media print +{ + .noprint + { + display: none; + } +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 0baccd3..361eb57 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -3,7 +3,7 @@ import './Footer.css'; function Footer() { return ( -
Impressum
+
Impressum
); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 67b5bc5..4867cb0 100644 --- a/src/components/Header.tsx +++ b/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 (
-
Header
+
Header
); diff --git a/src/components/Qr.css b/src/components/Qr.css index 945aadd..22f8857 100644 --- a/src/components/Qr.css +++ b/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; + } +} diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx index b55694c..eeea828 100644 --- a/src/components/Qr.tsx +++ b/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(UserCtx) as UserCtxT; - const [dog, setDog] = useState({}); // local dog not the dog in UserContext + const { user, updateQR } = useContext(UserCtx) as UserCtxT; + const [dog, setDog] = useState({}); // 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(null); const dragOverItem = React.useRef(null); - const incrementFontSize = (():void => + const incrementFontSize = ((event: React.MouseEvent): MouseEventHandler | undefined => { + event.preventDefault(); if(fontSize < 200) { setFontSize(fontSize + 1); } console.log("\nincrementFontSize " + fontSize); + return; }); - const decrementFontSize = (():void => + const decrementFontSize = ((event: React.MouseEvent): MouseEventHandler | 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() { @@ -115,6 +136,78 @@ export default function Qr() }); setItemOrder(newItemOrder); } + + function oneQrBlock() + { + return( +
+
+
SCAN ME
+ +
+
+ {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} + {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} + {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} +
+
); + } + + + + const saveHandler = (event: React.MouseEvent): MouseEventHandler | 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): MouseEventHandler | 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) { @@ -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()

Qr-Code Druck

Zurück zum Profil +
-
Schriftgröße
-
- -
{fontSize}
- +
+
Schriftgröße
+
+ +
{fontSize}
+ +
Sichtbare Elemente
@@ -163,104 +264,40 @@ export default function Qr() changeEvent={checkBoxChange} />
-
Reihenfolge
-
- {itemList.map((item, index) => ( -
(dragItem.current = index)} - onDragEnter={(e) => (dragOverItem.current = index)} - onDragEnd={handleSort} - onDragOver={(e) => e.preventDefault()}> -
{item.name}
+
+
Reihenfolge
+
+ {itemList.map((item, index) => ( +
(dragItem.current = index)} + onDragEnter={(e) => (dragOverItem.current = index)} + onDragEnd={handleSort} + onDragOver={(e) => e.preventDefault()}> +
{item.name}
+
+ ))}
- ))}
- +
+ + + {successMsg !== "false" &&
{successMsg}
} + {errMsg !== "false" &&
{errMsg}
} +
+
-
-
-
SCAN ME
- -
-
- {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} - {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} - {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -
-
-
-
-
SCAN ME
- -
-
- {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} - {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} - {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -
-
-
-
-
SCAN ME
- -
-
- {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} - {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} - {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -
-
- - -
-
-
SCAN ME
- -
-
- {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} - {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} - {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -
-
-
-
-
SCAN ME
- -
-
- {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} - {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} - {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -
-
- - -
-
-
SCAN ME
- -
-
- {((visibleItem & 0b100) > 0) &&
{dog.data.name}
} - {((visibleItem & 0b010) > 0) &&
{dog.data.phone}
} - {((visibleItem & 0b001) > 0) &&
{dog.data.email}
} -
-
+ {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()} + {oneQrBlock()}
} - {/* { !dog.data && user && - <> -

Qr-Code Druck

-
Logged in als:
-
{user?.email}
-
{user?.qr_id}
- - } */} { !dog.data && !user && <>

Qr-Code Druck

diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index 0d9fb49..fec09b3 100644 --- a/src/context/UserContext.tsx +++ b/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, + 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, + 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,