Keresés

Keresendő kifejezés:

Toplista

Toplista
  • betöltés...

Segítség!

Ahhoz, hogy mások kérdéseit és válaszait megtekinthesd, nem kell beregisztrálnod, azonban saját kérdés kiírásához ez szükséges!

HTML/javascript

93
Jelenleg 1 felhasználó nézi ezt a kérdést.
0
Felsőoktatás / Informatika

Válaszok

1
Ennyire jutottam. Az adatmódosítások hiányoznak.

<!DOCTYPE html>

<html lang=hu>

<head>
<meta charset=UTF-8>
<title>Használó</title>

<style>
table, tr, th, td {
    border-style: solid;
    border-width: thin;
    border-color: silver;
}

col:first-of-type {
    width: 10px;
}
col:nth-of-type(2) {
    width: 100px;
}
col:nth-of-type(3) {
    width: 500px;
}
col:nth-of-type(4) {
    width: 50px;
}
col:last-of-type {
    width: 100px;
}

td#lapozas input {
    width: 2em;
}

dl#nevjegy {
    display: none;
    width: 600px;
    min-height: 100px;
    border-style: double;
    border-width: 3px;
    border-color: silver;
    box-shadow: gray 10px 10px 5px;
    padding: 10px;
    margin-top: 50px;
}

dl#nevjegy dt {
    font-weight: bold;
}

dl#nevjegy dd {
    margin-bottom: 5px;
}

dl#nevjegy dd.kep {
    float: right;
}

div#uzenet {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: silver;
    padding: 20px;
    box-shadow: silver 0 10px 10px;
}
</style>

<script>

const cim = 'https://reqres.in/api'
let tablazat, nevjegy, uzenet
let lapszam, lapdarab, laphossz, adatdarab
let uzenetIdo

function indulas()
{
    if (! (tablazat = document.getElementById('tablazat')))
        return

    nevjegy = document.getElementById('nevjegy')
    uzenet = document.getElementById('uzenet')
    lapszam = document.getElementById('lapszam')
    lapdarab = document.getElementById('lapdarab')
    laphossz = document.getElementById('laphossz')
    adatdarab = document.getElementById('adatdarab')

    lapszam.addEventListener('change', ujratoltes)
    laphossz.addEventListener('change', ujratoltes)

    betoltes()
}

function betoltes(parameter = null)
{
    kiir('Betöltés folyamatban', true)

    let http = new XMLHttpRequest()
    http.open('GET', cim + '/users' + (parameter ?? ''))
    http.addEventListener('load', feltoltes)
    http.addEventListener('error', () => kiir('Sikertelen betöltés'))
    http.send(null)
}

function feltoltes(esemeny)
{
    tablazat.textContent = ''

    if (! esemeny.target.responseText)
        return kiir('Üres válasz')

    let valasz
    try {
        valasz = JSON.parse(esemeny.target.responseText)
    } catch (e) {
        return kiir('Értelmetlen válasz')
    }

    for (let felhasznalo of valasz.data) {
        let sor = tablazat.insertRow()
        sor.insertCell().textContent = felhasznalo.id
        sor.insertCell().textContent = felhasznalo.email

        let nevMezo = sor.insertCell()
        let link = document.createElement('a')
        link.href = felhasznalo.id
        link.textContent = `\``${ felhasznalo.last_name } ${ felhasznalo.first_name }`\``
        link.addEventListener('click', nevjegyBetoltes)
        nevMezo.appendChild(link)

        let kepMezo = sor.insertCell()
        let kep = document.createElement('img')
        kep.src = felhasznalo.avatar
        kep.alt = `\``${ felhasznalo.last_name } ${ felhasznalo.first_name } fényképe`\``
        kep.height = 50
        kepMezo.appendChild(kep)

        let parancsMezo = sor.insertCell()
    }

    lapszam.value = valasz.page
    lapdarab.textContent = valasz.total_pages
    laphossz.value = valasz.per_page
    adatdarab.textContent = valasz.total

    kiir()
}

function ujratoltes()
{
    betoltes(`\``?page=${ lapszam.value }&per_page=${ laphossz.value }`\``)
}

function nevjegyBetoltes(esemeny)
{
    esemeny.preventDefault()

    kiir('Betoltés folyamatban')

    let http = new XMLHttpRequest()
    http.open('GET', cim + '/users/' + esemeny.target.getAttribute('href'))
    http.addEventListener('load', nevjegyKitoltes)
    http.addEventListener('error', () => kiir('Sikertelen betöltés'))
    http.send(null)
}

function nevjegyKitoltes(esemeny)
{
    let mezoLista = nevjegy.querySelectorAll('dd[data-nev]')
    let kep = nevjegy.querySelector('dd.kep img')

    for (let mezo of mezoLista)
        mezo.textContent = ''

    kep.src = ''

    if (! esemeny.target.responseText)
        return kiir('Üres válasz')

    let valasz
    try {
        valasz = JSON.parse(esemeny.target.responseText)
    } catch (e) {
        return kiir('Értelmetlen válasz')
    }

    nevjegy.style.display = 'block'

    for (let mezo of mezoLista)
        if (mezo.dataset.nev && mezo.dataset.nev in valasz.data)
            mezo.textContent = valasz.data[mezo.dataset.nev]

    kep.src = valasz.data.avatar

    kiir()
}

function kiir(szoveg = null, marad = false)
{
    if (uzenetIdo)
        clearTimeout(uzenetIdo)

    uzenet.textContent = szoveg
    uzenet.style.display = szoveg ? 'block' : 'none'

    if (szoveg && ! marad)
        uzenetIdo = setTimeout(() => { uzenet.style.display = 'none'; uzenetIdo = null }, 5000)
}

addEventListener('load', indulas)

</script>
</head>

<body>

<div id=uzenet></div>

<table>
<colgroup><col><col><col><col><col></colgroup>
<thead>
<tr><th>ID</th><th>E-mail</th><th>Teljes név</th><th>Kép</th><th>&nbsp;</th></tr>
</thead>
<tbody id=tablazat>
<tr><td colspan=5>Nincs adat</td></tr>
</tbody>
<tbody>
<tr><td><input></td><td><input></td><td><input> <input></td><td>&nbsp;</td><td><input type=button value="Mentés"></td></tr>
</tbody>
<tfoot>
<tr><td colspan=5 id=lapozas><input id=lapszam>. lap a <span id=lapdarab>???</span>-ból, laponként <input id=laphossz> adat a <span id=adatdarab>???</span>-ból</td></tr>
</tfoot>
</table>

<dl id=nevjegy>
<dd class=kep><img src="#" alt="fénykép"></dd>
<dt>ID</dt><dd data-nev=id></dd>
<dt>E-mail</dt><dd data-nev=email></dd>
<dt>Családnév</dt><dd data-nev=last_name></dd>
<dt>Keresztnév</dt><dd data-nev=first_name></dd>
</dl>

</body>

</html>
1