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

fileinput

Browse Source
This commit is contained in:
Peter Hoppe
2023-02-18 15:18:17 +01:00
parent 3d04de84fa
commit cb28767783
11 changed files with 86 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -11,6 +11,7 @@
# production
/build
/extern/material-design-icons-4.0.0
# misc
.DS_Store

BIN
extern/material-design-icons-4.0.0.zip vendored Normal file
View File

Binary file not shown.

3
src/components/DndList.tsx
View File

@ -12,7 +12,8 @@ const useStyles = createStyles((theme) => ({
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
}`,
padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`,
// padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`,
padding: `1px ${theme.spacing.xl}px`,
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
marginBottom: theme.spacing.sm,
},

16
src/components/FileUpload.tsx
View File

@ -2,6 +2,7 @@ import { useState } from "react";
import { Link } from "react-router-dom";
import {upload as ApiUpload} from "../services/PhpApi";
import PreviewUpload from "./PreviewUpload";
import './InputForm.css';
const FileUpload: React.FC = () =>
{
@ -10,11 +11,9 @@ const FileUpload: React.FC = () =>
const [message, setMessage] = useState("");
const selectFile = (event: React.ChangeEvent<HTMLInputElement>) =>
const selectFile = (pl: File) =>
{
const { files } = event.target;
const selectedFiles = files as FileList;
setCurrentFile(selectedFiles?.[0]);
setCurrentFile(pl);
setProgress(0);
};
@ -53,16 +52,13 @@ const FileUpload: React.FC = () =>
return (
<div>
<div className="row">
<div className="row InputForm">
<div className="col-8">
<PreviewUpload chgFile={selectFile} />
{/* <label className="btn btn-default p-0">
<input type="file" onChange={selectFile} />
</label> */}
</div>
<div className="col-4">
<div>
<button
className="btn btn-success btn-sm"
//className="btn btn-success btn-sm"
disabled={!currentFile}
onClick={upload}
>

3
src/components/Header.tsx
View File

@ -1,5 +1,6 @@
import './Header.css';
import '../App.css';
import './InputForm.css';
import {logOut} from '../services/PhpApi'
import { toast, Toaster } from 'react-hot-toast';
@ -15,7 +16,7 @@ function Header()
}
return (
<div className='logout'>
<div className='logout InputForm'>
<Toaster toastOptions={{ position: "top-center" }} />
<div className='noprint'>Header</div>
<button onClick={logOutForm}>Logout</button>

4
src/components/InputForm.css
View File

@ -4,6 +4,7 @@ form
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: left;
}
.InputForm
@ -29,7 +30,7 @@ form
flex-direction: column;
}
.InputForm button[type=submit]
.InputForm button, input
{
background-color: #aa0404;
color: white;
@ -39,6 +40,7 @@ form
height: 25px;
max-width: 100%;
width: auto;
margin-top: 5px;
}
.InputForm input

35
src/components/PreviewUpload.tsx
View File

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import {getDog} from '../services/PhpApi';
import useSWR from 'swr';
import { FileInput } from '@mantine/core';
function PreviewUpload({chgFile}:{chgFile: any})
{
@ -18,23 +19,12 @@ function PreviewUpload({chgFile}:{chgFile: any})
console.log(data);
let file_loc: string | undefined = "./uploads"+ data.data.picture;
const handleChange = async (
event: React.ChangeEvent<HTMLInputElement>
): Promise<any> =>
const handleChangeFile = async (pl: File) =>
{
// const { target } = event;
// const img = new Image();
const ImageName = event.target.value.split('\\')[2];
const Image = event.target.value;
console.log('Image on Kevel: ', Image); // Image on Kevel
console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel
console.log('event current Target files: ', event.target.files![0]);
console.log(pl);
const fileLoaded = URL.createObjectURL(event.target.files![0]);
const files = event.target.files;
const fileLoaded = URL.createObjectURL(pl);
console.log('files: ', files);
const dimensions = await someFunction(fileLoaded);
setDimensionWidth(dimensions.width);
setDimensionHeight(dimensions.height);
@ -43,8 +33,9 @@ function PreviewUpload({chgFile}:{chgFile: any})
console.log('dimensions height: ', dimensions.height);
setFile(fileLoaded);
chgFile(event);
};
chgFile(pl);
}
const getHeightAndWidthFromDataUrl = (dataURL: string) =>
new Promise<{height: number, width: number}>((resolve) => {
const img = new Image();
@ -66,10 +57,14 @@ function PreviewUpload({chgFile}:{chgFile: any})
// return ( <></> );
return (
<div>
<input
type="file"
onChange={handleChange}
<div className = 'frameCenter'>
<FileInput
// label = 'Datei :'
name="file"
placeholder="Bild auswählen"
id="file"
required
onChange={handleChangeFile}
accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
/>
<div className='prevUplImg'>

56
src/components/Profil.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import useSWR from 'swr';
import { Link } from 'react-router-dom';
import toast, { Toaster } from 'react-hot-toast';
@ -8,6 +8,7 @@ import CreateQr from '../services/CreateQr';
import Img from './Img';
import './InputForm.css';
import './Profil.css';
import { TextInput } from '@mantine/core';
function Profil()
{
@ -20,6 +21,9 @@ function Profil()
// const { data, error, isLoading } = useSWR( user?.qr_id, getDog);
const { data, error, isLoading, mutate } = useSWR( "profilData", getProfilData);
const edit = useRef(false);
const formDataSave = useRef(formData); // just to fill it
// data ist dogdata, logindata holt sich getProfilData.php aus $_SESSION
if (error) return (<div>failed to load</div>);
if (isLoading) return (<div>loading...</div>);
@ -55,15 +59,9 @@ function Profil()
qr_code: ''
};
if (formData.email)
if (edit.current)
{
formData_loc =
{
email: formData.email,
name: formData.name,
phone: formData.phone,
qr_code: formData.qr_code
};
formData_loc = {...formDataSave.current}; // copy constructor
}
else
{
@ -84,6 +82,8 @@ function Profil()
[e.currentTarget.name]:e.currentTarget.value
};
setFormData(formData_loc);
edit.current = true;
formDataSave.current = {...formData_loc};
}
function showData(data: any/*, e: React.FormEvent<HTMLFormElement> | React.MouseEvent<HTMLButtonElement>*/)
@ -159,18 +159,32 @@ function Profil()
<div id="canvas"></div>
</div>
<form onSubmit={submitForm}>
<div className='neben'>
<label htmlFor="email">Email: </label>
<input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData_loc.email} required />
</div>
<div className='neben'>
<label htmlFor="name">Name: </label>
<input type="text" name="name" onChange={onChangeInput} id="name" value={formData_loc.name} required />
</div>
<div className='neben'>
<label htmlFor="phone">Telefon: </label>
<input type="text" name="phone" onChange={onChangeInput} id="phone" value={formData_loc.phone} required />
</div>
<TextInput
label = 'Email:'
type="email"
name="email"
onChange={onChangeInput}
placeholder="Deine Email"
id="email"
value={formData_loc.email}
required />
<TextInput
label = 'Name:'
type="text"
name="name"
onChange={onChangeInput}
placeholder="Name des Tieres"
id="name"
value={formData_loc.name}
required />
<TextInput
label = 'Telefon:'
type="text"
name="phone"
onChange={onChangeInput}
id="phone"
value={formData_loc.phone}
required />
<button type="submit">Update</button>
</form>
</div>

16
src/components/Qr.tsx
View File

@ -1,13 +1,13 @@
import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
import React, { 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 Img from './Img';
import './Qr.css';
import './InputForm.css';
import useSWR from 'swr';
import { MantineProvider, NumberInput, Stack, Checkbox } from '@mantine/core';
import { NotificationsProvider, showNotification } from '@mantine/notifications';
import { NumberInput, Stack, Checkbox, MantineProvider } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import {DndList, DndListProps, TDataItem} from './DndList';
@ -338,11 +338,15 @@ export default function Qr()
<div>Reihenfolge</div>
<div className='beschreibung'>Ändern durch Drag'n Drop</div>
<div className="list-container">
<DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
<DndList
dragEndHandler={callBackDragEnd}
dataprops={dndList.current}
/>
</div>
</div>
</div>
<div className='column'>
<div className='column InputForm'>
<button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
<button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
</div>

14
src/components/WantNewPw.tsx
View File

@ -1,3 +1,4 @@
import { TextInput } from '@mantine/core';
import React, { useState } from 'react'
import toast, { Toaster } from 'react-hot-toast';
import {wantNewPw} from '../services/PhpApi'
@ -44,10 +45,15 @@ function WantNewPw()
<div className='frame'>
<form onSubmit={submitForm}>
<div className='neben'>
<label htmlFor="email">Email: </label>
<input type="email" name="email" onChange={onChangeInput}
placeholder="Gleiche Email, wie bei der Registrierung angeben"
id="email" value={email} required />
<TextInput
label = 'Email:'
type="email"
name="email"
onChange={onChangeInput}
placeholder="Deine Email"
id="email"
value={email}
required />
</div>
<button type="submit" >Passwort anfordern</button>
</form>