Added db selector, modal

This commit is contained in:
mrfry 2021-01-10 15:01:44 +01:00
parent 0876761a0f
commit 3343a2a3af
10 changed files with 250 additions and 32 deletions

View file

@ -5,13 +5,29 @@ import Link from 'next/link'
import LoadingIndicator from '../components/LoadingIndicator'
import Sleep from '../components/sleep'
import DbSelector from '../components/dbSelector.js'
import styles from './index.module.css'
import links from '../data/links.json'
import constants from '../constants.json'
const links = {
install: {
href: '/install',
text: 'Install',
},
irc: {
href: '/irc',
text: 'IRC chat',
},
dataeditor: {
href: '/dataeditor',
text: 'Dataeditor',
},
}
export default function Index(props) {
const [news, setNews] = useState(null)
const [allQrSelector, setAllQrSelector] = useState(null)
const motd = props.globalData.motd
const userSpecificMotd = props.globalData.userSpecificMotd
@ -119,7 +135,7 @@ export default function Index(props) {
<div>
<hr />
<div className={styles.subtitle}>
Felhasználó MOTD (ezt csak te látod):
Üzenet az oldal készítőjétől (ezt csak te látod):
</div>
{userSpecificMotd ? (
<div
@ -133,6 +149,37 @@ export default function Index(props) {
)
}
const renderDbSelector = () => {
if (allQrSelector) {
return (
<DbSelector
text={`Válaszd ki melyik adatbázist szeretnéd letölteni (${allQrSelector}):`}
showAll={allQrSelector === 'txt'}
closeClick={() => {
setAllQrSelector(null)
}}
onDbSelect={(selectedDb) => {
console.log(selectedDb, allQrSelector)
if (allQrSelector === 'txt') {
if (selectedDb === 'all') {
window.open(`${constants.apiUrl}allqr.txt`, '_blank')
} else {
window.open(
`${constants.apiUrl}allqr.txt?db=${selectedDb.name}`,
'_blank'
)
}
} else if (allQrSelector === 'json') {
window.open(`${constants.apiUrl}${selectedDb.path}`, '_blank')
}
}}
/>
)
} else {
return null
}
}
return (
<div>
<Head>
@ -149,6 +196,22 @@ export default function Index(props) {
</Link>
)
})}
<a
onClick={() => {
setAllQrSelector('txt')
}}
className={styles.button}
>
{'Összes kérdés TXT'}
</a>
<a
onClick={() => {
setAllQrSelector('json')
}}
className={styles.button}
>
{'Összes kérdés JSON'}
</a>
</div>
<hr />
{renderMotd()}
@ -157,6 +220,7 @@ export default function Index(props) {
<hr />
<Sleep />
{renderNews()}
{renderDbSelector()}
</div>
)
}