Added db selector, modal

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 && <div className={styles.text}>{text}</div>}
+      <div className={styles.container}>
+        {qdbs ? (
+          <>
+            {' '}
+            {qdbs.map((qdb) => {
+              return (
+                <div
+                  className={styles.listItem}
+                  onClick={() => {
+                    onDbSelect(qdb)
+                    closeClick()
+                  }}
+                  key={qdb.name}
+                >
+                  {qdb.name}
+                </div>
+              )
+            })}
+            {showAll && (
+              <div
+                className={styles.listItem}
+                onClick={() => {
+                  onDbSelect('all')
+                  closeClick()
+                }}
+              >
+                {'Összes'}
+              </div>
+            )}
+          </>
+        ) : (
+          '...'
+        )}
+      </div>
+    </>
+  )
+}

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;
+}

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 ? (
                 <div
                   onClick={() => {
-                    // TODO: modal
-                    alert(userSpecificMotd)
+                    setShowMotdModal(true)
                   }}
                   style={{ cursor: 'pointer' }}
                   title={"You've got Mail!"}
@@ -112,8 +112,20 @@ export default function Layout(props) {
               ) : (
                 <div>📭</div>
               )}
-              <div>User #{userId || '...'}</div>
+              <div>User ID: {userId || '...'}</div>
             </div>
+            {showMotdModal ? (
+              <Modal
+                backgroundClick={() => {
+                  setShowMotdModal(false)
+                }}
+              >
+                <div style={{ textAlign: 'center' }}>
+                  Üzenet az oldal készítőjétől:
+                </div>
+                <div>{userSpecificMotd}</div>
+              </Modal>
+            ) : null}
           </>
         ) : null}
       </div>

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 (
+    <div
+      style={{
+        cursor: closeClick ? 'pointer' : 'auto',
+      }}
+      onClick={() => {
+        if (closeClick) {
+          closeClick()
+        }
+      }}
+      className={styles.modal}
+    >
+      <div
+        onClick={(event) => {
+          event.stopPropagation()
+        }}
+        className={styles.modalContent}
+      >
+        {props.children}
+      </div>
+    </div>
+  )
+}

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;
+}

src/data/links.json

@@ -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"
-  }
-}

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;
+}

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) {
       <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>
   )
 }

src/pages/index.module.css

@@ -17,6 +17,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  user-select: none;
 }
 
 .button:hover {

src/pages/manual.js

@@ -284,7 +284,7 @@ function renderMaual() {
       <hr />
       <h2 id="scriptreinstall">Script újratelepítése</h2>
       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.
           </a>
         </li>
         <li>