From 07b34762c3265abde099297f1794349022f2e12d Mon Sep 17 00:00:00 2001
From: mrfry <mrfry@airmail.cc>
Date: Sun, 10 Jan 2021 15:41:08 +0100
Subject: [PATCH] Multiple db handling, font size changes
---
package.json | 1 +
src/components/Questions.module.css | 2 +-
src/components/question.module.css | 2 -
src/components/questionView.module.css | 2 -
src/constants.json | 2 +-
src/defaultStyles.css | 37 ++++++--
src/pages/index.js | 112 ++++++++++++++++++-------
src/pages/index.module.css | 7 +-
8 files changed, 119 insertions(+), 46 deletions(-)
diff --git a/package.json b/package.json
index 8bd21c5..c5ac3db 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"author": "",
"license": "ISC",
"dependencies": {
+ "eslint-plugin-react": "^7.22.0",
"next": "^9.3.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
diff --git a/src/components/Questions.module.css b/src/components/Questions.module.css
index 3c0472d..ae9b987 100644
--- a/src/components/Questions.module.css
+++ b/src/components/Questions.module.css
@@ -1,5 +1,5 @@
.subjName {
- font-size: 24px;
+ font-size: 18px;
background-color: #9999ff;
color: black;
padding: 10px;
diff --git a/src/components/question.module.css b/src/components/question.module.css
index 1acac5b..91eeeec 100644
--- a/src/components/question.module.css
+++ b/src/components/question.module.css
@@ -1,6 +1,5 @@
.questionInput {
flex-grow: 1;
- font-size: 22px;
background-color: var(--background-color);
color: white;
border: none;
@@ -20,7 +19,6 @@
.deleteButton {
padding: 6px;
- font-size: 22px;
background-color: var(--background-color);
color: white;
cursor: pointer;
diff --git a/src/components/questionView.module.css b/src/components/questionView.module.css
index 7280ea9..5e5ae30 100644
--- a/src/components/questionView.module.css
+++ b/src/components/questionView.module.css
@@ -4,7 +4,6 @@
color: white;
background-color: #212127;
border: none;
- font-size: 18px;
flex-grow: 1;
}
@@ -17,7 +16,6 @@
width: 80px;
background-color: var(--background-color);
color: white;
- font-size: 23px;
cursor: pointer;
border: none;
}
diff --git a/src/constants.json b/src/constants.json
index 3465eed..5502e3b 100644
--- a/src/constants.json
+++ b/src/constants.json
@@ -1,4 +1,4 @@
{
- "apiUrl": "https://api.frylabs.net/",
+ "apiUrl": "http://localhost:8080/",
"maxQuestionsToRender": 250
}
diff --git a/src/defaultStyles.css b/src/defaultStyles.css
index badf246..614ca4f 100644
--- a/src/defaultStyles.css
+++ b/src/defaultStyles.css
@@ -16,7 +16,7 @@ a {
.link {
margin: 20px;
- font-size: 20px;
+ font-size: 16px;
}
.sidebarLink {
@@ -66,7 +66,7 @@ a {
}
.sidebarheader {
- font-size: 40px;
+ font-size: 30px;
color: var(--bright-color);
display: flex;
text-align: center;
@@ -84,7 +84,7 @@ a {
.question {
word-wrap: break-word;
font-weight: bold;
- font-size: 17px;
+ font-size: 15px;
color: #ffffff;
}
@@ -104,7 +104,7 @@ a {
vertical-align: middle;
color: #fff;
- font-size: 30px;
+ font-size: 25px;
}
.uquestioncontainer {
@@ -121,7 +121,7 @@ a {
.uquestion {
font-weight: 'bold';
- font-size: 16px;
+ font-size: 14px;
color: #fff;
margin: 5px;
}
@@ -133,7 +133,7 @@ a {
.uquestionnumber {
color: #fff;
margin: 5px;
- font-size: 20px;
+ font-size: 16px;
}
.link {
@@ -141,7 +141,7 @@ a {
}
.subjItem {
- font-size: 18px;
+ font-size: 16px;
padding: 3px;
cursor: pointer;
float: 1;
@@ -158,3 +158,26 @@ a {
background-color: #555;
color: white;
}
+
+select {
+ cursor: pointer;
+ width: 100%;
+ max-width: 100%;
+ appearance: none;
+ border: 1px solid var(--background-color);
+ box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+ line-height: 35px;
+ border-radius: 3px;
+
+ background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+ linear-gradient(to bottom, #222426 0%, #222426 100%);
+ background-repeat: no-repeat, repeat;
+ background-position: right 0.7em top 50%, 0 0;
+ background-size: 0.65em auto, 100%;
+
+ color: white;
+}
+
+select:hover {
+ border: 1px solid #99f;
+}
diff --git a/src/pages/index.js b/src/pages/index.js
index ce03afb..b8d1a8e 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -19,8 +19,10 @@ const views = {
// TODO: question.data editor
// TODO: edit \n-s in questions / answers
-export default function Index(props) {
+export default function Index() {
const [data, setData] = useState(null)
+ const [qdbs, setQdbs] = useState(null)
+ const [selectedDb, setSelectedDb] = useState()
const [view, setView] = useState(views.welcome)
const [sending, setSending] = useState(false)
const [error, setError] = useState(null)
@@ -29,55 +31,69 @@ export default function Index(props) {
const [initialCount, setInitialCount] = useState({})
- const getCount = (d) => {
+ useEffect(() => {
+ if (selectedDb) {
+ loadData()
+ }
+ }, [selectedDb])
+
+ const getCount = (data) => {
return {
- subjectCount: d.length,
- questionCount: d.reduce((acc, subj) => {
+ subjectCount: data.length,
+ questionCount: data.reduce((acc, subj) => {
acc += subj.Questions.length
return acc
}, 0),
}
}
- const setIndexes = (d) => {
- d.forEach((subj, i) => {
+ const setIndexes = (data) => {
+ data.forEach((subj, i) => {
subj.ind = i
subj.Questions.forEach((question, j) => {
question.ind = j
})
})
- return d
+ return data
}
- const LoadData = () => {
+ const loadData = () => {
setData(null)
- const toFetch = `${constants.apiUrl}data.json`
+ if (!selectedDb) {
+ alert('Válassz egy adatbázist!')
+ return
+ }
+
+ const toFetch = `${constants.apiUrl}${selectedDb.path}`
console.info('Fetching', toFetch)
fetch(toFetch, {
credentials: 'include',
})
.then((resp) => {
- if (resp && resp.ok) {
- return resp.json()
- } else {
- console.error('Error while fetching data')
- setError('Error while fetching data')
- }
+ return resp.json()
})
.then((resp) => {
setData(setIndexes(resp))
const count = getCount(resp)
setInitialCount(count)
})
- .catch((e) => {
- console.error(e)
+ .catch((error) => {
+ console.error(error)
console.error('Error while fetching data')
setError('Error while fetching data')
})
}
useEffect(() => {
- LoadData()
+ fetch(`${constants.apiUrl}getdbs`, {
+ credentials: 'include',
+ })
+ .then((resp) => {
+ return resp.json()
+ })
+ .then((resp) => {
+ setQdbs(resp)
+ })
}, [])
if (error) {
@@ -138,7 +154,7 @@ export default function Index(props) {
if (resp.status === 'ok') {
alert(`Sikeres feltöltés! thankx ${resp.user}!`) // eslint-disable-line
console.log('OK')
- LoadData()
+ loadData()
} else if (resp.status === 'invalidPass') {
alert('Hibás jelszó!') // eslint-disable-line
console.log('invalidPass')
@@ -150,15 +166,15 @@ export default function Index(props) {
console.error(resp.message)
}
})
- .catch((e) => {
+ .catch((error) => {
setSending(false)
alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
- console.error('Error posting data', e)
+ console.error('Error posting data', error)
})
- } catch (e) {
+ } catch (error) {
setSending(false)
alert('Hiba feltöltés közben! (kliens oldalon)! Több adat konzolban') // eslint-disable-line
- console.error('Error posting data', e)
+ console.error('Error posting data', error)
}
}
@@ -188,7 +204,7 @@ export default function Index(props) {
{initialCount.subjectCount || '...'} tárgy
<p />
Itt az éles adatbázis kérdései jelennek meg, amiket tudsz
- szerkeszteni. A kérdésekhez tartozó '.data' prop-ot még nem tudod
+ szerkeszteni. A kérdésekhez tartozó .data prop-ot még nem tudod
rendesen szerkeszteni, az később lesz implementálva. A Tárgy / Kérdés
nézet között tudsz válogatni.
<br />
@@ -204,12 +220,42 @@ export default function Index(props) {
}
}
+ const renderDbSelector = () => {
+ return (
+ <>
+ <select
+ style={{ margin: '10px 0px' }}
+ defaultValue={-1}
+ onChange={(event) => {
+ setSelectedDb(qdbs[event.target.value])
+ }}
+ >
+ <option disabled value={-1}>
+ {' -- Válassz egy kérdés adatbázist -- '}
+ </option>
+ {qdbs.map((qdb, i) => {
+ return (
+ <option value={i} key={qdb.name}>
+ {qdb.name}
+ </option>
+ )
+ })}
+ </select>
+ </>
+ )
+ }
+
+ if (!qdbs) {
+ return <LoadingIndicator />
+ }
+
return (
<div>
+ {renderDbSelector()}
<div className={styles.optionsButtonContainer}>
<span
onClick={() => {
- LoadData()
+ loadData()
}}
>
Újratöltés
@@ -219,8 +265,8 @@ export default function Index(props) {
placeholder="Jelszó feltöltéshez"
type="text"
value={password}
- onChange={(e) => {
- setPassword(e.target.value)
+ onChange={(event) => {
+ setPassword(event.target.value)
}}
/>
</span>
@@ -239,14 +285,22 @@ export default function Index(props) {
<div className={styles.viewButtonContainer}>
<span
onClick={() => {
- setView(views.question)
+ if (selectedDb) {
+ setView(views.question)
+ } else {
+ alert('Válassz egy adatbázist!')
+ }
}}
>
Kérdés nézet
</span>
<span
onClick={() => {
- setView(views.subject)
+ if (selectedDb) {
+ setView(views.subject)
+ } else {
+ alert('Válassz egy adatbázist!')
+ }
}}
>
Tárgy nézet
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 7d26b23..fb795df 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -2,9 +2,8 @@
cursor: pointer;
display: inline-block;
margin: 5px;
- padding: 5px;
- height: 45px;
- font-size: 30px;
+ padding: 10px;
+ font-size: 18px;
width: 25%;
text-align: center;
border-color: var(--background-color);
@@ -53,6 +52,6 @@
.welcome {
text-align: center;
- font-size: 20px;
+ font-size: 18px;
color: white;
}