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">
|
||||
<title>Padel Tournaments System</title>
|
||||
<link href="_main%20page/style.css" rel="stylesheet">
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="logoBox">
|
||||
<a class="header_link" href="./index.html"><img class="logo" src="./_global/logo.svg" alt="Logo error"></a>
|
||||
</div>
|
||||
<div class="linkBox">
|
||||
<!-- <span class="dot">JM</span>-->
|
||||
<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="./ranking/index.html">Ranking</a>
|
||||
<a class="header_link" href="./index.html">Kalendarz turniejów</a>
|
||||
</div>
|
||||
</header>
|
||||
<body onload="renderTournaments()">
|
||||
<header>
|
||||
<div class="logoBox">
|
||||
<a class="header_link" href="./index.html"><img class="logo" src="./_global/logo.svg" alt="Logo error"></a>
|
||||
</div>
|
||||
<div class="linkBox">
|
||||
<!-- <span class="dot">JM</span>-->
|
||||
<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="./ranking/index.html">Ranking</a>
|
||||
<a class="header_link" href="./index.html">Kalendarz turniejów</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
|
||||
<div class="container">
|
||||
<!-- Filtr -->
|
||||
<!-- Filtr -->
|
||||
<div class="searchBox">
|
||||
<img src="_main%20page/search.svg" class="search" alt="">
|
||||
</div>
|
||||
|
||||
<!-- -->
|
||||
<!-- -->
|
||||
<div class="contentBox">
|
||||
<div class="filterBox">
|
||||
|
||||
@ -46,19 +48,7 @@
|
||||
<div class="settingsKafle">Kafle</div>
|
||||
</div>
|
||||
|
||||
<div class="tournamentBox">
|
||||
<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 class="tournament-list">
|
||||
</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">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<title>Document</title>
|
||||
<script type="text/javascript" src="myscript.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body onload="renderTournaments()">
|
||||
<div class="container">
|
||||
<div class="nav">
|
||||
<span>logo</span>
|
||||
<a>kalendarz turniejów</a>
|
||||
<a> ranking</a>
|
||||
<a>kontakt</a>
|
||||
<button>logowanie</button>
|
||||
</div>
|
||||
<div class="tournament-name">
|
||||
<div class="tournament-list">
|
||||
|
||||
</div>
|
||||
<div class="tournament-info" id="tournaments">
|
||||
|
||||
</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>
|
||||
|
||||
</html>
|
||||
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user