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

mantine kjhkjh

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-15 17:13:07 +01:00
parent 15beb7bb8a
commit 71fed22a2a
7 changed files with 2582 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3047
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@ -5,11 +5,15 @@
"dependencies": { "dependencies": {
"@dnd-kit/core": "^6.0.7", "@dnd-kit/core": "^6.0.7",
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@ionic/cli": "^6.20.8",
"@ionic/react": "^6.5.4",
"@mantine/core": "^5.10.3", "@mantine/core": "^5.10.3",
"@mantine/dropzone": "^5.10.3", "@mantine/dropzone": "^5.10.3",
"@mantine/form": "^5.10.3", "@mantine/form": "^5.10.3",
"@mantine/hooks": "^5.10.3", "@mantine/hooks": "^5.10.3",
"@mantine/notifications": "^5.10.3", "@mantine/notifications": "^5.10.3",
"@radix-ui/react-icons": "^1.1.1",
"@tabler/icons": "^2.4.0",
"@testing-library/jest-dom": "^5.16.5", "@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
@ -20,6 +24,7 @@
"axios": "^1.2.1", "axios": "^1.2.1",
"bootstrap": "^5.2.3", "bootstrap": "^5.2.3",
"env-cmd": "^10.1.0", "env-cmd": "^10.1.0",
"ionicons": "^6.1.3",
"qr-code-styling": "^1.6.0-rc.1", "qr-code-styling": "^1.6.0-rc.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",
@ -27,7 +32,7 @@
"react-hot-toast": "^2.4.0", "react-hot-toast": "^2.4.0",
"react-repeatable": "^2.0.1", "react-repeatable": "^2.0.1",
"react-router-dom": "^6.4.5", "react-router-dom": "^6.4.5",
"react-scripts": "5.0.1", "react-scripts": "^5.0.1",
"swr": "^2.0.2", "swr": "^2.0.2",
"typescript": "^4.9.4", "typescript": "^4.9.4",
"use-fit-text": "^2.4.0", "use-fit-text": "^2.4.0",

6
src/App.tsx
View File

@ -17,6 +17,8 @@ import toast, { Toaster } from 'react-hot-toast';
import { TUser } from './context/UserContext'; import { TUser } from './context/UserContext';
import PasswordReset from './components/PasswordReset'; import PasswordReset from './components/PasswordReset';
import WantNewPw from './components/WantNewPw'; import WantNewPw from './components/WantNewPw';
import { MantineProvider } from '@mantine/core';
import { NotificationsProvider } from '@mantine/notifications';
const App: React.FC = () => const App: React.FC = () =>
{ {
@ -47,6 +49,8 @@ const App: React.FC = () =>
} }
return ( return (
<MantineProvider withNormalizeCSS withGlobalStyles>
<NotificationsProvider position="top-center" >
<div className="App"> <div className="App">
<div className="col middle"> <div className="col middle">
<BrowserRouter basename='/dog/'> <BrowserRouter basename='/dog/'>
@ -71,6 +75,8 @@ const App: React.FC = () =>
</div> </div>
</div> </div>
</NotificationsProvider>
</MantineProvider>
); );
} }

69
src/components/Login.tsx
View File

@ -2,8 +2,12 @@ import {useState} from 'react';
import { Link/*, useNavigate*/ } from 'react-router-dom'; import { Link/*, useNavigate*/ } from 'react-router-dom';
import './InputForm.css'; import './InputForm.css';
import {getUser, loginUser} from '../services/PhpApi' import {getUser, loginUser} from '../services/PhpApi'
import { toast, Toaster } from 'react-hot-toast';
import useSWR from 'swr'; import useSWR from 'swr';
import { PasswordInput, Stack, TextInput } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
//import {IonIcon} from '@ionic/react'
import { CheckCircledIcon, CrossCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
const Login = () => const Login = () =>
{ {
@ -19,10 +23,15 @@ const Login = () =>
if (error) if (error)
{ {
toast.error(error.message); showNotification(
{
icon: <CrossCircledIcon />,
color: 'red',
message: error.message
});
return ( return (
<> <>
<Toaster toastOptions={{ position: "top-center" }} />
<div>failed to load</div> <div>failed to load</div>
</>); </>);
} }
@ -50,37 +59,67 @@ const Login = () =>
if(!Object.values(formData).every(val => val.trim() !== '')) if(!Object.values(formData).every(val => val.trim() !== ''))
{ {
toast.error('Please Fill in all Required Fields!'); showNotification(
{
icon: <ExclamationTriangleIcon/>,
color: 'orange',
message: 'Please Fill in all Required Fields!'
});
return; return;
} }
const logResp = await loginUser(formData); const logResp = await loginUser(formData);
if(logResp.success) if(logResp.success)
{ {
toast.success(logResp.message); showNotification(
{
icon: <CheckCircledIcon/>,
color: 'green',
message: logResp.message
});
mutate(); // update swr mutate(); // update swr
} }
else else
{ {
toast.error(logResp.message); // if(logResp.message === undefined)
// {
// toast.error(logResp);
// }
// else
showNotification(
{
icon: <CrossCircledIcon width={30}/>,
color: 'red',
message: logResp.message
});
} }
} }
return ( return (
<div className='InputForm'> <div className='InputForm'>
<Toaster toastOptions={{ position: "top-center" }} />
<h2>Login</h2> <h2>Login</h2>
<div className='frameCenter'> <div className='frameCenter'>
<div className='frame'> <div className='frame'>
<form onSubmit={submitForm}> <form onSubmit={submitForm}>
<div className='neben'> <Stack align="flex-start" sx={{textAlign: 'left'}}>
<label htmlFor="email">Email:</label> <TextInput
<input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required /> label = 'Email:'
</div> type="email"
<div className='neben'> name="email"
<label htmlFor="password">Password:</label> onChange={onChangeInput}
<input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required /> placeholder="Deine Email"
</div> id="email"
value={formData.email}
required />
<PasswordInput
sx = {{ maxWidth: '80vw', minWidth: '30vw', width: '300px' }}
label = 'Passwort:'
name="password"
onChange={onChangeInput}
placeholder="New password"
id="password" value={formData.password}
required/>
</Stack>
<button type="submit">Login</button> <button type="submit">Login</button>
<div className="bottom-link"><Link to="/reg">Register</Link></div> <div className="bottom-link"><Link to="/reg">Register</Link></div>
<div className="bottom-link"><Link to="/wantnewpw">Passwort vergessen</Link></div> <div className="bottom-link"><Link to="/wantnewpw">Passwort vergessen</Link></div>

6
src/components/Qr.css
View File

@ -127,12 +127,6 @@ img
width: 55px; width: 55px;
} }
label
{
margin-right: 10px;
margin-left: 15px;
}
@media print @media print
{ {
.qrSettings .qrSettings

154
src/components/Qr.tsx
View File

@ -2,11 +2,11 @@ import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { DogT } from '../context/UserContext'; import { DogT } from '../context/UserContext';
import {getDog, updateQR} from '../services/PhpApi'; import {getDog, updateQR} from '../services/PhpApi';
import Checkbox from './Checkbox'; //import Checkbox from './Checkbox';
import Img from './Img'; import Img from './Img';
import './Qr.css'; import './Qr.css';
import useSWR from 'swr'; import useSWR from 'swr';
import { MantineProvider, NumberInput } from '@mantine/core'; import { MantineProvider, NumberInput, Stack, Checkbox } from '@mantine/core';
import { NotificationsProvider, showNotification } from '@mantine/notifications'; import { NotificationsProvider, showNotification } from '@mantine/notifications';
import {DndList, DndListProps, TDataItem} from './DndList'; import {DndList, DndListProps, TDataItem} from './DndList';
@ -77,21 +77,22 @@ export default function Qr()
return val; return val;
} }
function checkBoxChange(id: string, checked: boolean) : void function checkBoxChange(e: HTMLInputElement)
{ {
let value = dog.qr_visible_items; let value = dog.qr_visible_items;
console.log(value); console.log(value);
if(id==="name") console.log(e);
if(e.id==="name")
{ {
value = setBitField(value, checked, 0b100); value = setBitField(value, (e.checked), 0b100);
} }
if(id==="phone") if(e.id==="phone")
{ {
value = setBitField(value, checked, 0b010); value = setBitField(value, (e.checked), 0b010);
} }
if(id==="email") if(e.id==="email")
{ {
value = setBitField(value, checked, 0b001); value = setBitField(value, (e.checked), 0b001);
} }
console.log(value); console.log(value);
dog.qr_visible_items = value; dog.qr_visible_items = value;
@ -209,21 +210,15 @@ export default function Qr()
setDogRender(dog); setDogRender(dog);
} }
// const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) => const onChangeHeight = (val: number) =>
// {
// dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
// setDogRender(dog);
// }
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
{ {
dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; dog.qr_height_cm = val/10;
setDogRender(dog); setDogRender(dog);
} }
const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) => const onChangeFontSize = (val: number) =>
{ {
dog.qr_fontsize = parseInt(e.target.value) ? parseInt(e.target.value) : 0; dog.qr_fontsize = val;
setDogRender(dog); setDogRender(dog);
} }
@ -285,74 +280,81 @@ export default function Qr()
console.log(dndList); console.log(dndList);
return ( return (
<MantineProvider withNormalizeCSS withGlobalStyles>
<NotificationsProvider position="top-center" >
<div> <div>
<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 className='qrSettings____'> <div className='qrSettings____'>
<div className='qrSettings'> <div className='qrSettings'>
<div> <Stack align="flex-start" sx={{textAlign: 'left'}}>
<div>Anhänger</div> <div>Anhänger</div>
<label htmlFor='width'>Breite [mm] </label> <NumberInput
<NumberInput className='qr-input' type='number' id='width' name='width' type='number' id='width' name='width'
label = 'Breite [mm]'
min={1} max={100} min={1} max={100}
stepHoldDelay={500}
stepHoldInterval={100}
onChange={onChangeWidth} value={dog.qr_width_cm*10}/> onChange={onChangeWidth} value={dog.qr_width_cm*10}/>
<label htmlFor='height'>Höhe [mm] </label> <NumberInput
<input className='qr-input' type='number' id='height' name='height' type='number' id='height' name='height'
min="1" max="100" label = 'Höhe [mm]'
min={1} max={100}
stepHoldDelay={500}
stepHoldInterval={100}
onChange={onChangeHeight} value={dog.qr_height_cm*10}/> onChange={onChangeHeight} value={dog.qr_height_cm*10}/>
</div> </Stack>
<div>
<label htmlFor='fontSize'>Schriftgröße </label> <NumberInput sx={{textAlign:'left'}}
<input className='qr-input' type='number' id='fontSize' name='fontSize' type='number' id='fontSize' name='fontSize'
min="1" max="200" label = 'Schriftgröße'
onChange={onChangeFontSize} value={dog.qr_fontsize} /> min={1} max={200}
</div> stepHoldDelay={500}
<div> stepHoldInterval={100}
<div>Sichtbare Elemente</div> onChange={onChangeFontSize} value={dog.qr_fontsize}/>
<Checkbox <div>
id='name' <div>Sichtbare Elemente</div>
label={'Name'} <Checkbox
checked={(dog.qr_visible_items & 0b100) > 0} id='name'
changeEvent={checkBoxChange} label={'Name'}
/> checked={(dog.qr_visible_items & 0b100) > 0}
<Checkbox // changeEvent={checkBoxChange}
id='phone' onChange={(e) => {checkBoxChange(e.currentTarget)}}
label={'Telefon'} />
checked={(dog.qr_visible_items & 0b010) > 0} <Checkbox
changeEvent={checkBoxChange} id='phone'
/> label={'Telefon'}
<Checkbox checked={(dog.qr_visible_items & 0b010) > 0}
id='email' //changeEvent={checkBoxChange}
label={'Email'} onChange={(e) => {checkBoxChange(e.currentTarget)}}
checked={(dog.qr_visible_items & 0b001) > 0} />
changeEvent={checkBoxChange} <Checkbox
/> id='email'
</div> label={'Email'}
<div> checked={(dog.qr_visible_items & 0b001) > 0}
<div>Reihenfolge</div> //changeEvent={checkBoxChange}
<div className='beschreibung'>Ändern durch Drag'n Drop</div> onChange={(e) => {checkBoxChange(e.currentTarget)}}
<div className="list-container"> />
<DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} /> </div>
</div> <div>
<div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container">
<DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
</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>
</div>
</div> </div>
<div className='blockRepeat'> <div className='column'>
{oneQrBlock()} <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
{oneQrBlock()} <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
</div> </div>
</div> </div>
</NotificationsProvider> <div className='blockRepeat'>
</MantineProvider> {oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
{oneQrBlock()}
</div>
</div>
); );
} }

2
tsconfig.json
View File

@ -19,7 +19,7 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "preserve"
}, },
"include": [ "include": [
"src" "src"