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