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

added dynamic domain

Browse source
This commit is contained in:
mrfry 2023-04-08 11:03:23 +02:00
parent 39dfd7a0f4
commit 5a665bc766
10 changed files with 1537 additions and 1455 deletions
Download patch file Download diff file Expand all files Collapse all files

78
.eslintrc.js
View file

@ -1,50 +1,36 @@
module.exports = { module.exports = {
env: { env: {
browser: true, browser: true,
es2021: true, es2021: true,
},
parser: '@babel/eslint-parser',
parserOptions: {
sourceType: 'module',
},
settings: {
react: {
version: 'detect',
}, },
parser: '@babel/eslint-parser', },
parserOptions: { plugins: ['react'],
sourceType: 'module', extends: [
}, 'plugin:react/recommended',
settings: { 'plugin:react/jsx-runtime',
react: { 'plugin:@next/next/recommended',
version: 'detect', ],
}, rules: {
}, 'react/prop-types': 0,
extends: [ 'no-undef': ['error'],
'plugin:react/recommended', eqeqeq: ['warn', 'smart'],
'plugin:react/jsx-runtime', 'react/jsx-uses-vars': 'error',
'plugin:@next/next/recommended', 'react/jsx-uses-react': 'error',
'@next/next/no-img-element': 'off',
'no-unused-vars': 'warn',
'no-prototype-builtins': 'off',
'id-length': [
'warn',
{ exceptions: ['x', 'i', 'j', 't', 'Q', 'A', 'C', 'q', 'a', 'b', 'e'] },
], ],
globals: { },
Atomics: 'readonly', root: true,
SharedArrayBuffer: 'readonly',
},
rules: {
'react/prop-types': 0,
'no-undef': ['error'],
eqeqeq: ['warn', 'smart'],
'no-unused-vars': 'warn',
'no-prototype-builtins': 'off',
'id-length': [
'warn',
{
exceptions: [
'x',
'i',
'j',
't',
'Q',
'A',
'C',
'q',
'a',
'b',
'e',
],
},
],
},
root: true,
} }

151
src/components/QuestionSearchResult.js
View file

@ -2,86 +2,95 @@ import React from 'react'
import Questions from './Questions.js' import Questions from './Questions.js'
import constants from '../constants.json' import constants from '../constants.js'
const countReducer = (acc, subj) => { const countReducer = (acc, subj) => {
return acc + subj.Questions.length return acc + subj.Questions.length
} }
export default function QuestionSearchResult(props) { export default function QuestionSearchResult(props) {
const { data, searchTerm, edits, onChange } = props const { data, searchTerm, edits, onChange } = props
let subjs = [] let subjs = []
let results = -1 let results = -1
if (searchTerm || edits.length > 0) { if (searchTerm || edits.length > 0) {
subjs = data.reduce((acc, subj) => { subjs = data.reduce((acc, subj) => {
const resultQuestions = subj.Questions.reduce((qacc, question, i) => { const resultQuestions = subj.Questions.reduce(
const unsaved = edits.some((e) => { (qacc, question, i) => {
if (e.subjName === subj.Name && e.index === i && e.type === 'edit') { const unsaved = edits.some((e) => {
return true if (
} e.subjName === subj.Name &&
}) e.index === i &&
if (unsaved) { e.type === 'edit'
qacc.push({ ) {
q: question, return true
unsaved: unsaved, }
}) })
return qacc if (unsaved) {
} qacc.push({
q: question,
unsaved: unsaved,
})
return qacc
}
const keys = ['Q', 'A', 'data'] const keys = ['Q', 'A', 'data']
keys.some((key) => { keys.some((key) => {
if (typeof question[key] !== 'string') { if (typeof question[key] !== 'string') {
return false return false
} }
if ( if (
searchTerm && searchTerm &&
question[key] && question[key] &&
question[key].toLowerCase().includes(searchTerm.toLowerCase()) question[key]
) { .toLowerCase()
qacc.push({ q: question }) .includes(searchTerm.toLowerCase())
return true ) {
} qacc.push({ q: question })
}) return true
return qacc }
}, []) })
if (resultQuestions.length > 0) { return qacc
acc.push({ },
Name: subj.Name, []
Questions: resultQuestions, )
ind: subj.ind, if (resultQuestions.length > 0) {
}) acc.push({
} Name: subj.Name,
return acc Questions: resultQuestions,
}, []) ind: subj.ind,
results = subjs.reduce(countReducer, 0) })
} else { }
results = data.reduce(countReducer, 0) return acc
} }, [])
results = subjs.reduce(countReducer, 0)
} else {
results = data.reduce(countReducer, 0)
}
console.log(subjs) console.log(subjs)
const renderCount = () => { const renderCount = () => {
return ( return (
<div> <div>
{searchTerm ? '' : 'Kezdj el írni kereséshez!'} {results}{' '} {searchTerm ? '' : 'Kezdj el írni kereséshez!'} {results}{' '}
{searchTerm ? 'találat' : 'kérdés'}{' '} {searchTerm ? 'találat' : 'kérdés'}{' '}
{searchTerm ? subjs.length : data.length} tárgy {searchTerm ? subjs.length : data.length} tárgy
</div> </div>
) )
} }
if (results > constants.maxQuestionsToRender) { if (results > constants.maxQuestionsToRender) {
return renderCount() return renderCount()
} else { } else {
return ( return (
<div> <div>
<div>{renderCount()}</div> <div>{renderCount()}</div>
<div> <div>
<Questions subjs={subjs} onChange={onChange} /> <Questions subjs={subjs} onChange={onChange} />
</div> </div>
</div> </div>
) )
} }
} }

474
src/components/possibleAnswers.js
View file

@ -4,257 +4,283 @@ import LoadingIndicator from '../components/LoadingIndicator'
import SearchBar from '../components/searchBar' import SearchBar from '../components/searchBar'
import TestView from '../components/testView' import TestView from '../components/testView'
import constants from '../constants.json' import constants from '../constants.js'
import styles from './possibleAnswers.module.css' import styles from './possibleAnswers.module.css'
const Infos = () => { const Infos = () => {
return ( return (
<div className={styles.infoContainer}> <div className={styles.infoContainer}>
<div> <div>
Itt azok a tesztek találhatók, amiknek a kitöltése után nem volt Itt azok a tesztek találhatók, amiknek a kitöltése után nem volt
ellenőrző oldal. A script így nem tudja, hogy melyik a helyes megoldás. ellenőrző oldal. A script így nem tudja, hogy melyik a helyes
De ha ti igen, akkor jelöljétek be / írjátok be, és mentsétek el. Így megoldás. De ha ti igen, akkor jelöljétek be / írjátok be, és
mikor legközelebb találkoztok a kérdéssel a script tudni fogja a helyes mentsétek el. Így mikor legközelebb találkoztok a kérdéssel a
választ. Ezzel másoknak is nagyon sokat segítetek. script tudni fogja a helyes választ. Ezzel másoknak is nagyon
</div> sokat segítetek.
<div> </div>
Jelenleg azok a tesztek is megjelennek itt, amiknek elérhető a teszt eredmény oldala, és meg is <div>
van hozzá a helyes válasz. A jövőben ezek ki lesznek automatikusan törölve. Jelenleg azok a tesztek is megjelennek itt, amiknek elérhető a
</div> teszt eredmény oldala, és meg is van hozzá a helyes válasz. A
</div> jövőben ezek ki lesznek automatikusan törölve.
) </div>
</div>
)
} }
const fetchPossibleAnswers = () => { const fetchPossibleAnswers = () => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(`${constants.apiUrl}possibleAnswers`, { fetch(`${constants.apiUrl}possibleAnswers`, {
credentials: 'include', credentials: 'include',
})
.then((resp) => {
return resp.json()
})
.then((res) => {
resolve(res)
})
}) })
.then((resp) => {
return resp.json()
})
.then((res) => {
resolve(res)
})
})
} }
const fetchSubject = (subj, savedQuestionsFileName) => { const fetchSubject = (subj, savedQuestionsFileName) => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch( fetch(
`${constants.apiUrl}savedQuestions/${subj}/${savedQuestionsFileName}`, `${constants.apiUrl}savedQuestions/${subj}/${savedQuestionsFileName}`,
{ {
credentials: 'include', credentials: 'include',
} }
) )
.then((resp) => { .then((resp) => {
return resp.json() return resp.json()
}) })
.then((resp) => { .then((resp) => {
resolve(resp) resolve(resp)
}) })
}) })
} }
const fetchTest = (subj, test) => { const fetchTest = (subj, test) => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(`${constants.apiUrl}savedQuestions/${subj}/${test}`, { fetch(`${constants.apiUrl}savedQuestions/${subj}/${test}`, {
credentials: 'include', credentials: 'include',
})
.then((resp) => {
return resp.json()
})
.then((resp) => {
resolve(resp)
})
}) })
.then((resp) => {
return resp.json()
})
.then((resp) => {
resolve(resp)
})
})
} }
export default function PossibleAnswers({ router, refetchDbs }) { export default function PossibleAnswers({ router, refetchDbs }) {
const [currSubjName, setCurrSubjName] = useState(null) const [currSubjName, setCurrSubjName] = useState(null)
const [currTestName, setCurrTestName] = useState(null) const [currTestName, setCurrTestName] = useState(null)
const [subjects, setSubjects] = useState([]) const [subjects, setSubjects] = useState([])
const [currSubj, setCurrSubj] = useState(null) const [currSubj, setCurrSubj] = useState(null)
const [currTest, setCurrTest] = useState(null) const [currTest, setCurrTest] = useState(null)
const [savedQuestionsFileName, setSavedQuestionsFileName] = useState(null) const [savedQuestionsFileName, setSavedQuestionsFileName] = useState(null)
const [searchTerm, setSearchTerm] = useState('') const [searchTerm, setSearchTerm] = useState('')
useEffect(() => { useEffect(() => {
fetchPossibleAnswers().then((resp) => { fetchPossibleAnswers().then((resp) => {
setSubjects(resp.subjects) setSubjects(resp.subjects)
setSavedQuestionsFileName(resp.savedQuestionsFileName) setSavedQuestionsFileName(resp.savedQuestionsFileName)
const subj = router.query.subj const subj = router.query.subj
? decodeURIComponent(router.query.subj) ? decodeURIComponent(router.query.subj)
: '' : ''
const test = router.query.test const test = router.query.test
? decodeURIComponent(router.query.test) ? decodeURIComponent(router.query.test)
: '' : ''
if (subj) { if (subj) {
fetchSubject(subj, resp.savedQuestionsFileName).then((resp) => { fetchSubject(subj, resp.savedQuestionsFileName).then((resp) => {
setCurrSubj(resp) setCurrSubj(resp)
setCurrSubjName(subj) setCurrSubjName(subj)
router.push( router.push(
`${router.pathname}?v=pa&subj=${encodeURIComponent(subj)}`,
undefined,
{ shallow: true }
)
if (subj && test) {
fetchTest(subj, test).then((resp) => {
setCurrTest(resp)
setCurrTestName(test)
router.push(
`${router.pathname}?v=pa&subj=${encodeURIComponent(
subj
)}&test=${encodeURIComponent(test)}`,
undefined,
{ shallow: true }
)
})
}
})
}
})
}, [])
const renderStuff = () => {
if (subjects && currSubj && currTest) {
return (
<>
<div
className={styles.backButton}
onClick={() => {
setCurrTest(null)
router.back()
}}
>
Vissza
</div>
<div>
{currTest && (
<TestView
subjName={currSubjName}
testName={currTestName}
test={currTest}
router={router}
onDelete={() => {
refetchDbs()
setCurrTest(null)
fetchSubject(currSubjName, savedQuestionsFileName).then(
(resp) => {
setCurrSubj(resp)
}
)
}}
/>
)}
</div>
</>
)
} else if (subjects && currSubj) {
return (
<>
<div className={styles.headerContainer}>
<div
className={styles.backButton}
onClick={() => {
setCurrSubj(null)
router.back()
}}
>
Vissza
</div>
<div className={styles.subjName}>{currSubjName}</div>
</div>
<div className={styles.tableContainer}>
<>
<div>
<div>Dátum</div>
<div>Felhasználó ID</div>
<div>Tárgy</div>
<div>Teszt URL</div>
</div>
{currSubj &&
currSubj.map((test, i) => {
return (
<div
className={styles.testContainer}
key={i}
onClick={() => {
setCurrTestName(test.fname)
router.push(
`${router.pathname}?v=pa&subj=${encodeURIComponent(
currSubjName
)}&test=${encodeURIComponent(test.fname)}`,
undefined,
{ shallow: true }
)
fetchTest(currSubjName, test.fname).then((resp) => {
setCurrTest(resp)
})
}}
>
<div>{new Date(test.date).toLocaleString()}</div>
<div>{test.userid}</div>
<div>{test.subj}</div>
<div>{test.testUrl}</div>
</div>
)
})}
</>
</div>
</>
)
} else if (subjects) {
return (
<>
<Infos />
<SearchBar value={searchTerm} onChange={(e) => setSearchTerm(e)} />
<div className={styles.tableContainer}>
<>
<div>Tárgy neve</div>
{subjects.map((subj, i) => {
if (
!subj.name.toLowerCase().includes(searchTerm.toLowerCase())
) {
return null
}
return (
<div
key={i}
onClick={() => {
setCurrSubjName(subj.name)
router.push(
`${router.pathname}?v=pa&subj=${encodeURIComponent( `${router.pathname}?v=pa&subj=${encodeURIComponent(
subj.name subj
)}`, )}`,
undefined, undefined,
{ shallow: true } { shallow: true }
) )
if (subj && test) {
fetchTest(subj, test).then((resp) => {
setCurrTest(resp)
setCurrTestName(test)
router.push(
`${
router.pathname
}?v=pa&subj=${encodeURIComponent(
subj
)}&test=${encodeURIComponent(test)}`,
undefined,
{ shallow: true }
)
})
}
})
}
})
}, [])
fetchSubject(subj.name, savedQuestionsFileName).then( const renderStuff = () => {
(resp) => { if (subjects && currSubj && currTest) {
setCurrSubj(resp) return (
} <>
) <div
}} className={styles.backButton}
> onClick={() => {
{subj.name} setCurrTest(null)
</div> router.back()
) }}
})} >
</> Vissza
</div> </div>
</> <div>
) {currTest && (
} else { <TestView
return <LoadingIndicator /> subjName={currSubjName}
testName={currTestName}
test={currTest}
router={router}
onDelete={() => {
refetchDbs()
setCurrTest(null)
fetchSubject(
currSubjName,
savedQuestionsFileName
).then((resp) => {
setCurrSubj(resp)
})
}}
/>
)}
</div>
</>
)
} else if (subjects && currSubj) {
return (
<>
<div className={styles.headerContainer}>
<div
className={styles.backButton}
onClick={() => {
setCurrSubj(null)
router.back()
}}
>
Vissza
</div>
<div className={styles.subjName}>{currSubjName}</div>
</div>
<div className={styles.tableContainer}>
<>
<div>
<div>Dátum</div>
<div>Felhasználó ID</div>
<div>Tárgy</div>
<div>Teszt URL</div>
</div>
{currSubj &&
currSubj.map((test, i) => {
return (
<div
className={styles.testContainer}
key={i}
onClick={() => {
setCurrTestName(test.fname)
router.push(
`${
router.pathname
}?v=pa&subj=${encodeURIComponent(
currSubjName
)}&test=${encodeURIComponent(
test.fname
)}`,
undefined,
{ shallow: true }
)
fetchTest(
currSubjName,
test.fname
).then((resp) => {
setCurrTest(resp)
})
}}
>
<div>
{new Date(
test.date
).toLocaleString()}
</div>
<div>{test.userid}</div>
<div>{test.subj}</div>
<div>{test.testUrl}</div>
</div>
)
})}
</>
</div>
</>
)
} else if (subjects) {
return (
<>
<Infos />
<SearchBar
value={searchTerm}
onChange={(e) => setSearchTerm(e)}
/>
<div className={styles.tableContainer}>
<>
<div>Tárgy neve</div>
{subjects.map((subj, i) => {
if (
!subj.name
.toLowerCase()
.includes(searchTerm.toLowerCase())
) {
return null
}
return (
<div
key={i}
onClick={() => {
setCurrSubjName(subj.name)
router.push(
`${
router.pathname
}?v=pa&subj=${encodeURIComponent(
subj.name
)}`,
undefined,
{ shallow: true }
)
fetchSubject(
subj.name,
savedQuestionsFileName
).then((resp) => {
setCurrSubj(resp)
})
}}
>
{subj.name}
</div>
)
})}
</>
</div>
</>
)
} else {
return <LoadingIndicator />
}
} }
}
return renderStuff() return renderStuff()
} }

568
src/components/questionAdder.js
View file

@ -3,312 +3,314 @@ import React, { useState, useEffect } from 'react'
import Question from '../components/Question' import Question from '../components/Question'
import styles from './questionAdder.module.css' import styles from './questionAdder.module.css'
import constants from '../constants.json' import constants from '../constants.js'
import commonStyles from '../commonStyles.module.css' import commonStyles from '../commonStyles.module.css'
const handleSubmit = async (form) => { const handleSubmit = async (form) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!form.subj) { if (!form.subj) {
reject('nosubj') reject('nosubj')
return return
} }
let isValid = form.quiz.every((x) => { let isValid = form.quiz.every((x) => {
return x.Q && x.A return x.Q && x.A
})
if (!isValid || form.quiz.length === 0) {
reject('notvalid')
return
}
const t = document.getElementById('cid').value
let cid = ''
let version = ''
if (t) {
cid = t.split('|')[0]
version = t.split('|')[1]
}
// console.log(form)
// {
// "quiz": [
// {
// "Q": "aaaaaaaaaaaa",
// "A": "bbbbbbbbbbbbbb",
// "data": {
// "type": "simple"
// }
// }
// ],
// "selectedDb": {
// "path": "questionDbs/elearning.uni-obuda.hu.json",
// "name": "elearning.uni-obuda.hu"
// },
// "subj": "Elektronika"
// }
const toSend = {
id: cid,
version: `WEBSITE${version ? ` (${version})` : ''}`,
location: `https://${form.selectedDb.name}`,
subj: form.subj,
quiz: form.quiz,
}
fetch(constants.apiUrl + 'isAdding', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(toSend),
})
.then((res) => {
return res.json()
})
.then((resp) => {
resolve(resp)
})
}) })
if (!isValid || form.quiz.length === 0) {
reject('notvalid')
return
}
const t = document.getElementById('cid').value
let cid = ''
let version = ''
if (t) {
cid = t.split('|')[0]
version = t.split('|')[1]
}
// console.log(form)
// {
// "quiz": [
// {
// "Q": "aaaaaaaaaaaa",
// "A": "bbbbbbbbbbbbbb",
// "data": {
// "type": "simple"
// }
// }
// ],
// "selectedDb": {
// "path": "questionDbs/elearning.uni-obuda.hu.json",
// "name": "elearning.uni-obuda.hu"
// },
// "subj": "Elektronika"
// }
const toSend = {
id: cid,
version: `WEBSITE${version ? ` (${version})` : ''}`,
location: `https://${form.selectedDb.name}`,
subj: form.subj,
quiz: form.quiz,
}
fetch(constants.apiUrl + 'isAdding', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(toSend),
})
.then((res) => {
return res.json()
})
.then((resp) => {
resolve(resp)
})
})
} }
const renderUsage = () => { const renderUsage = () => {
return ( return (
<ul> <ul>
<li>Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már</li> <li>Ezek a kérdések ellenőrizve lesznek hogy megvannak-e már</li>
<li> <li>
{ {
"Ha több válasz van, akkor ', '-vel válaszd el őket ( 'válasz1, válasz2, válasz3' )" "Ha több válasz van, akkor ', '-vel válaszd el őket ( 'válasz1, válasz2, válasz3' )"
} }
</li> </li>
<li> <li>
Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem Kérdéseknél az utolsó sor (ahol a JSON cucc van) jelenleg nem
módosítható, csak olyan kérdéseket lehet beküldeni, amik sima módosítható, csak olyan kérdéseket lehet beküldeni, amik sima
kérdés-válaszok, szóval pl nincs benne kép. Ez később bővül majd kérdés-válaszok, szóval pl nincs benne kép. Ez később bővül majd
</li> </li>
<li> <li>
Ha sok új kérdést küldesz be, akkor akár több percig is eltarthat a Ha sok új kérdést küldesz be, akkor akár több percig is
dolog. Akárhány kérdést be lehet egyszerre küldeni, de max 10-15 az eltarthat a dolog. Akárhány kérdést be lehet egyszerre küldeni,
ajánlott de max 10-15 az ajánlott
</li> </li>
<li> <li>
Bármilyen szöveget beküldhettek, de ne tegyétek, más felhasználóknak és Bármilyen szöveget beküldhettek, de ne tegyétek, más
magatoknak lesz rosz, ty! felhasználóknak és magatoknak lesz rosz, ty!
</li> </li>
</ul> </ul>
) )
} }
const getDefaultQuestion = () => { const getDefaultQuestion = () => {
return { return {
Q: '', Q: '',
A: '', A: '',
data: { type: 'simple' }, data: { type: 'simple' },
} }
} }
export default function QuestionAdder({ data, selectedDb, refetchDbs }) { export default function QuestionAdder({ data, selectedDb, refetchDbs }) {
const [form, setForm] = useState({ quiz: [getDefaultQuestion()] }) const [form, setForm] = useState({ quiz: [getDefaultQuestion()] })
const [subjects, setSubjects] = useState(null) const [subjects, setSubjects] = useState(null)
const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false)
const [isNewSubj, setIsNewSubj] = useState(false) const [isNewSubj, setIsNewSubj] = useState(false)
useEffect(() => { useEffect(() => {
if (selectedDb) { if (selectedDb) {
setForm({ setForm({
...form, ...form,
selectedDb: selectedDb, selectedDb: selectedDb,
}) })
}
}, [selectedDb])
useEffect(() => {
if (data) {
setSubjects(
data.map((subj) => {
return subj.Name
})
)
}
}, [data])
const handleQuestionChange = (index, newVal) => {
setForm({
...form,
quiz: form.quiz.map((q, i) => {
if (i !== index) {
return q
} else {
return newVal
} }
}), }, [selectedDb])
})
}
const deleteQuestion = (index) => { useEffect(() => {
let quiz = form.quiz if (data) {
setSubjects(
data.map((subj) => {
return subj.Name
})
)
}
}, [data])
quiz.splice(index, 1) const handleQuestionChange = (index, newVal) => {
setForm({
...form,
quiz: form.quiz.map((q, i) => {
if (i !== index) {
return q
} else {
return newVal
}
}),
})
}
setForm({ const deleteQuestion = (index) => {
...form, let quiz = form.quiz
quiz: quiz,
})
}
const renderStuff = () => { quiz.splice(index, 1)
return (
<div>
{form.quiz.map((q, i) => {
return (
<React.Fragment key={i}>
<hr />
<Question
index={i}
question={form.quiz[i] || {}}
onChange={(newVal) => {
handleQuestionChange(i, newVal)
}}
/>
<div className={commonStyles.actions}>
<div
onClick={() => {
deleteQuestion(i)
}}
>
Törlés
</div>
</div>
</React.Fragment>
)
})}
<hr />
<div className={commonStyles.actions}>
<div
onClick={() => {
let quiz = form.quiz
quiz.push(getDefaultQuestion())
setForm({
...form,
quiz: quiz,
})
}}
>
Új kérdés
</div>
<div
className={`${isSubmitting ? styles.issubmitting : ''}`}
onClick={() => {
if (isSubmitting) {
return
}
setIsSubmitting(true)
handleSubmit(form)
.then((res) => {
// console.log(res)
// {
// "success": true,
// "newQuestions": [
// {
// "newQuestions": 1,
// "qdbName": "elearning.uni-obuda.hu"
// }
// ],
// "totalNewQuestions": 1
// }
if (res.success) { setForm({
alert( ...form,
`Sikeres beküldés, ${res.totalNewQuestions} új kérdés` quiz: quiz,
})
}
const renderStuff = () => {
return (
<div>
{form.quiz.map((q, i) => {
return (
<React.Fragment key={i}>
<hr />
<Question
index={i}
question={form.quiz[i] || {}}
onChange={(newVal) => {
handleQuestionChange(i, newVal)
}}
/>
<div className={commonStyles.actions}>
<div
onClick={() => {
deleteQuestion(i)
}}
>
Törlés
</div>
</div>
</React.Fragment>
) )
} else { })}
alert('Hiba beküldés közben :/') <hr />
} <div className={commonStyles.actions}>
refetchDbs() <div
setIsSubmitting(false) onClick={() => {
}) let quiz = form.quiz
.catch((res) => { quiz.push(getDefaultQuestion())
if (res === 'nosubj') { setForm({
alert('Nem választottál ki tantárgyat!') // eslint-disable-line ...form,
} quiz: quiz,
if (res === 'notvalid') { })
alert('Kérdés kitöltése kötelező!') // eslint-disable-line }}
} >
setIsSubmitting(false) Új kérdés
}) </div>
}} <div
> className={`${isSubmitting ? styles.issubmitting : ''}`}
{isSubmitting ? 'Beküldés folyamatban ...' : 'Kérdések beküldése'} onClick={() => {
</div> if (isSubmitting) {
</div> return
<input type="text" id="cid" name="cid" hidden /> }
</div> setIsSubmitting(true)
) handleSubmit(form)
} .then((res) => {
// console.log(res)
// {
// "success": true,
// "newQuestions": [
// {
// "newQuestions": 1,
// "qdbName": "elearning.uni-obuda.hu"
// }
// ],
// "totalNewQuestions": 1
// }
if (res.success) {
alert(
`Sikeres beküldés, ${res.totalNewQuestions} új kérdés`
)
} else {
alert('Hiba beküldés közben :/')
}
refetchDbs()
setIsSubmitting(false)
})
.catch((res) => {
if (res === 'nosubj') {
alert('Nem választottál ki tantárgyat!') // eslint-disable-line
}
if (res === 'notvalid') {
alert('Kérdés kitöltése kötelező!') // eslint-disable-line
}
setIsSubmitting(false)
})
}}
>
{isSubmitting
? 'Beküldés folyamatban ...'
: 'Kérdések beküldése'}
</div>
</div>
<input type="text" id="cid" name="cid" hidden />
</div>
)
}
const renderSubjSelector = () => {
return (
<div className={styles.subjSelectorContainer}>
{isNewSubj ? (
<input
placeholder="Új tárgy neve..."
type="text"
className={styles.questionInput}
onChange={(event) => {
setForm({
...form,
subj: event.target.value,
})
}}
/>
) : (
<select
onChange={(event) => {
setForm({
...form,
subj: subjects[event.target.value],
})
}}
>
<option key={-1} value={-1}>
Válassz egy tárgyat...
</option>
{subjects.map((subjName, i) => {
return (
<option key={i} value={i}>
{subjName}
</option>
)
})}
</select>
)}
<div
className={commonStyles.actions}
onClick={() => {
setIsNewSubj(!isNewSubj)
}}
>
<div>{isNewSubj ? 'Létező tárgy ...' : 'Új tárgy ...'}</div>
</div>
</div>
)
}
if (!data) {
return null
}
const renderSubjSelector = () => {
return ( return (
<div className={styles.subjSelectorContainer}> <div>
{isNewSubj ? ( <hr />
<input {renderUsage()}
placeholder="Új tárgy neve..." {subjects ? (
type="text" <>
className={styles.questionInput} <hr />
onChange={(event) => { {renderSubjSelector()}
setForm({ {renderStuff()}
...form, </>
subj: event.target.value, ) : null}
})
}}
/>
) : (
<select
onChange={(event) => {
setForm({
...form,
subj: subjects[event.target.value],
})
}}
>
<option key={-1} value={-1}>
Válassz egy tárgyat...
</option>
{subjects.map((subjName, i) => {
return (
<option key={i} value={i}>
{subjName}
</option>
)
})}
</select>
)}
<div
className={commonStyles.actions}
onClick={() => {
setIsNewSubj(!isNewSubj)
}}
>
<div>{isNewSubj ? 'Létező tárgy ...' : 'Új tárgy ...'}</div>
</div> </div>
</div>
) )
}
if (!data) {
return null
}
return (
<div>
<hr />
{renderUsage()}
{subjects ? (
<>
<hr />
{renderSubjSelector()}
{renderStuff()}
</>
) : null}
</div>
)
} }

375
src/components/questionView.js
View file

@ -4,206 +4,211 @@ import LoadingIndicator from '../components/LoadingIndicator.js'
import QuestionSearchResult from '../components/QuestionSearchResult.js' import QuestionSearchResult from '../components/QuestionSearchResult.js'
import SearchBar from '../components/searchBar' import SearchBar from '../components/searchBar'
import constants from '../constants.json' import constants from '../constants.js'
// import styles from './questionView.module.css' // import styles from './questionView.module.css'
const updateQuestion = (e, selectedDb) => { const updateQuestion = (e, selectedDb) => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(constants.apiUrl + 'updateQuestion', { fetch(constants.apiUrl + 'updateQuestion', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
...e, ...e,
selectedDb: selectedDb, selectedDb: selectedDb,
}), }),
})
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
}) })
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
})
} }
const rmQuestion = (e, selectedDb) => { const rmQuestion = (e, selectedDb) => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(constants.apiUrl + 'updateQuestion', { fetch(constants.apiUrl + 'updateQuestion', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
...e, ...e,
selectedDb: selectedDb, selectedDb: selectedDb,
}), }),
})
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
}) })
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
})
} }
export default function questionView(props) { export default function questionView(props) {
const { selectedDb } = props const { selectedDb } = props
const [data, setData] = useState(props.data) const [data, setData] = useState(props.data)
const [searchTerm, setSearchTerm] = useState('') const [searchTerm, setSearchTerm] = useState('')
const [edits, setEdits] = useState([]) const [edits, setEdits] = useState([])
useEffect(() => { useEffect(() => {
setData(props.data) setData(props.data)
}, [props.data]) }, [props.data])
const updateEdits = (e) => { const updateEdits = (e) => {
setEdits( setEdits(
edits.map((edit) => { edits.map((edit) => {
if (edit.index === e.index) { if (edit.index === e.index) {
return e return e
} else {
return edit
}
})
)
}
const removeFromEdits = (e) => {
setEdits(
edits.filter((edit, i) => {
return i !== e.index
})
)
}
const onChange = (e) => {
const editIndex = edits.findIndex((edit) => {
return edit.subjName === e.subjName && edit.index === e.index
})
if (editIndex === -1) {
if (e.type === 'edit') {
if (editIndex === -1) {
setEdits([...edits, e])
}
}
if (e.type === 'delete') {
rmQuestion(e, selectedDb).then((res) => {
if (res.success) {
alert('Sikeres törlés')
} else {
alert('Hiba mentés közben :/')
}
setData(
data.map((subj) => {
if (subj.Name !== e.subjName) {
return subj
} else {
return {
...subj,
Questions: subj.Questions.filter((question, i) => {
return i !== e.index
}),
}
}
})
)
})
}
} else {
if (e.type === 'reset') {
// edits -> saves -> resets? => should do nothing, no reset after saving
removeFromEdits(e)
setData(
data.map((subj) => {
if (subj.Name !== e.subjName) {
return subj
} else {
return {
...subj,
Questions: subj.Questions.map((question, i) => {
if (i !== e.index) {
return question
} else {
const ps = props.data.find((subj) => {
return subj.Name === e.subjName
})
if (ps) {
return ps.Questions[i]
}
}
}),
}
}
})
)
}
if (e.type === 'save') {
updateQuestion(
edits.find((edit) => {
return edit.index === e.index
}),
selectedDb
).then((res) => {
if (res.success) {
alert('Sikeres mentés')
} else {
alert('Hiba mentés közben :/')
}
removeFromEdits(e)
})
}
if (e.type === 'edit') {
updateEdits(e)
}
}
if (e.type === 'edit') {
setData(
data.map((subj) => {
if (subj.Name !== e.subjName) {
return subj
} else {
return {
...subj,
Questions: subj.Questions.map((question, i) => {
if (i !== e.index) {
return question
} else { } else {
return e.newVal return edit
} }
}), })
} )
}
})
)
} }
}
if (data) { const removeFromEdits = (e) => {
return ( setEdits(
<div> edits.filter((edit, i) => {
<SearchBar value={searchTerm} onChange={(e) => setSearchTerm(e)} /> return i !== e.index
<hr /> })
<div> )
<QuestionSearchResult }
onChange={onChange}
data={data} const onChange = (e) => {
searchTerm={searchTerm} const editIndex = edits.findIndex((edit) => {
edits={edits} return edit.subjName === e.subjName && edit.index === e.index
/> })
</div> if (editIndex === -1) {
</div> if (e.type === 'edit') {
) if (editIndex === -1) {
} else { setEdits([...edits, e])
return <LoadingIndicator /> }
} }
if (e.type === 'delete') {
rmQuestion(e, selectedDb).then((res) => {
if (res.success) {
alert('Sikeres törlés')
} else {
alert('Hiba mentés közben :/')
}
setData(
data.map((subj) => {
if (subj.Name !== e.subjName) {
return subj
} else {
return {
...subj,
Questions: subj.Questions.filter(
(question, i) => {
return i !== e.index
}
),
}
}
})
)
})
}
} else {
if (e.type === 'reset') {
// edits -> saves -> resets? => should do nothing, no reset after saving
removeFromEdits(e)
setData(
data.map((subj) => {
if (subj.Name !== e.subjName) {
return subj
} else {
return {
...subj,
Questions: subj.Questions.map((question, i) => {
if (i !== e.index) {
return question
} else {
const ps = props.data.find((subj) => {
return subj.Name === e.subjName
})
if (ps) {
return ps.Questions[i]
}
}
}),
}
}
})
)
}
if (e.type === 'save') {
updateQuestion(
edits.find((edit) => {
return edit.index === e.index
}),
selectedDb
).then((res) => {
if (res.success) {
alert('Sikeres mentés')
} else {
alert('Hiba mentés közben :/')
}
removeFromEdits(e)
})
}
if (e.type === 'edit') {
updateEdits(e)
}
}
if (e.type === 'edit') {
setData(
data.map((subj) => {
if (subj.Name !== e.subjName) {
return subj
} else {
return {
...subj,
Questions: subj.Questions.map((question, i) => {
if (i !== e.index) {
return question
} else {
return e.newVal
}
}),
}
}
})
)
}
}
if (data) {
return (
<div>
<SearchBar
value={searchTerm}
onChange={(e) => setSearchTerm(e)}
/>
<hr />
<div>
<QuestionSearchResult
onChange={onChange}
data={data}
searchTerm={searchTerm}
edits={edits}
/>
</div>
</div>
)
} else {
return <LoadingIndicator />
}
} }

401
src/components/subjectView.js
View file

@ -5,221 +5,224 @@ import Subject from '../components/Subject.js'
import SubjectSelector from '../components/SubjectSelector.js' import SubjectSelector from '../components/SubjectSelector.js'
import SearchBar from '../components/searchBar' import SearchBar from '../components/searchBar'
import constants from '../constants.json' import constants from '../constants.js'
// import styles from './subjectView.module.css' // import styles from './subjectView.module.css'
import commonStyles from '../commonStyles.module.css' import commonStyles from '../commonStyles.module.css'
const onSave = (subjName, changedQuestions, deletedQuestions, selectedDb) => { const onSave = (subjName, changedQuestions, deletedQuestions, selectedDb) => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(constants.apiUrl + 'updateQuestion', { fetch(constants.apiUrl + 'updateQuestion', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
subjName: subjName, subjName: subjName,
changedQuestions: changedQuestions, changedQuestions: changedQuestions,
deletedQuestions: deletedQuestions, deletedQuestions: deletedQuestions,
type: 'subjEdit', type: 'subjEdit',
selectedDb: selectedDb, selectedDb: selectedDb,
}), }),
})
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
}) })
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
})
} }
export default function SubjectView(props) { export default function SubjectView(props) {
const { data, selectedDb } = props const { data, selectedDb } = props
const [activeSubjName, setActiveSubjName] = useState('') const [activeSubjName, setActiveSubjName] = useState('')
const [searchTerm, setSearchTerm] = useState('') const [searchTerm, setSearchTerm] = useState('')
const [unsavedIndexes, setUnsavedIndexes] = useState([]) const [unsavedIndexes, setUnsavedIndexes] = useState([])
const [editedIndexes, setEditedIndexes] = useState([]) const [editedIndexes, setEditedIndexes] = useState([])
const [deletedIndexes, setDeletedIndexes] = useState([]) const [deletedIndexes, setDeletedIndexes] = useState([])
const [subj, setSubj] = useState(null) const [subj, setSubj] = useState(null)
const hasChange = editedIndexes.length > 0 || deletedIndexes.length > 0 const hasChange = editedIndexes.length > 0 || deletedIndexes.length > 0
useEffect(() => { useEffect(() => {
let currSubj = data.find((subj) => { let currSubj = data.find((subj) => {
return subj.Name === activeSubjName return subj.Name === activeSubjName
})
setSubj(currSubj)
}, [activeSubjName])
const resetQuestion = (i) => {
if (deletedIndexes.includes(i)) {
setDeletedIndexes(
deletedIndexes.filter((ind) => {
return ind !== i
}) })
) setSubj(currSubj)
} }, [activeSubjName])
if (editedIndexes.includes(i)) { const resetQuestion = (i) => {
setEditedIndexes( if (deletedIndexes.includes(i)) {
editedIndexes.filter((ind) => { setDeletedIndexes(
return ind !== i deletedIndexes.filter((ind) => {
}) return ind !== i
) })
} )
if (unsavedIndexes.includes(i)) {
setUnsavedIndexes(
unsavedIndexes.filter((ind) => {
return ind !== i
})
)
}
let currSubj = data.find((subj) => {
return subj.Name === activeSubjName
})
setSubj({
...subj,
Questions: subj.Questions.map((q, j) => {
if (i === j) {
return currSubj.Questions[i]
} else {
return q
}
}),
})
}
const handleQuestionChange = (newq, i) => {
if (!unsavedIndexes.includes(i)) {
setUnsavedIndexes([...unsavedIndexes, i])
}
if (editedIndexes.includes(i)) {
setEditedIndexes(
editedIndexes.filter((ind) => {
return ind !== i
})
)
}
setSubj({
...subj,
Questions: subj.Questions.map((q, j) => {
if (i !== j) {
return q
} else {
return newq
}
}),
})
}
const saveQuestion = (i) => {
setUnsavedIndexes(
unsavedIndexes.filter((ind) => {
return ind !== i
})
)
setEditedIndexes([...editedIndexes, i])
}
const deleteQuestion = (i) => {
setDeletedIndexes([...deletedIndexes, i])
}
const handleSave = () => {
if (unsavedIndexes.length > 0) {
alert(
'Mentetlen módosításaid vannak, kérek mentsd, vagy állítsd vissza azokat'
)
return
}
if (editedIndexes.length === 0 && deletedIndexes.length === 0) {
alert('Nem módosítottál még semmit')
return
}
const changedQuestions = editedIndexes.map((ei) => {
return {
index: ei,
value: subj.Questions[ei],
}
})
const deletedQuestions = deletedIndexes
onSave(subj.Name, changedQuestions, deletedQuestions, selectedDb).then(
(res) => {
if (res.success) {
alert('Sikeres mentés')
} else {
alert('Hiba mentés közben :/')
} }
setUnsavedIndexes([]) if (editedIndexes.includes(i)) {
setEditedIndexes([]) setEditedIndexes(
setDeletedIndexes([]) editedIndexes.filter((ind) => {
} return ind !== i
) })
} )
}
if (data) { if (unsavedIndexes.includes(i)) {
return ( setUnsavedIndexes(
<div> unsavedIndexes.filter((ind) => {
<SearchBar value={searchTerm} onChange={(e) => setSearchTerm(e)} /> return ind !== i
<hr /> })
<SubjectSelector )
data={data} }
activeSubjName={activeSubjName}
searchTerm={searchTerm} let currSubj = data.find((subj) => {
onSubjSelect={(subjName) => { return subj.Name === activeSubjName
if ( })
!hasChange ||
confirm( setSubj({
'Mentetlen módosításaid vannak a tárgynál, biztos bezárod?' ...subj,
) Questions: subj.Questions.map((q, j) => {
) { if (i === j) {
setActiveSubjName(subjName) return currSubj.Questions[i]
setUnsavedIndexes([]) } else {
setEditedIndexes([]) return q
setDeletedIndexes([]) }
} else { }),
console.log('canceld') })
}
const handleQuestionChange = (newq, i) => {
if (!unsavedIndexes.includes(i)) {
setUnsavedIndexes([...unsavedIndexes, i])
}
if (editedIndexes.includes(i)) {
setEditedIndexes(
editedIndexes.filter((ind) => {
return ind !== i
})
)
}
setSubj({
...subj,
Questions: subj.Questions.map((q, j) => {
if (i !== j) {
return q
} else {
return newq
}
}),
})
}
const saveQuestion = (i) => {
setUnsavedIndexes(
unsavedIndexes.filter((ind) => {
return ind !== i
})
)
setEditedIndexes([...editedIndexes, i])
}
const deleteQuestion = (i) => {
setDeletedIndexes([...deletedIndexes, i])
}
const handleSave = () => {
if (unsavedIndexes.length > 0) {
alert(
'Mentetlen módosításaid vannak, kérek mentsd, vagy állítsd vissza azokat'
)
return
}
if (editedIndexes.length === 0 && deletedIndexes.length === 0) {
alert('Nem módosítottál még semmit')
return
}
const changedQuestions = editedIndexes.map((ei) => {
return {
index: ei,
value: subj.Questions[ei],
} }
}} })
/> const deletedQuestions = deletedIndexes
<hr /> onSave(subj.Name, changedQuestions, deletedQuestions, selectedDb).then(
<div className={commonStyles.actions}> (res) => {
{subj && ( if (res.success) {
<div alert('Sikeres mentés')
onClick={() => { } else {
handleSave() alert('Hiba mentés közben :/')
}} }
>
Tárgy módosításainak mentése setUnsavedIndexes([])
setEditedIndexes([])
setDeletedIndexes([])
}
)
}
if (data) {
return (
<div>
<SearchBar
value={searchTerm}
onChange={(e) => setSearchTerm(e)}
/>
<hr />
<SubjectSelector
data={data}
activeSubjName={activeSubjName}
searchTerm={searchTerm}
onSubjSelect={(subjName) => {
if (
!hasChange ||
confirm(
'Mentetlen módosításaid vannak a tárgynál, biztos bezárod?'
)
) {
setActiveSubjName(subjName)
setUnsavedIndexes([])
setEditedIndexes([])
setDeletedIndexes([])
} else {
console.log('canceld')
}
}}
/>
<hr />
<div className={commonStyles.actions}>
{subj && (
<div
onClick={() => {
handleSave()
}}
>
Tárgy módosításainak mentése
</div>
)}
</div>
<div>
{subj && (
<Subject
subj={subj}
unsavedIndexes={unsavedIndexes}
editedIndexes={editedIndexes}
deletedIndexes={deletedIndexes}
resetQuestion={resetQuestion}
handleQuestionChange={handleQuestionChange}
saveQuestion={saveQuestion}
deleteQuestion={deleteQuestion}
/>
)}
</div>
</div> </div>
)} )
</div> } else {
<div> return <LoadingIndicator />
{subj && ( }
<Subject
subj={subj}
unsavedIndexes={unsavedIndexes}
editedIndexes={editedIndexes}
deletedIndexes={deletedIndexes}
resetQuestion={resetQuestion}
handleQuestionChange={handleQuestionChange}
saveQuestion={saveQuestion}
deleteQuestion={deleteQuestion}
/>
)}
</div>
</div>
)
} else {
return <LoadingIndicator />
}
} }

355
src/components/testView.js
View file

@ -2,188 +2,199 @@ import React, { useState } from 'react'
import Question from '../components/Question' import Question from '../components/Question'
import constants from '../constants.json' import constants from '../constants.js'
import styles from './testView.module.css' import styles from './testView.module.css'
import commonStyles from '../commonStyles.module.css' import commonStyles from '../commonStyles.module.css'
const rmTest = (subjName, testName) => { const rmTest = (subjName, testName) => {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(constants.apiUrl + 'rmPossibleAnswer', { fetch(constants.apiUrl + 'rmPossibleAnswer', {
method: 'POST', method: 'POST',
credentials: 'include', credentials: 'include',
headers: { headers: {
Accept: 'application/json', Accept: 'application/json',
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify({ body: JSON.stringify({
subj: subjName, subj: subjName,
file: testName, file: testName,
}), }),
})
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
}) })
.then((res) => {
return res.json()
})
.then((res) => {
resolve(res)
})
})
} }
export default function TestView(props) { export default function TestView(props) {
const { subjName, testName, router, onDelete } = props const { subjName, testName, router, onDelete } = props
const [test, setTest] = useState(props.test) const [test, setTest] = useState(props.test)
const renderActions = () => { const renderActions = () => {
return ( return (
<div className={styles.actions}> <div className={styles.actions}>
<div <div
onClick={() => {
if (confirm('Biztos véglegesen törlöd ezt az egész tesztet?')) {
rmTest(subjName, testName).then((res) => {
if (res.res === 'ok') {
// alert('sikeres törlés')
router.back()
onDelete()
} else {
alert('hiba törlés közben!')
}
})
}
}}
>
Teszt törlése
</div>
<div
onClick={() => {
if (
confirm(
'Biztos beküldöd? Beküldés után törlődik a teszt, de a Kérdések/Tárgyak nézetnél megtalálhatóak lesznek'
)
) {
const questions = test.questions.map((q) => {
return {
Q: q.Q,
A: q.A,
data: {
...q.data,
...(q.possibleAnswers && {
possibleAnswers: q.possibleAnswers,
}),
},
}
})
const toSend = {
id: 'WEBSITE',
version: 'WEBSITE',
location: `https://${test.testUrl}`,
subj: test.subj,
quiz: questions,
}
fetch(constants.apiUrl + 'isAdding', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(toSend),
})
.then((res) => {
return res.json()
})
.then((res) => {
if (res.success) {
alert(
`Sikeres beküldés, ${res.totalNewQuestions} új kérdés`
)
rmTest(subjName, testName).then((res) => {
if (res.res === 'ok') {
router.back()
onDelete()
}
})
} else {
alert('Hiba beküldés közben :/')
}
})
}
}}
>
Teszt mentése
</div>
</div>
)
}
return (
<div>
<div className={styles.headerContainer}>
<div className={styles.header}>
<div>Tárgy neve</div>
<div>{test.subj}</div>
</div>
<div className={styles.header}>
<div>Teszt URL</div>
<div>{test.testUrl}</div>
</div>
<div className={styles.header}>
<div>Beküldő felhasználó ID</div>
<div>{test.userid}</div>{' '}
</div>
<div className={styles.header}>
<div>Beküldés ideje</div>
<div>{new Date(test.date).toLocaleString()}</div>{' '}
</div>
</div>
<hr />
{renderActions()}
<div className={styles.questionsContainer}>
{test.questions.map((question, i) => {
return (
<React.Fragment key={i}>
<hr key={`${i}hr`} />
<div key={i}>
<Question
index={i}
onChange={(newQ) => {
setTest({
...test,
questions: test.questions.map((q, j) => {
if (j === i) {
return newQ
}
return q
}),
})
}}
question={question}
/>
<div className={commonStyles.actions}>
<div
onClick={() => { onClick={() => {
setTest({ if (
...test, confirm(
questions: test.questions.filter((q, j) => { 'Biztos véglegesen törlöd ezt az egész tesztet?'
return j !== i )
}), ) {
}) rmTest(subjName, testName).then((res) => {
if (res.res === 'ok') {
// alert('sikeres törlés')
router.back()
onDelete()
} else {
alert('hiba törlés közben!')
}
})
}
}} }}
> >
Kérdés törlése Teszt törlése
</div>
</div> </div>
</div> <div
</React.Fragment> onClick={() => {
) if (
})} confirm(
</div> 'Biztos beküldöd? Beküldés után törlődik a teszt, de a Kérdések/Tárgyak nézetnél megtalálhatóak lesznek'
{test.questions.length > 2 ? ( )
<> ) {
<hr /> const questions = test.questions.map((q) => {
{renderActions()} return {
</> Q: q.Q,
) : null} A: q.A,
</div> data: {
) ...q.data,
...(q.possibleAnswers && {
possibleAnswers: q.possibleAnswers,
}),
},
}
})
const toSend = {
id: 'WEBSITE',
version: 'WEBSITE',
location: `https://${test.testUrl}`,
subj: test.subj,
quiz: questions,
}
fetch(constants.apiUrl + 'isAdding', {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(toSend),
})
.then((res) => {
return res.json()
})
.then((res) => {
if (res.success) {
alert(
`Sikeres beküldés, ${res.totalNewQuestions} új kérdés`
)
rmTest(subjName, testName).then(
(res) => {
if (res.res === 'ok') {
router.back()
onDelete()
}
}
)
} else {
alert('Hiba beküldés közben :/')
}
})
}
}}
>
Teszt mentése
</div>
</div>
)
}
return (
<div>
<div className={styles.headerContainer}>
<div className={styles.header}>
<div>Tárgy neve</div>
<div>{test.subj}</div>
</div>
<div className={styles.header}>
<div>Teszt URL</div>
<div>{test.testUrl}</div>
</div>
<div className={styles.header}>
<div>Beküldő felhasználó ID</div>
<div>{test.userid}</div>{' '}
</div>
<div className={styles.header}>
<div>Beküldés ideje</div>
<div>{new Date(test.date).toLocaleString()}</div>{' '}
</div>
</div>
<hr />
{renderActions()}
<div className={styles.questionsContainer}>
{test.questions.map((question, i) => {
return (
<React.Fragment key={i}>
<hr key={`${i}hr`} />
<div key={i}>
<Question
index={i}
onChange={(newQ) => {
setTest({
...test,
questions: test.questions.map(
(q, j) => {
if (j === i) {
return newQ
}
return q
}
),
})
}}
question={question}
/>
<div className={commonStyles.actions}>
<div
onClick={() => {
setTest({
...test,
questions:
test.questions.filter(
(q, j) => {
return j !== i
}
),
})
}}
>
Kérdés törlése
</div>
</div>
</div>
</React.Fragment>
)
})}
</div>
{test.questions.length > 2 ? (
<>
<hr />
{renderActions()}
</>
) : null}
</div>
)
} }

19
src/constants.js Normal file
View file

@ -0,0 +1,19 @@
// eslint-disable-next-line no-undef
const useLocalhost = process && process.env.NODE_ENV === 'development'
// eslint-disable-next-line no-undef
const domain = process && process.env.DOMAIN
if (!domain && !useLocalhost) {
throw new Error('Domain is not defined! Please set DOMAIN env variable!')
}
const constants = {
domain: domain || 'localhost',
siteUrl: useLocalhost ? 'http://localhost:8080/' : `https://${domain}/`,
apiUrl: useLocalhost
? 'http://localhost:8080/api/'
: `https://${domain}/api/`,
maxQuestionsToRender: 250,
}
export default constants

5
src/constants.json
View file

@ -1,5 +0,0 @@
{
"siteUrl": "https://qmining.frylabs.net/",
"apiUrl": "https://api.frylabs.net/",
"maxQuestionsToRender": 250
}

566
src/pages/index.js
View file

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