kemkas/kemkas-gh-mirror
1
0
Fork 0
mirror of https://github.com/morbalint/kemkas.git synced 2026-07-17 19:03:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

add loaders

Browse Source
This commit is contained in:
Balint Morasz
2024-07-16 21:27:21 +02:00
parent d8775af371
commit 2715163990
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/second-edition/pages/CreateCharacter2E.tsx
+15 -6
View File
@@ -1,6 +1,6 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import {useLoaderData, useNavigate, useParams} from "react-router-dom"; import {useLoaderData, useNavigate, useParams} from "react-router-dom";
import {OverlayTrigger, Toast, ToastContainer} from "react-bootstrap"; import {OverlayTrigger, Spinner, Toast, ToastContainer} from "react-bootstrap";
import {Karakter2E} from "../domain-models/karakter2E"; import {Karakter2E} from "../domain-models/karakter2E";
import Tulajdonsagok2E from "../components/Tulajdonsagok2E"; import Tulajdonsagok2E from "../components/Tulajdonsagok2E";
import OsztalySelector2E from "../components/OsztalySelector2E"; import OsztalySelector2E from "../components/OsztalySelector2E";
@@ -40,6 +40,8 @@ function CreateCharacter2E(props: {
let [showSaveModal, setShowSaveModal] = useState(false); let [showSaveModal, setShowSaveModal] = useState(false);
let [newId, setNewId] = useState(null as string | null) let [newId, setNewId] = useState(null as string | null)
let [showSaved, setShowSaved] = useState(false); let [showSaved, setShowSaved] = useState(false);
let [isPDFRendering, setIsPDFRendering] = useState<boolean>(false)
let [isSaving, setIsSaving] = useState<boolean>(false)
let [isPublic, setIsPublic] = useState(initialIsPublic); let [isPublic, setIsPublic] = useState(initialIsPublic);
const newCharacterUrl = () => `${window.location.origin}/2e/karakter/${newId}` const newCharacterUrl = () => `${window.location.origin}/2e/karakter/${newId}`
@@ -54,6 +56,7 @@ function CreateCharacter2E(props: {
} }
const hideSaved = () => setShowSaved(false); const hideSaved = () => setShowSaved(false);
const onSaveClicked = async () => { const onSaveClicked = async () => {
setIsSaving(true);
faro?.api.pushEvent('character_stored', { faro?.api.pushEvent('character_stored', {
osztaly: karakter.szintlepesek[0].osztaly.toString(), osztaly: karakter.szintlepesek[0].osztaly.toString(),
szint: karakter.szint.toString(), szint: karakter.szint.toString(),
@@ -64,16 +67,18 @@ function CreateCharacter2E(props: {
if (id == null) { if (id == null) {
let recievedId = await StoreNewCharacter2E(karakter, isPublic); let recievedId = await StoreNewCharacter2E(karakter, isPublic);
setNewId(recievedId) setNewId(recievedId)
setIsSaving(false)
setShowSaveModal(true); setShowSaveModal(true);
} else { } else {
await UpdateCharacter2E(id, karakter, isPublic); await UpdateCharacter2E(id, karakter, isPublic);
setIsSaving(false)
setShowSaved(true); setShowSaved(true);
setTimeout(() => { setTimeout(() => {
hideSaved(); hideSaved();
}, 5000) }, 5000)
} }
} }
return <div> return <div>
<div className='container-fluid p-5 bg-black text-white text-center'> <div className='container-fluid p-5 bg-black text-white text-center'>
<h1>Karakter {!!id ? "szerkesztése" : "létrehozása"}</h1> <h1>Karakter {!!id ? "szerkesztése" : "létrehozása"}</h1>
@@ -157,30 +162,34 @@ function CreateCharacter2E(props: {
className='btn btn-danger btn-lg' className='btn btn-danger btn-lg'
type='button' type='button'
onClick={onSaveClicked} onClick={onSaveClicked}
disabled={isSaving}
> >
Mentés Mentés {isSaving ? <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" /> : ""}
</button> </button>
</OverlayTrigger> </OverlayTrigger>
: <button : <button
className='btn btn-danger btn-lg' className='btn btn-danger btn-lg'
type='button' type='button'
onClick={onSaveClicked} onClick={onSaveClicked}
disabled={isSaving}
> >
Mentés Mentés {isSaving ? <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" /> : ""}
</button> </button>
} }
</div> </div>
</div> </div>
<div className="col-6"> <div className="col-6">
<div className='d-grid gap-2 m-5'> <div className='d-grid gap-2 m-5'>
<button className='btn btn-danger btn-lg' type='button' onClick={async () => { <button className='btn btn-danger btn-lg' type='button' disabled={isPDFRendering} onClick={async () => {
faro?.api.pushEvent('character_created', { faro?.api.pushEvent('character_created', {
osztaly: karakter.szintlepesek[0].osztaly, osztaly: karakter.szintlepesek[0].osztaly,
szint: karakter.szint.toString(), szint: karakter.szint.toString(),
faj: karakter.faj.toString(), faj: karakter.faj.toString(),
}) })
setIsPDFRendering(true)
await CreatePDF(KarakterInputToPdfView(karakter)) await CreatePDF(KarakterInputToPdfView(karakter))
}}>PDF setIsPDFRendering(false)
}}>PDF {isPDFRendering ? <Spinner as="span" animation="border" size="sm" role="status" aria-hidden="true" /> : ""}
</button> </button>
</div> </div>
</div> </div>