hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Qr werte sichern

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-08 02:23:14 +01:00
parent 673c5f1b10
commit b0c90945af
8 changed files with 327 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
php/php-dog/getDog.php
View File

@ -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();

106
php/php-dog/updateQR.php Normal file
View File

@ -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();
?>

7
src/App.css
View File

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

2
src/components/Footer.tsx
View File

@ -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>
);
}

3
src/components/Header.tsx
View File

@ -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>
);

45
src/components/Qr.css
View File

@ -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;
}
}

243
src/components/Qr.tsx
View File

@ -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 [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext
const { user, updateQR } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
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 className='spinBtn'>
<button onClick={decrementFontSize}>-</button>
<div>{fontSize}</div>
<button onClick={incrementFontSize}>+</button>
<div>
<div>Schriftgröße</div>
<div className='spinBtn'>
<button onClick={decrementFontSize}>-</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 className="list-container">
{itemList.map((item, index) => (
<div
key={index}
className="list-item"
draggable
onDragStart={(e) => (dragItem.current = index)}
onDragEnter={(e) => (dragOverItem.current = index)}
onDragEnd={handleSort}
onDragOver={(e) => e.preventDefault()}>
<h6>{item.name}</h6>
<div>
<div>Reihenfolge</div>
<div className="list-container">
{itemList.map((item, index) => (
<div
key={index}
className="list-item"
draggable
onDragStart={(e) => (dragItem.current = index)}
onDragEnter={(e) => (dragOverItem.current = index)}
onDragEnd={handleSort}
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'>
<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 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>
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
</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>

34
src/context/UserContext.tsx
View File

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