From d0a48513e9789de9c17344f37d27bc8638b0051d Mon Sep 17 00:00:00 2001 From: MrFry Date: Sat, 7 Mar 2020 08:09:01 +0100 Subject: [PATCH] Initial commit --- package.json | 22 +++ src/components/AllQuestions/AllQuestions.css | 30 +++++ src/components/AllQuestions/AllQuestions.js | 100 ++++++++++++++ src/components/AllQuestions/index.js | 1 + src/components/Feedback/Feedback.css | 0 src/components/Feedback/Feedback.js | 14 ++ src/components/Feedback/index.js | 1 + src/components/HomeTab/HomeTab.css | 3 + src/components/HomeTab/HomeTab.js | 30 +++++ src/components/HomeTab/index.js | 1 + src/components/HomeTab/links.json | 18 +++ .../LoadingIndicator/LoadingIndicator.css | 10 ++ .../LoadingIndicator/LoadingIndicator.js | 14 ++ src/components/LoadingIndicator/index.js | 1 + src/components/Manual/Manual.css | 0 src/components/Manual/Manual.js | 49 +++++++ src/components/Manual/index.js | 1 + src/components/Question/Question.css | 22 +++ src/components/Question/Question.js | 34 +++++ src/components/Question/index.js | 1 + src/components/Subject/Subject.css | 0 src/components/Subject/Subject.js | 31 +++++ src/components/Subject/index.js | 1 + .../UserQuestions/UserQuestions.css | 28 ++++ src/components/UserQuestions/UserQuestions.js | 66 +++++++++ src/components/UserQuestions/index.js | 1 + src/pages/Home.css | 118 ++++++++++++++++ src/pages/Home.js | 127 ++++++++++++++++++ 28 files changed, 724 insertions(+) create mode 100644 package.json create mode 100644 src/components/AllQuestions/AllQuestions.css create mode 100644 src/components/AllQuestions/AllQuestions.js create mode 100644 src/components/AllQuestions/index.js create mode 100644 src/components/Feedback/Feedback.css create mode 100644 src/components/Feedback/Feedback.js create mode 100644 src/components/Feedback/index.js create mode 100644 src/components/HomeTab/HomeTab.css create mode 100644 src/components/HomeTab/HomeTab.js create mode 100644 src/components/HomeTab/index.js create mode 100644 src/components/HomeTab/links.json create mode 100644 src/components/LoadingIndicator/LoadingIndicator.css create mode 100644 src/components/LoadingIndicator/LoadingIndicator.js create mode 100644 src/components/LoadingIndicator/index.js create mode 100644 src/components/Manual/Manual.css create mode 100644 src/components/Manual/Manual.js create mode 100644 src/components/Manual/index.js create mode 100644 src/components/Question/Question.css create mode 100644 src/components/Question/Question.js create mode 100644 src/components/Question/index.js create mode 100644 src/components/Subject/Subject.css create mode 100644 src/components/Subject/Subject.js create mode 100644 src/components/Subject/index.js create mode 100644 src/components/UserQuestions/UserQuestions.css create mode 100644 src/components/UserQuestions/UserQuestions.js create mode 100644 src/components/UserQuestions/index.js create mode 100644 src/pages/Home.css create mode 100644 src/pages/Home.js diff --git a/package.json b/package.json new file mode 100644 index 0000000..325b954 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "nextClient", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "next": "^9.2.2", + "react": "^16.13.0", + "react-dom": "^16.13.0" + }, + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + } +} diff --git a/src/components/AllQuestions/AllQuestions.css b/src/components/AllQuestions/AllQuestions.css new file mode 100644 index 0000000..39f7301 --- /dev/null +++ b/src/components/AllQuestions/AllQuestions.css @@ -0,0 +1,30 @@ +.subjectSelector { + overflow: scroll; + height: 200px; + margin: 10px; +} + +.subjItem { + font-size: 18px; + padding: 3px; + cursor: pointer; +} + +.activeSubjItem { + background-color: var(--text-color); + color: black; +} + +.searchBar { + margin: 10px; + width: 100%; + color: white; + background-color: #212127; + border: none; + font-size: 18px; +} + +.subjItem:hover:not(.activeSubjItem) { + background-color: #555; + color: white; +} diff --git a/src/components/AllQuestions/AllQuestions.js b/src/components/AllQuestions/AllQuestions.js new file mode 100644 index 0000000..8e93526 --- /dev/null +++ b/src/components/AllQuestions/AllQuestions.js @@ -0,0 +1,100 @@ +import React, { PureComponent } from 'react' + +import LoadingIndicator from '../LoadingIndicator' +import Subject from '../../components/Subject' + +import constants from '../../constants.json' +import './AllQuestions.css' + +class AllQuestions extends PureComponent { + constructor (props) { + super(props) + + this.state = { + loaded: false, + activeSubjName: '', + searchTerm: '' + } + + console.info('Fetching data') + fetch(`${constants.serverUrl}data.json`) // eslint-disable-line + .then((resp) => { + return resp.json() + }) + .then((data) => { + this.data = data + this.setState({ + loaded: true + }) + }) + } + + onSubjSelect (name) { + this.setState({ + activeSubjName: name + }) + } + + searchBarOnChange (e) { + let text = e.target.value + this.setState({ + searchTerm: text + }) + } + + render () { + const { loaded, activeSubjName, searchTerm } = this.state + + if (loaded) { + let currSubj = this.data.Subjects.find((subj) => { + return subj.Name === activeSubjName + }) + + return ( +
+
+ +
+
+ {this.data.Subjects.map((subj, i) => { + if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) { + return null + } + + return ( +
this.onSubjSelect(subj.Name)} + > + {subj.Name} +
+ ) + })} +
+
+
+ +
+
+ ) + } else { + return ( + + ) + } + } +} + +export default AllQuestions diff --git a/src/components/AllQuestions/index.js b/src/components/AllQuestions/index.js new file mode 100644 index 0000000..a9b9d03 --- /dev/null +++ b/src/components/AllQuestions/index.js @@ -0,0 +1 @@ +export { default } from './AllQuestions' diff --git a/src/components/Feedback/Feedback.css b/src/components/Feedback/Feedback.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js new file mode 100644 index 0000000..03f8c33 --- /dev/null +++ b/src/components/Feedback/Feedback.js @@ -0,0 +1,14 @@ +import React, { PureComponent } from 'react' +import './Feedback.css' + +class Feedback extends PureComponent { + render () { + return ( +
+ hello Feedback +
+ ) + } +} + +export default Feedback diff --git a/src/components/Feedback/index.js b/src/components/Feedback/index.js new file mode 100644 index 0000000..1367d36 --- /dev/null +++ b/src/components/Feedback/index.js @@ -0,0 +1 @@ +export { default } from './Feedback' diff --git a/src/components/HomeTab/HomeTab.css b/src/components/HomeTab/HomeTab.css new file mode 100644 index 0000000..8de4852 --- /dev/null +++ b/src/components/HomeTab/HomeTab.css @@ -0,0 +1,3 @@ +.link { + margin: 10px; +} diff --git a/src/components/HomeTab/HomeTab.js b/src/components/HomeTab/HomeTab.js new file mode 100644 index 0000000..1e2d0de --- /dev/null +++ b/src/components/HomeTab/HomeTab.js @@ -0,0 +1,30 @@ +import React, { PureComponent } from 'react' +import './HomeTab.css' + +import links from './links.json' + +class HomeTab extends PureComponent { + render () { + return ( +
+ {Object.keys(links).map((key) => { + let link = links[key] + return ( +
+ + {link.text} + +
+ ) + })} +
+ ) + } +} + +export default HomeTab diff --git a/src/components/HomeTab/index.js b/src/components/HomeTab/index.js new file mode 100644 index 0000000..db71c1e --- /dev/null +++ b/src/components/HomeTab/index.js @@ -0,0 +1 @@ +export { default } from './HomeTab' diff --git a/src/components/HomeTab/links.json b/src/components/HomeTab/links.json new file mode 100644 index 0000000..85e0ca7 --- /dev/null +++ b/src/components/HomeTab/links.json @@ -0,0 +1,18 @@ +{ + "install": { + "href": "/install", + "text": "Install" + }, + "server": { + "href": "/servergit", + "text": "Szerver repó" + }, + "client": { + "href": "/scriptgit", + "text": "Script git" + }, + "classes": { + "href": "/classesgit", + "text": "Classes git" + } +} diff --git a/src/components/LoadingIndicator/LoadingIndicator.css b/src/components/LoadingIndicator/LoadingIndicator.css new file mode 100644 index 0000000..4effd49 --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.css @@ -0,0 +1,10 @@ +.loadingindicator { + position: fixed; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + + color: #fff; + font-size: 30px; +} diff --git a/src/components/LoadingIndicator/LoadingIndicator.js b/src/components/LoadingIndicator/LoadingIndicator.js new file mode 100644 index 0000000..a0fd2b2 --- /dev/null +++ b/src/components/LoadingIndicator/LoadingIndicator.js @@ -0,0 +1,14 @@ +import React, { PureComponent } from 'react' +import './LoadingIndicator.css' + +class LoadingIndicator extends PureComponent { + render () { + return ( +
+ Loading... +
+ ) + } +} + +export default LoadingIndicator diff --git a/src/components/LoadingIndicator/index.js b/src/components/LoadingIndicator/index.js new file mode 100644 index 0000000..467f28d --- /dev/null +++ b/src/components/LoadingIndicator/index.js @@ -0,0 +1 @@ +export { default } from './LoadingIndicator' diff --git a/src/components/Manual/Manual.css b/src/components/Manual/Manual.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Manual/Manual.js b/src/components/Manual/Manual.js new file mode 100644 index 0000000..d1e6290 --- /dev/null +++ b/src/components/Manual/Manual.js @@ -0,0 +1,49 @@ +import React, { PureComponent } from 'react' + +import LoadingIndicator from '../LoadingIndicator' + +import constants from '../../constants.json' +import './Manual.css' + +class Manual extends PureComponent { + constructor (props) { + super(props) + + this.state = { + loaded: false + } + + console.info('Fetching manual') + fetch(`${constants.serverUrl}manual`) // eslint-disable-line + .then((resp) => { + return resp.text() + }) + .then((data) => { + this.manual = { + __html: data + } + + this.setState({ + loaded: true + }) + }) + } + + render () { + const { loaded } = this.state + + if (loaded) { + return ( +
+
+
+ ) + } else { + return ( + + ) + } + } +} + +export default Manual diff --git a/src/components/Manual/index.js b/src/components/Manual/index.js new file mode 100644 index 0000000..a66ffb8 --- /dev/null +++ b/src/components/Manual/index.js @@ -0,0 +1 @@ +export { default } from './Manual' diff --git a/src/components/Question/Question.css b/src/components/Question/Question.css new file mode 100644 index 0000000..e6a891a --- /dev/null +++ b/src/components/Question/Question.css @@ -0,0 +1,22 @@ +.questionContainer { + margin: 10px; +} + +.questionContainer:hover { + background-color: var(--hoover-color); +} + +.question { + font-weight: bold; + font-size: 17px; + color: #ffffff; +} + +.answer { + font-size: 15px; +} + +.data { + font-size: 13px; + color: #a1a1a1; +} diff --git a/src/components/Question/Question.js b/src/components/Question/Question.js new file mode 100644 index 0000000..b6538f7 --- /dev/null +++ b/src/components/Question/Question.js @@ -0,0 +1,34 @@ +import React, { PureComponent } from 'react' +import './Question.css' + +class Question extends PureComponent { + render () { + const { question } = this.props + + let qdata = question.data + if (typeof qdata === 'object' && qdata.type === 'simple') { + qdata = '' + } + if (qdata) { + try { + qdata = JSON.stringify(qdata) + } catch (e) {} + } + + return ( +
+
+ {question.Q} +
+
+ {question.A} +
+
+ {qdata || null} +
+
+ ) + } +} + +export default Question diff --git a/src/components/Question/index.js b/src/components/Question/index.js new file mode 100644 index 0000000..e2308da --- /dev/null +++ b/src/components/Question/index.js @@ -0,0 +1 @@ +export { default } from './Question' diff --git a/src/components/Subject/Subject.css b/src/components/Subject/Subject.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Subject/Subject.js b/src/components/Subject/Subject.js new file mode 100644 index 0000000..6773e6b --- /dev/null +++ b/src/components/Subject/Subject.js @@ -0,0 +1,31 @@ +import React, { PureComponent } from 'react' + +import Question from '../Question' +import './Subject.css' + +class Subject extends PureComponent { + render () { + const { subj } = this.props + + if (subj) { + return ( +
+ {subj.Questions.map((question, i) => { + return ( + + ) + })} +
+ ) + } else { + return ( +
+ ) + } + } +} + +export default Subject diff --git a/src/components/Subject/index.js b/src/components/Subject/index.js new file mode 100644 index 0000000..1631708 --- /dev/null +++ b/src/components/Subject/index.js @@ -0,0 +1 @@ +export { default } from './Subject' diff --git a/src/components/UserQuestions/UserQuestions.css b/src/components/UserQuestions/UserQuestions.css new file mode 100644 index 0000000..718e479 --- /dev/null +++ b/src/components/UserQuestions/UserQuestions.css @@ -0,0 +1,28 @@ +.uquestioncontainer { + margin: 5px; +} + +.uquestioncontainer:hover { + background-color: var(--hoover-color); +} + +.uquestionscontainer { + margin: 10px; +} + +.uquestion { + font-weight: 'bold'; + font-size: 16px; + color: #fff; + margin: 5px; +} + +.uanswer { + margin: 5px; +} + +.uquestionnumber { + color: #fff; + margin: 5px; + font-size: 20px; +} diff --git a/src/components/UserQuestions/UserQuestions.js b/src/components/UserQuestions/UserQuestions.js new file mode 100644 index 0000000..4e4c157 --- /dev/null +++ b/src/components/UserQuestions/UserQuestions.js @@ -0,0 +1,66 @@ +import React, { PureComponent } from 'react' + +import LoadingIndicator from '../LoadingIndicator' + +import constants from '../../constants.json' +import './UserQuestions.css' + +class UserQuestions extends PureComponent { + constructor (props) { + super(props) + + this.state = { + loaded: false + } + + console.info('Fetching qa.json') + fetch(`${constants.serverUrl}qa.json`) // eslint-disable-line + .then((resp) => { + return resp.json() + }) + .then((data) => { + this.qa = data + + this.setState({ + loaded: true + }) + }) + } + + render () { + const { loaded } = this.state + + if (loaded) { + let questions = Object.keys(this.qa).map((key, i) => { + let q = this.qa[key] + return ( +
+
+
+ {key}: +
+
+ {q.q} +
+
+
+ {q.a} +
+
+ ) + }).reverse() + + return ( +
+ {questions} +
+ ) + } else { + return ( + + ) + } + } +} + +export default UserQuestions diff --git a/src/components/UserQuestions/index.js b/src/components/UserQuestions/index.js new file mode 100644 index 0000000..b114097 --- /dev/null +++ b/src/components/UserQuestions/index.js @@ -0,0 +1 @@ +export { default } from './UserQuestions' diff --git a/src/pages/Home.css b/src/pages/Home.css new file mode 100644 index 0000000..f1bfda0 --- /dev/null +++ b/src/pages/Home.css @@ -0,0 +1,118 @@ +body { + font: normal 14px Verdana; + color: #999999; +} + +.link { + margin: 20px; + font-size: 20px; +} + +.sidebarLink { + color: var(--text-color); + text-decoration: none; +} + +.sidebar { + margin: 0; + padding: 0; + width: 200px; + background-color: #212127; + position: fixed; + height: 100%; + overflow: auto; +} + +.sidebar a { + display: block; + color: black; + padding: 16px; + text-decoration: none; + color: var(--bright-color); +} + +.sidebar a.active { + background-color: var(--text-color); + color: black; +} + +.sidebar a:hover:not(.active) { + background-color: #555; + color: white; +} + +div.content { + margin-left: 200px; + padding: 1px 16px; +} + +.menuicon div { + height: 5px; + background-color: var(--bright-color); + margin: 0px 0; + display: none; + width: 30px; +} + +.sidebarheader { + font-size: 40px; + color: var(--bright-color); + display: flex; + text-align: center; +} + +.headercontainer { + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + position: relative; + margin: 10px; +} + +@media screen and (max-width: 700px) { + .sidebar { + width: 100%; + height: auto; + position: relative; + } + .sidebar a {float: left;} + div.content {margin-left: 0;} +} + +@media screen and (max-width: 700px) { + .menuicon div { + display: block; + margin: 6px 0; + } + + .sidebar a { + text-align: center; + float: none; + } + + .menuicon { + display: inline; + } + + .sidebaritemsconainer { + display: inline; + } + + .sidebarheader { + position: absolute; + left: 50%; + top: 50%; + transform: translateX(-50%) translateY(-50%); + } + + .codecontainer { + margin-left: 0px; + margin-right: 0px; + } + + .sitedescription { + width: 100%; + margin: 0 auto; + } +} diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..74d1b84 --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,127 @@ +import React, { PureComponent } from 'react' + +import AllQuestions from '../../components/AllQuestions' +import Manual from '../../components/Manual' +import HomeTab from '../../components/HomeTab' +import UserQuestions from '../../components/UserQuestions' +import Feedback from '../../components/Feedback' + +import constants from '../../constants.json' +import './Home.css' + +// TODO: css remove unnecesarry stuff +// TODO: home to separate component +// TODO: resizing test +// TODO: fetch data only once? + +const tabs = { + home: { + text: 'Home', + component: HomeTab + }, + allq: { + text: 'All questions', + component: AllQuestions + }, + manual: { + text: 'Manual', + component: Manual + }, + userq: { + text: 'User Questions', + component: UserQuestions + }, + feedback: { + text: 'Feedback', + component: Feedback + } +} + +class Home extends PureComponent { + constructor (props) { + super(props) + + this.state = { + menuShowing: window.innerWidth > constants.mobileWindowWidth, + currentTab: 'home' + } + } + + closeMenu () { + this.setState((oldState) => { + return { + menuShowing: !oldState.menuShowing + } + }) + } + + setActiveTab (name) { + this.setState({ + currentTab: name + }) + + if (window.innerWidth < constants.mobileWindowWidth) { + this.setState({ + menuShowing: false + }) + } + } + + renderSideBar () { + const { currentTab, menuShowing } = this.state + + return ( +
+
+ +
+
+
+ +
+ Frylabs +
+
+ { + menuShowing + ?
+ {Object.keys(tabs).map((key) => { + let tab = tabs[key] + return ( + { this.setActiveTab(key) }} + >{tab.text} + ) + })} +
+ : null + } +
+ ) + } + + renderContents () { + const { currentTab } = this.state + + let ContentComponent = tabs[currentTab].component + return ( + + ) + } + + render () { + return ( +
+ {this.renderSideBar()} +
+ {this.renderContents()} +
+
+ ) + } +} + +export default Home