Added manual and all question page

src/components/Subject.js

@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 
-import Question from '../Question'
+import Question from './Question.js'
 
 class Subject extends PureComponent {
   render () {

src/components/SubjectSelector.js

@@ -0,0 +1,26 @@
+export default function SubjectSelector (props) {
+  const { activeSubjName, searchTerm, data, onSubjSelect } = props
+
+  return (
+    <div className='subjectSelector'>
+      {data.Subjects.map((subj, i) => {
+        if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
+          return null
+        }
+
+        return (
+          <div
+            className={activeSubjName === subj.Name
+              ? 'subjItem activeSubjItem'
+              : 'subjItem'
+            }
+            key={i}
+            onClick={() => onSubjSelect(subj.Name)}
+          >
+            {subj.Name}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

src/components/layout.js

@@ -1,4 +1,9 @@
+import Link from 'next/link'
+
+// TODO: activelink prop to set link to active
 export default function Layout (props) {
+  const { currPageName } = props
+
   return (
     <div>
       <div className='sidebar'>
@@ -12,12 +17,23 @@ export default function Layout (props) {
             Frylabs
           </div>
         </div>
+        <Link href='/' >
           <a
-          className={'active'}
-          onClick={() => { console.log('a') }}
-        >aaaaaaaaaa</a>
+            className={currPageName === 'index' ? 'active' : ''}
+          >home</a>
+        </Link>
+        <Link href='/manual' >
+          <a
+            className={currPageName === 'manual' ? 'active' : ''}
+          >manual</a>
+        </Link>
+        <Link href='/allQuestions' >
+          <a
+            className={currPageName === 'allQuestions' ? 'active' : ''}
+          >manual</a>
+        </Link>
       </div>
-      <div>
+      <div className='content'>
         {props.children}
       </div>
     </div>

src/defaultStyles.css

@@ -48,7 +48,7 @@ body {
   color: white;
 }
 
-div.content {
+.content {
   margin-left: 200px;
   padding: 1px 16px;
 }

src/pages/allQuestions.js

@@ -1,9 +1,12 @@
 import React, { PureComponent } from 'react'
+import fetch from 'unfetch'
 
-import LoadingIndicator from '../LoadingIndicator'
-import Subject from '../../components/Subject'
+import LoadingIndicator from '../components/LoadingIndicator.js'
+import Subject from '../components/Subject.js'
+import SubjectSelector from '../components/SubjectSelector.js'
 
-import constants from '../../constants.json'
+import constants from '../constants.json'
+import Layout from '../components/layout'
 
 class AllQuestions extends PureComponent {
   constructor (props) {
@@ -50,6 +53,7 @@ class AllQuestions extends PureComponent {
       })
 
       return (
+        <Layout currPageName='allQuestions' >
           <div>
             <div>
               <input
@@ -60,26 +64,14 @@ class AllQuestions extends PureComponent {
                 onChange={this.searchBarOnChange.bind(this)}
               />
             </div>
-          <div className='subjectSelector'>
-            {this.data.Subjects.map((subj, i) => {
-              if (!subj.Name.toLowerCase().includes(searchTerm.toLowerCase())) {
-                return null
-              }
 
-              return (
-                <div
-                  className={activeSubjName === subj.Name
-                    ? 'subjItem activeSubjItem'
-                    : 'subjItem'
-                  }
-                  key={i}
-                  onClick={() => this.onSubjSelect(subj.Name)}
-                >
-                  {subj.Name}
-                </div>
-              )
-            })}
-          </div>
+            <SubjectSelector
+              data={this.data}
+              activeSubjName={activeSubjName}
+              searchTerm={searchTerm}
+              onSubjSelect={this.onSubjSelect.bind(this)}
+            />
+
             <hr />
             <div>
               <Subject
@@ -87,10 +79,13 @@ class AllQuestions extends PureComponent {
               />
             </div>
           </div>
+        </Layout>
       )
     } else {
       return (
+        <Layout currPageName='allQuestions' >
           <LoadingIndicator />
+        </Layout>
       )
     }
   }

src/pages/index.js

@@ -12,7 +12,7 @@ import links from '../data/links.json'
 
 export default function Index (props) {
   return (
-    <Layout>
+    <Layout currPageName='index'>
       <div>
         {Object.keys(links).map((key) => {
           let link = links[key]

src/pages/manual.js

@@ -1,49 +1,178 @@
-import React, { PureComponent } from 'react'
-import fetch from 'unfetch'
+import Layout from '../components/layout'
 
-import LoadingIndicator from '../components/LoadingIndicator'
-
-import constants from '../constants.json'
-
-class Manual extends PureComponent {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      loaded: false
+export default function Manual (props) {
+  return (
+    <Layout currPageName='manual' >
+      {renderMaual()}
+    </Layout>
+  )
 }
 
-    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) {
+function renderMaual () {
   return (
     <div>
-          <div dangerouslySetInnerHTML={this.manual} />
+      <center>
+        <h1>Moodle/Elearnig/KMOOC manual</h1>
+      </center>
+      <center>
+    Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során segítséget jelenít meg.
+      </center>
+      <p />
+      <b>A válasz ablakban jobb felül lévő százalék jelzi, hogy mekkora eséllyel jó a megoldás. Ez
+sokszor jó viszonyítás, de semmi sem biztos! Bármikor előfordulhat, hogy nem jó a
+megjelenített válasz! Ezért csak saját felelősségedre használd!</b> Sok kikerülhetetlen
+hibalehetőség van, amit egyszerű nem lehet scriptben lekezelni (Pl rosszul megadott kérdés
+tanár részéről). Kézzel is lehet keresni a elmentett kérdések között. Ezért mindig
+legyen egy letöltött verziód a kérdésekről, mert nem 100% hogy mindég elérhető a szerver!
+Továbbá ha a moodle oldalán a DOM megváltozik, a script nem fog működni! Ez nem annyira
+gyakori, de bármikor megtörténhet! Érdemes nem kikapcsolni a tampermonkey-ban a userscript
+frissítést. Ez nem windows update, itt tényleg hibajavítások jönnek ki. Hiba, észrevétel
+esetén : <a target='_blank' href='https://qmining.frylabs.net'>Script Feedback</a> (ezt
+gyakran még aznap megnézem.)
+      <p />
+      <p />
+      <b>Továbbá ez a userscript HTTP requestekket küldhet egy szerver felé, ahova az összes megoldott
+tesztjeid kérdéseit és (helyes)válaszait feltölti! Ezzel garantálja, hogy neked, és mindenki
+másnak a legfrissebb adatok állnak rendelkezésre.</b>
+      <center>
+
+        <h3>Tartalomjegyzék</h3>
+      </center>
+      <hr />
+      <ul>
+        <li>
+          <b>Használat</b> - Ez szuper fontos, elsőnek olvasd el
+        </li>
+        <li>
+          <b>Eddigi teszt kérdések</b> - Itt elérhető az eddigi összes ismert teszt
+        kérdés-válaszai
+        </li>
+        <li>
+          <b>Gyakran előforduló kérdések</b> - Ha itt nincs kérdésed, akkor <a
+            href='http://qmining.frylabs.net'>itt</a> tedd fel!
+        </li>
+        <li>
+          <b>Adat egyszerűsítés</b> - Ha túl sok egyforma kérdésed van ;)
+        </li>
+        <li>
+          <b>Other stuff</b>
+        </li>
+      </ul>
+      <center>
+        <h3>Használat</h3>
+      </center>
+      <hr />
+      <table style={{ tableLayout: 'fixed', verticalAlign: 'top', width: '100%' }}>
+        <td>
+          <p /> Először is tölts le egy userscript futtató kiegészítőt a böngésződhöz. Én <a
+            href='https://www.tampermonkey.net/'>Tampermonkeyt</a> használok, és ezzel van tesztelve a
+        userscript is, ezért ez ajánlott. Más is működhet (violentmonkey, etc), de az nem garantált.
+        Majd a <a href='http://qmining.frylabs.net/install'>weboldalról</a> egy kattintással elvileg
+        le tudod tölteni a scriptet, és elvileg kész is. Script majd udvariasan megkéri, hogy
+        hagy beszélgessen a szerverrel, mert mással nem tud.
+          <p />
+          <p /> Teszt közben még több dolog történhet:
+          <p />
+          <ul>
+            <li><b>Nem jó kérdésre ad választ a script:</b> Ilyenkor az van, hogy nincs meg a
+              kérdés, vagy több hasonló kérdés/válasz van. Ilyenkor a jobbra/balra gombbal
+              váltogathatsz azok a kérdés/válasz combók közül, amit talált a script</li>
+
+            <li><b>Több teszt kérdés van egy oldalon:</b> Fel le gombbal váltogathatsz a kérdések között.
+            Ilyenkor is működik az előbb említett funkció. Az indexek, amit kiír a bal felső sarokban:
+            aktuális kérdés száma / aktuális találat száma.</li>
+
+            <li><b>Nem jelenik meg semmi, vagy nem működik a script:</b> Megesik az ilyesmi. Ha
+            a webszerver még elérhető akkor ott meg bírod nézni a kérdéseket, és ott lehet
+            keresgélni Ctrl + F -el Ha az sincs, akkor lehet hogy jól jön ha van egy
+            lementett kérdés gyűjteményed.</li>
+          </ul>
+
+          <p /> Egyéb funkciók:
+          <ul>
+            <li>
+                Ha esetleg videókat nézel, akkor spaceval lehet play/pausolni, és jobbra/balra
+                gombbal ugrani a videóban.
+            </li>
+            <li>
+                Ha bármikor nem kell a script, akkor a menü gomb alatt bekapcsolhatod a passzív
+                módot, ami nem piszkálja a szervert. Vagy kikapcsolhatod magát a scriptet
+                tampermonkey-ban. Ha bármiért is el akarod tüntetni a következő oldalig az éppen
+                megjelenő script ablakot, akkor középső egér gombbal kattintva rajta ezt
+                megteheted.
+            </li>
+          </ul>
+
+          <p /> <b>Ha 2.0 előttről jöttél, és rettenetesen össze vagy zavarodva:</b>
+          <p />
+        2.0 előtt a script az egész adatbázist leszedte, beolvasta, és onnan keresett. Ez a
+        keresés most szerver oldalon van megvalósítva, és a script csak a kérdést, hozzá tartózó
+        egyéb infót (pl kép nevek) és a tárgy nevét küldi el szervernek. Ezután az visszaküldi a
+        helyes válaszokat.
+
+        </td>
+        <td width='20%'>
+          <img style={{ maxWidth: '100%', maxHeight: '100%' }} src='img/rtfm.jpg' alt='img' />
+        </td>
+      </table>
+      <center>
+        <h3>Eddigi teszt kérdések:</h3>
+      </center>
+      <hr />
+      <a target='_blank' href='http://qmining.frylabs.net/legacy'><b>Eddigi összes kérdés</b></a>
+Továbbá ez még arra jó, hogy ha valamiért bugos a script, akkor itt tudsz ctrl-f el nézegetni,
+vagy ha lemented az összes kérdést, akkor még akkor is biztonságban vagy, ha netán leáll a
+szerver, vagy elmegy a neted. Bár úgy nehezen moodlezel, de mind1
+
+      <center>
+        <h3>Gyakran előforduló kérdések</h3>
+      </center>
+      <hr />
+      <ul>
+        <li>
+          <b>1. Olyan helyeken fut le a script, ahol nem kellene, vagy zavar</b>
+          <br /> Tampermonkey bővitmény ikon -> click -> scriptet kapcsold ki. Csak ne felejtsd
+        visszakapcsolni ;) Meg passzív módot is bekapcsolhatod a menü gomb alatt.
+        </li>
+        <p />
+        <li>
+          <b>2. Túl nagy a kérdést és a választ megjelenítő ablak, nem tudok a válaszra kattintani</b>
+          <br /> Zommolj ki egy kicsit, vagy kapcsold ki addig a scriptet. Továbbá középső
+        egérgombra kattintva rá el bírod tüntetni az ablakot, amíg újra nem töltöd az oldalt,
+        vagy másikra ugrasz.
+        </li>
+        <p />
+        <li>
+          <b>4. Mi ez a ... ?</b>
+          <br />
+          <img height='40%' src='img/imgq.jpg' alt='img' />
+        </li>
+        <li>
+          <b>5.</b>
+          <br />
+          <img src='img/6.png' alt='img' />
+        </li>
+        <p />
+        <li>
+      Egyéb:<br />
+          <a target='_blank' href='http://qmining.frylabs.net/'>észrevétel</a>
+        </li>
+      </ul>
+      <hr />
+Jogosultságok:
+      <br />GM_openInTab: help megnyitása új lapon, GM_xmlhttpRequest: online adatbázishoz.  GM_info: a
+scriptről információ, a verzióváltozás érzékeléséhez. GM_getValue/ GM_setValue: oldal
+bezárásakor megmaradó változók kezelése. Előző verzió tárolására, ugyanúgy verzióváltozás
+érzékeléséhez, néhány beállítás, illetve hogy melyik tárgyakból keressen kérdéseket. Ezek
+függvények, és a sciptben néhol meg vannak hívva, keresd meg.
+      <p /> Elküldött adatok online módban: Minden teszt végén az összes kérdés, és rá a moodle szerint
+helyesnek vélt válaszok. Fogadott adatok: az összes eddig ismert moodle kérdés
+      <hr />
+      <center>
+        <h1>
+          <a target='_blank' href='http://qmining.frylabs.net/'>Weboldal</a>
+        </h1>
+      </center>
     </div>
   )
-    } else {
-      return (
-        <LoadingIndicator />
-      )
 }
-  }
-}
-
-export default Manual