From 3343a2a3afdac74740a91e2c050e376210b9aabd Mon Sep 17 00:00:00 2001 From: mrfry Date: Sun, 10 Jan 2021 15:01:44 +0100 Subject: [PATCH] Added db selector, modal --- src/components/dbSelector.js | 71 ++++++++++++++++++++++++++++ src/components/dbSelector.module.css | 23 +++++++++ src/components/layout.js | 22 +++++++-- src/components/modal.js | 43 +++++++++++++++++ src/components/modal.module.css | 22 +++++++++ src/data/links.json | 22 --------- src/defaultStyles.css | 6 ++- src/pages/index.js | 68 +++++++++++++++++++++++++- src/pages/index.module.css | 1 + src/pages/manual.js | 4 +- 10 files changed, 250 insertions(+), 32 deletions(-) create mode 100644 src/components/dbSelector.js create mode 100644 src/components/dbSelector.module.css create mode 100644 src/components/modal.js create mode 100644 src/components/modal.module.css delete mode 100644 src/data/links.json diff --git a/src/components/dbSelector.js b/src/components/dbSelector.js new file mode 100644 index 0000000..8152cf1 --- /dev/null +++ b/src/components/dbSelector.js @@ -0,0 +1,71 @@ +import React, { useState, useEffect } from 'react' + +import Modal from './modal.js' +import constants from '../constants.json' + +import styles from './dbSelector.module.css' + +export default function DbSelector({ onDbSelect, closeClick, text, showAll }) { + const [qdbs, setQdbs] = useState(null) + + useEffect(() => { + console.info('Fetching dbs') + fetch(`${constants.apiUrl}getdbs`, { + credentials: 'include', + }) + .then((resp) => { + return resp.json() + }) + .then((data) => { + setQdbs(data) + }) + }, []) + + return React.createElement( + Modal, + closeClick + ? { + closeClick: () => { + closeClick() + }, + } + : {}, + <> + {text &&
{text}
} +
+ {qdbs ? ( + <> + {' '} + {qdbs.map((qdb) => { + return ( +
{ + onDbSelect(qdb) + closeClick() + }} + key={qdb.name} + > + {qdb.name} +
+ ) + })} + {showAll && ( +
{ + onDbSelect('all') + closeClick() + }} + > + {'Összes'} +
+ )} + + ) : ( + '...' + )} +
+ + ) +} diff --git a/src/components/dbSelector.module.css b/src/components/dbSelector.module.css new file mode 100644 index 0000000..81779c7 --- /dev/null +++ b/src/components/dbSelector.module.css @@ -0,0 +1,23 @@ +.container { + display: flex; + flex-flow: column; + + padding: 5px; +} + +.listItem { + display: flex; + justify-content: center; + + padding: 5px; + cursor: pointer; + color: white; +} + +.listItem:hover { + background-color: #666; +} + +.text { + text-align: center; +} diff --git a/src/components/layout.js b/src/components/layout.js index a4673f4..aa03c9e 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -4,6 +4,7 @@ import dynamic from 'next/dynamic' const Snowfall = dynamic(() => import('react-snowfall'), { ssr: false }) +import Modal from './modal.js' import tabs from '../data/tabs.json' import constants from '../constants.json' import BB from './b.js' @@ -18,11 +19,11 @@ export default function Layout(props) { let href = props.route const [sidebarOpen, setSidebarOpen] = useState(true) const [windowSize, setWindowSize] = useState([100, 200]) + const [showMotdModal, setShowMotdModal] = useState(false) + const userId = props.globalData.userId const userSpecificMotd = props.globalData.userSpecificMotd - console.log(userSpecificMotd) - if (href === '/' || href === '') { href = 'index' } @@ -101,8 +102,7 @@ export default function Layout(props) { {userSpecificMotd ? (
{ - // TODO: modal - alert(userSpecificMotd) + setShowMotdModal(true) }} style={{ cursor: 'pointer' }} title={"You've got Mail!"} @@ -112,8 +112,20 @@ export default function Layout(props) { ) : (
📭
)} -
User #{userId || '...'}
+
User ID: {userId || '...'}
+ {showMotdModal ? ( + { + setShowMotdModal(false) + }} + > +
+ Üzenet az oldal készítőjétől: +
+
{userSpecificMotd}
+ + ) : null} ) : null} diff --git a/src/components/modal.js b/src/components/modal.js new file mode 100644 index 0000000..c23354f --- /dev/null +++ b/src/components/modal.js @@ -0,0 +1,43 @@ +import React, { useEffect } from 'react' + +import styles from './modal.module.css' + +export default function Modal(props) { + const { closeClick } = props + + const keyHandler = (event) => { + if (event.key === 'Escape' && closeClick) { + closeClick() + } + } + + useEffect(() => { + document.addEventListener('keydown', keyHandler) + return () => { + document.removeEventListener('keydown', keyHandler) + } + }, []) + + return ( +
{ + if (closeClick) { + closeClick() + } + }} + className={styles.modal} + > +
{ + event.stopPropagation() + }} + className={styles.modalContent} + > + {props.children} +
+
+ ) +} diff --git a/src/components/modal.module.css b/src/components/modal.module.css new file mode 100644 index 0000000..9d098a5 --- /dev/null +++ b/src/components/modal.module.css @@ -0,0 +1,22 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} + +.modalContent { + position: fixed; + background: var(--background-color); + width: 70%; + height: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 5px; + + padding: 20px; + cursor: auto; +} diff --git a/src/data/links.json b/src/data/links.json deleted file mode 100644 index 327a769..0000000 --- a/src/data/links.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "install": { - "href": "/install", - "text": "Install" - }, - "allqr": { - "href": "/allqr.txt", - "text": "Összes kérdés TXT" - }, - "data": { - "href": "/TODOalldata", - "text": "Összes kérdés JSON" - }, - "irc": { - "href": "/irc", - "text": "IRC chat" - }, - "dataeditor": { - "href": "/dataeditor", - "text": "Dataeditor" - } -} diff --git a/src/defaultStyles.css b/src/defaultStyles.css index 0873e3c..a0fc90c 100644 --- a/src/defaultStyles.css +++ b/src/defaultStyles.css @@ -242,7 +242,7 @@ select { width: 100%; max-width: 100%; appearance: none; - border: 1px solid #99f; + border: 1px solid var(--background-color); box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); line-height: 35px; border-radius: 3px; @@ -255,3 +255,7 @@ select { color: white; } + +select:hover { + border: 1px solid #99f; +} diff --git a/src/pages/index.js b/src/pages/index.js index c8b3329..a71cead 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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) {
- Felhasználó MOTD (ezt csak te látod): + Üzenet az oldal készítőjétől (ezt csak te látod):
{userSpecificMotd ? (
{ + if (allQrSelector) { + return ( + { + 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 (
@@ -149,6 +196,22 @@ export default function Index(props) { ) })} + { + setAllQrSelector('txt') + }} + className={styles.button} + > + {'Összes kérdés TXT'} + + { + setAllQrSelector('json') + }} + className={styles.button} + > + {'Összes kérdés JSON'} +
{renderMotd()} @@ -157,6 +220,7 @@ export default function Index(props) {
{renderNews()} + {renderDbSelector()}
) } diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 8647bf5..e29b3ae 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -17,6 +17,7 @@ display: flex; flex-direction: column; justify-content: center; + user-select: none; } .button:hover { diff --git a/src/pages/manual.js b/src/pages/manual.js index e0b7201..38ab7f2 100644 --- a/src/pages/manual.js +++ b/src/pages/manual.js @@ -284,7 +284,7 @@ function renderMaual() {

Script újratelepítése

Jelenleg két helyről lehet telepíteni a scriptet: greasyforkról és a - weboldalamról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha + weboldalról. A greasyforkos telepítési lehetőség meg fog szűnni, így ha onnan telepítetted, akkor nem lesznek frissítések elérhetők (amik nagyon fontosak (de tényleg)). Ezért a következő rövid manővert kellene végrehajtani, hogy minden zökkenőmentesen menjen: @@ -304,7 +304,7 @@ function renderMaual() { target="_blank" rel="noreferrer" > - ide a script újratelepítéséhez a weboldalamról + ide a script újratelepítéséhez a weboldalról.