Dev/nano/accueil news (#18)

* new design for index

* design index

* correction for merge
This commit is contained in:
nano
2022-10-17 18:00:08 +02:00
committed by GitHub
parent f2f8a1186d
commit 3532395ded
4 changed files with 121 additions and 16 deletions

View File

@@ -13,23 +13,46 @@
<head>
<title>Accueil</title>
<link href="public_html/css/style.css" rel="stylesheet">
<link href="public_html/css/style_score.css" rel="stylesheet">
<link href="public_html/css/styleList.css" rel="stylesheet">
<link href="public_html/css/colors.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
</head>
<body class="bgcolor-main">
<div class="container"></div>
<img src="public_html/img/InterPromo.png">
<input class="ButtonDayNight" type="image" src="public_html/img/DAYnNGH.png" onclick="switchDarkMode()" />
<div class="vertical_menu menu">
<a href="" class="color-main active">Acceuil</a>
<a href="score.php?sport=basket" class="color-main bgcolor-btnprimary">Basket</a>
<a href="score.php?sport=handball" class="color-main bgcolor-btnprimary">Handball</a>
<a href="score.php?sport=badminton" class="color-main bgcolor-btnprimary">Badminton</a>
<a href="score.php?sport=volley" class="color-main bgcolor-btnprimary">Volley</a>
<a href="score.php?sport=futsal" class="color-main bgcolor-btnprimary">Futsal</a>
</div>
<div id="main_container">
<img src="public_html/img/InterPromo.png" id="logo">
<div class="color-main" id="content">
<div class="horizontal_menu menu" id="sport_selection">
<a href="" class="color-main active">Acceuil</a>
<a href="score.php?sport=basket" class="color-main bgcolor-btnprimary">Basket</a>
<a href="score.php?sport=handball" class="color-main bgcolor-btnprimary">Handball</a>
<a href="score.php?sport=badminton" class="color-main bgcolor-btnprimary">Badminton</a>
<a href="score.php?sport=volley" class="color-main bgcolor-btnprimary">Volley</a>
<a href="score.php?sport=futsal" class="color-main bgcolor-btnprimary">Futsal</a>
</div>
<hr>
<div class="match_list">
<div class="list">
<h3>Match(s) en cours :</h3>
<hr>
<div id="nowMatch">
</div>
</div>
<div class="list">
<h3>Futurs Matchs :</h3>
<hr>
<div id="nextMatch">
</div>
</div>
</div>
</div>
</div>
<input class="ButtonDayNight" type="image" src="public_html/img/DAYnNGH.png" onclick="switchDarkMode()" />
<script src="public_html/js/script.js"></script>
<script src="public_html/js/script_direct.js"></script>
</body>
</hmtl>

View File

@@ -0,0 +1,27 @@
.match_list {
display: flex;
justify-content: space-around;
margin-top: 5%;
}
.list {
margin-right: 5%;
width: 30%;
}
.capTeam {
margin: 1%;
align-items: center;
display: flex;
flex-direction: column;
}
.capsule {
display: flex;
justify-content: space-between;
margin: 5%;
}
.capTeam > h4 {
margin-top: 15%;
}

View File

@@ -0,0 +1,54 @@
function parseISOLocal(s) {
var b = s.split(/\D/);
return new Date(b[0], b[1]+2, b[2], b[3], b[4], b[5]);
}
function getDirect() {
$.ajax({
method: "GET",
url: "api.php/matchs"
}).done((matchs) => {
aspect(matchs)
})
}
function aspect(matchs) {
$("#nextMatch").empty()
$("#nowMatch").empty()
matchs.forEach(match => {
let date = parseISOLocal(match['date'])
//show next matches with a gap of 20 min
if(date > Date.now() && date < (Date.now() + 1200000)){
let tname = JSON.parse(match['teams_name'])
let cap = "<div class=\"capsule\">"+
"<div class=\"capTeam\">"+
"<h3>"+ tname[0] +"</h3></div>"+
"<div class=\"capTeam\">"+
"<h3>"+ tname[1] +"</h3></div>"+
match['sport_name'] +"</div>";
$("#nextMatch").append(cap);
}
//show direct match with a gap of 20 min
if(date < Date.now() && date > (Date.now() - 1200000)){
let tname = JSON.parse(match['teams_name'])
let tscore = JSON.parse(match['scores'])
let cap = "<div class=\"capsule\">"+
"<div class=\"capTeam\">"+
"<h3>"+ tname[0] +"</h3>"+
"<h4>"+ tscore[0] + "</h4></div>"+
"<div class=\"capTeam\">"+
"<h3>"+ tname[1] +"</h3>"+
"<h4>"+ tscore[1] +"</h4></div>"+
match['sport_name'] +"</div>";
$("#nowMatch").append(cap);
}
});
}
getDirect();
setInterval(getDirect, 5000 );

View File

@@ -295,15 +295,16 @@ class Database
}
/**
* Gets all matches in the db with their type
* Gets all matches in the database
*
* @return ?array return null if there is no match in the db
*/
public function getAllMatches(): ?array {
$request = 'SELECT m.id, sport_id, s.name "sport_name", type, array_agg(p.team_id) "teams_id" from matches m
left join sports s on sport_id = s.id
right join participations p on match_id = m.id
group by m.id, s.name';
$request = 'SELECT m.id "id", m.type "type", s.name "sport_name", ARRAY_TO_JSON(ARRAY_AGG(t.name ORDER BY p.team_id)) "teams_name", ARRAY_TO_JSON(ARRAY_AGG(p.score ORDER BY p.team_id)) "scores", m.date "date"
FROM matches m
LEFT JOIN sports s ON m.sport_id = s.id
INNER JOIN participations p ON m.id = p.match_id
INNER JOIN teams t ON t.id = p.team_id GROUP BY m.id, s.name ORDER BY m.date';
$statement = $this->PDO->prepare($request);
$statement->execute();