mirror of
https://gitlab.com/MrFry/qmining-data-editor
synced 2026-04-28 19:27:37 +02:00
added dynamic domain
This commit is contained in:
mrfry
+296
-270
@@ -11,302 +11,328 @@ import LoadingIndicator from '../components/LoadingIndicator'
|
||||
|
||||
import styles from './index.module.css'
|
||||
import commonStyles from '../commonStyles.module.css'
|
||||
import constants from '../constants.json'
|
||||
import constants from '../constants.js'
|
||||
|
||||
const Infos = ({ onClick, renderOKButton }) => {
|
||||
return (
|
||||
<div className={commonStyles.infoContainer}>
|
||||
<div className={commonStyles.infoHeader}>Kérdés szerkesztő</div>
|
||||
<div>
|
||||
Ezen az oldalon az éles adatbázisban levő kérdéseket tudod szerkeszteni,
|
||||
vagy azokhoz tudsz adni.{' '}
|
||||
<b>
|
||||
A törléshez és módosításokhoz nem kér megerősítést, ezek azonnal
|
||||
megtörténnek, és nem visszavonhatóak.
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
<i>Néhány dolog, amit kérlek tarts be szerkesztés közben:</i>
|
||||
<div style={{ textAlign: 'left', width: '700px' }}>
|
||||
<ul>
|
||||
<li>
|
||||
Ne rontsd el a kérdéseket sok törléssel / rossz válasz
|
||||
megadásával. Sok más felhasználónak lesz rossz, és visszakereshető
|
||||
/ tiltható a módosító
|
||||
</li>
|
||||
<li>
|
||||
Arra is vigyázz, hogy véletlen se történjen ilyesmi, vagy ha mégis
|
||||
valami baj történt, akkor azt{' '}
|
||||
<a href={`${constants.siteUrl}irc`}>jelezd</a>. Van sok biztonsági
|
||||
mentés
|
||||
</li>
|
||||
<li>
|
||||
Ahhoz, hogy a script megtalálja a helyes választ a kérdés
|
||||
szövegének <b>pontosan</b> olyannak kell lennie, mint a teszt
|
||||
közben (elírásokkal, .... -okkal, meg mindennel)
|
||||
</li>
|
||||
</ul>
|
||||
return (
|
||||
<div className={commonStyles.infoContainer}>
|
||||
<div className={commonStyles.infoHeader}>Kérdés szerkesztő</div>
|
||||
<div>
|
||||
Ezen az oldalon az éles adatbázisban levő kérdéseket tudod
|
||||
szerkeszteni, vagy azokhoz tudsz adni.{' '}
|
||||
<b>
|
||||
A törléshez és módosításokhoz nem kér megerősítést, ezek
|
||||
azonnal megtörténnek, és nem visszavonhatóak.
|
||||
</b>
|
||||
</div>
|
||||
<div>
|
||||
<i>Néhány dolog, amit kérlek tarts be szerkesztés közben:</i>
|
||||
<div style={{ textAlign: 'left', width: '700px' }}>
|
||||
<ul>
|
||||
<li>
|
||||
Ne rontsd el a kérdéseket sok törléssel / rossz
|
||||
válasz megadásával. Sok más felhasználónak lesz
|
||||
rossz, és visszakereshető / tiltható a módosító
|
||||
</li>
|
||||
<li>
|
||||
Arra is vigyázz, hogy véletlen se történjen ilyesmi,
|
||||
vagy ha mégis valami baj történt, akkor azt{' '}
|
||||
<a href={`${constants.siteUrl}irc`}>jelezd</a>. Van
|
||||
sok biztonsági mentés
|
||||
</li>
|
||||
<li>
|
||||
Ahhoz, hogy a script megtalálja a helyes választ a
|
||||
kérdés szövegének <b>pontosan</b> olyannak kell
|
||||
lennie, mint a teszt közben (elírásokkal, ....
|
||||
-okkal, meg mindennel)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
Ha akármi kérdés van{' '}
|
||||
<a
|
||||
href={`${constants.siteUrl}contact`}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
>
|
||||
itt lehet üzenetet küldeni
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
{renderOKButton && (
|
||||
<div className={commonStyles.infoReadButton} onClick={onClick}>
|
||||
OK
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
Ha akármi kérdés van{' '}
|
||||
<a
|
||||
href={`${constants.siteUrl}contact`}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
>
|
||||
itt lehet üzenetet küldeni
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
{renderOKButton && (
|
||||
<div className={commonStyles.infoReadButton} onClick={onClick}>
|
||||
OK
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const fetchDbs = () => {
|
||||
return new Promise((resolve) => {
|
||||
fetch(`${constants.apiUrl}getDbs`, {
|
||||
credentials: 'include',
|
||||
return new Promise((resolve) => {
|
||||
fetch(`${constants.apiUrl}getDbs`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((resp) => {
|
||||
resolve(resp)
|
||||
})
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((resp) => {
|
||||
resolve(resp)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const fetchData = (selectedDb) => {
|
||||
return new Promise((resolve) => {
|
||||
const toFetch = `${constants.apiUrl}${selectedDb.path}`
|
||||
fetch(toFetch, {
|
||||
credentials: 'include',
|
||||
return new Promise((resolve) => {
|
||||
const toFetch = `${constants.apiUrl}${selectedDb.path}`
|
||||
fetch(toFetch, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((resp) => {
|
||||
resolve(resp)
|
||||
})
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((resp) => {
|
||||
resolve(resp)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const views = {
|
||||
welcome: 'w',
|
||||
subject: 's',
|
||||
question: 'q',
|
||||
questionAdder: 'qa',
|
||||
possibleAnswers: 'pa',
|
||||
welcome: 'w',
|
||||
subject: 's',
|
||||
question: 'q',
|
||||
questionAdder: 'qa',
|
||||
possibleAnswers: 'pa',
|
||||
}
|
||||
|
||||
export default function Index({ router }) {
|
||||
const [infoRead, setInfoRead] = useState(false)
|
||||
const [data, setData] = useState(null)
|
||||
const [qdbs, setQdbs] = useState(null)
|
||||
const [selectedDb, setSelectedDb] = useState(null)
|
||||
const [view, setView] = useState(views.welcome)
|
||||
const [infoRead, setInfoRead] = useState(false)
|
||||
const [data, setData] = useState(null)
|
||||
const [qdbs, setQdbs] = useState(null)
|
||||
const [selectedDb, setSelectedDb] = useState(null)
|
||||
const [view, setView] = useState(views.welcome)
|
||||
|
||||
const [error, setError] = useState(null)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDb) {
|
||||
loadData()
|
||||
} else {
|
||||
setData(null)
|
||||
}
|
||||
}, [selectedDb])
|
||||
useEffect(() => {
|
||||
if (selectedDb) {
|
||||
loadData()
|
||||
} else {
|
||||
setData(null)
|
||||
}
|
||||
}, [selectedDb])
|
||||
|
||||
useEffect(() => {
|
||||
fetchDbs().then((resp) => {
|
||||
setQdbs(resp)
|
||||
useEffect(() => {
|
||||
fetchDbs().then((resp) => {
|
||||
setQdbs(resp)
|
||||
|
||||
const view = router.query.v
|
||||
? decodeURIComponent(router.query.v)
|
||||
: views.welcome
|
||||
setView(view)
|
||||
})
|
||||
}, [])
|
||||
const view = router.query.v
|
||||
? decodeURIComponent(router.query.v)
|
||||
: views.welcome
|
||||
setView(view)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const loadData = () => {
|
||||
setData(null)
|
||||
if (!selectedDb) {
|
||||
alert('Válassz egy adatbázist!')
|
||||
return
|
||||
}
|
||||
const loadData = () => {
|
||||
setData(null)
|
||||
if (!selectedDb) {
|
||||
alert('Válassz egy adatbázist!')
|
||||
return
|
||||
}
|
||||
|
||||
fetchData(selectedDb)
|
||||
.then((resp) => {
|
||||
setData(resp)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
console.error('Error while fetching data')
|
||||
setError('Error while fetching data')
|
||||
})
|
||||
}
|
||||
|
||||
const refetchDbs = () => {
|
||||
if (selectedDb) {
|
||||
fetchData(selectedDb).then((resp) => {
|
||||
setData(resp)
|
||||
})
|
||||
}
|
||||
fetchDbs().then((resp) => {
|
||||
setQdbs(resp)
|
||||
})
|
||||
}
|
||||
|
||||
const renderView = () => {
|
||||
if (view === views.subject) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Tárgyak - Data Editor | Frylabs.net</title>
|
||||
</Head>
|
||||
<DbSelector
|
||||
qdbs={qdbs}
|
||||
selectedDb={selectedDb}
|
||||
onChange={setSelectedDb}
|
||||
/>
|
||||
{data && <SubjectView selectedDb={selectedDb} data={data} />}
|
||||
</>
|
||||
)
|
||||
} else if (view === views.question) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Kérdések - Data Editor | Frylabs.net</title>
|
||||
</Head>
|
||||
<DbSelector
|
||||
qdbs={qdbs}
|
||||
selectedDb={selectedDb}
|
||||
onChange={setSelectedDb}
|
||||
/>
|
||||
{data && <QuestionView selectedDb={selectedDb} data={data} />}
|
||||
</>
|
||||
)
|
||||
} else if (view === views.questionAdder) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Kérdés beküldés - Data Editor | Frylabs.net</title>
|
||||
</Head>
|
||||
<DbSelector
|
||||
hideLockedDbs
|
||||
qdbs={qdbs}
|
||||
selectedDb={selectedDb}
|
||||
onChange={setSelectedDb}
|
||||
/>
|
||||
<QuestionAdder
|
||||
data={data}
|
||||
selectedDb={selectedDb}
|
||||
refetchDbs={refetchDbs}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
} else if (view === views.possibleAnswers) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Kitöltetlen tesztek - Data Editor | Frylabs.net</title>
|
||||
</Head>
|
||||
<PossibleAnswers refetchDbs={refetchDbs} router={router} />
|
||||
</>
|
||||
)
|
||||
} else if (view === views.welcome) {
|
||||
return <Infos renderOKButton={false} />
|
||||
} else {
|
||||
return <div>No view!</div>
|
||||
}
|
||||
}
|
||||
|
||||
function renderViewSelector() {
|
||||
return (
|
||||
<div className={styles.viewButtonContainer}>
|
||||
<div
|
||||
className={view === views.question ? styles.activeView : undefined}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.question}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
setView(views.question)
|
||||
}}
|
||||
>
|
||||
Kérdések
|
||||
</div>
|
||||
<div
|
||||
title={
|
||||
'Választott adatbázisban lévő tárgyak megjelenítése, és tárgyakon belüli kérdések szerkesztése'
|
||||
}
|
||||
className={view === views.subject ? styles.activeView : undefined}
|
||||
onClick={() => {
|
||||
router.replace(`${router.pathname}?v=${views.subject}`, undefined, {
|
||||
shallow: true,
|
||||
fetchData(selectedDb)
|
||||
.then((resp) => {
|
||||
setData(resp)
|
||||
})
|
||||
setView(views.subject)
|
||||
}}
|
||||
>
|
||||
Tárgyak
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
view === views.questionAdder ? styles.activeView : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.questionAdder}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
console.error('Error while fetching data')
|
||||
setError('Error while fetching data')
|
||||
})
|
||||
}
|
||||
|
||||
const refetchDbs = () => {
|
||||
if (selectedDb) {
|
||||
fetchData(selectedDb).then((resp) => {
|
||||
setData(resp)
|
||||
})
|
||||
}
|
||||
fetchDbs().then((resp) => {
|
||||
setQdbs(resp)
|
||||
})
|
||||
}
|
||||
|
||||
const renderView = () => {
|
||||
if (view === views.subject) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Tárgyak - Data Editor | {constants.domain}
|
||||
</title>
|
||||
</Head>
|
||||
<DbSelector
|
||||
qdbs={qdbs}
|
||||
selectedDb={selectedDb}
|
||||
onChange={setSelectedDb}
|
||||
/>
|
||||
{data && (
|
||||
<SubjectView selectedDb={selectedDb} data={data} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
setView(views.questionAdder)
|
||||
setSelectedDb(null)
|
||||
}}
|
||||
>
|
||||
Kérdés beküldés
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
view === views.possibleAnswers ? styles.activeView : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.possibleAnswers}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
} else if (view === views.question) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Kérdések - Data Editor | {constants.domain}
|
||||
</title>
|
||||
</Head>
|
||||
<DbSelector
|
||||
qdbs={qdbs}
|
||||
selectedDb={selectedDb}
|
||||
onChange={setSelectedDb}
|
||||
/>
|
||||
{data && (
|
||||
<QuestionView selectedDb={selectedDb} data={data} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
setView(views.possibleAnswers)
|
||||
}}
|
||||
>
|
||||
Kitöltetlen tesztek
|
||||
} else if (view === views.questionAdder) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Kérdés beküldés - Data Editor | {constants.domain}
|
||||
</title>
|
||||
</Head>
|
||||
<DbSelector
|
||||
hideLockedDbs
|
||||
qdbs={qdbs}
|
||||
selectedDb={selectedDb}
|
||||
onChange={setSelectedDb}
|
||||
/>
|
||||
<QuestionAdder
|
||||
data={data}
|
||||
selectedDb={selectedDb}
|
||||
refetchDbs={refetchDbs}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
} else if (view === views.possibleAnswers) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Kitöltetlen tesztek - Data Editor |{' '}
|
||||
{constants.domain}
|
||||
</title>
|
||||
</Head>
|
||||
<PossibleAnswers refetchDbs={refetchDbs} router={router} />
|
||||
</>
|
||||
)
|
||||
} else if (view === views.welcome) {
|
||||
return <Infos renderOKButton={false} />
|
||||
} else {
|
||||
return <div>No view!</div>
|
||||
}
|
||||
}
|
||||
|
||||
function renderViewSelector() {
|
||||
return (
|
||||
<div className={styles.viewButtonContainer}>
|
||||
<div
|
||||
className={
|
||||
view === views.question ? styles.activeView : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.question}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
setView(views.question)
|
||||
}}
|
||||
>
|
||||
Kérdések
|
||||
</div>
|
||||
<div
|
||||
title={
|
||||
'Választott adatbázisban lévő tárgyak megjelenítése, és tárgyakon belüli kérdések szerkesztése'
|
||||
}
|
||||
className={
|
||||
view === views.subject ? styles.activeView : undefined
|
||||
}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.subject}`,
|
||||
undefined,
|
||||
{
|
||||
shallow: true,
|
||||
}
|
||||
)
|
||||
setView(views.subject)
|
||||
}}
|
||||
>
|
||||
Tárgyak
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
view === views.questionAdder
|
||||
? styles.activeView
|
||||
: undefined
|
||||
}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.questionAdder}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
setView(views.questionAdder)
|
||||
setSelectedDb(null)
|
||||
}}
|
||||
>
|
||||
Kérdés beküldés
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
view === views.possibleAnswers
|
||||
? styles.activeView
|
||||
: undefined
|
||||
}
|
||||
onClick={() => {
|
||||
router.replace(
|
||||
`${router.pathname}?v=${views.possibleAnswers}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
setView(views.possibleAnswers)
|
||||
}}
|
||||
>
|
||||
Kitöltetlen tesztek
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>{error}</div>
|
||||
}
|
||||
|
||||
if (!infoRead) {
|
||||
return <Infos onClick={() => setInfoRead(true)} renderOKButton />
|
||||
}
|
||||
|
||||
if (!qdbs) {
|
||||
return <LoadingIndicator />
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderViewSelector()}
|
||||
{renderView()}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>{error}</div>
|
||||
}
|
||||
|
||||
if (!infoRead) {
|
||||
return <Infos onClick={() => setInfoRead(true)} renderOKButton />
|
||||
}
|
||||
|
||||
if (!qdbs) {
|
||||
return <LoadingIndicator />
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{renderViewSelector()}
|
||||
{renderView()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user