diff --git a/src/main/resources/schema.sql b/src/main/resources/schema.sql
index 5b0ebe8fc11112f5182b1a8e7c81f6628c3c0efb..4e0ea9ec9070dc0cd41f4bb326cbf4ecf9d64ad5 100644
--- a/src/main/resources/schema.sql
+++ b/src/main/resources/schema.sql
@@ -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,
diff --git a/src/main/resources/static/css/matchDetail.css b/src/main/resources/static/css/matchDetail.css
index d46cdf49bc4bab984e61f67a36a39187d8ba85d4..6bd7d676a32732e90fa79080141e98d8143cfe22 100644
--- a/src/main/resources/static/css/matchDetail.css
+++ b/src/main/resources/static/css/matchDetail.css
@@ -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;
}
diff --git a/src/main/resources/static/css/matchDetailChangeScore.css b/src/main/resources/static/css/matchDetailChangeScore.css
new file mode 100644
index 0000000000000000000000000000000000000000..8fafb117de2001eed4b70313002dc35d3d1be398
--- /dev/null
+++ b/src/main/resources/static/css/matchDetailChangeScore.css
@@ -0,0 +1,111 @@
+
+* {
+ 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;
+ }
+}
+
diff --git a/src/main/resources/static/html/matchDetail.html b/src/main/resources/static/html/matchDetail.html
index 5b992d0ed09f8b69d18433b9de41c0159d482c6b..68d2969f9e14108c0d760ac1375ffc4f86fa006b 100644
--- a/src/main/resources/static/html/matchDetail.html
+++ b/src/main/resources/static/html/matchDetail.html
@@ -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>
diff --git a/src/main/resources/static/html/matchDetailChangeScore.html b/src/main/resources/static/html/matchDetailChangeScore.html
new file mode 100644
index 0000000000000000000000000000000000000000..ada5b7a395967a9dbb5ff985e8684bfcf3fd7c7e
--- /dev/null
+++ b/src/main/resources/static/html/matchDetailChangeScore.html
@@ -0,0 +1,58 @@
+<!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>
diff --git a/src/main/resources/static/js/matchDetail.js b/src/main/resources/static/js/matchDetail.js
index 85ae5c2c7fd346128501164f943e6b6cc2029765..0cb7b2fe9a9018dbffd183c1d5ba1a5e99916b77 100644
--- a/src/main/resources/static/js/matchDetail.js
+++ b/src/main/resources/static/js/matchDetail.js
@@ -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 = `
diff --git a/src/main/resources/static/js/matchDetailChangeScore.js b/src/main/resources/static/js/matchDetailChangeScore.js
new file mode 100644
index 0000000000000000000000000000000000000000..7c9f1c0f39ede7683f9cfbe372a6366ed789c69b
--- /dev/null
+++ b/src/main/resources/static/js/matchDetailChangeScore.js
@@ -0,0 +1,67 @@
+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