feat: ✨ connected main page to api
On main page now we can see all of tournaments from api
This commit is contained in:
Arek
parent
81b3b19fd1
commit
a4a9c1c640
34
frontend/app.js
Normal file
34
frontend/app.js
Normal 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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
|
|||||||
81
frontend/sandbox_api/myscript.js
Normal file
81
frontend/sandbox_api/myscript.js
Normal 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;
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user