jM <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Tee Management</title>
<style>
.course-container {
font-family: Arial, sans-serif;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
margin: 0 auto;
}
input, button, select {
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 100%;
margin-top: 10px;
}
button {
background-color: #2a9d8f;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #21867a;
}
label {
font-weight: bold;
}
select {
margin-top: 20px;
}
.input-section {
margin-bottom: 20px;
}
.error {
color: red;
display: none;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="course-container">
<h2>Course Tee Management</h2>
<!-- Manual Input Section (now immediately visible) -->
<div id="manualInputSection" class="input-section">
<label for="manualCountry">Enter Country Code:</label>
<input type="text" id="manualCountry" placeholder="Country Code (e.g., 064)">
<label for="manualCourseCode">Enter Course Code:</label>
<input type="text" id="manualCourseCode" placeholder="Course Code (e.g., 271)">
<button onclick="setManualEntry()">Use Manual Entry</button>
</div>
<!-- Tee Selection Section -->
<div id="teeSelectionSection" class="input-section hidden">
<label for="teeSelect">Select Tee Type:</label>
<select id="teeSelect"></select>
<button onclick="loadTeeData()">Load Tee Data</button>
<button onclick="addNewTeeFile()">Add New Tee</button>
<button onclick="deleteTeeFile()">Delete Selected Tee</button>
</div>
<!-- Edit Section -->
<div id="editSection" class="input-section hidden">
<label for="courseName">Course Name:</label>
<input type="text" id="courseName">
<label for="country">Country:</label>
<input type="text" id="country">
<label for="courseCode">Course Code:</label>
<input type="text" id="courseCode">
<h3>Holes (Par, Difficulty, Distance)</h3>
<table id="holesTable">
<thead>
<tr>
<th>Hole</th>
<th>Par</th>
<th>Difficulty</th>
<th>Distance</th>
</tr>
</thead>
<tbody id="holesContainer"></tbody>
</table>
<p id="totalPar">Total Par: 0</p>
<p id="totalDistance">Total Distance: 0</p>
<button onclick="updateCourseData()">Update Course Data</button>
<button onclick="cancelUpdate()">Cancel</button>
<p id="updateMessage" style="color: green; display: none;">Course data updated successfully!</p>
</div>
</div>
<script>
// Manual Entry Setup
function setManualEntry() {
const manualCountry = document.getElementById("manualCountry").value;
const manualCourseCode = document.getElementById("manualCourseCode").value;
if (manualCountry && manualCourseCode) {
isManualEntry = true;
populateTeeList();
document.getElementById("manualInputSection").style.display = "none";
document.getElementById("teeSelectionSection").style.display = "block";
} else {
alert("Please enter both country and course code.");
}
}
// Populate Tee List Function
function populateTeeList() {
const teeSelect = document.getElementById("teeSelect");
const manualCountry = document.getElementById("manualCountry").value;
const manualCourseCode = document.getElementById("manualCourseCode").value;
fetch(`https://bsvgolf.com/${manualCountry}/${manualCourseCode}/listTees`)
.then(response => response.json())
.then(teeList => {
teeSelect.innerHTML = '';
teeList.forEach(tee => {
const option = document.createElement("option");
option.value = tee;
option.text = tee.replace(".json", "");
teeSelect.appendChild(option);
});
})
.catch(error => console.error('Error fetching tee list:', error));
}
function loadTeeData() {
const teeType = document.getElementById("teeSelect").value;
const manualCountry = document.getElementById("manualCountry").value;
const manualCourseCode = document.getElementById("manualCourseCode").value;
const teeFile = teeType.trim().endsWith(".json") ? teeType.trim() : `${teeType.trim()}.json`;
fetch(`https://bsvgolf.com/${manualCountry}/${manualCourseCode}/${teeFile}`)
.then(response => response.json())
.then(data => {
document.getElementById("editSection").style.display = "block";
document.getElementById('courseName').value = data.Course;
document.getElementById('country').value = data.country;
document.getElementById('courseCode').value = data.courseCode;
const holesContainer = document.getElementById('holesContainer');
holesContainer.innerHTML = '';
data.Par.forEach((par, index) => {
const difficulty = data.Difficulty[index];
const distance = data.Distance[index];
const row = `
<tr>
<td>${index + 1}</td>
<td><input type="number" id="par${index}" value="${par}" style="width: 60px;"></td>
<td><input type="number" id="difficulty${index}" value="${difficulty}" style="width: 80px;"></td>
<td><input type="number" id="distance${index}" value="${distance}" style="width: 100px;"></td>
</tr>
`;
holesContainer.innerHTML += row;
});
calculateTotals();
})
.catch(error => console.error('Error loading tee data:', error));
}
function calculateTotals() {
let totalPar = 0;
let totalDistance = 0;
for (let i = 0; i < 18; i++) {
totalPar += parseInt(document.getElementById(`par${i}`).value) || 0;
totalDistance += parseInt(document.getElementById(`distance${i}`).value) || 0;
}
document.getElementById('totalPar').textContent = `Total Par: ${totalPar}`;
document.getElementById('totalDistance').textContent = `Total Distance: ${totalDistance}`;
}
// Other functions remain the same...
</script>
</body>
</html>
https://whatsonchain.com/tx/80bdca14835c8f83dca8564e4910079103d229bd64e1033448fa98a013f89bd5