mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Subject and question browser merge, handling multiple dbs
This commit is contained in:
mrfry
parent
57f0730f3e
commit
fb3bf29fc4
11 changed files with 232 additions and 178 deletions
|
|
@ -1,7 +1,6 @@
|
|||
import React, { PureComponent } from 'react'
|
||||
|
||||
import Questions from './Questions.js'
|
||||
import Sleep from '../components/sleep'
|
||||
|
||||
import constants from '../constants.json'
|
||||
|
||||
|
|
@ -62,7 +61,6 @@ class QuestionSearchResult extends PureComponent {
|
|||
}
|
||||
</div>
|
||||
)}
|
||||
<Sleep />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import BB from './b.js'
|
|||
export default function Layout(props) {
|
||||
let href = props.route
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true)
|
||||
const [userId, setUserId] = useState(null)
|
||||
|
||||
if (href === '/' || href === '') {
|
||||
href = 'index'
|
||||
|
|
@ -23,6 +24,22 @@ export default function Layout(props) {
|
|||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
closeSideBar()
|
||||
|
||||
fetch(`${constants.apiUrl}infos`, {
|
||||
credentials: 'include',
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
setUserId(data.uid)
|
||||
})
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
closeSideBar()
|
||||
}, [])
|
||||
|
|
@ -66,7 +83,7 @@ export default function Layout(props) {
|
|||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="userInfo">User # TODO</div>
|
||||
<div className="userInfo">User #{userId}</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"siteUrl": "https://qmining.frylabs.net/",
|
||||
"siteUrl": "http://localhost:8080/",
|
||||
"apiUrl": "http://localhost:8080/",
|
||||
"mobileWindowWidth": 700,
|
||||
"maxQuestionsToRender": 250
|
||||
|
|
|
|||
|
|
@ -9,11 +9,7 @@
|
|||
},
|
||||
"allQuestions": {
|
||||
"href": "/allQuestions",
|
||||
"text": "Kérdés keresés"
|
||||
},
|
||||
"subjectBrowser": {
|
||||
"href": "/subjectBrowser",
|
||||
"text": "Tárgyak"
|
||||
"text": "Kérdések és tárgyak"
|
||||
},
|
||||
"addQuestion": {
|
||||
"href": "/addQuestion",
|
||||
|
|
|
|||
|
|
@ -226,3 +226,22 @@ a {
|
|||
.manualUsage {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
select {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
appearance: none;
|
||||
border: 1px solid #99f;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,12 +63,10 @@
|
|||
.subjSelector {
|
||||
flex-grow: 1;
|
||||
background-color: var(--background-color);
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.newSubj {
|
||||
width: 150px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import Head from 'next/head'
|
|||
|
||||
import LoadingIndicator from '../components/LoadingIndicator.js'
|
||||
import QuestionSearchResult from '../components/QuestionSearchResult.js'
|
||||
import Subject from '../components/Subject.js'
|
||||
import SubjectSelector from '../components/SubjectSelector.js'
|
||||
import Sleep from '../components/sleep'
|
||||
|
||||
import styles from './allQuestions.module.css'
|
||||
|
||||
|
|
@ -28,17 +31,25 @@ function fetchData(db) {
|
|||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
resp.json()
|
||||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
.then((resp) => {
|
||||
resolve({
|
||||
dbName: db.name,
|
||||
data: data,
|
||||
data: resp,
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function fetchAllData(dbs) {
|
||||
const promises = dbs.map((db) => {
|
||||
return fetchData(db)
|
||||
})
|
||||
|
||||
return Promise.all(promises)
|
||||
}
|
||||
|
||||
function fetchDbs() {
|
||||
return new Promise((resolve) => {
|
||||
console.info('Fetching data')
|
||||
|
|
@ -49,53 +60,63 @@ function fetchDbs() {
|
|||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
resolve(data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default function AllQuestions({ router }) {
|
||||
const [asd, setAsd] = useState(false)
|
||||
const [data, setData] = useState(null)
|
||||
const [dbs, setDbs] = useState(null)
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [activeSubjName, setActiveSubjName] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
router.replace(`${router.asPath.replace('.html', '')}`, undefined, {
|
||||
shallow: true,
|
||||
})
|
||||
// TODO: fix dis
|
||||
const querySearch = router.query.question
|
||||
? decodeURIComponent(router.query.question)
|
||||
: ''
|
||||
console.log(querySearch)
|
||||
|
||||
fetchDbs().then((res) => {
|
||||
setDbs(res)
|
||||
console.log(res)
|
||||
})
|
||||
// fetchData().then((result) => {
|
||||
// setData(result)
|
||||
|
||||
// setSearchTerm(querySearch)
|
||||
// })
|
||||
}, [])
|
||||
|
||||
const renderDbSelector = () => {
|
||||
if (dbs) {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Qmining - Kérdés keresés | Frylabs.net</title>
|
||||
</Head>
|
||||
{dbs ? (
|
||||
<>
|
||||
<select
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value)
|
||||
className={styles.select}
|
||||
defaultValue={-1}
|
||||
onChange={(event) => {
|
||||
const key = event.target.value
|
||||
if (key === 'none') {
|
||||
console.log(key)
|
||||
} else if (key === 'all') {
|
||||
fetchAllData(dbs).then((res) => {
|
||||
setData(mergeData(res))
|
||||
console.log(res)
|
||||
})
|
||||
} else {
|
||||
fetchData(dbs[key]).then((res) => {
|
||||
setData(res.data)
|
||||
})
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value={'none'} key={'none'}>
|
||||
{'...'}
|
||||
<option disabled value={-1}>
|
||||
{' -- Válassz egy kérdés adatbázist -- '}
|
||||
</option>
|
||||
{dbs.map((db) => {
|
||||
{dbs.map((db, i) => {
|
||||
return (
|
||||
<option value={db.path} key={db.path}>
|
||||
<option value={i} key={db.path}>
|
||||
{db.name}
|
||||
</option>
|
||||
)
|
||||
|
|
@ -105,7 +126,75 @@ export default function AllQuestions({ router }) {
|
|||
</option>
|
||||
</select>
|
||||
</>
|
||||
) : null}
|
||||
)
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const renderSubjectBrowser = () => {
|
||||
let currSubj = data
|
||||
? data.find((subj) => {
|
||||
return subj.Name === activeSubjName
|
||||
})
|
||||
: {}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Qmining - Tárgyak | Frylabs.net</title>
|
||||
</Head>
|
||||
{data ? (
|
||||
<>
|
||||
<div className={styles.searchContainer}>
|
||||
<input
|
||||
autoFocus
|
||||
placeholder="Keresés..."
|
||||
className={styles.searchBar}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value)
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
}}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
<hr />
|
||||
<SubjectSelector
|
||||
data={data}
|
||||
activeSubjName={activeSubjName}
|
||||
searchTerm={searchTerm}
|
||||
onSubjSelect={(subjName) => {
|
||||
setActiveSubjName(subjName)
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
<div>{/*{qCount} kérdés, {sCount} tárgy */}</div>
|
||||
<Sleep />
|
||||
<div>
|
||||
<Subject subj={currSubj} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderQuestionBrowser = () => {
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Qmining - Kérdés keresés | Frylabs.net</title>
|
||||
</Head>
|
||||
{data ? (
|
||||
<>
|
||||
<div className={styles.searchContainer}>
|
||||
|
|
@ -139,6 +228,30 @@ export default function AllQuestions({ router }) {
|
|||
<QuestionSearchResult data={data} searchTerm={searchTerm} />
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{dbs && renderDbSelector()}
|
||||
<div className={styles.typeSelector}>
|
||||
<div
|
||||
className={!asd ? styles.activeTypeSelector : ''}
|
||||
onClick={() => setAsd(false)}
|
||||
>
|
||||
Kérdések
|
||||
</div>
|
||||
<div
|
||||
className={asd ? styles.activeTypeSelector : ''}
|
||||
onClick={() => setAsd(true)}
|
||||
>
|
||||
Tárgyak
|
||||
</div>
|
||||
</div>
|
||||
{dbs ? (
|
||||
<div>{asd ? renderSubjectBrowser() : renderQuestionBrowser()}</div>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -20,3 +20,28 @@
|
|||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.typeSelector {
|
||||
margin: 10px 0px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.typeSelector div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.typeSelector div:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.activeTypeSelector {
|
||||
background-color: #444;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,15 +97,13 @@ export default function RankList() {
|
|||
setRanklist(null)
|
||||
getListFromServer(since)
|
||||
.then((data) => {
|
||||
console.log(data)
|
||||
setRanklist(data.list || [])
|
||||
setSum(data.sum || {})
|
||||
if (data.selfuserId) {
|
||||
setSelfUserId(data.selfuserId)
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
.catch(() => {
|
||||
setRanklist(null)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import fetch from 'unfetch'
|
||||
import Head from 'next/head'
|
||||
|
||||
import LoadingIndicator from '../components/LoadingIndicator.js'
|
||||
import Subject from '../components/Subject.js'
|
||||
import SubjectSelector from '../components/SubjectSelector.js'
|
||||
import Sleep from '../components/sleep'
|
||||
|
||||
import styles from './subjectBrowser.module.css'
|
||||
|
||||
export default function SubjectBrowser({ getData }) {
|
||||
const [data, setData] = useState(null)
|
||||
const [activeSubjName, setActiveSubjName] = useState('')
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
|
||||
const [sCount, setSCount] = useState(0)
|
||||
const [qCount, setQCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
getData().then((result) => {
|
||||
setData(result)
|
||||
setSCount(result.length)
|
||||
setQCount(
|
||||
result.reduce((acc, subj) => {
|
||||
return acc + subj.Questions.length
|
||||
}, 0)
|
||||
)
|
||||
})
|
||||
}, [])
|
||||
|
||||
let currSubj = data
|
||||
? data.find((subj) => {
|
||||
return subj.Name === activeSubjName
|
||||
})
|
||||
: {}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Qmining - Tárgyak | Frylabs.net</title>
|
||||
</Head>
|
||||
{data ? (
|
||||
<>
|
||||
<div className={styles.searchContainer}>
|
||||
<input
|
||||
autoFocus
|
||||
placeholder="Keresés..."
|
||||
className={styles.searchBar}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e.target.value)
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
}}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
<SubjectSelector
|
||||
data={data}
|
||||
activeSubjName={activeSubjName}
|
||||
searchTerm={searchTerm}
|
||||
onSubjSelect={(subjName) => {
|
||||
setActiveSubjName(subjName)
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
<div>
|
||||
{qCount} kérdés, {sCount} tárgy
|
||||
</div>
|
||||
<Sleep />
|
||||
<div>
|
||||
<Subject subj={currSubj} />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.searchBar {
|
||||
margin: 10px;
|
||||
color: white;
|
||||
background-color: #222426;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
||||
.searchContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
width: 80px;
|
||||
background-color: var(--background-color);
|
||||
color: white;
|
||||
font-size: 23px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue