VF
{ Informatikus }
megoldása
1 éve
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> </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> </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
1
Kommentek