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

17
package-lock.json generated
View File

@ -23,6 +23,7 @@
"react-router-dom": "^6.4.5", "react-router-dom": "^6.4.5",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"use-fit-text": "^2.4.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
} }
}, },
@ -14328,6 +14329,11 @@
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
}, },
"node_modules/resize-observer-polyfill": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.1", "version": "1.22.1",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@ -15876,6 +15882,17 @@
"requires-port": "^1.0.0" "requires-port": "^1.0.0"
} }
}, },
"node_modules/use-fit-text": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/use-fit-text/-/use-fit-text-2.4.0.tgz",
"integrity": "sha512-Iy4LMrXcdxWlyZ5phntMpJMgyXGB1p3tV73y2r0QrZ6f/thPh+/QU3ie6RCXmjF8tHMs20FKMPskXeDYIla/Ww==",
"dependencies": {
"resize-observer-polyfill": "^1.5.1"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/util-deprecate": { "node_modules/util-deprecate": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"react-router-dom": "^6.4.5", "react-router-dom": "^6.4.5",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"use-fit-text": "^2.4.0",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"scripts": { "scripts": {

5
src/components/Header.tsx
View File

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

11
src/components/Login.tsx
View File

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

2
src/components/Qr.css
View File

@ -14,6 +14,7 @@ img
background: #fff; background: #fff;
width: 2.4cm; width: 2.4cm;
} }
.qrCodeBackFront .qrCodeBackFront
{ {
display: flex; display: flex;
@ -36,6 +37,7 @@ img
background: #fff; background: #fff;
width: 2.4cm; width: 2.4cm;
} }
.frame .frame
{ {
border-style: solid; 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 { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext 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) if(user && dog.success === undefined)
{ {
@ -30,6 +45,15 @@ export default function Qr()
<h1>Qr-Code Druck</h1> <h1>Qr-Code Druck</h1>
<Link to={"/profil"}>Zurück zum Profil</Link> <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>Logged in als:</div>
<div>{user?.email}</div> <div>{user?.email}</div>
<div>{user?.qr_id}</div> <div>{user?.qr_id}</div>
@ -41,7 +65,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCodeVert frame'> <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div> <div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div> <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> <div className='vertFont'>{dog.data.email}</div>
@ -54,7 +78,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCodeVert frame'> <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont order2'>{dog.data.name}</div> <div className='vertFont order2'>{dog.data.name}</div>
<div className='vertFont order3'>{dog.data.phone}</div> <div className='vertFont order3'>{dog.data.phone}</div>
<div className='vertFont order1'>{dog.data.email}</div> <div className='vertFont order1'>{dog.data.email}</div>
@ -65,7 +89,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCodeVert frame'> <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div> <div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div> <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> <div className='vertFont'>{dog.data.email}</div>
@ -78,7 +102,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCodeVert frame'> <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div> <div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div> <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> <div className='vertFont'>{dog.data.email}</div>
@ -89,7 +113,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCodeVert frame'> <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div> <div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div> <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> <div className='vertFont'>{dog.data.email}</div>
@ -102,7 +126,7 @@ export default function Qr()
<div className='qrCode__'>SCAN ME</div> <div className='qrCode__'>SCAN ME</div>
<Img pth={dog.data.qr_code}/> <Img pth={dog.data.qr_code}/>
</div> </div>
<div className='qrCodeVert frame'> <div className='qrCodeVert frame' style={{ fontSize: fontSize + '%' }}>
<div className='vertFont'>{dog.data.name}</div> <div className='vertFont'>{dog.data.name}</div>
<div className='vertFont'>{dog.data.phone}</div> <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> <div className='vertFont'>{dog.data.email}</div>