button geht nicht; qr
This commit is contained in:
18
package-lock.json
generated
18
package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"env-cmd": "^10.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-repeatable": "^2.0.1",
|
||||
"react-router-dom": "^6.4.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
@ -5370,6 +5371,11 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/chained-function": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/chained-function/-/chained-function-0.5.0.tgz",
|
||||
"integrity": "sha512-Cq1nLFdK/dxHZNLjmA+LpH4ABI4knigZoCQEDzZt6AAG0GlylcRlTSu2qbwq3O5fJ8TosEJwB0YjtpHsb2FIGA=="
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
|
||||
@ -14030,6 +14036,18 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-repeatable": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-repeatable/-/react-repeatable-2.0.1.tgz",
|
||||
"integrity": "sha512-i4IA2s+1Fo59VtVN3lPi2sYUv3etug846YbT2gXBPNo+qfoAmoi2kDWY/truOqAxxza67wR67wqGEQYHVctDWw==",
|
||||
"dependencies": {
|
||||
"chained-function": "^0.5.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || >=15.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.5.tgz",
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"env-cmd": "^10.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-repeatable": "^2.0.1",
|
||||
"react-router-dom": "^6.4.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
|
||||
63
src/components/Button.tsx
Normal file
63
src/components/Button.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
let timer : NodeJS.Timer; //you need to have a global variable for your `timer`
|
||||
|
||||
export default function Button(
|
||||
{
|
||||
label,
|
||||
MouseAction,
|
||||
}:
|
||||
{
|
||||
label: string,
|
||||
MouseAction: () => void
|
||||
}
|
||||
)
|
||||
{
|
||||
const [mouseDown, setMouseDown] = useState(false);
|
||||
const [forceRender, setForceRender] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(mouseDown)
|
||||
{ //if holding mouse, we trigger `repeat`
|
||||
repeat(() =>
|
||||
{
|
||||
MouseAction();
|
||||
//setForceRender(forceRender + 1);
|
||||
//console.log("\nuseEffect mouseDown " + forceRender);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
stop() //stop it if releasing mouse holding
|
||||
//console.log("\nuseEffect stop " + forceRender);
|
||||
}
|
||||
}, [mouseDown, MouseAction]) //to track mouse holding behaviour changes
|
||||
|
||||
const repeat = (what: () => void) =>
|
||||
{
|
||||
timer = setInterval(what, 100)
|
||||
};
|
||||
|
||||
function start()
|
||||
{
|
||||
console.log("\nstart");
|
||||
setMouseDown(true);
|
||||
}
|
||||
|
||||
function stop()
|
||||
{
|
||||
console.log("\nstop");
|
||||
clearInterval(timer);
|
||||
setMouseDown(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onMouseDown={start}
|
||||
onMouseUp={stop}
|
||||
>{label}</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -19,7 +19,14 @@ img
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.qrSettings
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vertFont
|
||||
@ -38,6 +45,14 @@ img
|
||||
width: 2.4cm;
|
||||
}
|
||||
|
||||
.spinBtn
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frame
|
||||
{
|
||||
border-style: solid;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useContext, useState } from 'react'
|
||||
import React, { useCallback, useContext, useEffect, useState } from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
|
||||
import Checkbox from './Checkbox';
|
||||
@ -11,7 +11,6 @@ type ListItemT =
|
||||
ordernum: number;
|
||||
}
|
||||
|
||||
|
||||
export default function Qr()
|
||||
{
|
||||
const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
|
||||
@ -24,25 +23,29 @@ export default function Qr()
|
||||
{name:'Telefon', ordernum: 2},
|
||||
{name:'Email', ordernum: 3}
|
||||
]);
|
||||
|
||||
//save reference for dragItem and dragOverItem
|
||||
const dragItem = React.useRef<any>(null);
|
||||
const dragOverItem = React.useRef<any>(null);
|
||||
|
||||
function incrementFontSize()
|
||||
const incrementFontSize = (():void =>
|
||||
{
|
||||
if(fontSize < 200)
|
||||
{
|
||||
setFontSize(fontSize + 1);
|
||||
}
|
||||
}
|
||||
|
||||
function decrementFontSize()
|
||||
console.log("\nincrementFontSize " + fontSize);
|
||||
});
|
||||
|
||||
const decrementFontSize = (():void =>
|
||||
{
|
||||
if(fontSize > 1)
|
||||
{
|
||||
setFontSize(fontSize - 1);
|
||||
setFontSize(fontSize -1);
|
||||
}
|
||||
}
|
||||
console.log("\ndecrementFontSize " + fontSize);
|
||||
});
|
||||
|
||||
function setBitField(val: number, checked: boolean, bit: number) : number
|
||||
{
|
||||
@ -132,45 +135,49 @@ export default function Qr()
|
||||
<div>
|
||||
<h1>Qr-Code Druck</h1>
|
||||
<Link to={"/profil"}>Zurück zum Profil</Link>
|
||||
|
||||
<div>
|
||||
<button onClick={incrementFontSize}>up</button>
|
||||
<div>{fontSize}</div>
|
||||
<button onClick={decrementFontSize}>down</button>
|
||||
</div>
|
||||
<div>
|
||||
<Checkbox
|
||||
id='name'
|
||||
label={'Name'}
|
||||
checked={(visibleItem & 0b100) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
<div className='qrSettings'>
|
||||
<div>Schriftgröße</div>
|
||||
<div className='spinBtn'>
|
||||
<button onClick={decrementFontSize}>-</button>
|
||||
<div>{fontSize}</div>
|
||||
<button onClick={incrementFontSize}>+</button>
|
||||
</div>
|
||||
<div>
|
||||
<div>Sichtbare Elemente</div>
|
||||
<Checkbox
|
||||
id='phone'
|
||||
label={'Telefon'}
|
||||
checked={(visibleItem & 0b010) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
<Checkbox
|
||||
id='email'
|
||||
label={'Email'}
|
||||
checked={(visibleItem & 0b001) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="list-container">
|
||||
{itemList.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="list-item"
|
||||
draggable
|
||||
onDragStart={(e) => (dragItem.current = index)}
|
||||
onDragEnter={(e) => (dragOverItem.current = index)}
|
||||
onDragEnd={handleSort}
|
||||
onDragOver={(e) => e.preventDefault()}>
|
||||
<h6>{item.name}</h6>
|
||||
</div>
|
||||
))}
|
||||
id='name'
|
||||
label={'Name'}
|
||||
checked={(visibleItem & 0b100) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
<Checkbox
|
||||
id='phone'
|
||||
label={'Telefon'}
|
||||
checked={(visibleItem & 0b010) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
<Checkbox
|
||||
id='email'
|
||||
label={'Email'}
|
||||
checked={(visibleItem & 0b001) > 0}
|
||||
changeEvent={checkBoxChange}
|
||||
/>
|
||||
</div>
|
||||
<div>Reihenfolge</div>
|
||||
<div className="list-container">
|
||||
{itemList.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="list-item"
|
||||
draggable
|
||||
onDragStart={(e) => (dragItem.current = index)}
|
||||
onDragEnter={(e) => (dragOverItem.current = index)}
|
||||
onDragEnd={handleSort}
|
||||
onDragOver={(e) => e.preventDefault()}>
|
||||
<h6>{item.name}</h6>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='blockRepeat'>
|
||||
|
||||
Reference in New Issue
Block a user