From a4a9c1c640081ba092b7486f8d5320a527f76ddf Mon Sep 17 00:00:00 2001 From: Arek Date: Wed, 8 Jun 2022 22:33:19 +0200 Subject: [PATCH] feat: :sparkles: connected main page to api On main page now we can see all of tournaments from api --- frontend/app.js | 34 +++++++++++ frontend/index.html | 52 +++++++--------- frontend/sandbox_api/myscript.js | 81 +++++++++++++++++++++++++ frontend/sandbox_api/strona-glowna.html | 73 +++------------------- frontend/sandbox_api/styles.css | 21 ++++++- 5 files changed, 163 insertions(+), 98 deletions(-) create mode 100644 frontend/app.js create mode 100644 frontend/sandbox_api/myscript.js diff --git a/frontend/app.js b/frontend/app.js new file mode 100644 index 0000000..bd74503 --- /dev/null +++ b/frontend/app.js @@ -0,0 +1,34 @@ +async function showTournaments() { + let url = 'https://dragonmaster.pl/inz/tournaments'; + try { + let res = await fetch(url); + return await res.json(); + } catch (error) { + console.log(error); + } +} + +async function renderTournaments() { + let tournaments = await showTournaments(); + let html = ''; + tournaments.forEach(tournament => { + let htmlSegment = `
+
+ +
+
+
+

${tournament.name}

+ Propadel, Warszawa + ${tournament.from} do ${tournament.to} + +
+
+
+ `; + html += htmlSegment; + }); + + let container = document.querySelector('.tournament-list'); + container.innerHTML = html; +} diff --git a/frontend/index.html b/frontend/index.html index ec9ff14..50d12ad 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,33 +7,35 @@ Padel Tournaments System + - -
-
- -
-
- - - Kontakt - Ranking - Kalendarz turniejów -
-
+ +
+
+ +
+
+ + + Kontakt + Ranking + Kalendarz turniejów +
+
- - - + + +
- +
- +
@@ -46,19 +48,7 @@
Kafle
-
-
- -
- -
-
-

Turniej majowy 2022

- Propadel, Warszawa - 13/05/2022 do 15/05/2022 - -
-
+
diff --git a/frontend/sandbox_api/myscript.js b/frontend/sandbox_api/myscript.js new file mode 100644 index 0000000..e380d25 --- /dev/null +++ b/frontend/sandbox_api/myscript.js @@ -0,0 +1,81 @@ +// function lodaDoc() { +// var xhttp = new XMLHttpRequest(); +// xhttp.onreadystatechange = function () { +// if (this.readyState == 4 && this.status == 200) { +// document.getElementById("demo").innerHTML = this.responseText; +// } +// }; +// xhttp.open("GET", "https://dragonmaster.pl/inz/tournaments"); +// xhttp.send(); +// } + +// let response = fetch(URL); + +// const ul = document.getElementById('tournaments'); +// const list = document.createDocumentFragment(); +// const url = 'https://dragonmaster.pl/inz/tournaments' +// let tablica; + +// fetch(url).then(function (response) { +// return response.json(); +// }).then(function (obj) { +// let id; +// let count; +// tablica = obj +// console.log(obj); +// for (id in tablica) { +// console.log(tablica.name); +// ++count; +// } +// }).catch(function (error) { +// console.error('Something went wrong!') +// console.error(error); +// }); + +// fetch(url) +// .then(response => response.json()) +// .then((data) => { +// let tournaments = data; + +// tournaments.map(function (tournament) { +// let li = document.createElement('li'); +// let name = document.createElement('h2'); +// let email = document.createElement('span'); + +// name.innerHTML = '${tournament.name}'; +// id.innerHTML = '${tournament.id}'; + +// li.appendChild(name); +// li.appendChild(id); +// }); +// }) +// .catch(function (error) { +// console.log(error); +// }); + +// ul.appendChild(list); + +// console.log(fetch('https://dragonmaster.pl/inz/tournaments')) + + +async function showTournaments() { + let url = 'https://dragonmaster.pl/inz/tournaments'; + try { + let res = await fetch(url); + return await res.json(); + } catch (error) { + console.log(error); + } +} + +async function renderTournaments() { + let tournaments = await showTournaments(); + let html = ''; + tournaments.forEach(tournament => { + let htmlSegment = `

${tournament.name}

${tournament.place}

${tournament.from} do ${tournament.to}

`; + html += htmlSegment; + }); + + let container = document.querySelector('.tournament-list'); + container.innerHTML = html; +} \ No newline at end of file diff --git a/frontend/sandbox_api/strona-glowna.html b/frontend/sandbox_api/strona-glowna.html index ce23135..7c72f3a 100644 --- a/frontend/sandbox_api/strona-glowna.html +++ b/frontend/sandbox_api/strona-glowna.html @@ -7,82 +7,25 @@ Document + - +
+ logo + kalendarz turniejów + ranking + kontakt +
-
+
- \ No newline at end of file diff --git a/frontend/sandbox_api/styles.css b/frontend/sandbox_api/styles.css index bf7f35d..141cb24 100644 --- a/frontend/sandbox_api/styles.css +++ b/frontend/sandbox_api/styles.css @@ -3,15 +3,32 @@ body { } .nav { + width: 100%; height: 50px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; } -.tournament-name { - height: 150px; +.container { + display: flex; + flex-direction: column; + align-items: center; +} + +.tournament-list { + width: 50%; + height: auto; background-color: #0B4D39; } .tournament-info { height: auto; background-color: lightblue; +} + +.tournament { + border: 1px; + border-style: solid; } \ No newline at end of file