aaa

hope-fly.env

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

local.env

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

package-lock.json

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

package.json

@@ -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": {

src/App.tsx

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

src/components/Img.tsx

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

src/components/Qr.css

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

src/components/Qr.tsx

@@ -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>
+                </>
+            }
+        </>
+    )
+}

src/context/UserContext.tsx

@@ -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: 'http://localhost/dog/php-dog/',
-//    baseURL: 'https://hope-fly.de/dog/php-dog/',
+    baseURL: 'https://hope-fly.de/dog/php-dog/',
+//    baseURL: process.env.REACT_APP_PHP_ROOT,
 });
 
 export const UserCtxProvider = ({children}:TUserContextProviderProps) => {