mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
User files changes
This commit is contained in:
mrfry
parent
c16015a339
commit
c34e2ba2c1
7 changed files with 245 additions and 162 deletions
|
|
@ -11,6 +11,10 @@
|
|||
"href": "/allQuestions",
|
||||
"text": "Kérdések és tárgyak"
|
||||
},
|
||||
"userFiles": {
|
||||
"href": "/userFiles",
|
||||
"text": "Tanulás segédanyagok"
|
||||
},
|
||||
"contribute": {
|
||||
"href": "/contribute",
|
||||
"text": "Teendők"
|
||||
|
|
|
|||
|
|
@ -46,12 +46,11 @@ textarea {
|
|||
input {
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid #666;
|
||||
border-radius: 5px;
|
||||
border: 0px solid #444;
|
||||
width: 80%;
|
||||
font-family: inherit;
|
||||
border: 1px solid #444;
|
||||
width: 98%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import Subject from '../components/Subject.js'
|
|||
import SubjectSelector from '../components/SubjectSelector.js'
|
||||
import Sleep from '../components/sleep'
|
||||
import ExternalLinkIcon from '../components/externalLinkIcon'
|
||||
import SearchBar from '../components/searchBar'
|
||||
|
||||
import styles from './allQuestions.module.css'
|
||||
|
||||
|
|
@ -210,26 +211,12 @@ export default function AllQuestions({ router }) {
|
|||
<div>
|
||||
{data ? (
|
||||
<>
|
||||
<center>
|
||||
<div className={styles.searchContainer}>
|
||||
<input
|
||||
placeholder="Kezdj el írni a kereséshez..."
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(event) => {
|
||||
setSearchTerm(event.target.value)
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSearchTerm('')
|
||||
}}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</div>
|
||||
</center>
|
||||
<SearchBar
|
||||
searchTerm={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e)
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
<SubjectSelector
|
||||
data={data}
|
||||
|
|
@ -255,31 +242,12 @@ export default function AllQuestions({ router }) {
|
|||
<div>
|
||||
{data ? (
|
||||
<>
|
||||
<div className={styles.searchContainer}>
|
||||
<input
|
||||
placeholder="Kezdj el írni a kereséshez..."
|
||||
type="text"
|
||||
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>
|
||||
<SearchBar
|
||||
searchTerm={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e)
|
||||
}}
|
||||
/>
|
||||
<div>
|
||||
<QuestionSearchResult data={data} searchTerm={searchTerm} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,11 @@ export default function Script() {
|
|||
<h1>Script</h1>
|
||||
</div>
|
||||
<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
|
||||
<ExternalLinkIcon size={15} />
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Head from 'next/head'
|
|||
|
||||
import LoadingIndicator from '../components/LoadingIndicator'
|
||||
import Modal from '../components/modal'
|
||||
import SearchBar from '../components/searchBar'
|
||||
|
||||
import styles from './userFiles.module.css'
|
||||
import constants from '../constants.json'
|
||||
|
|
@ -28,15 +29,55 @@ function listUserDir(subdir) {
|
|||
})
|
||||
}
|
||||
|
||||
function FileUploader({ onChange }) {
|
||||
function FileUploader({ onChange, uploading }) {
|
||||
return (
|
||||
<div>
|
||||
<div>Fájl csatolása</div>
|
||||
<input type="file" name="file" onChange={onChange} />
|
||||
<div className={styles.text}>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
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) {
|
||||
return new Promise((resolve) => {
|
||||
fetch(constants.apiUrl + 'deleteUserFile', {
|
||||
|
|
@ -121,12 +162,16 @@ export default function UserFiles({ router, globalData }) {
|
|||
const [addingNew, setAddingNew] = useState()
|
||||
const [newSubjName, setNewSubjName] = 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) : ''
|
||||
|
||||
useEffect(() => {
|
||||
const dir = router.query.dir ? decodeURIComponent(router.query.dir) : ''
|
||||
setDirs(null)
|
||||
setSearchTerm()
|
||||
|
||||
if (router.query.dir) {
|
||||
listUserDir(dir).then((res) => {
|
||||
|
|
@ -153,21 +198,33 @@ export default function UserFiles({ router, globalData }) {
|
|||
return (
|
||||
<div>
|
||||
{currDir && (
|
||||
<div className={`buttonContainer ${styles.backButton}`}>
|
||||
<div
|
||||
onClick={() => {
|
||||
router.back()
|
||||
// FIXME: consistend going back with browser back button
|
||||
// back button works like broser back button, unless it would result in site leave
|
||||
// history: nothing > opened site/usrFiles?dir=...
|
||||
// history: site > site/userFiles > site/usrFiles?dir=...
|
||||
router.push(`${router.pathname}`, undefined, { shallow: true })
|
||||
}}
|
||||
>
|
||||
Vissza
|
||||
<div className={styles.title}>
|
||||
<div className={`buttonContainer ${styles.backButton}`}>
|
||||
<div
|
||||
onClick={() => {
|
||||
router.back()
|
||||
// FIXME: consistend going back with browser back button
|
||||
// back button works like broser back button, unless it would result in site leave
|
||||
// history: nothing > opened site/usrFiles?dir=...
|
||||
// history: site > site/userFiles > site/usrFiles?dir=...
|
||||
router.push(`${router.pathname}`, undefined, {
|
||||
shallow: true,
|
||||
})
|
||||
}}
|
||||
>
|
||||
Vissza
|
||||
</div>
|
||||
</div>
|
||||
{currDir && <div className={styles.currDir}>{currDir}</div>}
|
||||
<div className={`${styles.backButton}`} />
|
||||
</div>
|
||||
)}
|
||||
<SearchBar
|
||||
searchTerm={searchTerm}
|
||||
onChange={(e) => {
|
||||
setSearchTerm(e)
|
||||
}}
|
||||
/>
|
||||
<div className={`${styles.tableContainer} ${styles.header}`}>
|
||||
<div
|
||||
onClick={(e) => {
|
||||
|
|
@ -188,70 +245,83 @@ export default function UserFiles({ router, globalData }) {
|
|||
<div name="user">Feltöltő user</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${styles.tableContainer} ${styles.rows}`}>
|
||||
<div
|
||||
onClick={() => {
|
||||
setAddingNew(currDir ? 'file' : 'dir')
|
||||
}}
|
||||
>
|
||||
<div>{currDir ? 'Új fájl feltöltése...' : 'Új tárgy...'}</div>
|
||||
</div>
|
||||
{dirs.length !== 0 && (
|
||||
<>
|
||||
{dirs.sort(dirSorter).map((dir) => {
|
||||
const { name, date, path, size, user } = dir
|
||||
return (
|
||||
<div
|
||||
title={name}
|
||||
key={name}
|
||||
onClick={() => {
|
||||
if (path) {
|
||||
window.open(`${constants.apiUrl}${path}`, '_blank')
|
||||
} else {
|
||||
router.push(
|
||||
`${router.pathname}?dir=${encodeURIComponent(name)}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>{name}</div>
|
||||
<div>{new Date(date).toDateString()}</div>
|
||||
<div>
|
||||
{currDir
|
||||
? (size / 1000000).toFixed(2).toString() + ' MB'
|
||||
: size + ' fájl'}
|
||||
</div>
|
||||
<div>
|
||||
{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)
|
||||
{dirs ? (
|
||||
<div className={`${styles.tableContainer} ${styles.rows}`}>
|
||||
<div
|
||||
onClick={() => {
|
||||
setAddingNew(currDir ? 'file' : 'dir')
|
||||
}}
|
||||
>
|
||||
<div>{currDir ? 'Új fájl feltöltése...' : 'Új tárgy...'}</div>
|
||||
</div>
|
||||
{dirs.length !== 0 && (
|
||||
<>
|
||||
{dirs.sort(dirSorter).map((dir) => {
|
||||
const { name, date, path, size, user } = dir
|
||||
if (
|
||||
searchTerm &&
|
||||
!name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div
|
||||
title={name}
|
||||
key={name}
|
||||
onClick={() => {
|
||||
if (path) {
|
||||
window.open(`${constants.siteUrl}${path}`, '_blank')
|
||||
} else {
|
||||
setDirs(undefined)
|
||||
router.push(
|
||||
`${router.pathname}?dir=${encodeURIComponent(
|
||||
name
|
||||
)}`,
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>{name}</div>
|
||||
<div>{new Date(date).toDateString()}</div>
|
||||
<div>
|
||||
{currDir
|
||||
? (size / 1000000).toFixed(2).toString() + ' MB'
|
||||
: size + ' fájl'}
|
||||
</div>
|
||||
<div>
|
||||
{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
|
||||
</div>
|
||||
) : (
|
||||
`#${user}`
|
||||
))}
|
||||
}
|
||||
}}
|
||||
>
|
||||
Törlés
|
||||
</div>
|
||||
) : (
|
||||
`#${user}`
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -259,15 +329,44 @@ export default function UserFiles({ router, globalData }) {
|
|||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Study Docs - Qmining | Frylabs.net</title>
|
||||
<title>Tanulás segédanyagok - Qmining | Frylabs.net</title>
|
||||
</Head>
|
||||
<div className="pageHeader">
|
||||
<h1>Study Docs</h1>
|
||||
<h1>Tanulás segédanyagok</h1>
|
||||
</div>
|
||||
<div className={styles.description}>
|
||||
Ide tárgyanként lehet feltölteni
|
||||
</div>
|
||||
{dirs ? renderDirList(dirs) : <LoadingIndicator />}
|
||||
{!currDir && (
|
||||
<div
|
||||
onClick={() => {
|
||||
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 && (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
|
|
@ -278,6 +377,7 @@ export default function UserFiles({ router, globalData }) {
|
|||
{addingNew === 'file' ? (
|
||||
<>
|
||||
<FileUploader
|
||||
uploading={uploading}
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files[0])
|
||||
}}
|
||||
|
|
@ -285,7 +385,9 @@ export default function UserFiles({ router, globalData }) {
|
|||
<div
|
||||
className="buttonContainer"
|
||||
onClick={() => {
|
||||
setUploading(true)
|
||||
uploadFile(currDir, file).then(() => {
|
||||
setUploading(false)
|
||||
listUserDir(currDir).then((res) => {
|
||||
setDirs(res.files)
|
||||
setAddingNew(null)
|
||||
|
|
@ -298,19 +400,18 @@ export default function UserFiles({ router, globalData }) {
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>Új tárgy neve</div>
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
onChange={(e) => {
|
||||
setNewSubjName(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<SubjNameInput
|
||||
uploading={uploading}
|
||||
onChange={(e) => {
|
||||
setNewSubjName(e)
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="buttonContainer"
|
||||
onClick={() => {
|
||||
setUploading(true)
|
||||
newSubj(newSubjName).then(() => {
|
||||
setUploading(false)
|
||||
listUserDir().then((res) => {
|
||||
setDirs(res.dirs)
|
||||
setAddingNew(null)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
}
|
||||
|
||||
.tableContainer > div {
|
||||
padding: 15px 5px;
|
||||
padding: 5px 5px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
|
@ -42,9 +42,11 @@
|
|||
}
|
||||
|
||||
.header > div > div {
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.header > div > div:hover {
|
||||
|
|
@ -69,10 +71,34 @@
|
|||
}
|
||||
|
||||
.backButton {
|
||||
width: 30%;
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding: 5px;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue