albert/qmining-data-editor
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-data-editor synced 2025-04-01 20:24:01 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Button styling, better informing user about upload process

Browse source
This commit is contained in:
MrFry 2020-04-10 15:03:47 +02:00
parent 179aa6ebfa
commit 25b9f72093
2 changed files with 44 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/pages/index.js
View file

@ -22,6 +22,7 @@ const views = {
export default function Index (props) { export default function Index (props) {
const [data, setData] = useState(null) const [data, setData] = useState(null)
const [view, setView] = useState(views.welcome) const [view, setView] = useState(views.welcome)
const [sending, setSending] = useState(false)
const [error, setError] = useState(null) const [error, setError] = useState(null)
const [password, setPassword] = useState('') const [password, setPassword] = useState('')
const [editedQuestions, setEditedQuestions] = useState({}) const [editedQuestions, setEditedQuestions] = useState({})
@ -109,38 +110,51 @@ export default function Index (props) {
} }
const SendDataToServer = async () => { const SendDataToServer = async () => {
const rawResponse = await fetch(constants.apiUrl + 'uploaddata', { if (sending) {
method: 'POST', alert('Adatok már feltöltés alatt, várd meg míg feltölti') // eslint-disable-line
headers: { return
'Accept': 'application/json', }
'Content-Type': 'application/json' setSending(true)
}, try {
body: JSON.stringify({ const rawResponse = await fetch(constants.apiUrl + 'uploaddata', {
newData: data, method: 'POST',
count: getCount(data), headers: {
initialCount: initialCount, 'Accept': 'application/json',
password: password, 'Content-Type': 'application/json'
editedQuestions: editedQuestions },
body: JSON.stringify({
newData: data,
count: getCount(data),
initialCount: initialCount,
password: password,
editedQuestions: editedQuestions
})
}) })
}) rawResponse.json()
rawResponse.json() .then((resp) => {
.then((resp) => { setSending(false)
if (resp.status === 'ok') { if (resp.status === 'ok') {
alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line
console.log('OK') console.log('OK')
} else if (resp.status === 'invalidPass') { } else if (resp.status === 'invalidPass') {
alert('Hibás jelszó!') // eslint-disable-line alert('Hibás jelszó!') // eslint-disable-line
console.log('invalidPass') console.log('invalidPass')
} else { } else {
alert('Hiba feltöltés közben! (szerver oldalon)! Több adat konzolban') // eslint-disable-line alert('Hiba feltöltés közben! (szerver oldalon)! Több adat konzolban') // eslint-disable-line
console.error('RESPONSE', resp) console.error('RESPONSE', resp)
console.error(resp.message) console.error(resp.message)
} }
}) })
.catch((e) => { .catch((e) => {
setSending(false)
alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
console.error('Error posting data', e) console.error('Error posting data', e)
}) })
} catch (e) {
setSending(false)
alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
console.error('Error posting data', e)
}
} }
const renderView = () => { const renderView = () => {
@ -219,7 +233,7 @@ export default function Index (props) {
} }
}} }}
> >
Feltöltés {sending ? 'Feltöltés ...' : 'Mentés'}
</span> </span>
</div> </div>
<div className={styles.viewButtonContainer}> <div className={styles.viewButtonContainer}>

2
src/pages/index.module.css
View file

@ -1,4 +1,5 @@
.viewButtonContainer span { .viewButtonContainer span {
cursor: pointer;
display: inline-block; display: inline-block;
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
@ -11,6 +12,7 @@
} }
.optionsButtonContainer span { .optionsButtonContainer span {
cursor: pointer;
display: inline-block; display: inline-block;
margin: 3px; margin: 3px;
padding: 3px; padding: 3px;