From e2d304c130cca4323518fe95354d5fa3b89398c1 Mon Sep 17 00:00:00 2001 From: mrfry Date: Sun, 26 Mar 2023 19:16:56 +0200 Subject: [PATCH] removed forum, todos, added p2p info page & lots of minor changes/fixes --- .babelrc | 3 + src/components/Question.jsx | 10 +- src/components/todoStuff/todo.module.css | 7 - src/components/todoStuff/todoBoard.jsx | 59 ----- src/components/todoStuff/todoBoard.module.css | 28 --- src/components/todoStuff/todoCard.jsx | 44 ---- src/components/todoStuff/todoCard.module.css | 47 ---- src/components/todoStuff/todoRow.jsx | 44 ---- src/components/todoStuff/todoRow.module.css | 49 ---- src/components/todoStuff/todoSidebar.jsx | 111 --------- .../todoStuff/todoSidebar.module.css | 66 ----- src/components/todoStuff/todoTable.jsx | 57 ----- src/components/todoStuff/todoTable.module.css | 33 --- src/components/todoStuff/todos.jsx | 227 ------------------ src/components/todoStuff/todos.module.css | 0 src/constants.json | 8 +- src/data/tabs.json | 10 +- src/data/topBarLinks.json | 8 +- src/pages/allQuestions.jsx | 4 +- src/pages/contribute.jsx | 91 ------- src/pages/contribute.module.css | 32 --- src/pages/index.jsx | 3 +- src/pages/news.jsx | 20 -- src/pages/news.module.css | 21 -- src/pages/p2pinfo.jsx | 168 +++++++++++++ src/pages/p2pinfo.module.css | 44 ++++ src/pages/validation.jsx | 47 ++++ src/pages/validation.module.css | 16 ++ 28 files changed, 303 insertions(+), 954 deletions(-) create mode 100644 .babelrc delete mode 100644 src/components/todoStuff/todo.module.css delete mode 100644 src/components/todoStuff/todoBoard.jsx delete mode 100644 src/components/todoStuff/todoBoard.module.css delete mode 100644 src/components/todoStuff/todoCard.jsx delete mode 100644 src/components/todoStuff/todoCard.module.css delete mode 100644 src/components/todoStuff/todoRow.jsx delete mode 100644 src/components/todoStuff/todoRow.module.css delete mode 100644 src/components/todoStuff/todoSidebar.jsx delete mode 100644 src/components/todoStuff/todoSidebar.module.css delete mode 100644 src/components/todoStuff/todoTable.jsx delete mode 100644 src/components/todoStuff/todoTable.module.css delete mode 100644 src/components/todoStuff/todos.jsx delete mode 100644 src/components/todoStuff/todos.module.css delete mode 100644 src/pages/contribute.jsx delete mode 100644 src/pages/contribute.module.css delete mode 100644 src/pages/news.jsx delete mode 100644 src/pages/news.module.css create mode 100644 src/pages/p2pinfo.jsx create mode 100644 src/pages/p2pinfo.module.css create mode 100644 src/pages/validation.jsx create mode 100644 src/pages/validation.module.css diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..7dd5e9d --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-react"] +} diff --git a/src/components/Question.jsx b/src/components/Question.jsx index 3a67325..c1337f9 100644 --- a/src/components/Question.jsx +++ b/src/components/Question.jsx @@ -6,7 +6,15 @@ function highlightText(text, toHighlight) { } try { const re = new RegExp(toHighlight, 'gi') - return text.replace(re, `${toHighlight}`) + const splitText = text.split(toHighlight) + console.log(splitText) + return ( + <> + {splitText[0]} + {toHighlight} + {splitText[1]} + + ) } catch (e) { return text } diff --git a/src/components/todoStuff/todo.module.css b/src/components/todoStuff/todo.module.css deleted file mode 100644 index 3d30862..0000000 --- a/src/components/todoStuff/todo.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.groupDescription { - font-size: 16px; - padding: 4px; -} - -.todoButtons { -} diff --git a/src/components/todoStuff/todoBoard.jsx b/src/components/todoStuff/todoBoard.jsx deleted file mode 100644 index f6cc705..0000000 --- a/src/components/todoStuff/todoBoard.jsx +++ /dev/null @@ -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 ( -
-
- {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 ( -
-
{category.name}
- - {cardsToShow.length === 0 && ( -
Üres
- )} - {cardsToShow.map((card, i) => { - return ( - - ) - })} -
- ) - })} -
-
- ) -} diff --git a/src/components/todoStuff/todoBoard.module.css b/src/components/todoStuff/todoBoard.module.css deleted file mode 100644 index 4097db9..0000000 --- a/src/components/todoStuff/todoBoard.module.css +++ /dev/null @@ -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; -} diff --git a/src/components/todoStuff/todoCard.jsx b/src/components/todoStuff/todoCard.jsx deleted file mode 100644 index f783307..0000000 --- a/src/components/todoStuff/todoCard.jsx +++ /dev/null @@ -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 ( -
{ - onClick(props.cardData) - }} - > -
- {`#${id}`} - {name} -
-
- - {categories[category].name} - -
-
-
{`Szavazatok: ${votes.length}`}
-
{`Nehézség: ${points}`}
-
-
- ) -} diff --git a/src/components/todoStuff/todoCard.module.css b/src/components/todoStuff/todoCard.module.css deleted file mode 100644 index 9b9b63c..0000000 --- a/src/components/todoStuff/todoCard.module.css +++ /dev/null @@ -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; -} diff --git a/src/components/todoStuff/todoRow.jsx b/src/components/todoStuff/todoRow.jsx deleted file mode 100644 index 6c8eee2..0000000 --- a/src/components/todoStuff/todoRow.jsx +++ /dev/null @@ -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 ( -
{ - onClick(props.rowData) - }} - className={styles.row} - style={{ - border: `2px dashed ${borderColor || 'white'}`, - borderRadius: '3px', - }} - > -
{`#${id}`}
-
{name}
-
-
- {categories[category].name} -
-
-
{`Szavazatok: ${votes.length}`}
-
- ) -} diff --git a/src/components/todoStuff/todoRow.module.css b/src/components/todoStuff/todoRow.module.css deleted file mode 100644 index 472b6c8..0000000 --- a/src/components/todoStuff/todoRow.module.css +++ /dev/null @@ -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; -} diff --git a/src/components/todoStuff/todoSidebar.jsx b/src/components/todoStuff/todoSidebar.jsx deleted file mode 100644 index 3afbeca..0000000 --- a/src/components/todoStuff/todoSidebar.jsx +++ /dev/null @@ -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 ( -
-
- #{id} -
- {name} -
- - {categories[category].name} - -
-
- {group && ( -
-
Csoport:
-
- {namedGroups[group] ? namedGroups[group].name : group} -
-
- )} -
-
Nehézség:
-
{points}
-
-
-
Szavazatok:
-
{votes.length}
-
- {gitlink && ( -
-
- - Git link - -
-
- )} -
- {description && ( - <> -
- Leírás -
-
-
- - )} -
- {voteable && ( -
-
-
{ - voteOn(card) - }} - > - {votes.includes(userId) ? 'Szavazat visszavonása' : 'Szavazás'} -
-
-
- )} -
- ) -} diff --git a/src/components/todoStuff/todoSidebar.module.css b/src/components/todoStuff/todoSidebar.module.css deleted file mode 100644 index 9566a59..0000000 --- a/src/components/todoStuff/todoSidebar.module.css +++ /dev/null @@ -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; -} diff --git a/src/components/todoStuff/todoTable.jsx b/src/components/todoStuff/todoTable.jsx deleted file mode 100644 index 4882627..0000000 --- a/src/components/todoStuff/todoTable.jsx +++ /dev/null @@ -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 ( -
-
- {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 ( -
-
{table.name}
-
- {tableCardsToShow.length === 0 && ( -
Üres
- )} - {tableCardsToShow.map((card, i) => { - return ( - - ) - })} -
-
- ) - })} -
-
- ) -} diff --git a/src/components/todoStuff/todoTable.module.css b/src/components/todoStuff/todoTable.module.css deleted file mode 100644 index 23f933d..0000000 --- a/src/components/todoStuff/todoTable.module.css +++ /dev/null @@ -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; -} diff --git a/src/components/todoStuff/todos.jsx b/src/components/todoStuff/todos.jsx deleted file mode 100644 index 0fbf303..0000000 --- a/src/components/todoStuff/todos.jsx +++ /dev/null @@ -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 - } - - 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 ( - <> -
- {groups.map((group) => { - const namedGroup = namedGroups[group] - const shouldSkip = activeGroups && !activeGroups.includes(group) - - if (shouldSkip) { - return null - } - - return ( -
{ - setSelectedGroup(group) - }} - > - {namedGroup ? namedGroup.name : group} -
- ) - })} -
{ - setSelectedGroup('uncat') - }} - > - {'Kategorizálatlan'} -
-
{ - setSelectedGroup(null) - }} - > - {'Összes'} -
-
- {sg && sg.description ? ( -
{sg.description}
- ) : null} - - ) - } - - return ( -
- {sidebarCard && ( - { - setSidebarCard(null) - }} - > - { - 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, - }) - }) - }} - /> - - )} - {renderGrouper()} -
- - -
-
- ) -} diff --git a/src/components/todoStuff/todos.module.css b/src/components/todoStuff/todos.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants.json b/src/constants.json index 44a21ed..60884de 100644 --- a/src/constants.json +++ b/src/constants.json @@ -1,8 +1,8 @@ { - "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"], - "videoExts" : ["mp4", "mkv", "webm"] + "imageExts": ["gif", "png", "jpeg", "jpg"], + "videoExts": ["mp4", "mkv", "webm"] } diff --git a/src/data/tabs.json b/src/data/tabs.json index 7ebbabd..cdd986f 100644 --- a/src/data/tabs.json +++ b/src/data/tabs.json @@ -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ó" } } diff --git a/src/data/topBarLinks.json b/src/data/topBarLinks.json index 9e3eb7c..7bcf712 100644 --- a/src/data/topBarLinks.json +++ b/src/data/topBarLinks.json @@ -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" diff --git a/src/pages/allQuestions.jsx b/src/pages/allQuestions.jsx index 946d570..ea36d19 100644 --- a/src/pages/allQuestions.jsx +++ b/src/pages/allQuestions.jsx @@ -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) diff --git a/src/pages/contribute.jsx b/src/pages/contribute.jsx deleted file mode 100644 index 375edaa..0000000 --- a/src/pages/contribute.jsx +++ /dev/null @@ -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 ( -
-
-
-

Teendők

-
-
-

- Ezen az oldalon új ötleteket adhatsz hozzá megvalósításra a teendők - listájához. -

-

- Emellet ha hozzáértő vagy, adott feladatok megvalósításában is - segíthetsz. (lásd: lentebb) -
Ha egy kártyára kattintasz, a megjelenő ablakban láthatod annak - részleteit, illetve{' '} - - szavazhatsz - {' '} - 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) -
A kurzort az oszlopcímekre mozgatva, további információkat - olvashatsz a kategóriák tulajdonságairól. -

-
-
-
{ - setShowFeedback(true) - }} - > - Új feladat -
-
-
-
- -
-
-
-
- Git repos -
-
- {Object.keys(repos.repos).map((key) => { - let repo = repos.repos[key] - return ( - - ) - })} -
-
- -
-
- {showFeedback && ( - { - setShowFeedback(false) - }} - > - - - )} -
- ) -} diff --git a/src/pages/contribute.module.css b/src/pages/contribute.module.css deleted file mode 100644 index 99f0cb8..0000000 --- a/src/pages/contribute.module.css +++ /dev/null @@ -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%; -} diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 6b7501d..8c4f74c 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -25,12 +25,11 @@ export default function UserForum({
)} ) diff --git a/src/pages/news.jsx b/src/pages/news.jsx deleted file mode 100644 index ccb5e74..0000000 --- a/src/pages/news.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react' - -import Forum from '../components/forum' - -export default function Index({ - router, - globalData, - globalState, - setGlobalState, -}) { - return ( - - ) -} diff --git a/src/pages/news.module.css b/src/pages/news.module.css deleted file mode 100644 index 8a5e7d3..0000000 --- a/src/pages/news.module.css +++ /dev/null @@ -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; -} diff --git a/src/pages/p2pinfo.jsx b/src/pages/p2pinfo.jsx new file mode 100644 index 0000000..cfff76f --- /dev/null +++ b/src/pages/p2pinfo.jsx @@ -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 + + return ( + <> +
+

Peer to peer 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 +
+
Szerver P2P információja:
+
+ {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 ( +
+
{title}
+
{text}
+
+ ) + })} +
+
Regisztrált peer-ek:
+
+
Név
+
Host
+
Utolsó szinkronizálás
+
+ {p2pInfo.myPeers.map((peer, i) => { + return ( +
+
{peer.name}
+ +
{new Date(peer.lastSync).toLocaleString()}
+
+ ) + })} +
+ + ) +} diff --git a/src/pages/p2pinfo.module.css b/src/pages/p2pinfo.module.css new file mode 100644 index 0000000..7e87a88 --- /dev/null +++ b/src/pages/p2pinfo.module.css @@ -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; +} diff --git a/src/pages/validation.jsx b/src/pages/validation.jsx new file mode 100644 index 0000000..852a193 --- /dev/null +++ b/src/pages/validation.jsx @@ -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 ( +
+
+
+

Validálás

+
+
+
+ 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 +
+ {token &&
{token}
} +
+
+ ) +} diff --git a/src/pages/validation.module.css b/src/pages/validation.module.css new file mode 100644 index 0000000..04d3b45 --- /dev/null +++ b/src/pages/validation.module.css @@ -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; +}