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

Added user file vote

Browse source
This commit is contained in:
mrfry 2021-05-04 17:59:54 +02:00
parent 9ef2c10af1
commit d3f45e62f5
4 changed files with 207 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/upDownVote.js Normal file
View file

@ -0,0 +1,48 @@
import React from 'react'
import styles from './upDownVote.module.css'
export default function UpDownVote({
onUp,
onDown,
onClear,
upvotes,
downvotes,
userId,
}) {
const upvoted = upvotes.includes(userId)
const downvoted = downvotes.includes(userId)
return (
<div className={styles.container}>
<div
className={styles.action}
onClick={(e) => {
e.stopPropagation()
if (!upvoted) {
onUp()
} else {
onClear()
}
}}
>
<div>👍</div>
<div className={`${upvoted && styles.voted}`}>{upvotes.length}</div>
</div>
<div
className={styles.action}
onClick={(e) => {
e.stopPropagation()
if (!downvoted) {
onDown()
} else {
onClear()
}
}}
>
<div>👎</div>
<div className={`${downvoted && styles.voted}`}>{downvotes.length}</div>
</div>
</div>
)
}

26
src/components/upDownVote.module.css Normal file
View file

@ -0,0 +1,26 @@
.container {
display: flex;
align-items: center;
padding: 3px;
}
.container > div {
display: flex;
align-items: center;
}
.container > div > * {
padding: 3px;
}
.action {
border-radius: 3px;
}
.action:hover {
background-color: #555;
}
.voted {
color: var(--text-color);
}

138
src/pages/userfiles.js
View file

@ -4,12 +4,40 @@ import Head from 'next/head'
import LoadingIndicator from '../components/LoadingIndicator'
import Modal from '../components/modal'
import SearchBar from '../components/searchBar'
import UpDownVote from '../components/upDownVote'
import styles from './userfiles.module.css'
import constants from '../constants.json'
function vote(to, item) {
return new Promise((resolve, reject) => {
fetch(`${constants.apiUrl}voteFile`, {
method: 'POST',
credentials: 'include',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
path: item.path,
to: to,
}),
})
.then((resp) => {
return resp.json()
})
.then((res) => {
if (res.success) {
resolve(res)
} else {
reject(res)
}
})
})
}
function listUserDir(subdir) {
return new Promise((resolve) => {
return new Promise((resolve, reject) => {
fetch(
`${constants.apiUrl}listUserDir${subdir ? `?subdir=${subdir}` : ''}`,
{
@ -23,7 +51,7 @@ function listUserDir(subdir) {
if (res.success) {
resolve(res)
} else {
alert(res.msg)
reject(res)
}
})
})
@ -180,13 +208,21 @@ export default function UserFiles({ router, globalData }) {
setSearchTerm()
if (router.query.dir) {
listUserDir(dir).then((res) => {
setDirs(res.files)
})
listUserDir(dir)
.then((res) => {
setDirs(res.files)
})
.catch((res) => {
alert(res.msg)
})
} else {
listUserDir().then((res) => {
setDirs(res.dirs)
})
listUserDir()
.then((res) => {
setDirs(res.dirs)
})
.catch((res) => {
alert(res.msg)
})
}
}, [router.query.dir])
@ -248,6 +284,8 @@ export default function UserFiles({ router, globalData }) {
<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="upCount">Hasznos</div>
<div name="views">Letöltések</div>
<div name="user">Feltöltő user</div>
</div>
</div>
@ -263,7 +301,17 @@ export default function UserFiles({ router, globalData }) {
{dirs.length !== 0 && (
<>
{dirs.sort(dirSorter).map((dir) => {
const { name, date, path, size, user } = dir
const {
name,
date,
path,
size,
views,
user,
upvotes,
downvotes,
} = dir
if (
searchTerm &&
!name.toLowerCase().includes(searchTerm.toLowerCase())
@ -272,6 +320,7 @@ export default function UserFiles({ router, globalData }) {
}
return (
<div
className={styles.row}
title={name}
key={name}
onClick={() => {
@ -296,6 +345,43 @@ export default function UserFiles({ router, globalData }) {
? (size / 1000000).toFixed(2).toString() + ' MB'
: size + ' fájl'}
</div>
<div>
{Array.isArray(upvotes) && Array.isArray(downvotes) && (
<UpDownVote
onUp={() => {
vote('up', dir)
.then((res) => {
setDirs(res.files)
})
.catch((res) => {
alert(res.msg)
})
}}
onDown={() => {
vote('down', dir)
.then((res) => {
setDirs(res.files)
})
.catch((res) => {
alert(res.msg)
})
}}
onClear={() => {
vote('clear', dir)
.then((res) => {
setDirs(res.files)
})
.catch((res) => {
alert(res.msg)
})
}}
upvotes={upvotes}
downvotes={downvotes}
userId={userId}
/>
)}
</div>
<div>{!isNaN(views) && `${views} db`}</div>
<div>
{user &&
user !== -1 &&
@ -306,9 +392,13 @@ export default function UserFiles({ router, globalData }) {
e.stopPropagation()
if (confirm(`Biztos törlöd '${name}'-t ?`)) {
deleteFile(currDir, name).then(() => {
listUserDir(currDir).then((res) => {
setDirs(res.files)
})
listUserDir(currDir)
.then((res) => {
setDirs(res.files)
})
.catch((res) => {
alert(res.msg)
})
})
}
}}
@ -394,10 +484,14 @@ export default function UserFiles({ router, globalData }) {
setUploading(true)
uploadFile(currDir, file).then(() => {
setUploading(false)
listUserDir(currDir).then((res) => {
setDirs(res.files)
setAddingNew(null)
})
listUserDir(currDir)
.then((res) => {
setDirs(res.files)
setAddingNew(null)
})
.catch((res) => {
alert(res.msg)
})
})
}}
>
@ -418,10 +512,14 @@ export default function UserFiles({ router, globalData }) {
setUploading(true)
newSubj(newSubjName).then(() => {
setUploading(false)
listUserDir().then((res) => {
setDirs(res.dirs)
setAddingNew(null)
})
listUserDir()
.then((res) => {
setDirs(res.dirs)
setAddingNew(null)
})
.catch((res) => {
alert(res.msg)
})
})
}}
>

18
src/pages/userfiles.module.css
View file

@ -15,20 +15,28 @@
}
.tableContainer > div > div:nth-child(1) {
flex: 1;
flex: 1 0 100px;
}
.tableContainer > div > div:nth-child(2) {
flex: 0 240px;
flex: 0 200px;
}
.tableContainer > div > div:nth-child(3) {
flex: 0 160px;
flex: 0 90px;
}
.tableContainer > div > div:nth-child(4) {
flex: 0 100px;
}
.tableContainer > div > div:nth-child(5) {
flex: 0 110px;
}
.tableContainer > div > div:nth-child(6) {
flex: 0 100px;
}
.rows > div {
cursor: pointer;
}
@ -102,3 +110,7 @@
.title > div:nth-child(2) {
flex: 1;
}
.row > div {
word-wrap: anywhere;
}