jMã<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Tees</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
width: 50%;
max-height: 100vh;
}
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;
margin-top: 20px;
}
button:hover {
background-color: #21867a;
}
label {
font-weight: bold;
}
select {
margin-top: 20px;
}
.input-section {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Get Tee Setting For Selected Golf Course</h2>
<!-- Manual Input for Country Code and Course Code -->
<div 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="populateTeeList()">List Tees</button>
</div>
<!-- Tee Selection Section -->
<div id="teeSelectionSection" class="input-section" style="display: none;">
<label for="teeSelect">Tees Available:</label>
<select id="teeSelect" onchange="loadTeeData()"></select>
</div>
<!-- Edit Section to show the course data -->
<div id="editSection" class="input-section" style="display: none;">
<h3>Edit Tee Information</h3>
<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">
<h4>Holes Information</h4>
<table>
<thead>
<tr>
<th>Hole</th>
<th>Par</th>
<th>Difficulty</th>
<th>Distance (yards)</th>
</tr>
</thead>
<tbody id="holesContainer">
</tbody>
</table>
</div>
</div>
<script>
// Function to populate the tee list based on the entered country and course code
function populateTeeList() {
const manualCountry = document.getElementById("manualCountry").value;
const manualCourseCode = document.getElementById("manualCourseCode").value;
const teeSelect = document.getElementById("teeSelect");
if (!manualCountry || !manualCourseCode) {
alert("Please enter both country and course code.");
return;
}
fetch(`https://bsvhost.com:8000/golf/${manualCountry}/${manualCourseCode}/listTees`)
.then(response => response.json())
.then(teeList => {
teeSelect.innerHTML = ''; // Clear the select box
teeList.forEach(tee => {
const option = document.createElement("option");
option.value = tee;
option.text = tee.charAt(0).toUpperCase() + tee.slice(1) + " Tee";
teeSelect.appendChild(option);
});
document.getElementById("teeSelectionSection").style.display = "block"; // Show the select box
})
.catch(error => {
console.error('Error fetching tee list:', error);
alert('Error fetching tee list. Please try again.');
});
}
// Function to load the tee data when a tee is selected
function loadTeeData() {
const teeType = document.getElementById("teeSelect").value;
const manualCountry = document.getElementById("manualCountry").value;
const manualCourseCode = document.getElementById("manualCourseCode").value;
// Ensure .json is added only once
const teeFile = teeType.endsWith(".json") ? teeType : `${teeType}.json`;
fetch(`https://bsvhost.com:8000/golf/${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));
}
// Placeholder function to calculate totals (implement logic as needed)
function calculateTotals() {
// Add logic to calculate total par, difficulty, distance, etc.
}
</script>
</body>
</html>
https://whatsonchain.com/tx/a09ca32a00a82cacfc323ab57fa3152173fa7886c4b5b2fef4e5083a0fc0e1ff