albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

User files changes

Browse source
This commit is contained in:
mrfry 2021-05-04 10:31:35 +02:00
parent c16015a339
commit c34e2ba2c1
7 changed files with 245 additions and 162 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/data/tabs.json
View file

@ -11,6 +11,10 @@
"href": "/allQuestions", "href": "/allQuestions",
"text": "Kérdések és tárgyak" "text": "Kérdések és tárgyak"
}, },
"userFiles": {
"href": "/userFiles",
"text": "Tanulás segédanyagok"
},
"contribute": { "contribute": {
"href": "/contribute", "href": "/contribute",
"text": "Teendők" "text": "Teendők"

5
src/defaultStyles.css
View file

@ -46,12 +46,11 @@ textarea {
input { input {
color: var(--text-color); color: var(--text-color);
background-color: var(--background-color); background-color: var(--background-color);
border: 1px solid #666; border: 0px solid #444;
border-radius: 5px;
width: 80%; width: 80%;
font-family: inherit; font-family: inherit;
border: 1px solid #444;
width: 98%; width: 98%;
padding: 4px;
} }
input:focus { input:focus {

58
src/pages/allQuestions.js
View file

@ -7,6 +7,7 @@ import Subject from '../components/Subject.js'
import SubjectSelector from '../components/SubjectSelector.js' import SubjectSelector from '../components/SubjectSelector.js'
import Sleep from '../components/sleep' import Sleep from '../components/sleep'
import ExternalLinkIcon from '../components/externalLinkIcon' import ExternalLinkIcon from '../components/externalLinkIcon'
import SearchBar from '../components/searchBar'
import styles from './allQuestions.module.css' import styles from './allQuestions.module.css'
@ -210,26 +211,12 @@ export default function AllQuestions({ router }) {
<div> <div>
{data ? ( {data ? (
<> <>
<center> <SearchBar
<div className={styles.searchContainer}> searchTerm={searchTerm}
<input onChange={(e) => {
placeholder="Kezdj el írni a kereséshez..." setSearchTerm(e)
type="text" }}
value={searchTerm} />
onChange={(event) => {
setSearchTerm(event.target.value)
}}
/>
<button
onClick={() => {
setSearchTerm('')
}}
className={styles.clearButton}
>
X
</button>
</div>
</center>
<hr /> <hr />
<SubjectSelector <SubjectSelector
data={data} data={data}
@ -255,31 +242,12 @@ export default function AllQuestions({ router }) {
<div> <div>
{data ? ( {data ? (
<> <>
<div className={styles.searchContainer}> <SearchBar
<input searchTerm={searchTerm}
placeholder="Kezdj el írni a kereséshez..." onChange={(e) => {
type="text" setSearchTerm(e)
value={searchTerm} }}
onChange={(event) => { />
setSearchTerm(event.target.value)
router.replace(
`${router.pathname}?question=${encodeURIComponent(
event.target.value
)}&db=${selectedDb}`,
undefined,
{ shallow: true }
)
}}
/>
<button
onClick={() => {
setSearchTerm('')
}}
className={styles.clearButton}
>
X
</button>
</div>
<div> <div>
<QuestionSearchResult data={data} searchTerm={searchTerm} /> <QuestionSearchResult data={data} searchTerm={searchTerm} />
</div> </div>

19
src/pages/allQuestions.module.css
View file

@ -1,22 +1,3 @@
.searchContainer {
width: 100%;
display: flex;
justify-content: center;
margin-left: 10px;
padding-top: 10px;
padding-bottom: 2px;
}
.clearButton {
width: 50px;
background-color: var(--background-color);
color: white;
font-size: 18px;
cursor: pointer;
border: none;
margin-left: 10px;
}
.info { .info {
text-align: center; text-align: center;
font-style: italic; font-style: italic;

6
src/pages/script.js
View file

@ -15,7 +15,11 @@ export default function Script() {
<h1>Script</h1> <h1>Script</h1>
</div> </div>
<div className={'buttonContainer'}> <div className={'buttonContainer'}>
<a href="https://www.tampermonkey.net/"> <a
href="https://www.tampermonkey.net/"
target="_blank"
rel="noreferrer"
>
Ajánlott userscript kezelő bővítmény Ajánlott userscript kezelő bővítmény
<ExternalLinkIcon size={15} /> <ExternalLinkIcon size={15} />
</a> </a>

285
src/pages/userFiles.js
View file

@ -3,6 +3,7 @@ import Head from 'next/head'
import LoadingIndicator from '../components/LoadingIndicator' import LoadingIndicator from '../components/LoadingIndicator'
import Modal from '../components/modal' import Modal from '../components/modal'
import SearchBar from '../components/searchBar'
import styles from './userFiles.module.css' import styles from './userFiles.module.css'
import constants from '../constants.json' import constants from '../constants.json'
@ -28,15 +29,55 @@ function listUserDir(subdir) {
}) })
} }
function FileUploader({ onChange }) { function FileUploader({ onChange, uploading }) {
return ( return (
<div> <div>
<div>Fájl csatolása</div> <div className={styles.text}>
<input type="file" name="file" onChange={onChange} /> <b>
Fontos a névtelenség, ezért figyelj rá milyen személyes adatokat
tartalmaz a feltöltött dokumentum!
</b>
<p />
Amit feltöltesz minden felhasználó lát. Csak ide illő tartalmat ossz
meg.
<p />
</div>
{uploading ? (
<LoadingIndicator />
) : (
<input type="file" name="file" onChange={onChange} />
)}
</div> </div>
) )
} }
function SubjNameInput({ onChange, uploading }) {
return (
<>
<div className={styles.text}>
Tárgyat kérlek úgy nevezd el, hogy: [tárgy neve] - [egyetem rövid
azonosító], szóval pl: Elektronika - OE.
<p />
Üres mappák időnként törölve lesznek.
</div>
<p />
{uploading ? (
<LoadingIndicator />
) : (
<div>
<input
placeholder={'Új tárgy neve'}
type="text"
onChange={(e) => {
onChange(e.target.value)
}}
/>
</div>
)}
</>
)
}
function deleteFile(currDir, name) { function deleteFile(currDir, name) {
return new Promise((resolve) => { return new Promise((resolve) => {
fetch(constants.apiUrl + 'deleteUserFile', { fetch(constants.apiUrl + 'deleteUserFile', {
@ -121,12 +162,16 @@ export default function UserFiles({ router, globalData }) {
const [addingNew, setAddingNew] = useState() const [addingNew, setAddingNew] = useState()
const [newSubjName, setNewSubjName] = useState() const [newSubjName, setNewSubjName] = useState()
const [file, setFile] = useState() const [file, setFile] = useState()
const [usageShowing, setUsageShowing] = useState(false)
const [searchTerm, setSearchTerm] = useState()
const [uploading, setUploading] = useState(false)
const currDir = router.query.dir ? decodeURIComponent(router.query.dir) : '' const currDir = router.query.dir ? decodeURIComponent(router.query.dir) : ''
useEffect(() => { useEffect(() => {
const dir = router.query.dir ? decodeURIComponent(router.query.dir) : '' const dir = router.query.dir ? decodeURIComponent(router.query.dir) : ''
setDirs(null) setDirs(null)
setSearchTerm()
if (router.query.dir) { if (router.query.dir) {
listUserDir(dir).then((res) => { listUserDir(dir).then((res) => {
@ -153,21 +198,33 @@ export default function UserFiles({ router, globalData }) {
return ( return (
<div> <div>
{currDir && ( {currDir && (
<div className={`buttonContainer ${styles.backButton}`}> <div className={styles.title}>
<div <div className={`buttonContainer ${styles.backButton}`}>
onClick={() => { <div
router.back() onClick={() => {
// FIXME: consistend going back with browser back button router.back()
// back button works like broser back button, unless it would result in site leave // FIXME: consistend going back with browser back button
// history: nothing > opened site/usrFiles?dir=... // back button works like broser back button, unless it would result in site leave
// history: site > site/userFiles > site/usrFiles?dir=... // history: nothing > opened site/usrFiles?dir=...
router.push(`${router.pathname}`, undefined, { shallow: true }) // history: site > site/userFiles > site/usrFiles?dir=...
}} router.push(`${router.pathname}`, undefined, {
> shallow: true,
Vissza })
}}
>
Vissza
</div>
</div> </div>
{currDir && <div className={styles.currDir}>{currDir}</div>}
<div className={`${styles.backButton}`} />
</div> </div>
)} )}
<SearchBar
searchTerm={searchTerm}
onChange={(e) => {
setSearchTerm(e)
}}
/>
<div className={`${styles.tableContainer} ${styles.header}`}> <div className={`${styles.tableContainer} ${styles.header}`}>
<div <div
onClick={(e) => { onClick={(e) => {
@ -188,70 +245,83 @@ export default function UserFiles({ router, globalData }) {
<div name="user">Feltöltő user</div> <div name="user">Feltöltő user</div>
</div> </div>
</div> </div>
<div className={`${styles.tableContainer} ${styles.rows}`}> {dirs ? (
<div <div className={`${styles.tableContainer} ${styles.rows}`}>
onClick={() => { <div
setAddingNew(currDir ? 'file' : 'dir') onClick={() => {
}} setAddingNew(currDir ? 'file' : 'dir')
> }}
<div>{currDir ? 'Új fájl feltöltése...' : 'Új tárgy...'}</div> >
</div> <div>{currDir ? 'Új fájl feltöltése...' : 'Új tárgy...'}</div>
{dirs.length !== 0 && ( </div>
<> {dirs.length !== 0 && (
{dirs.sort(dirSorter).map((dir) => { <>
const { name, date, path, size, user } = dir {dirs.sort(dirSorter).map((dir) => {
return ( const { name, date, path, size, user } = dir
<div if (
title={name} searchTerm &&
key={name} !name.toLowerCase().includes(searchTerm.toLowerCase())
onClick={() => { ) {
if (path) { return null
window.open(`${constants.apiUrl}${path}`, '_blank') }
} else { return (
router.push( <div
`${router.pathname}?dir=${encodeURIComponent(name)}`, title={name}
undefined, key={name}
{ shallow: true } onClick={() => {
) if (path) {
} window.open(`${constants.siteUrl}${path}`, '_blank')
}} } else {
> setDirs(undefined)
<div>{name}</div> router.push(
<div>{new Date(date).toDateString()}</div> `${router.pathname}?dir=${encodeURIComponent(
<div> name
{currDir )}`,
? (size / 1000000).toFixed(2).toString() + ' MB' undefined,
: size + ' fájl'} { shallow: true }
</div> )
<div> }
{user && }}
user !== -1 && >
(userId === user ? ( <div>{name}</div>
<div <div>{new Date(date).toDateString()}</div>
className={styles.deleteButton} <div>
onClick={(e) => { {currDir
e.stopPropagation() ? (size / 1000000).toFixed(2).toString() + ' MB'
if (confirm(`Biztos törlöd '${name}'-t ?`)) { : size + ' fájl'}
deleteFile(currDir, name).then(() => { </div>
listUserDir(currDir).then((res) => { <div>
setDirs(res.files) {user &&
user !== -1 &&
(userId === user ? (
<div
className={styles.deleteButton}
onClick={(e) => {
e.stopPropagation()
if (confirm(`Biztos törlöd '${name}'-t ?`)) {
deleteFile(currDir, name).then(() => {
listUserDir(currDir).then((res) => {
setDirs(res.files)
})
}) })
}) }
} }}
}} >
> Törlés
Törlés </div>
</div> ) : (
) : ( `#${user}`
`#${user}` ))}
))} </div>
</div> </div>
</div> )
) })}
})} </>
</> )}
)} </div>
</div> ) : (
<LoadingIndicator />
)}
</div> </div>
) )
} }
@ -259,15 +329,44 @@ export default function UserFiles({ router, globalData }) {
return ( return (
<div> <div>
<Head> <Head>
<title>Study Docs - Qmining | Frylabs.net</title> <title>Tanulás segédanyagok - Qmining | Frylabs.net</title>
</Head> </Head>
<div className="pageHeader"> <div className="pageHeader">
<h1>Study Docs</h1> <h1>Tanulás segédanyagok</h1>
</div> </div>
<div className={styles.description}> {!currDir && (
Ide tárgyanként lehet feltölteni <div
</div> onClick={() => {
{dirs ? renderDirList(dirs) : <LoadingIndicator />} setUsageShowing(true)
}}
className={styles.description}
>
Itt lehet megosztani mindenféle tanulást segítő doksit (kidolgozott
tételektől puskáig mindent).{' '}
<b>Használati útmutatóért és egyéb infókért kattints ide!</b>
</div>
)}
{usageShowing && (
<Modal
closeClick={() => {
setUsageShowing(false)
}}
>
<div className={styles.text}>
Ez gyakorlatilag egy fájl böngésző, a tárgyak a mappák, és azon
belül lehet fájlokat feltölteni.
<p />A feltöltött fájlok ellenőrizve vannak, hogy ide valóak-e, de{' '}
<b>
hibás információért, vírusokért és hasonlókért semmi felelősség
vállalás nincs.
</b>{' '}
Ha valami nem idevalót látsz, azt a Kapcsolat oldalon jelezd kérlek.
Tudatos károkozásért ban jár.
<p />
</div>
</Modal>
)}
{renderDirList(dirs)}
{addingNew && ( {addingNew && (
<Modal <Modal
closeClick={() => { closeClick={() => {
@ -278,6 +377,7 @@ export default function UserFiles({ router, globalData }) {
{addingNew === 'file' ? ( {addingNew === 'file' ? (
<> <>
<FileUploader <FileUploader
uploading={uploading}
onChange={(e) => { onChange={(e) => {
setFile(e.target.files[0]) setFile(e.target.files[0])
}} }}
@ -285,7 +385,9 @@ export default function UserFiles({ router, globalData }) {
<div <div
className="buttonContainer" className="buttonContainer"
onClick={() => { onClick={() => {
setUploading(true)
uploadFile(currDir, file).then(() => { uploadFile(currDir, file).then(() => {
setUploading(false)
listUserDir(currDir).then((res) => { listUserDir(currDir).then((res) => {
setDirs(res.files) setDirs(res.files)
setAddingNew(null) setAddingNew(null)
@ -298,19 +400,18 @@ export default function UserFiles({ router, globalData }) {
</> </>
) : ( ) : (
<> <>
<div>Új tárgy neve</div> <SubjNameInput
<div> uploading={uploading}
<input onChange={(e) => {
type="text" setNewSubjName(e)
onChange={(e) => { }}
setNewSubjName(e.target.value) />
}}
/>
</div>
<div <div
className="buttonContainer" className="buttonContainer"
onClick={() => { onClick={() => {
setUploading(true)
newSubj(newSubjName).then(() => { newSubj(newSubjName).then(() => {
setUploading(false)
listUserDir().then((res) => { listUserDir().then((res) => {
setDirs(res.dirs) setDirs(res.dirs)
setAddingNew(null) setAddingNew(null)

30
src/pages/userFiles.module.css
View file

@ -5,7 +5,7 @@
} }
.tableContainer > div { .tableContainer > div {
padding: 15px 5px; padding: 5px 5px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
} }
@ -42,9 +42,11 @@
} }
.header > div > div { .header > div > div {
color: var(--text-color);
display: flex; display: flex;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
background-color: var(--background-color);
} }
.header > div > div:hover { .header > div > div:hover {
@ -69,10 +71,34 @@
} }
.backButton { .backButton {
width: 30%; width: 15%;
} }
.description { .description {
padding: 5px; padding: 5px;
text-align: center; text-align: center;
cursor: pointer;
}
.text {
}
.text > b {
color: red;
}
.currDir {
color: var(--text-color);
text-align: center;
font-size: 20px;
}
.title {
display: flex;
justify-content: center;
align-items: center;
}
.title > div:nth-child(2) {
flex: 1;
} }