mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
Merged master
This commit is contained in:
mrfry
commit
98fc6ba9ca
23 changed files with 6448 additions and 338 deletions
|
|
@ -1,214 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
import fetch from 'unfetch'
|
||||
import Head from 'next/head'
|
||||
|
||||
import Button from '../components/Button.js'
|
||||
|
||||
import styles from './feedback.module.css'
|
||||
import constants from '../constants.json'
|
||||
|
||||
const results = {
|
||||
success: 'SUCCESS',
|
||||
error: 'ERROR',
|
||||
notSent: 'NOTSENT',
|
||||
invalid: 'INVALID',
|
||||
}
|
||||
|
||||
export default function Feedback() {
|
||||
const [form, setForm] = useState({})
|
||||
const [file, setFile] = useState(undefined)
|
||||
const [result, setResult] = useState(results.notSent)
|
||||
const [fileResult, setFileResult] = useState(results.notSent)
|
||||
|
||||
const onChange = (event) => {
|
||||
setForm({
|
||||
...form,
|
||||
[event.target.name]: event.target.value,
|
||||
})
|
||||
}
|
||||
|
||||
const renderTextInputArea = (params) => {
|
||||
return (
|
||||
<div className={styles.inputArea}>
|
||||
<div className={styles.textTitle}>{params.text}</div>
|
||||
<textarea
|
||||
autoFocus={params.autoFocus}
|
||||
onChange={(event) => params.onChange(event)}
|
||||
value={form[params.name] || ''}
|
||||
className={styles.feedback}
|
||||
name={params.name}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const onFileChangeHandler = (event) => {
|
||||
setForm({
|
||||
...form,
|
||||
file: event.target.files[0].name,
|
||||
})
|
||||
setFile(event.target.files[0])
|
||||
}
|
||||
|
||||
const renderFileUploader = () => {
|
||||
return (
|
||||
<div className={styles.inputArea}>
|
||||
<div className={styles.textTitle}>Fájl csatolása</div>
|
||||
<input
|
||||
className={styles.fileInput}
|
||||
type="file"
|
||||
name="file"
|
||||
onChange={onFileChangeHandler}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.description) {
|
||||
setResult(results.invalid)
|
||||
}
|
||||
|
||||
const t = document.getElementById('cid').value
|
||||
let cid = ''
|
||||
let version = ''
|
||||
if (t) {
|
||||
cid = t.split('|')[0]
|
||||
version = t.split('|')[1]
|
||||
}
|
||||
|
||||
const rawResponse = await fetch(constants.apiUrl + 'postfeedback', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
...form,
|
||||
cid: cid,
|
||||
version: version,
|
||||
}),
|
||||
})
|
||||
rawResponse
|
||||
.json()
|
||||
.then((resp) => {
|
||||
if (resp.success) {
|
||||
setResult(results.success)
|
||||
} else {
|
||||
setResult(results.error)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setResult(results.error)
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
if (file) {
|
||||
const formData = new FormData() // eslint-disable-line
|
||||
formData.append('file', file)
|
||||
|
||||
const rawFileResponse = await fetch(
|
||||
constants.apiUrl + 'postfeedbackfile',
|
||||
{
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: formData,
|
||||
}
|
||||
)
|
||||
rawFileResponse
|
||||
.json()
|
||||
.then((resp) => {
|
||||
if (resp.success) {
|
||||
setFileResult(results.success)
|
||||
} else {
|
||||
setFileResult(results.error)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
setFileResult(results.error)
|
||||
console.error('FILE error', err)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const renderResult = () => {
|
||||
if (results === result.success) {
|
||||
return <div>sucess</div>
|
||||
} else if (results === result.error) {
|
||||
return <div>error</div>
|
||||
} else if (results === result.invalid) {
|
||||
return <div>invalid</div>
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// action={constants.apiUrl + 'badtestsender'} encType='multipart/form-data' method='post'
|
||||
const renderForm = (props) => {
|
||||
return (
|
||||
<div className={styles.feedback}>
|
||||
{props.noDesc ? (
|
||||
<div className={styles.errorMsg}>Mező kitöltése kötelező!</div>
|
||||
) : null}
|
||||
{renderTextInputArea({
|
||||
text: 'Rövid leírás',
|
||||
name: 'description',
|
||||
onChange: onChange,
|
||||
autoFocus: true,
|
||||
})}
|
||||
<div className={styles.desc}>
|
||||
Bal aluli levelesláda ikonnál keresd majd a választ
|
||||
</div>
|
||||
{renderFileUploader()}
|
||||
<div className={styles.buttonContainer}>
|
||||
<button className={styles.button} onClick={handleSubmit}>
|
||||
Küldés
|
||||
</button>
|
||||
</div>
|
||||
<input type="text" id="cid" name="cid" hidden />
|
||||
{renderResult()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderStuff = () => {
|
||||
if (result === results.notSent && fileResult === results.notSent) {
|
||||
return <div className={styles.textTitle}>{renderForm({})}</div>
|
||||
} else if (result === results.invalid) {
|
||||
return (
|
||||
<div className={styles.textTitle}>{renderForm({ noDesc: true })}</div>
|
||||
)
|
||||
} else if (result === results.success && !file) {
|
||||
return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
|
||||
} else if (result === results.error && fileResult === results.success) {
|
||||
return <div className={styles.textTitle}>Hiba küldés közben :c</div>
|
||||
} else if (result === results.success && fileResult === results.error) {
|
||||
return (
|
||||
<div className={styles.textTitle}>
|
||||
Visszajelzés elküldve, de fájlt nem sikerült elküldeni :c
|
||||
</div>
|
||||
)
|
||||
} else if (result === results.success && fileResult === results.success) {
|
||||
return <div className={styles.textTitle}>Visszajelzés elküldve c:</div>
|
||||
} else {
|
||||
return <div className={styles.textTitle}>Bit of a fuckup here</div>
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Head>
|
||||
<title>Feedback - Qmining | Frylabs.net</title>
|
||||
</Head>
|
||||
<Button text="IRC chat" href="/irc" />
|
||||
<p />
|
||||
<hr />
|
||||
<p />
|
||||
{renderStuff()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
.feedback {
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
text-align: 'center';
|
||||
width: 200px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.textTitle {
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: var(--text-color);
|
||||
border: none;
|
||||
padding: 10px 30px;
|
||||
color: white;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.textInputArea {
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
.fileInput {
|
||||
margin: 10px;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ import Link from 'next/link'
|
|||
|
||||
import LoadingIndicator from '../components/LoadingIndicator'
|
||||
import Sleep from '../components/sleep'
|
||||
import NewsEntry from '../components/newsEntry'
|
||||
import Composer from '../components/composer'
|
||||
import DbSelector from '../components/dbSelector.js'
|
||||
|
||||
import styles from './index.module.css'
|
||||
|
|
@ -21,83 +23,254 @@ const links = {
|
|||
},
|
||||
}
|
||||
|
||||
export default function Index(props) {
|
||||
const [news, setNews] = useState(null)
|
||||
const [allQrSelector, setAllQrSelector] = useState(null)
|
||||
const motd = props.globalData.motd
|
||||
// const userSpecificMotd = props.globalData.userSpecificMotd
|
||||
|
||||
useEffect(() => {
|
||||
console.info('Fetching news.json')
|
||||
function fetchNews() {
|
||||
return new Promise((resolve) => {
|
||||
fetch(`${constants.apiUrl}news.json`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
setNews(data)
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function addPost(title, content) {
|
||||
return new Promise((resolve) => {
|
||||
fetch(constants.apiUrl + 'addPost', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title: title,
|
||||
content: content,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function postFeedback(content, file) {
|
||||
return new Promise((resolve) => {
|
||||
const promises = [
|
||||
fetch(constants.apiUrl + 'postfeedback', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: content,
|
||||
}),
|
||||
}).then((res) => {
|
||||
return res.json()
|
||||
}),
|
||||
]
|
||||
|
||||
if (file) {
|
||||
console.log('FIEEEEEEEEEELE')
|
||||
const formData = new FormData() // eslint-disable-line
|
||||
formData.append('file', file)
|
||||
|
||||
promises.push(
|
||||
fetch(constants.apiUrl + 'postfeedbackfile', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
},
|
||||
body: formData,
|
||||
}).then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
Promise.all(promises).then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default function Index({ globalData }) {
|
||||
const userId = globalData.userId
|
||||
const motd = globalData.motd
|
||||
const [news, setNews] = useState(null)
|
||||
const [allQrSelector, setAllQrSelector] = useState(null)
|
||||
// const userSpecificMotd = props.globalData.userSpecificMotd
|
||||
|
||||
useEffect(() => {
|
||||
console.info('Fetching news.json')
|
||||
fetchNews().then((res) => {
|
||||
setNews(res)
|
||||
})
|
||||
}, [])
|
||||
|
||||
const renderQAItem = (newsItem, key) => {
|
||||
return (
|
||||
<div key={key} className={styles.itemContainer}>
|
||||
<div className={styles.itemNumber}>{key} :</div>
|
||||
<div
|
||||
className={styles.question}
|
||||
dangerouslySetInnerHTML={{ __html: newsItem.q }}
|
||||
/>
|
||||
<div
|
||||
className={styles.answer}
|
||||
dangerouslySetInnerHTML={{ __html: newsItem.a }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderNewsItem = (newsItem, key) => {
|
||||
return (
|
||||
<div key={key} className={styles.itemContainer}>
|
||||
<div className={styles.itemNumber}>{key} :</div>
|
||||
<div
|
||||
className={styles.newsTitle}
|
||||
dangerouslySetInnerHTML={{ __html: newsItem.title }}
|
||||
/>
|
||||
<div
|
||||
className={styles.newsBody}
|
||||
dangerouslySetInnerHTML={{ __html: newsItem.body }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const renderNews = () => {
|
||||
if (news) {
|
||||
let questions = Object.keys(news)
|
||||
let newsItems = Object.keys(news)
|
||||
.map((key) => {
|
||||
let newsItem = news[key]
|
||||
if (newsItem.q) {
|
||||
return (
|
||||
<div key={key}>
|
||||
{renderQAItem(newsItem, key)}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<div key={key}>
|
||||
{renderNewsItem(newsItem, key)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
let newsEntryData = news[key]
|
||||
return (
|
||||
<NewsEntry
|
||||
onPostDelete={() => {
|
||||
fetch(constants.apiUrl + 'rmPost', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
newsKey: key,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setNews(res.news)
|
||||
})
|
||||
}}
|
||||
onReact={({ type, path, reaction, isDelete }) => {
|
||||
if (type === 'news') {
|
||||
fetch(constants.apiUrl + 'infos', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
react: reaction,
|
||||
newsKey: key,
|
||||
isDelete: isDelete,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setNews(res.news)
|
||||
})
|
||||
} else if (type === 'comment') {
|
||||
fetch(constants.apiUrl + 'comment', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'reaction',
|
||||
newsKey: key,
|
||||
path: path,
|
||||
reaction: reaction,
|
||||
isDelete: isDelete,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setNews(res.news)
|
||||
})
|
||||
}
|
||||
}}
|
||||
onDelete={(path) => {
|
||||
fetch(constants.apiUrl + 'comment', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'delete',
|
||||
path: path,
|
||||
newsKey: key,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setNews(res.news)
|
||||
})
|
||||
}}
|
||||
onComment={(path, content) => {
|
||||
fetch(constants.apiUrl + 'comment', {
|
||||
method: 'POST',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
type: 'add',
|
||||
path: path,
|
||||
content: content,
|
||||
newsKey: key,
|
||||
}),
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setNews(res.news)
|
||||
})
|
||||
}}
|
||||
uid={userId}
|
||||
key={key}
|
||||
newsKey={key}
|
||||
newsItem={newsEntryData}
|
||||
/>
|
||||
)
|
||||
})
|
||||
.reverse()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.title}>Hírek</div>
|
||||
<hr />
|
||||
<div className={styles.questionscontainer}>{questions}</div>
|
||||
<hr />
|
||||
<div className={styles.title}>Forum</div>
|
||||
<hr />
|
||||
<Composer
|
||||
onSubmit={(type, title, content, file) => {
|
||||
if (!content) {
|
||||
alert('Üres a tartalom!')
|
||||
return
|
||||
}
|
||||
console.log(type, title, content, file)
|
||||
if (type === 'private') {
|
||||
postFeedback(content, file).then((res) => {
|
||||
console.log(res)
|
||||
alert('Privát visszajelzés elküldve!')
|
||||
})
|
||||
} else {
|
||||
if (!title) {
|
||||
alert('Üres a téma!')
|
||||
return
|
||||
}
|
||||
addPost(title, content).then((res) => {
|
||||
setNews(res.news)
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<hr />
|
||||
<div>{newsItems}</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
|
|
@ -109,6 +282,7 @@ export default function Index(props) {
|
|||
return (
|
||||
<div className={styles.motd_body}>
|
||||
<div className={styles.title}>MOTD</div>
|
||||
<hr />
|
||||
{motd ? (
|
||||
<div
|
||||
className={styles.motd}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.clickable:hover {
|
||||
background-color: #666666;
|
||||
background-color: var(--hoover-color);
|
||||
}
|
||||
|
||||
.clickable {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue