This commit is contained in:
2022-12-26 23:56:36 +01:00
parent c894022b31
commit 0187c464db
15 changed files with 204 additions and 6 deletions

Binary file not shown.

BIN
docs/Bonny.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
docs/Conny.jpeg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
docs/Conny2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
docs/Hund gefundenBonny.pdf Normal file

Binary file not shown.

BIN
docs/Hund gefundenConny.pdf Normal file

Binary file not shown.

1
hope-fly.env Normal file
View File

@ -0,0 +1 @@
REACT_APP_PHP_ROOT = https://hope-fly.de/dog/php-dog/

1
local.env Normal file
View File

@ -0,0 +1 @@
REACT_APP_PHP_ROOT = http://localhost/dog/php-dog/

24
package-lock.json generated
View File

@ -16,6 +16,7 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"axios": "^1.2.1",
"env-cmd": "^10.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.5",
@ -6556,6 +6557,29 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/env-cmd": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz",
"integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==",
"dependencies": {
"commander": "^4.0.0",
"cross-spawn": "^7.0.0"
},
"bin": {
"env-cmd": "bin/env-cmd.js"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/env-cmd/node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"engines": {
"node": ">= 6"
}
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",

View File

@ -11,6 +11,7 @@
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"axios": "^1.2.1",
"env-cmd": "^10.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.5",
@ -23,7 +24,6 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "cp ./src/.htaccess ./build/ && sudo cp -r -v ./build/static/ /opt/lampp/htdocs/dog/ && sudo cp -v ./build/* /opt/lampp/htdocs/dog/"
},
"eslintConfig": {

View File

@ -7,6 +7,7 @@ import Register from './components/Register';
import Home from './components/Home';
import Dog from './components/Dog';
import {UserCtx, UserCtxT} from './context/UserContext';
import Qr from './components/Qr';
function App()
@ -20,8 +21,9 @@ function App()
<Routes>
{user && <Route path="/" element={<Home/>} />}
{!user && <Route path="/" element={<Login/>} />}
<Route path="/:qr_id" element={<Dog/>} />
{user && <Route path="/qr" element={<Qr/>} />}
{user && <Route path="/d" element={<Dog/>} />}
<Route path="/:qr_id" element={<Dog/>} />
<Route path="/login" element={<Login/>} />
<Route path="/reg" element={<Register/>} />
</Routes>

View File

@ -4,7 +4,7 @@ export default function Img({pth}: {pth: string})
{
return (
<div>
<img src={'./uploads' + pth} width="300" />
<img src={'./uploads' + pth} />
</div>
)
}

49
src/components/Qr.css Normal file
View File

@ -0,0 +1,49 @@
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
{
display: flex;
flex-direction: row;
}
.vertFont
{
writing-mode: vertical-lr;
}
.qrCodeVert
{
align-items: center;
display: flex;
flex-direction: row-reverse;
height: 3.7cm;
justify-content: space-evenly;
background: #fff;
width: 2.4cm;
}
.frame
{
border-style: solid;
border-width: 1px;
}
.blockRepeat
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

120
src/components/Qr.tsx Normal file
View File

@ -0,0 +1,120 @@
import React, { useContext } from 'react'
import { UserCtx, UserCtxT, DogT } from '../context/UserContext';
import Img from './Img';
import './Qr.css';
export default function Qr()
{
const {dog, getDog, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
var needData = dog.success === undefined;
if(needData)
{
if(user)
{
getDog(user?.qr_id); // await not allowed?! => workaraound
}
}
return (
<>
{user && dog.data &&
<div>
<h1>Qr-Code Druck</h1>
{/* <div>Logged in als:</div>
<div>{user?.email}</div>
<div>{user?.qr_id}</div>
<div>{dog.data.qr_code}</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'>
{/* <div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div> */}
<div className='vertFont'>{dog.data.name}</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'>
<div className='vertFont'>{dog.data.phone}</div>
{/* <div className='vertFont'>{dog.data.email}</div> */}
<div className='vertFont'>{dog.data.name}</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'>
{/* <div className='vertFont'>{dog.data.phone}</div> */}
<div className='vertFont'>{dog.data.email}</div>
<div className='vertFont'>{dog.data.name}</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'>
<div className='vertFont'>{dog.data.phone}</div>
{/* <div className='vertFont'>{dog.data.email}</div>
<div className='vertFont'>{dog.data.name}</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'>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
{/* <div className='vertFont'>{dog.data.name}</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'>
<div className='vertFont'>{dog.data.phone}</div>
<div className='vertFont'>{dog.data.email}</div>
<div className='vertFont'>{dog.data.name}</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>
<div>nothing</div>
</>
}
</>
)
}

View File

@ -74,8 +74,9 @@ export type UserCtxT =
export const UserCtx = createContext<UserCtxT | null>(null);
export const Axios = axios.create({
baseURL: 'http://localhost/dog/php-dog/',
// baseURL: 'https://hope-fly.de/dog/php-dog/',
// baseURL: 'http://localhost/dog/php-dog/',
baseURL: 'https://hope-fly.de/dog/php-dog/',
// baseURL: process.env.REACT_APP_PHP_ROOT,
});
export const UserCtxProvider = ({children}:TUserContextProviderProps) => {