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

QR fontSize; routing

Browse Source
This commit is contained in:
Peter Hoppe
2023-01-05 16:24:59 +01:00
parent 37e8710f70
commit 44b4605324
6 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Header.tsx
View File

@ -1,10 +1,13 @@
import React, { useContext } from 'react'
import './Header.css';
import {Axios, UserCtx, UserCtxT} from '../context/UserContext';
import { useNavigate } from 'react-router-dom';
function Header() {
const {setUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const navigate = useNavigate();
const logOut = () =>
{
Axios.post('logout.php')
@ -15,6 +18,8 @@ function Header() {
.catch((err) => console.error(err));
setUser(null);
navigate('/'); // login
}
return (

11
src/components/Login.tsx
View File

@ -1,9 +1,10 @@
import {useState,useContext} from 'react';
import { Link } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import {UserCtx, UserCtxT} from '../context/UserContext';
import './Login.css'
const Login = () => {
const Login = () =>
{
const {loginUser, wait, getUser, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [redirect, setRedirect] = useState("false");
const [errMsg, setErrMsg] = useState("false");
@ -11,6 +12,7 @@ const Login = () => {
email:'',
password:''
});
const navigate = useNavigate();
const onChangeInput = (e: React.FormEvent<HTMLInputElement>) =>
{
@ -23,7 +25,8 @@ const Login = () => {
}
}
const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
const submitForm = async (e: React.FormEvent<HTMLFormElement>) =>
{
e.preventDefault();
if(!Object.values(formData).every(val => val.trim() !== ''))
@ -38,7 +41,7 @@ const Login = () => {
setRedirect('Redirecting...');
setErrMsg(data.message);
await getUser();
e?.currentTarget?.reset();
navigate('/profil');
return;
}
setErrMsg(data.message);

2
src/components/Qr.css
View File

@ -14,6 +14,7 @@ img
background: #fff;
width: 2.4cm;
}
.qrCodeBackFront
{
display: flex;
@ -36,6 +37,7 @@ img
background: #fff;
width: 2.4cm;
}
.frame
{
border-style: solid;

36
src/components/Qr.tsx
View File

@ -9,6 +9,21 @@ 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 [fontSize, setFontSize] = useState(100);
function incrementFontSize()
{
if(fontSize < 200)
{
setFontSize(fontSize + 1);
}
}
function decrementFontSize()
{
if(fontSize > 1)
{
setFontSize(fontSize - 1);
}
}
if(user && dog.success === undefined)
{
@ -30,6 +45,15 @@ export default function Qr()
<h1>Qr-Code Druck</h1>
<Link to={"/profil"}>Zurück zum Profil</Link>
<div>
<button onClick={incrementFontSize}>up</button>
<div>{fontSize}</div>
<button onClick={decrementFontSize}>down</button>
</div>
{/* <div>Logged in als:</div>
<div>{user?.email}</div>
<div>{user?.qr_id}</div>
@ -41,7 +65,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -54,7 +78,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont order2'>{dog.data.name}</div>
<div className='vertFont order3'>{dog.data.phone}</div>
<div className='vertFont order1'>{dog.data.email}</div>
@ -65,7 +89,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -78,7 +102,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -89,7 +113,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
@ -102,7 +126,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/>
</div>
<div className='qrCodeVert frame'>
<div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>