feat: connected main page to api

On main page now we can see all of tournaments from api
This commit is contained in:
Arek 2022-06-08 22:33:19 +02:00
parent 81b3b19fd1
commit a4a9c1c640
5 changed files with 163 additions and 98 deletions

34
frontend/app.js Normal file
View File

@ -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 = `<div class = "tournamentBox">
<div class="tournamentIconBox">
<img class="tournamentIcon" src="_main%20page/cup.svg" alt="">
</div>
<div class="tournamentDataBox">
<div class="tournamentData">
<h4>${tournament.name}</h4>
Propadel, Warszawa
${tournament.from} do ${tournament.to}
<button class="tournamentOpen">OPEN</button>
</div>
</div>
</div>
`;
html += htmlSegment;
});
let container = document.querySelector('.tournament-list');
container.innerHTML = html;
}

View File

@ -7,33 +7,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padel Tournaments System</title> <title>Padel Tournaments System</title>
<link href="_main%20page/style.css" rel="stylesheet"> <link href="_main%20page/style.css" rel="stylesheet">
<script type="text/javascript" src="app.js"></script>
</head> </head>
<body> <body onload="renderTournaments()">
<header> <header>
<div class="logoBox"> <div class="logoBox">
<a class="header_link" href="./index.html"><img class="logo" src="./_global/logo.svg" alt="Logo error"></a> <a class="header_link" href="./index.html"><img class="logo" src="./_global/logo.svg" alt="Logo error"></a>
</div> </div>
<div class="linkBox"> <div class="linkBox">
<!-- <span class="dot">JM</span>--> <!-- <span class="dot">JM</span>-->
<button class="loginButton" type="submit" onclick="window.location.href='panel_organizatora/logowanie/index.html'">LOGOWANIE</button> <button class="loginButton" type="submit"
onclick="window.location.href='panel_organizatora/logowanie/index.html'">LOGOWANIE</button>
<a class="header_link" href="./kontakt/index.html">Kontakt</a> <a class="header_link" href="./kontakt/index.html">Kontakt</a>
<a class="header_link" href="./ranking/index.html">Ranking</a> <a class="header_link" href="./ranking/index.html">Ranking</a>
<a class="header_link" href="./index.html">Kalendarz turniejów</a> <a class="header_link" href="./index.html">Kalendarz turniejów</a>
</div> </div>
</header> </header>
<!-- --> <!-- -->
<!-- --> <!-- -->
<!-- --> <!-- -->
<div class="container"> <div class="container">
<!-- Filtr --> <!-- Filtr -->
<div class="searchBox"> <div class="searchBox">
<img src="_main%20page/search.svg" class="search" alt=""> <img src="_main%20page/search.svg" class="search" alt="">
</div> </div>
<!-- --> <!-- -->
<div class="contentBox"> <div class="contentBox">
<div class="filterBox"> <div class="filterBox">
@ -46,19 +48,7 @@
<div class="settingsKafle">Kafle</div> <div class="settingsKafle">Kafle</div>
</div> </div>
<div class="tournamentBox"> <div class="tournament-list">
<div class="tournamentIconBox">
<img class="tournamentIcon" src="_main%20page/cup.svg" alt="">
</div>
<div class="tournamentDataBox">
<div class="tournamentData">
<h4><a href="_main%20page/pojedynczy_turniej/index.html"> Turniej majowy 2022</a></h4>
Propadel, Warszawa
13/05/2022 do 15/05/2022
<button class="tournamentOpen">OPEN</button>
</div>
</div>
</div> </div>
</div> </div>

View File

@ -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 = `<div class = "tournament"><p>${tournament.name}</p><p>${tournament.place}</p> <p>${tournament.from} do ${tournament.to}</p> </div > `;
html += htmlSegment;
});
let container = document.querySelector('.tournament-list');
container.innerHTML = html;
}

View File

@ -7,82 +7,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>Document</title> <title>Document</title>
<script type="text/javascript" src="myscript.js"></script>
</head> </head>
<body> <body onload="renderTournaments()">
<div class="container"> <div class="container">
<div class="nav"> <div class="nav">
<span>logo</span>
<a>kalendarz turniejów</a>
<a> ranking</a>
<a>kontakt</a>
<button>logowanie</button>
</div> </div>
<div class="tournament-name"> <div class="tournament-list">
</div> </div>
<div class="tournament-info" id="tournaments"> <div class="tournament-info" id="tournaments">
</div> </div>
</div> </div>
<script>
// 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'))
</script>
</body> </body>
</html> </html>

View File

@ -3,11 +3,23 @@ body {
} }
.nav { .nav {
width: 100%;
height: 50px; height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
} }
.tournament-name { .container {
height: 150px; display: flex;
flex-direction: column;
align-items: center;
}
.tournament-list {
width: 50%;
height: auto;
background-color: #0B4D39; background-color: #0B4D39;
} }
@ -15,3 +27,8 @@ body {
height: auto; height: auto;
background-color: lightblue; background-color: lightblue;
} }
.tournament {
border: 1px;
border-style: solid;
}