mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
removed forum, todos, added p2p info page & lots of minor changes/fixes
This commit is contained in:
mrfry
parent
32522097c0
commit
e2d304c130
28 changed files with 303 additions and 954 deletions
3
.babelrc
Normal file
3
.babelrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"presets": ["@babel/preset-react"]
|
||||
}
|
||||
|
|
@ -6,7 +6,15 @@ function highlightText(text, toHighlight) {
|
|||
}
|
||||
try {
|
||||
const re = new RegExp(toHighlight, 'gi')
|
||||
return text.replace(re, `<mark>${toHighlight}</mark>`)
|
||||
const splitText = text.split(toHighlight)
|
||||
console.log(splitText)
|
||||
return (
|
||||
<>
|
||||
{splitText[0]}
|
||||
<span style={{ color: '#99f' }}>{toHighlight}</span>
|
||||
{splitText[1]}
|
||||
</>
|
||||
)
|
||||
} catch (e) {
|
||||
return text
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
.groupDescription {
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.todoButtons {
|
||||
}
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import TodoCard from './todoCard'
|
||||
|
||||
import styles from './todoBoard.module.css'
|
||||
|
||||
export default function TodoBoard(props) {
|
||||
const { columns, cards, userId, categories, onCardClick, selectedGroup } =
|
||||
props
|
||||
|
||||
const clickableTypes = Object.keys(columns).reduce((acc, key) => {
|
||||
const col = columns[key]
|
||||
if (col.clickable) {
|
||||
acc.push(key)
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={styles.tableContainer}>
|
||||
<div className={styles.table}>
|
||||
{Object.keys(columns).map((key) => {
|
||||
const category = columns[key]
|
||||
const cardsToShow = cards.filter((card) => {
|
||||
const shouldHide =
|
||||
card.state !== key ||
|
||||
(selectedGroup !== null &&
|
||||
selectedGroup !== 'uncat' &&
|
||||
card.group !== selectedGroup) ||
|
||||
(selectedGroup === 'uncat' && card.group !== undefined)
|
||||
|
||||
return !shouldHide
|
||||
})
|
||||
return (
|
||||
<div className={styles.tableCol} key={key}>
|
||||
<div className={styles.categoryName}>{category.name}</div>
|
||||
|
||||
{cardsToShow.length === 0 && (
|
||||
<div className={styles.empty}>Üres</div>
|
||||
)}
|
||||
{cardsToShow.map((card, i) => {
|
||||
return (
|
||||
<TodoCard
|
||||
key={i}
|
||||
cardData={card}
|
||||
userId={userId}
|
||||
categories={categories}
|
||||
onClick={onCardClick}
|
||||
clickable={clickableTypes.includes(key)}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
.tableContainer {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.categoryName {
|
||||
text-align: center;
|
||||
margin: 5px 0px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tableCol {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import styles from './todoCard.module.css'
|
||||
|
||||
export default function TodoCard(props) {
|
||||
const { categories, onClick, userId } = props
|
||||
const { name, category, points, votes, id, group } = props.cardData
|
||||
const voted = votes.includes(userId)
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.card}
|
||||
style={{
|
||||
border: `1px solid ${group || '#f2cb05'}`,
|
||||
}}
|
||||
onClick={() => {
|
||||
onClick(props.cardData)
|
||||
}}
|
||||
>
|
||||
<div className={styles.description}>
|
||||
<span className={styles.id}>{`#${id}`}</span>
|
||||
{name}
|
||||
</div>
|
||||
<div className={styles.category}>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: categories[category].color,
|
||||
color: 'white',
|
||||
borderRadius: '2px',
|
||||
padding: '3px',
|
||||
}}
|
||||
>
|
||||
{categories[category].name}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.numbers}>
|
||||
<div
|
||||
className={`${voted && styles.voted}`}
|
||||
>{`Szavazatok: ${votes.length}`}</div>
|
||||
<div>{`Nehézség: ${points}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
.card {
|
||||
border-radius: 5px;
|
||||
padding: 7px;
|
||||
margin: 8px 4px;
|
||||
cursor: pointer;
|
||||
background-color: #171616;
|
||||
}
|
||||
|
||||
.voted {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: #333;
|
||||
border: 2px solid #f99;
|
||||
}
|
||||
|
||||
.card > div {
|
||||
margin: 6px 4px;
|
||||
}
|
||||
|
||||
.description {
|
||||
word-break: normal;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.numbers > div {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.id {
|
||||
margin: 1px 6px 1px 1px;
|
||||
color: #999;
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import styles from './todoRow.module.css'
|
||||
|
||||
export default function TodoRow(props) {
|
||||
const { categories, userId, onClick } = props
|
||||
const { name, category, votes, id, group } = props.rowData
|
||||
const voted = votes.includes(userId)
|
||||
const borderColor =
|
||||
categories[category].borderColor || categories[category].color
|
||||
|
||||
return (
|
||||
<div
|
||||
onClick={() => {
|
||||
onClick(props.rowData)
|
||||
}}
|
||||
className={styles.row}
|
||||
style={{
|
||||
border: `2px dashed ${borderColor || 'white'}`,
|
||||
borderRadius: '3px',
|
||||
}}
|
||||
>
|
||||
<div className={styles.id}>{`#${id}`}</div>
|
||||
<div className={styles.description}>{name}</div>
|
||||
<div className={styles.catName}>
|
||||
<div
|
||||
style={{
|
||||
wordBreak: 'break-all',
|
||||
fontSize: '12px',
|
||||
backgroundColor: categories[category].color,
|
||||
color: 'white',
|
||||
borderRadius: '2px',
|
||||
padding: '3px',
|
||||
}}
|
||||
>
|
||||
{categories[category].name}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.votes} ${voted && styles.voted}`}
|
||||
>{`Szavazatok: ${votes.length}`}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
.row {
|
||||
border-radius: 5px;
|
||||
padding: 7px;
|
||||
margin: 8px 4px;
|
||||
cursor: pointer;
|
||||
background-color: #171616;
|
||||
}
|
||||
|
||||
.row:hover {
|
||||
background-color: #333;
|
||||
border: 2px solid #f99;
|
||||
}
|
||||
|
||||
.row > div {
|
||||
margin: 6px 4px;
|
||||
}
|
||||
|
||||
.id {
|
||||
flex: 0 20px;
|
||||
margin: 1px 6px 1px 1px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.description {
|
||||
flex: 1;
|
||||
word-break: normal;
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.votes {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.voted {
|
||||
color: var(--text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.catName {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import styles from './todoSidebar.module.css'
|
||||
|
||||
export default function Todos({
|
||||
card,
|
||||
userId,
|
||||
categories,
|
||||
columns,
|
||||
voteOn,
|
||||
namedGroups,
|
||||
}) {
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
category,
|
||||
points,
|
||||
votes,
|
||||
id,
|
||||
group,
|
||||
gitlink,
|
||||
} = card
|
||||
const voteable = columns[card.state].clickable
|
||||
|
||||
// TODO: hide vote button if not voteable
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.title}>
|
||||
<span className={styles.id}>#{id}</span>
|
||||
<div className={'subtitle'} style={{ textAlign: 'left' }}>
|
||||
{name}
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
backgroundColor: categories[category].color,
|
||||
color: 'white',
|
||||
fontSize: '12px',
|
||||
borderRadius: '2px',
|
||||
padding: '3px',
|
||||
}}
|
||||
>
|
||||
{categories[category].name}
|
||||
</span>
|
||||
</div>
|
||||
<hr />
|
||||
{group && (
|
||||
<div className={styles.row}>
|
||||
<div style={{ color: group }}>Csoport:</div>
|
||||
<div style={{ color: group }}>
|
||||
{namedGroups[group] ? namedGroups[group].name : group}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.row} title={'Minél több a pont, annál nehezebb'}>
|
||||
<div>Nehézség:</div>
|
||||
<div>{points}</div>
|
||||
</div>
|
||||
<div
|
||||
className={`${styles.row} ${votes.includes(userId) &&
|
||||
styles.votedtext}`}
|
||||
title={'Hány felhasználó szavazott a feladatra'}
|
||||
>
|
||||
<div>Szavazatok:</div>
|
||||
<div>{votes.length}</div>
|
||||
</div>
|
||||
{gitlink && (
|
||||
<center>
|
||||
<div>
|
||||
<a
|
||||
href={gitlink}
|
||||
style={{ textDecoration: 'none' }}
|
||||
target={'_blank'}
|
||||
rel={'noreferrer'}
|
||||
>
|
||||
Git link
|
||||
</a>
|
||||
</div>
|
||||
</center>
|
||||
)}
|
||||
<hr />
|
||||
{description && (
|
||||
<>
|
||||
<div className={'subtitle'} style={{ textAlign: 'left' }}>
|
||||
Leírás
|
||||
</div>
|
||||
<div
|
||||
className={styles.description}
|
||||
dangerouslySetInnerHTML={{ __html: description }}
|
||||
/>
|
||||
<hr />
|
||||
</>
|
||||
)}
|
||||
<div className={styles.category} />
|
||||
{voteable && (
|
||||
<center>
|
||||
<div className={'buttonContainer'} style={{ width: '40%' }}>
|
||||
<div
|
||||
className={`${styles.button} ${votes.includes(userId) &&
|
||||
styles.voted}`}
|
||||
onClick={() => {
|
||||
voteOn(card)
|
||||
}}
|
||||
>
|
||||
{votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'}
|
||||
</div>
|
||||
</div>
|
||||
</center>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.container > hr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.name {
|
||||
}
|
||||
|
||||
.category {
|
||||
word-break: break-all;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.id {
|
||||
font-size: 20px;
|
||||
margin: 0px 3px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.description {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: calc(38vh);
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 2px 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 2px solid var(--text-color);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.votedtext {
|
||||
color: #cf9;
|
||||
}
|
||||
.voted {
|
||||
border: 2px solid #cf9;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import TodoRow from './todoRow'
|
||||
|
||||
import styles from './todoTable.module.css'
|
||||
|
||||
export default function TodoBoard(props) {
|
||||
const { tables, cards, userId, categories, onClick, selectedGroup } = props
|
||||
|
||||
return (
|
||||
<div className={styles.tableContainer}>
|
||||
<div className={styles.table}>
|
||||
{Object.keys(tables).map((key) => {
|
||||
const table = tables[key]
|
||||
|
||||
const tableCards = cards.filter((card) => {
|
||||
return card.state === key
|
||||
})
|
||||
|
||||
const tableCardsToShow = tableCards.filter((card) => {
|
||||
const shouldHide =
|
||||
card.state !== key ||
|
||||
(selectedGroup !== null &&
|
||||
selectedGroup !== 'uncat' &&
|
||||
card.group !== selectedGroup) ||
|
||||
(selectedGroup === 'uncat' && card.group !== undefined)
|
||||
|
||||
return !shouldHide
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={styles.container} key={key}>
|
||||
<div className={styles.title}>{table.name}</div>
|
||||
<div className={styles.scroll}>
|
||||
{tableCardsToShow.length === 0 && (
|
||||
<div className={styles.empty}>Üres</div>
|
||||
)}
|
||||
{tableCardsToShow.map((card, i) => {
|
||||
return (
|
||||
<TodoRow
|
||||
onClick={onClick}
|
||||
key={i}
|
||||
type={key}
|
||||
rowData={card}
|
||||
userId={userId}
|
||||
categories={categories}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
.tableContainer {
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.table {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
flex-direction: column;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 0px;
|
||||
}
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import LoadingIndicator from '../LoadingIndicator'
|
||||
import TodoBoard from './todoBoard'
|
||||
import TodoTable from './todoTable'
|
||||
import TodoSidebar from './todoSidebar'
|
||||
import Modal from '../modal'
|
||||
|
||||
import styles from './todo.module.css'
|
||||
import constants from '../../constants.json'
|
||||
|
||||
const byVotes = (a, b) => {
|
||||
return b.votes.length - a.votes.length
|
||||
}
|
||||
|
||||
export default function Todos({ globalState, setGlobalState }) {
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
const [columns, setColumns] = useState(null)
|
||||
const [cards, setCards] = useState(null)
|
||||
const [categories, setCategories] = useState(null)
|
||||
const [userId, setUserId] = useState(null)
|
||||
const [sidebarCard, setSidebarCard] = useState(null)
|
||||
const [namedGroups, setGroups] = useState(null)
|
||||
const [selectedGroup, setSelectedGroup] = useState(null)
|
||||
|
||||
const [activeGroups, setActiveGroups] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (globalState.todos) {
|
||||
setTodos(globalState.todos)
|
||||
} else {
|
||||
fetch(`${constants.apiUrl}todos`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
setTodos(data)
|
||||
setGlobalState({
|
||||
todos: data,
|
||||
})
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
const setTodos = (data) => {
|
||||
setCategories(data.todos.categories)
|
||||
setGroups(data.todos.groups)
|
||||
setUserId(data.userId)
|
||||
|
||||
setCards(data.todos.cards)
|
||||
setColumns(data.todos.columns)
|
||||
setLoaded(true)
|
||||
|
||||
const notTables = Object.keys(data.todos.columns).reduce((acc, key) => {
|
||||
const col = data.todos.columns[key]
|
||||
if (col.type !== 'table') {
|
||||
acc.push(key)
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
setActiveGroups(
|
||||
data.todos.cards.reduce((acc, card) => {
|
||||
if (card.group && notTables.includes(card.state)) {
|
||||
if (!acc.includes(card.group)) acc.push(card.group)
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
)
|
||||
}
|
||||
|
||||
const onClick = (card) => {
|
||||
setSidebarCard(card.id)
|
||||
}
|
||||
|
||||
if (!loaded) {
|
||||
return <LoadingIndicator />
|
||||
}
|
||||
|
||||
let bCards = []
|
||||
let tCards = []
|
||||
cards.forEach((card) => {
|
||||
if (columns[card.state].type === 'table') {
|
||||
tCards.push(card)
|
||||
} else {
|
||||
bCards.push(card)
|
||||
}
|
||||
})
|
||||
bCards = bCards.sort(byVotes)
|
||||
tCards = tCards.sort(byVotes)
|
||||
|
||||
let cols = {}
|
||||
let tables = {}
|
||||
Object.keys(columns).forEach((key) => {
|
||||
const col = columns[key]
|
||||
if (col.type !== 'table') {
|
||||
cols = {
|
||||
...cols,
|
||||
[key]: col,
|
||||
}
|
||||
} else {
|
||||
tables = {
|
||||
...tables,
|
||||
[key]: col,
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const groups = cards.reduce((acc, card) => {
|
||||
if (!acc.includes(card.group) && card.group) {
|
||||
acc.push(card.group)
|
||||
}
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
const renderGrouper = () => {
|
||||
const sg = namedGroups[selectedGroup]
|
||||
return (
|
||||
<>
|
||||
<div className={'buttonContainer'}>
|
||||
{groups.map((group) => {
|
||||
const namedGroup = namedGroups[group]
|
||||
const shouldSkip = activeGroups && !activeGroups.includes(group)
|
||||
|
||||
if (shouldSkip) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${'buttonContainer'}, ${styles.todoButtons} ${
|
||||
group === selectedGroup && 'activeButton'
|
||||
}`}
|
||||
key={group}
|
||||
onClick={() => {
|
||||
setSelectedGroup(group)
|
||||
}}
|
||||
>
|
||||
{namedGroup ? namedGroup.name : group}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<div
|
||||
className={`${'buttonContainer'}, ${styles.todoButtons} ${
|
||||
'uncat' === selectedGroup && 'activeButton'
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedGroup('uncat')
|
||||
}}
|
||||
>
|
||||
{'Kategorizálatlan'}
|
||||
</div>
|
||||
<div
|
||||
className={`${'buttonContainer'}, ${styles.todoButtons} ${
|
||||
null === selectedGroup && 'activeButton'
|
||||
}`}
|
||||
onClick={() => {
|
||||
setSelectedGroup(null)
|
||||
}}
|
||||
>
|
||||
{'Összes'}
|
||||
</div>
|
||||
</div>
|
||||
{sg && sg.description ? (
|
||||
<div className={styles.groupDescription}>{sg.description}</div>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{sidebarCard && (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setSidebarCard(null)
|
||||
}}
|
||||
>
|
||||
<TodoSidebar
|
||||
card={cards.find((card) => {
|
||||
return card.id === sidebarCard
|
||||
})}
|
||||
userId={userId}
|
||||
categories={categories}
|
||||
columns={columns}
|
||||
namedGroups={namedGroups}
|
||||
voteOn={(card) => {
|
||||
fetch(`${constants.apiUrl}voteTodo?id=${card.id}`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
setTodos(data)
|
||||
setGlobalState({
|
||||
todos: data,
|
||||
})
|
||||
})
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
{renderGrouper()}
|
||||
<div>
|
||||
<TodoBoard
|
||||
columns={cols}
|
||||
cards={bCards}
|
||||
userId={userId}
|
||||
categories={categories}
|
||||
onCardClick={onClick}
|
||||
selectedGroup={selectedGroup}
|
||||
/>
|
||||
<TodoTable
|
||||
tables={tables}
|
||||
cards={tCards}
|
||||
userId={userId}
|
||||
categories={categories}
|
||||
onClick={onClick}
|
||||
selectedGroup={selectedGroup}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"siteUrl": "https://qmining.frylabs.net/",
|
||||
"apiUrl": "https://api.frylabs.net/",
|
||||
"siteUrl": "http://localhost:8080/",
|
||||
"apiUrl": "http://localhost:8080/",
|
||||
"mobileWindowWidth": 700,
|
||||
"maxQuestionsToRender": 250,
|
||||
"imageExts": ["gif", "png", "jpeg", "jpg"],
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
{
|
||||
"index": {
|
||||
"href": "/",
|
||||
"text": "Fórum"
|
||||
},
|
||||
"news": {
|
||||
"href": "/news",
|
||||
"text": "Hírek"
|
||||
"text": "Főoldal"
|
||||
},
|
||||
"script": {
|
||||
"href": "/script",
|
||||
|
|
@ -26,5 +22,9 @@
|
|||
"contact": {
|
||||
"href": "/contact",
|
||||
"text": "Kapcsolat"
|
||||
},
|
||||
"p2pinfo": {
|
||||
"href": "/p2pinfo",
|
||||
"text": "P2P infó"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"contribute": {
|
||||
"href": "/contribute",
|
||||
"text": "Teendők"
|
||||
},
|
||||
"pwRequest": {
|
||||
"href": "/pwRequest",
|
||||
"text": "Jelszó kérés"
|
||||
},
|
||||
"validation": {
|
||||
"href": "/validation",
|
||||
"text": "Validálás"
|
||||
},
|
||||
"ranklist": {
|
||||
"href": "/ranklist",
|
||||
"text": "Ranklista"
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ function fetchData(db) {
|
|||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return respon()
|
||||
return resp.json()
|
||||
})
|
||||
.then((resp) => {
|
||||
resolve({
|
||||
|
|
@ -61,7 +61,7 @@ function fetchDbs() {
|
|||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return respon()
|
||||
return resp.json()
|
||||
})
|
||||
.then((data) => {
|
||||
resolve(data)
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import Todos from '../components/todoStuff/todos'
|
||||
import FeedbackArea from '../components/feedbackArea'
|
||||
import Modal from '../components/modal'
|
||||
import Header from '../components/header'
|
||||
|
||||
import constants from '../constants.json'
|
||||
import styles from './contribute.module.css'
|
||||
import repos from '../data/repos.json'
|
||||
|
||||
export default function Contribute({ globalState, setGlobalState }) {
|
||||
const [showFeedback, setShowFeedback] = useState(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header title={'Todos'} />
|
||||
<div className={'pageHeader'}>
|
||||
<h1>Teendők</h1>
|
||||
</div>
|
||||
<div className={'description'}>
|
||||
<p>
|
||||
Ezen az oldalon új ötleteket adhatsz hozzá megvalósításra a teendők
|
||||
listájához.
|
||||
</p>
|
||||
<p>
|
||||
Emellet ha hozzáértő vagy, adott feladatok megvalósításában is
|
||||
segíthetsz. (lásd: <a href="#gitrepo">lentebb</a>)
|
||||
<br /> Ha egy kártyára kattintasz, a megjelenő ablakban láthatod annak
|
||||
részleteit, illetve{' '}
|
||||
<b>
|
||||
<i>szavazhatsz</i>
|
||||
</b>{' '}
|
||||
is a feladatra, annak érdekében, hogy minél hamarabb megvalósulhasson.
|
||||
Minél több szavazat érkezik egy kártyára, annál magasabb lesz a
|
||||
prioritása. (értsd: a legtöbb szavazatot kapó kártya teendője lesz
|
||||
legelőször megvalósítva)
|
||||
<br /> A kurzort az oszlopcímekre mozgatva, további információkat
|
||||
olvashatsz a kategóriák tulajdonságairól.
|
||||
</p>
|
||||
</div>
|
||||
<div className={`buttonContainer`}>
|
||||
<div
|
||||
onClick={() => {
|
||||
setShowFeedback(true)
|
||||
}}
|
||||
>
|
||||
Új feladat
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<hr />
|
||||
<Todos globalState={globalState} setGlobalState={setGlobalState} />
|
||||
<hr />
|
||||
<div id={'gitrepo'} className={styles.gitRepos}>
|
||||
<div>
|
||||
<div className={'subtitle'}>
|
||||
<b>Git repos</b>
|
||||
</div>
|
||||
<div>
|
||||
{Object.keys(repos.repos).map((key) => {
|
||||
let repo = repos.repos[key]
|
||||
return (
|
||||
<div key={key}>
|
||||
<ul>
|
||||
<li>
|
||||
<a key={key} href={repo.href}>
|
||||
{repo.description}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<img src={`${constants.siteUrl}img/bug.png`} />
|
||||
</div>
|
||||
<hr />
|
||||
{showFeedback && (
|
||||
<Modal
|
||||
closeClick={() => {
|
||||
setShowFeedback(false)
|
||||
}}
|
||||
>
|
||||
<FeedbackArea from={'contribute'} />
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.warning {
|
||||
color: white;
|
||||
padding: 10px;
|
||||
font-size: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gitRepos {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.gitRepos {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.gitRepos a {
|
||||
margin: 0px 5px;
|
||||
}
|
||||
|
||||
.gitRepos img {
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
|
@ -25,12 +25,11 @@ export default function UserForum({
|
|||
</div>
|
||||
)}
|
||||
<Forum
|
||||
allowPost
|
||||
router={router}
|
||||
globalState={globalState}
|
||||
setGlobalState={setGlobalState}
|
||||
globalData={globalData}
|
||||
forumName={'userForum'}
|
||||
forumName={'frontpage'}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
import React from 'react'
|
||||
|
||||
import Forum from '../components/forum'
|
||||
|
||||
export default function Index({
|
||||
router,
|
||||
globalData,
|
||||
globalState,
|
||||
setGlobalState,
|
||||
}) {
|
||||
return (
|
||||
<Forum
|
||||
router={router}
|
||||
globalState={globalState}
|
||||
setGlobalState={setGlobalState}
|
||||
globalData={globalData}
|
||||
forumName={'frontpage'}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
letter-spacing: 2.5px;
|
||||
}
|
||||
|
||||
.motd {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
|
||||
border: 2px dashed var(--text-color);
|
||||
padding-top: 13px;
|
||||
padding-bottom: 15px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
168
src/pages/p2pinfo.jsx
Normal file
168
src/pages/p2pinfo.jsx
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import Link from 'next/link'
|
||||
|
||||
import Header from '../components/header'
|
||||
import constants from '../constants.json'
|
||||
import LoadingIndicator from '../components/LoadingIndicator'
|
||||
|
||||
import styles from './p2pinfo.module.css'
|
||||
|
||||
const infos = [
|
||||
{
|
||||
title: 'Név',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Kontakt',
|
||||
key: 'contact',
|
||||
},
|
||||
{
|
||||
title: 'Utolsó szinkronizálás',
|
||||
key: 'lastSync',
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
title: 'Kérdés DB-k',
|
||||
key: 'questionDbCount',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
title: 'Tárgyak',
|
||||
key: 'subjectCount',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
title: 'Kérdések',
|
||||
key: 'questionCount',
|
||||
type: 'number',
|
||||
},
|
||||
{
|
||||
title: 'Szerver build time',
|
||||
key: 'serverBuildTime',
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
title: 'Script version',
|
||||
key: 'scriptVersion',
|
||||
},
|
||||
{
|
||||
title: 'Weboldal build time',
|
||||
key: 'qminingPageBuildTime',
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
title: 'Data editor build time',
|
||||
key: 'dataEditorBuildTime',
|
||||
type: 'date',
|
||||
},
|
||||
{
|
||||
title: 'Szerver revision',
|
||||
key: 'serverRevision',
|
||||
},
|
||||
{
|
||||
title: 'Script revision',
|
||||
key: 'scriptRevision',
|
||||
},
|
||||
{
|
||||
title: 'Weboldal revision',
|
||||
key: 'qminingPageRevision',
|
||||
},
|
||||
{
|
||||
title: 'Data editor revision',
|
||||
key: 'dataEditorRevision',
|
||||
},
|
||||
]
|
||||
|
||||
export default function P2PInfo({ globalState, setGlobalState }) {
|
||||
const [p2pInfo, setP2pinfo] = useState()
|
||||
const info = p2pInfo
|
||||
? {
|
||||
...p2pInfo,
|
||||
...p2pInfo.selfInfo,
|
||||
...p2pInfo.qdbInfo,
|
||||
}
|
||||
: {}
|
||||
|
||||
useEffect(() => {
|
||||
if (globalState.p2pinfo) {
|
||||
setP2pinfo(globalState.p2pinfo)
|
||||
} else {
|
||||
fetch(constants.apiUrl + 'p2pinfo', {
|
||||
method: 'GET',
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
return res.json()
|
||||
})
|
||||
.then((res) => {
|
||||
setP2pinfo(res)
|
||||
setGlobalState({
|
||||
p2pinfo: res,
|
||||
})
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
if (!p2pInfo) return <LoadingIndicator />
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={'pageHeader'}>
|
||||
<h1>Peer to peer infó</h1>
|
||||
</div>
|
||||
<div className={styles.container}>
|
||||
<Header title={'P2P infó'} />
|
||||
A weboldal peer to peer (p2p) megoldást implementál, így több szerverrel
|
||||
együtt tud működni, és a más szerveren hozzáadott adatokat időközönként
|
||||
elkéri, és hozzáadja a helyileg tárolt adatokhoz. Vagy valami ilyesmi
|
||||
TODO: normális duma
|
||||
<hr />
|
||||
<div className={styles.title}>Szerver P2P információja:</div>
|
||||
<br />
|
||||
{infos.map((x) => {
|
||||
const { title, key, type } = x
|
||||
|
||||
let text = info[key]
|
||||
switch (type) {
|
||||
case 'date':
|
||||
text = new Date(text).toLocaleString()
|
||||
break
|
||||
case 'number':
|
||||
text = text.toLocaleString()
|
||||
break
|
||||
}
|
||||
return (
|
||||
<div key={key} className={styles.infoRow}>
|
||||
<div>{title}</div>
|
||||
<div>{text}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
<hr />
|
||||
<div className={styles.title}>Regisztrált peer-ek:</div>
|
||||
<div className={styles.peerHeader}>
|
||||
<div>Név</div>
|
||||
<div>Host</div>
|
||||
<div>Utolsó szinkronizálás</div>
|
||||
</div>
|
||||
{p2pInfo.myPeers.map((peer, i) => {
|
||||
return (
|
||||
<div key={i} className={styles.peerContainer}>
|
||||
<div>{peer.name}</div>
|
||||
<div>
|
||||
<a href={`https://${peer.host}:${peer.port}`} target={'_blank'}>
|
||||
{peer.host}:{peer.port}
|
||||
</a>
|
||||
</div>
|
||||
<div>{new Date(peer.lastSync).toLocaleString()}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
44
src/pages/p2pinfo.module.css
Normal file
44
src/pages/p2pinfo.module.css
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
.container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.infoRow {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.infoRow > * {
|
||||
padding: 0px 8px;
|
||||
|
||||
}
|
||||
|
||||
.infoRow :first-child {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.infoRow :last-child {
|
||||
flex: 2;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.peerContainer, .peerHeader {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-content: center;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.peerContainer {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.peerContainer > *, .peerHeader > * {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: var(--text-color);
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
47
src/pages/validation.jsx
Normal file
47
src/pages/validation.jsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
|
||||
import Header from '../components/header'
|
||||
|
||||
import styles from './validation.module.css'
|
||||
import constants from '../constants.json'
|
||||
|
||||
function fetchValidation() {
|
||||
return new Promise((resolve) => {
|
||||
fetch(`${constants.apiUrl}validationtoken`, {
|
||||
credentials: 'include',
|
||||
})
|
||||
.then((resp) => {
|
||||
return resp.json()
|
||||
})
|
||||
.then((res) => {
|
||||
resolve(res)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export default function Validation() {
|
||||
const [token, setToken] = React.useState('')
|
||||
|
||||
useEffect(() => {
|
||||
fetchValidation().then((res) => {
|
||||
setToken(res.key)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Header title={'Validálás'} />
|
||||
<div className={'pageHeader'}>
|
||||
<h1>Validálás</h1>
|
||||
</div>
|
||||
<center>
|
||||
<div className={styles.descrip}>
|
||||
Különböző okokból kellhet, hogy bizonyítsd hogy az oldalhoz van
|
||||
hozzáférésed. Ebben az esetben ezzel a tokennel tudod: TODO: normális
|
||||
duma
|
||||
</div>
|
||||
{token && <div className={styles.tokenContainer}>{token}</div>}
|
||||
</center>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
16
src/pages/validation.module.css
Normal file
16
src/pages/validation.module.css
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
.descrip {
|
||||
color: #acabab;
|
||||
font-weight: bold;
|
||||
padding-top: 4%;
|
||||
padding-bottom: 4%;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.tokenContainer {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue