ash/comicbox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix: lock transcribe fields when submitting

Browse source
This commit is contained in:
Ashhhleyyy 2022-07-26 22:03:00 +01:00
parent 3f28cfcfd8
commit 6ebc2f300e
Signed by: ash
GPG key ID: 83B789081A0878FB
1 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
pages/comic/[comic]/transcribe/[page].tsx
View file

@ -65,6 +65,7 @@ export default function TranscribePage(props: Props) {
const [indicateNumbers, setIndicateNumbers] = useState(false); const [indicateNumbers, setIndicateNumbers] = useState(false);
const [lockAreas, setLockAreas] = useState(false); const [lockAreas, setLockAreas] = useState(false);
const [selectedBubble, setSelectedBubble] = useState(-1); const [selectedBubble, setSelectedBubble] = useState(-1);
const [saving, setSaving] = useState(false);
const extractText = useCallback(() => { const extractText = useCallback(() => {
if (image && regions.length > 0) { if (image && regions.length > 0) {
@ -94,6 +95,7 @@ export default function TranscribePage(props: Props) {
}, [props.characters]); }, [props.characters]);
async function submitBubbles() { async function submitBubbles() {
setSaving(true);
const res = await fetch('/api/submit-page-bubbles', { const res = await fetch('/api/submit-page-bubbles', {
method: 'PUT', method: 'PUT',
headers: { headers: {
@ -139,11 +141,10 @@ export default function TranscribePage(props: Props) {
pageId: props.page.id, pageId: props.page.id,
}), }),
}); });
if (res.ok) { if (!res.ok) {
console.log('submitted!'); alert(`failed to submit: ${res.status}, ${res.statusText}`);
} else {
console.log('failed to submit:', res.status, res.statusText);
} }
setSaving(false);
} }
return ( return (
@ -218,7 +219,7 @@ export default function TranscribePage(props: Props) {
<AreaSelector <AreaSelector
areas={regions.map((r) => r.area)} areas={regions.map((r) => r.area)}
onChange={(areas) => onChange={(areas) =>
!lockAreas && !lockAreas && !saving &&
setRegions( setRegions(
areas.map((area, i) => { areas.map((area, i) => {
if (i < regions.length) { if (i < regions.length) {
@ -239,13 +240,13 @@ export default function TranscribePage(props: Props) {
} }
globalAreaStyle={{ globalAreaStyle={{
border: `1.5px dashed ${randomColour( border: `1.5px dashed ${randomColour(
props.page.comic.id, props.page.id,
0.3, 0.3,
0.49, 0.49,
0.5 0.5
)}`, )}`,
backgroundColor: randomColour( backgroundColor: randomColour(
props.page.comic.id, props.page.id,
undefined, undefined,
undefined, undefined,
0.5 0.5
@ -268,12 +269,13 @@ export default function TranscribePage(props: Props) {
</section> </section>
<section className='flex-1'> <section className='flex-1'>
<div> <div>
<Button onClick={extractText}>Extract text</Button> <Button disabled={saving} onClick={extractText}>Extract text</Button>
<br /> <br />
<label htmlFor='indicate-numbers'> <label htmlFor='indicate-numbers'>
<input <input
id='indicate-numbers' id='indicate-numbers'
type='checkbox' type='checkbox'
disabled={saving}
value={indicateNumbers.toString()} value={indicateNumbers.toString()}
onChange={(e) => onChange={(e) =>
setIndicateNumbers(e.target.checked) setIndicateNumbers(e.target.checked)
@ -289,6 +291,7 @@ export default function TranscribePage(props: Props) {
id='lock-areas' id='lock-areas'
type='checkbox' type='checkbox'
value={lockAreas.toString()} value={lockAreas.toString()}
disabled={saving}
onChange={(e) => setLockAreas(e.target.checked)} onChange={(e) => setLockAreas(e.target.checked)}
/> />
Lock areas Lock areas
@ -309,6 +312,7 @@ export default function TranscribePage(props: Props) {
<TextInput <TextInput
multiline multiline
className='w-full h-24' className='w-full h-24'
disabled={saving}
value={regions[selectedBubble].text} value={regions[selectedBubble].text}
onChange={(e) => { onChange={(e) => {
const newRegions = regions.slice(); const newRegions = regions.slice();
@ -320,6 +324,7 @@ export default function TranscribePage(props: Props) {
<Select <Select
className='text-slate-900' className='text-slate-900'
isDisabled={saving}
onChange={(v) => { onChange={(v) => {
const newRegions = regions.slice(); const newRegions = regions.slice();
newRegions[selectedBubble].character = newRegions[selectedBubble].character =
@ -332,6 +337,7 @@ export default function TranscribePage(props: Props) {
<Button <Button
className='mt-2 w-full' className='mt-2 w-full'
disabled={saving}
onClick={() => { onClick={() => {
const newRegions = regions.filter( const newRegions = regions.filter(
(_, i) => i !== selectedBubble (_, i) => i !== selectedBubble
@ -354,7 +360,7 @@ export default function TranscribePage(props: Props) {
<div <div
key={i} key={i}
onClick={() => onClick={() =>
setSelectedBubble( !saving && setSelectedBubble(
selectedBubble === i ? -1 : i selectedBubble === i ? -1 : i
) )
} }
@ -378,7 +384,7 @@ export default function TranscribePage(props: Props) {
<hr className='border-slate-600 my-2' /> <hr className='border-slate-600 my-2' />
<div> <div>
<Button onClick={submitBubbles}>Save!</Button> <Button disabled={saving} onClick={submitBubbles}>Save!</Button>
</div> </div>
</section> </section>
</div> </div>