Skip to content
Snippets Groups Projects
Commit 88ccedd2 authored by Yibo Zhu's avatar Yibo Zhu
Browse files

Merge branch... 

Merge branch '27-as-a-user-i-want-to-see-the-match-details-and-be-able-to-change-my-score' into 'main'

Resolve "As a user, I want to see the match details and be able to change my score"

See merge request !29
parents ad7f5379 02a2f294
No related branches found
No related tags found
5 merge requests!51Resolves 64,!49Resolve issue 70,!48Resolve issue 70,!47Revert "Merge branch '26-as-a-user-i-want-to-see-the-rankings-of-each-member' into 'main'",!29Resolve "As a user, I want to see the match details and be able to change my score"
Hide whitespace changes
Inline Side-by-side
Showing
with 255 additions and 2 deletions
src/main/resources/schema.sql
+ 2
− 1
View file @ 88ccedd2
......@@ -18,7 +18,7 @@ create table if not exists match_item (
confirm_b BOOLEAN DEFAULT FALSE,
winner_id BIGINT DEFAULT NULL
);
# drop table if exists information;
drop table if exists information;
CREATE TABLE information (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
......@@ -26,6 +26,7 @@ CREATE TABLE information (
password VARCHAR(255) NOT NULL,
role VARCHAR(20) DEFAULT 'USER' NOT NULL
);
drop table if exists ranking;
CREATE TABLE IF NOT EXISTS ranking (
id INT AUTO_INCREMENT PRIMARY KEY,
user_id INT NOT NULL,
......
src/main/resources/static/css/matchDetail.css
+ 7
− 1
View file @ 88ccedd2
......@@ -75,7 +75,13 @@ h2 {
background-color: #f9f9f9;
border-radius: 6px;
}
button {
padding: 10px 20px;
margin-left: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
strong {
color: #2d2d2d;
}
......
src/main/resources/static/css/matchDetailChangeScore.css 0 → 100644
+ 111
− 0
View file @ 88ccedd2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
.title-h1{
h1 {
background-color: #4a4a4a;
p {
font-size: 36px;
color: white;
font-weight: bold;
text-align: center;
}
}
}
.container {
width: 80%;
margin: 20px auto;
}
header {
text-align: center;
margin-bottom: 30px;
}
#matchDetails {
margin-left: 45px;
align-items: center;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 900px;
padding: 30px;
box-sizing: border-box;
margin-top: 30px;
}
h2 {
text-align: center;
font-size: 2.5em;
color: #333;
margin-bottom: 20px;
}
#matchScore {
font-size: 2.4em;
line-height: 1.6;
color: #444;
margin: 20px 0;
}
#matchScore p {
text-align: center;
}
#matchInfo {
font-size: 1.2em;
line-height: 1.6;
color: #444;
}
#matchInfo p {
margin: 15px 0;
padding: 10px;
background-color: #f9f9f9;
border-radius: 6px;
}
#sport,
#playerAId,
#playerBId,
#status,
#confirmByA,
#confirmByB {
display: none;
}
button {
margin: 10px;
padding: 10px 20px;
/*margin-left: 10px;*/
border: none;
border-radius: 5px;
cursor: pointer;
}
#updateMatchForm {
display: block;
}
strong {
color: #2d2d2d;
}
/*adjust for phone*/
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
.match-item {
flex-direction: column;
align-items: flex-start;
}
}
src/main/resources/static/html/matchDetail.html
+ 5
− 0
View file @ 88ccedd2
......@@ -19,7 +19,12 @@
<h2>Match Details</h2>
<div id="matchScore"></div>
<div id="matchInfo"></div>
<button id="updateBtn" type="submit">Update Score</button>
<a href="http://localhost:8080/html/matchSchedule.html">
<button class="cancel-btn">Cancel</button>
</a>
</div>
</div>
<div id="footer-container"></div>
......
src/main/resources/static/html/matchDetailChangeScore.html 0 → 100644
+ 58
− 0
View file @ 88ccedd2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Match Detail</title>
<link rel="stylesheet" href="/css/matchDetailChangeScore.css">
<link rel="stylesheet" href="/css/navBar.css">
<link rel="stylesheet" href="/css/footer.css">
</head>
<body>
<!-- navbar-->
<div id="navbar-container"></div>
<div class="title-h1">
<h1>Score Change</h1>
</div>
<div class="container">
<div id="matchDetails">
<h2>Score Change</h2>
<form id="updateMatchForm">
<label for="scoreA">Score A:</label>
<input type="number" id="scoreA" name="scoreA" min="0" required>
<label for="scoreB">Score B:</label>
<input type="number" id="scoreB" name="scoreB" min="0" required>
<label for="winnerId">Winner ID:</label>
<input type="number" id="winnerId" name="winnerId" min="0" required>
<!-- <label for="sport">Sport: </label>-->
<input type="text" id="sport" name="sport" required><br>
<!-- <label for="playerAId">Player A ID: </label>-->
<input type="number" id="playerAId" name="playerAId" required><br>
<!-- <label for="playerBId">Player B ID: </label>-->
<input type="number" id="playerBId" name="playerBId" required><br>
<label for="planTime">Plan Time: </label>
<input type="datetime-local" id="planTime" name="planTime" required><br>
<!-- <label for="status">Status: </label>-->
<input type="text" id="status" name="status" required><br>
<!-- <label for="confirmByA">Confirm by A: </label>-->
<input type="checkbox" id="confirmByA" name="confirmByA"><br>
<!-- <label for="confirmByB">Confirm by B: </label>-->
<input type="checkbox" id="confirmByB" name="confirmByB"><br>
<button type="submit">Update Score</button>
</form>
<button onclick="history.back()" class="cancel-btn">Cancel</button>
</div>
</div>
<div id="footer-container"></div>
<script src="/js/navBar.js"></script>
<script src="/js/footer.js"></script>
<script>
loadNavbar('navbar-container');
loadFooter('footer-container');
</script>
<script src="/js/matchDetailChangeScore.js"></script>
</body>
</html>
src/main/resources/static/js/matchDetail.js
+ 5
− 0
View file @ 88ccedd2
......@@ -8,6 +8,11 @@
const matchInfo = document.getElementById('matchInfo');
const matchScore = document.getElementById('matchScore');
// btn give the id
const updateBtn = document.getElementById("updateBtn");
updateBtn.addEventListener('click', function (){
window.location.href = `/html/matchDetailChangeScore.html?id=${id}`;
})
matchScore.innerHTML = `<p><strong></strong>${matchData.scoreA} - ${matchData.scoreB}</p>
`
matchInfo.innerHTML = `
......
src/main/resources/static/js/matchDetailChangeScore.js 0 → 100644
+ 67
− 0
View file @ 88ccedd2
loadNavbar('navbar-container');
loadFooter('footer-container');
const urlParams = new URLSearchParams(window.location.search);
const matchId = urlParams.get('id');
async function fetchMatchDetails(id) {
try {
const response = await fetch(`/match/${id}`);
const matchData = await response.json();
document.getElementById('sport').value = matchData.sport;
document.getElementById('playerAId').value = matchData.playerAId;
document.getElementById('playerBId').value = matchData.playerBId;
document.getElementById('planTime').value = matchData.planTime;
document.getElementById('status').value = matchData.status;
document.getElementById('scoreA').value = matchData.scoreA;
document.getElementById('scoreB').value = matchData.scoreB;
document.getElementById('confirmByA').checked = matchData.confirmByA;
document.getElementById('confirmByB').checked = matchData.confirmByB;
document.getElementById('winnerId').value = matchData.winnerId;
// document.getElementById('scoreA').value = matchData.scoreA;
// document.getElementById('scoreB').value = matchData.scoreB;
// document.getElementById('winnerId').value = matchData.winnerId ? matchData.winnerId : '';
} catch (error) {
console.error('Error fetching match details:', error);
}
}
document.getElementById('updateMatchForm').addEventListener('submit', async function(event) {
// prevent evnts
event.preventDefault();
const updatedMatch = {
sport: document.getElementById('sport').value,
playerAId: document.getElementById('playerAId').value,
playerBId: document.getElementById('playerBId').value,
planTime: document.getElementById('planTime').value,
status: document.getElementById('status').value,
scoreA: document.getElementById('scoreA').value,
scoreB: document.getElementById('scoreB').value,
confirmByA: document.getElementById('confirmByA').checked,
confirmByB: document.getElementById('confirmByB').checked,
winnerId: document.getElementById('winnerId').value
};
try {
const res = await fetch(`/match/${matchId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(updatedMatch)
});
if (res.ok) {
alert('Match updated successfully');
window.location.href = `/html/matchDetail.html?id=${matchId}`;
} else {
alert('Failed to update match');
}
} catch (err) {
console.error('error updating match:', err);
alert('error updating match');
}
});
fetchMatchDetails(matchId);
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment