diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/data.php | 38 | ||||
| -rw-r--r-- | src/db.xml | 30 | ||||
| -rw-r--r-- | src/main.js | 83 | ||||
| -rw-r--r-- | src/main.ts | 67 | ||||
| -rw-r--r-- | src/style.css | 25 |
5 files changed, 243 insertions, 0 deletions
diff --git a/src/data.php b/src/data.php new file mode 100644 index 0000000..aaf9d88 --- /dev/null +++ b/src/data.php @@ -0,0 +1,38 @@ +<?php +function get_node_value($from, string $name): string +{ + return $from->getElementsByTagName($name)->item(0)->nodeValue; +} +function get_doc(): DOMDocument +{ + $doc = new DOMDocument(); + $path = "/home/maks/school/clientApps/mlos/src/db.xml"; + $doc->load($path); + return $doc; +} +function get_data(): array +{ + $doc = get_doc(); + $out = []; + $games = $doc->getElementsByTagName("game"); + $i = 0; + while ($game = $games->item($i++)) { + $out[] = [ + "id" => $game->getAttribute("id"), + "order" => $game->getAttribute("order"), + "name" => get_node_value($game, "name"), + "thumbnail" => get_node_value($game, "thumbnail"), + "author" => get_node_value($game, "author"), + "magazine" => get_node_value($game, "magazine"), + ]; + } + usort($out, function ($a, $b) { + return $a["order"] - $b["order"]; + }); + return [$out, $doc->getElementsByTagName("count")->item(0)->nodeValue]; +} + +$doc = get_doc(); +$xpath = new DOMXpath($doc); +$game = $xpath->query('//game[@id="2"]/name')->item(0); +// var_dump($game); diff --git a/src/db.xml b/src/db.xml new file mode 100644 index 0000000..7579d72 --- /dev/null +++ b/src/db.xml @@ -0,0 +1,30 @@ +<?xml version="1.0"?> +<root> + <mid>12</mid> + <count>5</count> + <game id="1" order="4"> + <name>Wiedzmiń</name> + <thumbnail>wiedzmin.png</thumbnail> + <author>Ąndrzej Sępkiewicz</author> + <magazine>Fantastyka</magazine> + </game> + <game id="2" order="2"> + <name>Władca pierścieni</name> + <thumbnail>ring.png</thumbnail> + <author>Tolkien Sapkowski</author> + <magazine>CDAction 1999</magazine> + </game> + <game id="3" order="3"> + <name>Artix</name> + <thumbnail>artix.png</thumbnail> + <author>NotSoArchDev</author> + <magazine>Torvalds 1987</magazine> + </game> + <game id="4" order="1"> + <name>🥶</name> + <author>🤑</author> + <thumbnail>🙊.png</thumbnail> + <magazine>🙊</magazine> + </game> + +<game id="11" order="5"><name><b>Thinkpad</b></name><author><b>Lenovo</b></author><thumbnail><br>thinkpad.png</thumbnail><magazine><b>Intel(R)</b></magazine></game></root> diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..db9a00f --- /dev/null +++ b/src/main.js @@ -0,0 +1,83 @@ +//import './style.css'; +function edit(e) { + e.preventDefault(); + const tar = e.target; + const form = tar.parentNode; + form.onseeked; + const id = tar.dataset.id; + const tds = document.querySelectorAll(`[data-id="${id}"]`); + const names = ["name", "thumbnail", "author", "magazine",]; + tds.forEach((el, i) => { + if (el.tagName === "TD") { + const v = el.innerHTML; + el.innerHTML = `<input name="${names[i]}" value="${v}">`; + } + else if (el === tar) { + el.style.display = "none"; + } + else { + const iel = el; + if (iel.type !== "hidden") { + iel.value = "Save"; + el.onclick = e => save(e, tds); + } + } + }); +} +//@ts-expect-error +window.edit = edit; +async function save(e, tds) { + console.log(tds); + const tar = e.target; + const body = new FormData(); + e.preventDefault(); + let i = 0; + tds.forEach((el) => { + if (el.tagName === "TD") { + const v = el.firstChild.value; + + if (i === 3) + el.innerHTML = v; + else + el.innerText = v; + + switch (i) { + case 0: + body.append("name", v); + break; + case 1: + body.append("thumbnail", v); + break; + case 2: + body.append("author", v); + break; + case 3: + body.append("magazine", v); + break; + } + i++; + } + else if (el === tar) { + const iel = el; + iel.value = "Remove"; + iel.onclick = null; + } + else { + const iel = el; + if (iel.type === "hidden") { + body.append(iel.name, iel.value); + } + else { + iel.style.display = ""; + } + } + }); + console.log(await (await fetch("api/add.php", { + method: "POST", + headers: { + // "Content-Type": "multipart/form-data", + }, + body + })).text()); +} +//# sourceMappingURL=main.js.map diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..c4b616b --- /dev/null +++ b/src/main.ts @@ -0,0 +1,67 @@ +import './style.css' + +function edit(e: PointerEvent) { + e.preventDefault(); + const tar = e.target as HTMLInputElement; + const form = tar.parentNode as HTMLFormElement + form.onseeked + const id = tar.dataset.id; + const tds = document.querySelectorAll(`[data-id="${id}"]`) as NodeListOf<HTMLElement> + const names = ["name", "thumbnail", "author", "magazine",] + tds.forEach((el, i) => { + if (el.tagName === "TD") { + const v = el.innerHTML; + el.innerHTML = `<input name="${names[i]}" value="${v}">` + } else if (el === tar) { + el.style.display = "none" + } else { + const iel = (el as HTMLInputElement) + if (iel.type !== "hidden") { + iel.value = "Save" + el.onclick = e => save(e, tds); + } + } + }) +} +//@ts-expect-error +window.edit = edit; + +async function save(e: MouseEvent, tds: NodeListOf<HTMLElement>) { + console.log(tds) + const tar = e.target as HTMLInputElement + const body = new FormData(); + e.preventDefault(); + let i = 0; + tds.forEach((el) => { + if (el.tagName === "TD") { + const v = (el.firstChild as HTMLInputElement).value; + el.innerHTML = v + switch (i) { + case 0: body.append("name", v); break; + case 1: body.append("thumbnail", v); break; + case 2: body.append("author", v); break; + case 3: body.append("magazine", v); break; + } + i++; + } else if (el === tar) { + const iel = (el as HTMLInputElement) + iel.value = "Remove" + iel.onclick = null; + } else { + const iel = (el as HTMLInputElement) + if (iel.type === "hidden") { + body.append(iel.name, iel.value); + } else { + iel.style.display = "" + } + } + }) + await fetch("api/add.php", { + method: "POST", + headers: { + "Content-Type": "multipart/form-data", + }, + body + }); +} + diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..bbcdf49 --- /dev/null +++ b/src/style.css @@ -0,0 +1,25 @@ +header { + display: flex; + justify-content: center; + padding: 20px; +} +table { + margin: 0 auto; + border-spacing: 15px; +} +td { + margin: 100px; +} +header button { + font-size: 1em; + padding: 10px; +} +html { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + /* text-align: center; */ + color: #2c3e50; + font-size: 2em; + /* margin-top: 60px; */ +} |