mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
user files rename
This commit is contained in:
mrfry
parent
ff13eebfe1
commit
9ef2c10af1
5 changed files with 31 additions and 17 deletions
|
|
@ -1,431 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
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'
|
||||
|
||||
function listUserDir(subdir) {
|
||||
return new Promise((resolve) => {
|
||||
fetch(
|
||||
`${constants.apiUrl}listUserDir${subdir ? `?subdir=${subdir}` : ''}`,
|
||||
{
|
||||
credentials: 'include',
|
||||
}
|
||||
)
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
resolve(res)
|
||||
} else {
|
||||
alert(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function FileUploader({ onChange, uploading }) {
|
||||
return (
|
||||
<div>
|
||||
<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', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
dir: currDir,
|
||||
fname: name,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
resolve(res)
|
||||
} else {
|
||||
alert(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function newSubj(name) {
|
||||
return new Promise((resolve) => {
|
||||
fetch(constants.apiUrl + 'newUserDir', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
resolve(res)
|
||||
} else {
|
||||
alert(res.msg)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function uploadFile(dir, file) {
|
||||
return new Promise((resolve) => {
|
||||
const formData = new FormData() // eslint-disable-line
|
||||
formData.append('file', file)
|
||||
formData.append('dir', dir)
|
||||
|
||||
fetch(constants.apiUrl + 'uploadUserFile', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: formData,
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default function UserFiles({ router, globalData }) {
|
||||
const userId = globalData.userId
|
||||
const [dirs, setDirs] = useState()
|
||||
const [sortBy, setSortBy] = useState('name')
|
||||
const [sortDirection, setSortDirection] = useState(true)
|
||||
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) => {
|
||||
setDirs(res.files)
|
||||
})
|
||||
} else {
|
||||
listUserDir().then((res) => {
|
||||
setDirs(res.dirs)
|
||||
})
|
||||
}
|
||||
}, [router.query.dir])
|
||||
|
||||
const dirSorter = (a, b) => {
|
||||
if (a[sortBy] < b[sortBy]) {
|
||||
return sortDirection ? -1 : 1
|
||||
} else if (a[sortBy] > b[sortBy]) {
|
||||
return sortDirection ? 1 : -1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
const renderDirList = (dirs) => {
|
||||
return (
|
||||
<div>
|
||||
{currDir && (
|
||||
<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) => {
|
||||
const name = e.target.getAttribute('name')
|
||||
if (name) {
|
||||
if (sortBy === name) {
|
||||
setSortDirection(!sortDirection)
|
||||
} else {
|
||||
setSortDirection(true)
|
||||
}
|
||||
setSortBy(name)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div name="name">Fájl név</div>
|
||||
<div name="date">Feltöltés dátuma</div>
|
||||
<div name="size">Méret</div>
|
||||
<div name="user">Feltöltő user</div>
|
||||
</div>
|
||||
</div>
|
||||
{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}`
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<LoadingIndicator />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Tanulás segédanyagok - Qmining | Frylabs.net</title>
|
||||
</Head>
|
||||
<div className="pageHeader">
|
||||
<h1>Tanulás segédanyagok</h1>
|
||||
</div>
|
||||
{!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={() => {
|
||||
setAddingNew(null)
|
||||
}}
|
||||
>
|
||||
<div className={styles.uploadContainer}>
|
||||
{addingNew === 'file' ? (
|
||||
<>
|
||||
<FileUploader
|
||||
uploading={uploading}
|
||||
onChange={(e) => {
|
||||
setFile(e.target.files[0])
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="buttonContainer"
|
||||
onClick={() => {
|
||||
setUploading(true)
|
||||
uploadFile(currDir, file).then(() => {
|
||||
setUploading(false)
|
||||
listUserDir(currDir).then((res) => {
|
||||
setDirs(res.files)
|
||||
setAddingNew(null)
|
||||
})
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div>Feltöltés</div>
|
||||
</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)
|
||||
})
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div>OK</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue