npm packages update

src/pages/script.jsx

@@ -0,0 +1,165 @@
+import React from 'react'
+import { useQuery } from 'react-query'
+
+import Header from '../components/header'
+import Link from 'next/link'
+
+import constants from '../constants.json'
+import ExternalLinkIcon from '../components/externalLinkIcon'
+
+import styles from './script.module.css'
+
+function fetchSupportedSites() {
+  return new Promise((resolve) => {
+    fetch(`${constants.apiUrl}supportedSites`, {
+      credentials: 'include',
+    })
+      .then((resp) => {
+        return resp.json()
+      })
+      .then((res) => {
+        resolve(res)
+      })
+  })
+}
+
+export default function Script() {
+  const { data: supportedSites } = useQuery('supportedSites', () =>
+    fetchSupportedSites()
+  )
+
+  return (
+    <div className={styles.content}>
+      <Header title={'Script'} />
+      <div className={'pageHeader'}>
+        <h1>Script</h1>
+      </div>
+      <div className={'buttonContainer'}>
+        <a
+          href="https://www.tampermonkey.net/"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Ajánlott userscript kezelő bővítmény
+          <ExternalLinkIcon size={15} />
+        </a>
+        <a href="/install">
+          Script telepítése
+          <ExternalLinkIcon size={15} />
+        </a>
+      </div>
+      <div>
+        <p>
+          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>
+              })}
+              <li>
+                <Link href="/faq?tab=addsite">
+                  új oldal hozzáadásának menete itt
+                </Link>
+              </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{' '}
+            <a
+              href="https://www.tampermonkey.net/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Tampermonkey
+            </a>
+            -t
+          </li>
+          <li>
+            <a
+              href="http://qmining.frylabs.net/install"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Kattints ide hogy felrakd a scriptet
+            </a>{' '}
+          </li>
+          <li>
+            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>
+            Ezután a script egy apró menü ablakot jelenít meg a weboldal bal
+            alsó részén
+          </li>
+          <li>
+            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">
+              GYIK
+            </Link>
+            -be olvass bele, vagy{' '}
+            <Link href="/contact">
+              írj üzenetet mi nem működik
+            </Link>
+          </li>
+        </ol>
+        <b>Példa felugró ablakokra:</b>
+        <ul>
+          <li>
+            Menü bejelentkezés előtt / után:
+            <br />
+            <img src="img/scriptimg/script-2.jpg" alt="img" />
+            <img src="img/scriptimg/script-1.jpg" alt="img" />
+          </li>
+          <li>
+            Teszt közben felugró ablak a kérdéssel és válasszal:
+            <br />
+            <img src="img/scriptimg/script-3.jpg" alt="img" />
+          </li>
+        </ul>
+        <b>Amiket az ablakokkal lehet csinálni:</b>
+        <ul>
+          <li>
+            Görgővel lehet az ablakok áttetszőségét állítani (menü / felugró
+            ablakét külön)
+          </li>
+          <li>
+            Az felső üzenet ablakot meg lehet fogni és mozgatni a szélénél (ahol
+            a kurzor átvált)
+          </li>
+          <li>
+            Jobb felső X gombbal be lehet zárni az ablakot, illetve ahol lehet
+            mozgatni ott középső egér gombra be is zárul{' '}
+          </li>
+        </ul>
+        <b>Egyéb fontos tudnivalók:</b>
+        <ul>
+          <li>
+            <Link href="/allQuestions">
+              Itt elérhető online az összes kérdés
+            </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"
+            >
+              Itt megtalálható az összes kérdés letölthető TXT változatban
+            </a>{' '}
+            ha esetleg nem lenne elérhető a szerver, vagy bármi hiba történne
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}