Manuals update / refactor

2025-04-01 20:23:44 +02:00 · 2021-05-15 11:12:54 +02:00 · 2021-05-15 11:12:54 +02:00 · 7ee8c376fa
commit 7ee8c376fa
parent a01761e729
4 changed files with 214 additions and 83 deletions
--- a/src/pages/script.js
+++ b/src/pages/script.js
@ -1,12 +1,38 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'

 import Head from 'next/head'
+import Link from 'next/link'

+import constants from '../constants.json'
 import ExternalLinkIcon from '../components/externalLinkIcon'

+import styles from './script.module.css'
+
+function fetchSupportedSites(from) {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}supportedSites`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((res) => {
+        resolve(res)
+      })
+  })
+}
+
 export default function Script() {
+  const [supportedSites, setSupportedSites] = useState()
+
+  useEffect(() => {
+    fetchSupportedSites().then((res) => {
+      setSupportedSites(res)
+    })
+  }, [])
+
  return (
-    <div>
+    <div className={styles.content}>
      <Head>
        <title>Script - Qmining | Frylabs.net</title>
      </Head>
@ -27,14 +53,6 @@ export default function Script() {
          <ExternalLinkIcon size={15} />
        </a>
      </div>
-      {renderManual()}
-    </div>
-  )
-}
-
-function renderManual() {
-  return (
-    <>
      <center>
        <h2 className={'subtitle'}>A userscript telepítése, és használata</h2>
      </center>
@ -43,6 +61,17 @@ function renderManual() {
          Ez a userscript Moodle/Elearnig/KMOOC tesztek megoldása során
          segítséget jelenít meg.
        </p>
+        {supportedSites && (
+          <>
+            <b>Script jelenleg a következő oldalakon működik:</b>
+            <ul>
+              {supportedSites.map((ss) => {
+                return <li key={ss}>{ss}</li>
+              })}
+            </ul>
+          </>
+        )}
+        <b>Telepítés lépései:</b>
        <ol>
          <li>
            Tölts le egy userscript futtató kiegészítőt a böngésződhöz: pl. a{' '}
@ -53,7 +82,7 @@ function renderManual() {
            >
              Tampermonkey
            </a>
-            -t.
+            -t
          </li>
          <li>
            <a
@ -65,51 +94,71 @@ function renderManual() {
            </a>{' '}
          </li>
          <li>
-            A script ezt követően udvariasan megkér, hogy hadd beszélgessen a
-            szerverrel, ezt engedélyezd neki. (Always allow domain)
+            Ha megnyitod az egyik támogatott oldalon a scriptet, akkor
+            használata előtt engedélyezned kell, hogy a szerverrel kommunikáljon
+            a script
          </li>
          <li>
-            A támogatott oldalakon a script egy apró menü ablakot jelenít meg a
-            weboldal bal alsó részén
+            Ezután a script egy apró menü ablakot jelenít meg a weboldal bal
+            alsó részén
          </li>
          <li>
-            Ezután a kitöltendő teszt oldalán a kérdésre a választ kell látnod
-            felül egy lebegő ablakban.
-          </li>
-          <li>
-            Teszt ellenőrzés oldalon a script beküldi a szervernek a helyes
-            válaszokat, az lementi az új kérdéseket, amik ezután azonnal
-            elérhetők lesznek (neked, és másoknak is)
+            Ha be vagy jelentkezve, akkor a teszt oldalakon a megoldásokat
+            kellene látnod egy felugró ablakban felül. Ha nem, akkor{' '}
+            <Link href="/faq">
+              <a>GYIK</a>
+            </Link>
+            -be olvass bele, vagy{' '}
+            <Link href="/contact">
+              <a>írj üzenetet mi nem működik</a>
+            </Link>
          </li>
        </ol>
-        Egyéb fontos tudnivalók:
+        <b>Script működési elve:</b>
        <ul>
          <li>
-            Ezt ments sokszor akár minden nap:{' '}
+            Az egész folyamat a teszt ellenőrzés oldalon kezdődik, a script
+            onnan beolvassa, és szervernek beküldi a helyes válaszokat
+          </li>
+          <li>
+            Ezután ha újból kitöltöd a tesztet, vagy ugyanazzal a kérdéssel
+            találkozol másik tesztben (pl.: zh/vizsga) akkor ott megjeleníti a
+            választ
+          </li>
+          <li>
+            Más felhasználóknak köszönhetően már valószínűleg lesznek megoldások
+            a tesztjeidhez.{' '}
+            <Link href="/allQuestions">
+              <a>Itt</a>
+            </Link>{' '}
+            meg tudod tekinteni, hogy vannak-e válaszok a tárgyadhoz.
+          </li>
+          <li>
+            Ha teszt ellenőrzés oldal nem elérhető, vagy nem egyértelműen
+            kitalálható a helyes válasz, akkor a script nem tud mit csinálni,
+            nem ment le semmit
+          </li>
+        </ul>
+        <b>Egyéb fontos tudnivalók:</b>
+        <ul>
+          <li>
+            <Link href="/allQuestions">
+              <a>Itt elérhető online az összes kérdés</a>
+            </Link>{' '}
+            ha esetleg a script valamiért nem működne.
+          </li>
+          <li>
            <a
              href="http://qmining.frylabs.net/allqr.txt"
              target="_blank"
              rel="noreferrer"
            >
-              {' '}
-              Összes kérdés TXT
+              Itt megtalálható az összes kérdés letölthető TXT változatban
            </a>{' '}
-            (az összes összegyűjtött kérdés, ha elszállna a szerver)
-          </li>
-          <li>
-            Az{' '}
-            <a href="/allQuestions" rel="noreferrer">
-              összes kérdés oldal
-            </a>{' '}
-            az oldal, ahol manuálisan tudsz keresni, ha valami gáz lenne a
-            scripttel.
+            ha esetleg nem lenne elérhető a szerver, vagy bármi hiba történne
          </li>
        </ul>
-        <div>
-          Ha útközben elakadsz, vagy hibát észlelsz, akkor oldalt a Kapcsolat
-          résznél sok elérhetőséget találsz, amin segítséget kérhetsz.
-        </div>
      </div>
-    </>
+    </div>
  )
 }