mantine kjhkjh
This commit is contained in:
3047
package-lock.json
generated
3047
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,11 +5,15 @@
|
||||
"dependencies": {
|
||||
"@dnd-kit/core": "^6.0.7",
|
||||
"@emotion/react": "^11.10.5",
|
||||
"@ionic/cli": "^6.20.8",
|
||||
"@ionic/react": "^6.5.4",
|
||||
"@mantine/core": "^5.10.3",
|
||||
"@mantine/dropzone": "^5.10.3",
|
||||
"@mantine/form": "^5.10.3",
|
||||
"@mantine/hooks": "^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/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@ -20,6 +24,7 @@
|
||||
"axios": "^1.2.1",
|
||||
"bootstrap": "^5.2.3",
|
||||
"env-cmd": "^10.1.0",
|
||||
"ionicons": "^6.1.3",
|
||||
"qr-code-styling": "^1.6.0-rc.1",
|
||||
"react": "^18.2.0",
|
||||
"react-beautiful-dnd": "^13.1.1",
|
||||
@ -27,7 +32,7 @@
|
||||
"react-hot-toast": "^2.4.0",
|
||||
"react-repeatable": "^2.0.1",
|
||||
"react-router-dom": "^6.4.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-scripts": "^5.0.1",
|
||||
"swr": "^2.0.2",
|
||||
"typescript": "^4.9.4",
|
||||
"use-fit-text": "^2.4.0",
|
||||
|
||||
@ -17,6 +17,8 @@ import toast, { Toaster } from 'react-hot-toast';
|
||||
import { TUser } from './context/UserContext';
|
||||
import PasswordReset from './components/PasswordReset';
|
||||
import WantNewPw from './components/WantNewPw';
|
||||
import { MantineProvider } from '@mantine/core';
|
||||
import { NotificationsProvider } from '@mantine/notifications';
|
||||
|
||||
const App: React.FC = () =>
|
||||
{
|
||||
@ -47,6 +49,8 @@ const App: React.FC = () =>
|
||||
}
|
||||
|
||||
return (
|
||||
<MantineProvider withNormalizeCSS withGlobalStyles>
|
||||
<NotificationsProvider position="top-center" >
|
||||
<div className="App">
|
||||
<div className="col middle">
|
||||
<BrowserRouter basename='/dog/'>
|
||||
@ -71,6 +75,8 @@ const App: React.FC = () =>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</NotificationsProvider>
|
||||
</MantineProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,12 @@ import {useState} from 'react';
|
||||
import { Link/*, useNavigate*/ } from 'react-router-dom';
|
||||
import './InputForm.css';
|
||||
import {getUser, loginUser} from '../services/PhpApi'
|
||||
import { toast, Toaster } from 'react-hot-toast';
|
||||
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 = () =>
|
||||
{
|
||||
@ -19,10 +23,15 @@ const Login = () =>
|
||||
|
||||
if (error)
|
||||
{
|
||||
toast.error(error.message);
|
||||
showNotification(
|
||||
{
|
||||
icon: <CrossCircledIcon />,
|
||||
color: 'red',
|
||||
message: error.message
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster toastOptions={{ position: "top-center" }} />
|
||||
<div>failed to load</div>
|
||||
</>);
|
||||
}
|
||||
@ -50,37 +59,67 @@ const Login = () =>
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
const logResp = await loginUser(formData);
|
||||
if(logResp.success)
|
||||
{
|
||||
toast.success(logResp.message);
|
||||
showNotification(
|
||||
{
|
||||
icon: <CheckCircledIcon/>,
|
||||
color: 'green',
|
||||
message: logResp.message
|
||||
});
|
||||
mutate(); // update swr
|
||||
}
|
||||
else
|
||||
{
|
||||
toast.error(logResp.message);
|
||||
// if(logResp.message === undefined)
|
||||
// {
|
||||
// toast.error(logResp);
|
||||
// }
|
||||
// else
|
||||
showNotification(
|
||||
{
|
||||
icon: <CrossCircledIcon width={30}/>,
|
||||
color: 'red',
|
||||
message: logResp.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='InputForm'>
|
||||
<Toaster toastOptions={{ position: "top-center" }} />
|
||||
<h2>Login</h2>
|
||||
<div className='frameCenter'>
|
||||
<div className='frame'>
|
||||
<form onSubmit={submitForm}>
|
||||
<div className='neben'>
|
||||
<label htmlFor="email">Email:</label>
|
||||
<input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
|
||||
</div>
|
||||
<div className='neben'>
|
||||
<label htmlFor="password">Password:</label>
|
||||
<input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
|
||||
</div>
|
||||
<Stack align="flex-start" sx={{textAlign: 'left'}}>
|
||||
<TextInput
|
||||
label = 'Email:'
|
||||
type="email"
|
||||
name="email"
|
||||
onChange={onChangeInput}
|
||||
placeholder="Deine Email"
|
||||
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>
|
||||
<div className="bottom-link"><Link to="/reg">Register</Link></div>
|
||||
<div className="bottom-link"><Link to="/wantnewpw">Passwort vergessen</Link></div>
|
||||
|
||||
@ -127,12 +127,6 @@ img
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
margin-right: 10px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
@media print
|
||||
{
|
||||
.qrSettings
|
||||
|
||||
@ -2,11 +2,11 @@ import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { DogT } from '../context/UserContext';
|
||||
import {getDog, updateQR} from '../services/PhpApi';
|
||||
import Checkbox from './Checkbox';
|
||||
//import Checkbox from './Checkbox';
|
||||
import Img from './Img';
|
||||
import './Qr.css';
|
||||
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 {DndList, DndListProps, TDataItem} from './DndList';
|
||||
|
||||
@ -77,21 +77,22 @@ export default function Qr()
|
||||
return val;
|
||||
}
|
||||
|
||||
function checkBoxChange(id: string, checked: boolean) : void
|
||||
function checkBoxChange(e: HTMLInputElement)
|
||||
{
|
||||
let value = dog.qr_visible_items;
|
||||
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);
|
||||
dog.qr_visible_items = value;
|
||||
@ -209,21 +210,15 @@ export default function Qr()
|
||||
setDogRender(dog);
|
||||
}
|
||||
|
||||
// const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) =>
|
||||
// {
|
||||
// dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
|
||||
// setDogRender(dog);
|
||||
// }
|
||||
|
||||
const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) =>
|
||||
const onChangeHeight = (val: number) =>
|
||||
{
|
||||
dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0;
|
||||
dog.qr_height_cm = val/10;
|
||||
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);
|
||||
}
|
||||
|
||||
@ -285,49 +280,58 @@ export default function Qr()
|
||||
console.log(dndList);
|
||||
|
||||
return (
|
||||
<MantineProvider withNormalizeCSS withGlobalStyles>
|
||||
<NotificationsProvider position="top-center" >
|
||||
<div>
|
||||
<h1>Qr-Code Druck</h1>
|
||||
<Link to={"/profil"}>Zurück zum Profil</Link>
|
||||
<div className='qrSettings____'>
|
||||
<div className='qrSettings'>
|
||||
<div>
|
||||
<Stack align="flex-start" sx={{textAlign: 'left'}}>
|
||||
<div>Anhänger</div>
|
||||
<label htmlFor='width'>Breite [mm] </label>
|
||||
<NumberInput className='qr-input' type='number' id='width' name='width'
|
||||
<NumberInput
|
||||
type='number' id='width' name='width'
|
||||
label = 'Breite [mm]'
|
||||
min={1} max={100}
|
||||
stepHoldDelay={500}
|
||||
stepHoldInterval={100}
|
||||
onChange={onChangeWidth} value={dog.qr_width_cm*10}/>
|
||||
<label htmlFor='height'>Höhe [mm] </label>
|
||||
<input className='qr-input' type='number' id='height' name='height'
|
||||
min="1" max="100"
|
||||
<NumberInput
|
||||
type='number' id='height' name='height'
|
||||
label = 'Höhe [mm]'
|
||||
min={1} max={100}
|
||||
stepHoldDelay={500}
|
||||
stepHoldInterval={100}
|
||||
onChange={onChangeHeight} value={dog.qr_height_cm*10}/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor='fontSize'>Schriftgröße </label>
|
||||
<input className='qr-input' type='number' id='fontSize' name='fontSize'
|
||||
min="1" max="200"
|
||||
onChange={onChangeFontSize} value={dog.qr_fontsize} />
|
||||
</div>
|
||||
</Stack>
|
||||
|
||||
<NumberInput sx={{textAlign:'left'}}
|
||||
type='number' id='fontSize' name='fontSize'
|
||||
label = 'Schriftgröße'
|
||||
min={1} max={200}
|
||||
stepHoldDelay={500}
|
||||
stepHoldInterval={100}
|
||||
onChange={onChangeFontSize} value={dog.qr_fontsize}/>
|
||||
<div>
|
||||
<div>Sichtbare Elemente</div>
|
||||
<Checkbox
|
||||
id='name'
|
||||
label={'Name'}
|
||||
checked={(dog.qr_visible_items & 0b100) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
// changeEvent={checkBoxChange}
|
||||
onChange={(e) => {checkBoxChange(e.currentTarget)}}
|
||||
/>
|
||||
<Checkbox
|
||||
id='phone'
|
||||
label={'Telefon'}
|
||||
checked={(dog.qr_visible_items & 0b010) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
//changeEvent={checkBoxChange}
|
||||
onChange={(e) => {checkBoxChange(e.currentTarget)}}
|
||||
/>
|
||||
<Checkbox
|
||||
id='email'
|
||||
label={'Email'}
|
||||
checked={(dog.qr_visible_items & 0b001) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
//changeEvent={checkBoxChange}
|
||||
onChange={(e) => {checkBoxChange(e.currentTarget)}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@ -352,7 +356,5 @@ export default function Qr()
|
||||
{oneQrBlock()}
|
||||
</div>
|
||||
</div>
|
||||
</NotificationsProvider>
|
||||
</MantineProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
|
||||
Reference in New Issue
Block a user