Calculating totals from a dynamic Table

Jakes79 · April 30

Good day,

I have a timer system that log lap times in a table according to the bib number entered. I also need the total time for each bib number to be added. I am struggling for days now to get it right, and every time, it adds the value to the existing total time. Can someone perhaps help me with it?

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.8">
  <title>XCO Timer</title>
  <style>
    .stopwatch {
      text-align: center;
      margin-bottom: 20px;
    }
    table {
   
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
		.stopwatch {
		  <!-- font-family: Arial, Helvetica, sans-serif; -->
		  border-collapse: collapse;
		  width: 100%;
		}

		.stopwatch td, .stopwatch th {
		  border: 1px solid #ddd;
		  padding: 8px;
		}

		.stopwatch tr:nth-child(even){background-color: #f2f2f2;}

		.stopwatch tr:hover {background-color: #ddd;}

		.stopwatch th {
		  padding-top: 12px;
		  padding-bottom: 12px;
		  text-align: left;
		  background-color: #04AA6D;
		  color: white;
		}
	.stopwatch th:nth-child(1) {
	  width: 50px;
	}

	.stopwatch th:nth-child(2) {
	  width: 200px;
	}

	.stopwatch th:nth-child(n+3) {
	  width: 80px;
	}
	
	#userInput {
      text-align: center;
      margin-bottom: 20px;
    }
    #userInput input[type="text"], #userInput button {
      margin: 5px;
    }
    #userInput input[type="text"] {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    .green-button {
      background-color: #04AA6D;
      color: white;
      border: none;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 2px 2px;
      cursor: pointer;
      border-radius: 2px;
    }
	
	
	#athleteTable {
  border-collapse: collapse;
  width: 100%;
}

#athleteTable th, #athleteTable td {
  border: 1px solid #ddd;
  padding: 8px;
}

#athleteTable tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

#athleteTable tbody tr:hover {
  background-color: #ddd;
}

#athleteTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

#athleteTable th:nth-child(1) {
  width: 30%; /* Adjust width as needed */
}

#athleteTable th:nth-child(n+2) {
  width: 10%; /* Adjust width as needed */
}

#timerA,
#timer${batch} {
  font-weight: bold;
  font-size: 24px; /* Adjust font size as needed */
}

#timerContainer {
  font-weight: bold;
  font-size: 24px; /* Adjust font size as needed */

  display: inline-block; /* Ensure the container only takes up as much space as needed */
}

p.solid {border-style: solid;}


#userInput input[type="text"] {
  padding: 10px 20px; /* Adjust padding as needed */
  border: none;
  background-color: #f2f2f2; /* Match the button's background color */
  color: black; /* Match the button's text color */
  font-size: 16px; /* Match the button's font size */
  margin: 5px; /* Match the button's margin */
  cursor: pointer;
  border-radius: 2px; /* Match the button's border radius */
  	  width: 100px;
}

  </style>
</head>
<body>
  <div id="userInput">
    <input type="text" id="bibNumber" inputmode="numeric" pattern="\d*" placeholder="Enter Bib No" title="Please enter numeric value only" onkeyup="handleKeyPress(event)">
    <button class="green-button" onclick="recordBibNumber()">Enter</button>
  </div>

   <div id="stopwatches">
    <!-- Batch A Stopwatch -->
    <div class="stopwatch" id="batchA">
      <h2>Batch A Stopwatch</h2>
  <div id="timerContainer">
		  <p class="solid" id="timerA">00:00:00.00</p>
		</div><br>
      <button class="green-button" onclick="startTimer('A')">Start</button>
      <button class="green-button" onclick="stopTimer('A')">Stop</button>
      <button class="green-button" onclick="resetTimer('A')">Reset</button>
      <table id="tableA">
        <thead>
          <tr>
            <th>Bib No</th>
            <th>Name</th>
			
            <!-- Dynamic lap headers -->
            <th id="lapHeadersA"></th>

          </tr>
        </thead>
        <tbody id="tbodyA"></tbody>
      </table>
    </div>
  </div>
  
  
  
  
  <button class="green-button" onclick="startNewBatch()">Add New Batch</button>

  <!-- Form for adding athlete information -->
  <h2>Add Athlete Information</h2>
  
  
 <form id="athleteForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required autocomplete="off"><br><br>
  
  <label for="bibNo">Bib No:</label>
  <input type="text" id="bibNoInput" name="bibNo" pattern="\d*" title="Please enter numeric value only" required autocomplete="off"><br><br>
  
  <label for="batch">Batch:</label>
  <select id="batch" name="batch" required autocomplete="off">
    <option value="">Select batch</option>
    <!-- Add options for batch A to Z -->
    <script>
      for (let i = 65; i <= 90; i++) {
        let letter = String.fromCharCode(i);
        document.write(`<option value="${letter}">${letter}</option>`);
      }
    </script>
  </select><br><br>
  
  <label for="gender">Gender:</label>
  <select id="gender" name="gender" required autocomplete="off">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select><br><br>
  
  <label for="ageCategory">Age Category:</label>
  <select id="ageCategory" name="ageCategory" required autocomplete="off">
    <option value="Nipper">Nipper (8-10 years old)</option>
    <option value="Sprog">Sprog (11-12 years old)</option>
    <option value="Youth">Youth (13-14 years old)</option>
    <option value="Junior">Junior (15-16 years old)</option>
    <option value="Under23">Under 23 (17-22 years old)</option>
    <option value="Elite">Elite (23-29 years old)</option>
    <option value="SubVeteran">Sub-Veteran (30-39 years old)</option>
    <option value="Veteran">Veteran (40-49 years old)</option>
    <option value="Master">Master (50-59 years old)</option>
    <option value="GrandMaster">Grand Master (60-69 years old)</option>
    <option value="GreatGrandMaster">Great Grand Master (70+ years old)</option>
  </select><br><br>
  
  <button class="green-button" type="submit">Add Athlete</button>
    <button class="green-button" onclick="clearTable()">Clear Table</button>
</form>

  <!-- Table to display athlete information -->
  <h2>Athlete Information</h2>
  <table id="athleteTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Bib No</th>
        <th>Batch</th>
        <th>Gender</th>
        <th>Age Category</th>
        <th>Edit</th>
      </tr>
    </thead>
    <tbody id="athleteTableBody"></tbody>
  </table>

  <script>
  
   let athletes = [];

  // Add default athletes for testing
  athletes.push({ name: "John", bibNo: "1", batch: "A", gender: "Male", ageCategory: "Sprogs" });
  athletes.push({ name: "Peter", bibNo: "2", batch: "B", gender: "Male", ageCategory: "Sprogs" });
  athletes.push({ name: "Gids", bibNo: "3", batch: "B", gender: "Male", ageCategory: "Sprogs" });
  athletes.push({ name: "Mack", bibNo: "4", batch: "C", gender: "Male", ageCategory: "Sprogs" });

  let editIndex = -1;

  // Render athlete table after adding default athletes
  renderAthleteTable();

document.getElementById('athleteForm').addEventListener('submit', function(event) {
  event.preventDefault();
  let name = document.getElementById('name').value.trim();
  let bibNo = document.getElementById('bibNoInput').value.trim();
  let batch = document.getElementById('batch').value.trim(); // Retrieve selected batch
  let gender = document.getElementById('gender').value;
  let ageCategory = document.getElementById('ageCategory').value;

  if (editIndex === -1) {
    // Check if the bib number already exists in the table
    if (isBibNumberExist(bibNo)) {
      alert("Bib number already exists in the athlete information.");
      return;
    }

    athletes.push({ name, bibNo, batch, gender, ageCategory }); // Include batch information
  } else {
    athletes[editIndex] = { name, bibNo, batch, gender, ageCategory };
    editIndex = -1;
  }

  renderAthleteTable();
  document.getElementById('name').value = ''; // Clear the athlete name field
  document.getElementById('bibNoInput').value = ''; // Clear the bib number field
});

    // Add this script to set the selected options based on the last selected values
    document.addEventListener('DOMContentLoaded', function() {
      let lastBatch = localStorage.getItem('lastBatch');
      let lastAgeCategory = localStorage.getItem('lastAgeCategory');
      if (lastBatch) {
        document.getElementById('batch').value = lastBatch;
      }
      if (lastAgeCategory) {
        document.getElementById('ageCategory').value = lastAgeCategory;
      }
    });

    function renderAthleteTable() {
      let tableBody = document.getElementById('athleteTableBody');
      tableBody.innerHTML = '';
      athletes.forEach(function(athlete, index) {
        let row = tableBody.insertRow();
        row.insertCell().innerText = athlete.name;
        row.insertCell().innerText = athlete.bibNo;
        row.insertCell().innerText = athlete.batch;
        row.insertCell().innerText = athlete.gender;
        row.insertCell().innerText = athlete.ageCategory;
        let editCell = row.insertCell();
        let editButton = document.createElement('button');
        editButton.innerText = 'Edit';
        editButton.onclick = function() { editAthlete(index); };
        editCell.appendChild(editButton);
      });
    }

    function editAthlete(index) {
      editIndex = index;
      let athlete = athletes[index];
      document.getElementById('name').value = athlete.name;
      document.getElementById('bibNoInput').value = athlete.bibNo;
      document.getElementById('batch').value = athlete.batch;
      document.getElementById('gender').value = athlete.gender;
      document.getElementById('ageCategory').value = athlete.ageCategory;
    }

function recordBibNumber() {
  let bibNumberInput = document.getElementById("bibNumber");
  let bibNumber = bibNumberInput.value.trim();
  if (bibNumber !== "") {
    let batch = findBatch(bibNumber);
    if (batch !== null) {
      logBatchTime(batch);
    } else {
      // Add the bib number to Batch A
      batch = 'A';
      logBatchTime(batch);
    }
    // Update dynamic lap headers after logging the batch time
    updateDynamicLapHeaders('A'); // Always update the lap headers for Batch A
    bibNumberInput.value = "";
    bibNumberInput.focus();
  } else {
    alert("Please enter a bib number.");
  }
}




  function isBibNumberExist(bibNumber) {
    // Check if the bib number already exists in the table
    return athletes.some(athlete => athlete.bibNo === bibNumber);
  }

  // Function to find the batch of the participant based on bib number
  function findBatch(bibNumber) {
    // Find the athlete with the provided bib number
    let athlete = athletes.find(athlete => athlete.bibNo === bibNumber);
    return athlete ? athlete.batch : null; // Return batch if athlete is found, otherwise return null
  }







// Update the logBatchTime function to add data-time attribute to cells
function logBatchTime(batch) {
  // Get the current time from the corresponding stopwatch
  let currentTime = document.getElementById('timer' + batch).innerText;
  let bibNo = document.getElementById('bibNumber').value.trim(); // Get bib number
  let name = getNameFromBibNo(bibNo); // Get name from bib number

  // Initialize an array to store split times for the current batch
  if (!splitTimes[batch]) {
    splitTimes[batch] = {};
  }

  // Initialize an array to store split times for the current participant
  if (!splitTimes[batch][bibNo]) {
    splitTimes[batch][bibNo] = [];
  }

  // Add current split time to the array
  splitTimes[batch][bibNo].push(currentTime);

  // Find the table body for the corresponding batch
  let tbody = document.getElementById("tbody" + batch);

  // Find existing row for the bib number
  let existingRow = findRowByBibNo(tbody, bibNo);

  if (!existingRow) {
    // If the row doesn't exist, create a new row
    let newRow = tbody.insertRow();
    newRow.insertCell().innerText = bibNo;
    newRow.insertCell().innerText = name;
  newRow.insertCell(); // Add an empty cell for "Total Time"
    existingRow = newRow;
  }

  // Add split time to the existing row
  let lapIndex = getLapIndex(existingRow);
  let splitTime = calculateSplitTime(batch, bibNo, lapIndex);
  let timeCell = existingRow.insertCell();
  timeCell.innerText = splitTime; // Add split time to the new cell

  // Add data-time attribute to the cell
  timeCell.setAttribute('data-time', 'true');

  // Increment lap index for the next lap time
  lapIndex++;

  // Update the lap index attribute on the row for the next lap time
  existingRow.setAttribute('data-lap-index', lapIndex);

  // Update dynamic lap headers
  updateDynamicLapHeaders(batch, lapIndex);
  calculateLapTimes(batch, bibNo);
}

	

function updateDynamicLapHeaders(batch) {
  // Find the table header row for lap headers in the corresponding batch
  let headerRow = document.querySelector("#table" + batch + " thead tr");

  // Clear existing lap headers
  headerRow.innerHTML = "";

  // Add static headers (Bib No, Name, Total Time)
  let bibNoHeader = document.createElement("th");
  bibNoHeader.textContent = "Bib No";
  headerRow.appendChild(bibNoHeader);

  let nameHeader = document.createElement("th");
  nameHeader.textContent = "Name";
  headerRow.appendChild(nameHeader);
  
   let totalTimeHeader = document.createElement("th"); // Create new header element
  totalTimeHeader.textContent = "Total Time"; // Set its text content
  headerRow.appendChild(totalTimeHeader); // Append it to the header row

  // Initialize an array to store the number of laps for each participant
  let maxLapsArray = [];

  // Iterate over all split times for the current batch
  if (splitTimes[batch]) {
    Object.values(splitTimes[batch]).forEach(splitTimeArray => {
      maxLapsArray.push(splitTimeArray.length);
    });
  }

  // Find the maximum number of laps across all participants
  let maxLaps = Math.max(...maxLapsArray);

  // Add dynamic lap headers based on maxLaps
  for (let i = 1; i <= maxLaps; i++) {
    let lapHeader = document.createElement("th");
    lapHeader.textContent = "Lap " + i;
    headerRow.appendChild(lapHeader);
  }
}


function calculateLapTimes(batch, bibNo) {
  // Retrieve the split times array for the current batch and bib number
  let splitTimesArray = splitTimes[batch][bibNo];
  
  // Iterate over the split times array to calculate lap times
  for (let i = 1; i < splitTimesArray.length; i++) {
    // Calculate lap time by subtracting the previous split time from the current split time
    let lapTime = calculateTimeDifference(splitTimesArray[i - 1], splitTimesArray[i]);
    
    // Find the corresponding cell in the table and update it with the lap time
    let cell = document.querySelector(`#tbody${batch} tr[data-bib="${bibNo}"] td[data-lap="${i}"]`);
    if (cell) {
      cell.textContent = lapTime;
    }
  }
}



	
function calculateSplitTime(batch, bibNo, lapIndex) {
  let previousSplitTime = '00:00:00.00';
  
  // Retrieve the previous split time from the array
  if (splitTimes[batch] && splitTimes[batch][bibNo] && lapIndex > 0) {
    previousSplitTime = splitTimes[batch][bibNo][lapIndex - 1];
  }
  
  let currentTime = document.getElementById('timer' + batch).innerText;
  return calculateTimeDifference(previousSplitTime, currentTime);
}



function calculateTimeDifference(previousTime, currentTime) {
  // Convert time strings to milliseconds and calculate the difference
  let previousMillis = timeStringToMillis(previousTime);
  let currentMillis = timeStringToMillis(currentTime);
  console.log("Previous Milliseconds:", previousMillis); // Log previous milliseconds
  console.log("Current Milliseconds:", currentMillis); // Log current milliseconds
  let difference = currentMillis - previousMillis;
  console.log("Difference (Milliseconds):", difference); // Log difference in milliseconds

  // Convert difference back to time string format
  let splitTime = millisToTimeString(difference);
  console.log("Split Time:", splitTime); // Log split time
  return splitTime;
}

    function timeStringToMillis(timeString) {
      let parts = timeString.split(':');
      let hours = parseInt(parts[0]) * 3600000;
      let minutes = parseInt(parts[1]) * 60000;
      let seconds = parseFloat(parts[2]) * 1000;
      return hours + minutes + seconds;
    }

    function millisToTimeString(milliseconds) {
      let hours = Math.floor(milliseconds / 3600000);
      milliseconds %= 3600000;
      let minutes = Math.floor(milliseconds / 60000);
      milliseconds %= 60000;
      let seconds = Math.floor(milliseconds / 1000);
      milliseconds %= 1000;
      return pad(hours) + ':' + pad(minutes) + ':' + pad(seconds) + '.' + pad(Math.floor(milliseconds / 10));
    }
	
	
  function findRowByBibNo(tbody, bibNo) {
    // Find existing row for the bib number
    for (let i = 0; i < tbody.rows.length; i++) {
      let row = tbody.rows[i];
      if (row.cells[0].innerText === bibNo) {
        return row;
      }
    }
    return null; // Return null if row is not found
  }

  function getLapIndex(row) {
    // Get the lap index from the data attribute or default to 0
    let lapIndex = parseInt(row.getAttribute('data-lap-index')) || 0;
    return lapIndex;
  }

  function getNameFromBibNo(bibNo) {
    // Find the athlete with the provided bib number
    let athlete = athletes.find(athlete => athlete.bibNo === bibNo);
    return athlete ? athlete.name : ''; // Return name if athlete is found, otherwise return empty string
  }

  let timers = {};
  let isRunning = {};
let splitTimes = {};

  function startTimer(batch) {
    if (!isRunning[batch]) {
      let startTime = Date.now();
      timers[batch] = setInterval(function() {
        let elapsedTime = Date.now() - startTime;
        updateTimer(batch, elapsedTime);
      }, 10);
      isRunning[batch] = true;
    }
  }

  function stopTimer(batch) {
    clearInterval(timers[batch]);
    isRunning[batch] = false;
  }

  function resetTimer(batch) {
    stopTimer(batch);
    document.getElementById('timer' + batch).innerText = '00:00:00.00';
  }

  function updateTimer(batch, elapsedTime) {
    let milliseconds = Math.floor((elapsedTime % 1000) / 10);
    let seconds = Math.floor((elapsedTime / 1000) % 60);
    let minutes = Math.floor((elapsedTime / (1000 * 60)) % 60);
    let hours = Math.floor((elapsedTime / (1000 * 60 * 60)) % 24);

    document.getElementById('timer' + batch).innerText = 
      pad(hours) + ':' + pad(minutes) + ':' + pad(seconds) + '.' + pad(milliseconds);
  }

  function pad(number) {
    if (number < 10) {
      return '0' + number;
    }
    return number;
  }

  let nextBatchIndex = 1;


function handleKeyPress(event) {
  if (event.key === "Enter") {
    recordBibNumber();
  }
}

    function clearTable() {
      // Prompt the user for confirmation
      let confirmation = confirm("Are you sure you want to clear the table?");
      
      // If the user confirms, clear the table
      if (confirmation) {
        let tableBodies = document.querySelectorAll("tbody");
        tableBodies.forEach(tableBody => {
          tableBody.innerHTML = ""; // Clear the table body content
        });
      }
    }






 document.addEventListener('DOMContentLoaded', function() {
    // Get all tables within the stopwatches section
    let tables = document.querySelectorAll('#stopwatches table');

    // Iterate over each table
    tables.forEach(function(table) {
      // Get the table body of the current table
      let tbody = table.querySelector('tbody');

      // Add event listener to the table body
      tbody.addEventListener('dblclick', function(event) {
        // Check if the double-clicked element is a cell
        if (event.target.tagName === 'TD') {
          // Make the cell editable
          let cell = event.target;
          cell.contentEditable = true;
          // Add a border to indicate editing
          cell.style.border = '1px solid #ccc';
          // Focus on the cell to allow immediate editing
          cell.focus();
        }
      });

      // Add touch event listeners to enable long press for mobile devices
      tbody.addEventListener('touchstart', function(event) {
        // Set a timeout to detect long press (500 milliseconds)
        touchTimer = setTimeout(function() {
          // Check if the touched element is a cell
          if (event.target.tagName === 'TD') {
            // Make the cell editable
            let cell = event.target;
            cell.contentEditable = true;
            // Add a border to indicate editing
            cell.style.border = '1px solid #ccc';
            // Focus on the cell to allow immediate editing
            cell.focus();
          }
        }, 500); // Adjust the timeout duration as needed
      });

      // Clear the touch timer if the touch ends before the timeout
      tbody.addEventListener('touchend', function() {
        clearTimeout(touchTimer);
      });

      // Add event listener to save edited content when blurring from cell
      tbody.addEventListener('blur', function(event) {
        // Check if the blurred element is a cell
        if (event.target.tagName === 'TD') {
          // Save the edited content
          saveEditedContent(event.target);
        }
      });

      // Add event listener to save edited content when pressing Enter
      tbody.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
          // Check if the focused element is a cell
          if (document.activeElement.tagName === 'TD') {
            // Prevent the default behavior of pressing Enter in a contenteditable element
            event.preventDefault();
            // Save the edited content
            saveEditedContent(document.activeElement);
          }
        }
      });
    });
  });

  function saveEditedContent(cell) {
    // Remove the border to indicate the end of editing
    cell.style.border = 'none';
    // Make the cell non-editable
    cell.contentEditable = false;
  }



  function startNewBatch() {
    let batchName = String.fromCharCode(65 + nextBatchIndex); // Convert index to character code (A=65, B=66, C=67, ...)
    createNewBatch(batchName);
    nextBatchIndex++;
  }

function createNewBatch(batch) {
  let newDiv = document.createElement('div');
  newDiv.classList.add('stopwatch');
  newDiv.id = 'batch' + batch;
  newDiv.innerHTML = `
    <h2>Batch ${batch} Stopwatch</h2>
    <div id="timerContainer">
      <p class="solid" id="timer${batch}">00:00:00.00</p>
    </div><br>
    <button class="green-button" onclick="startTimer('${batch}')">Start</button>
    <button class="green-button" onclick="stopTimer('${batch}')">Stop</button>
    <button class="green-button" onclick="resetTimer('${batch}')">Reset</button>
    <table id="table${batch}">
      <thead>
        <tr>
          <th>Bib No</th>
          <th>Name</th>
          <!-- Dynamic lap headers -->
          <th id="lapHeaders${batch}"></th>
          <th>Total Time</th>
        </tr>
      </thead>
      <tbody id="tbody${batch}"></tbody>
    </table>
  `;
  document.getElementById('stopwatches').appendChild(newDiv);

  // Add event listeners to the newly created table
  let newTable = newDiv.querySelector('table');
  let newTbody = newTable.querySelector('tbody');

  // Add event listener to the table body
  newTbody.addEventListener('dblclick', function(event) {
    // Check if the double-clicked element is a cell
    if (event.target.tagName === 'TD') {
      // Make the cell editable
      let cell = event.target;
      cell.contentEditable = true;
      // Add a border to indicate editing
      cell.style.border = '1px solid #ccc';
      // Focus on the cell to allow immediate editing
      cell.focus();
    }
  });

  // Add event listener to save edited content when blurring from cell
  newTbody.addEventListener('blur', function(event) {
    // Check if the blurred element is a cell
    if (event.target.tagName === 'TD') {
      // Save the edited content
      saveEditedContent(event.target);
    }
  });

  // Add event listener to save edited content when pressing Enter
  newTbody.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
      // Check if the focused element is a cell
      if (document.activeElement.tagName === 'TD') {
        // Prevent the default behavior of pressing Enter in a contenteditable element
        event.preventDefault();
        // Save the edited content
        saveEditedContent(document.activeElement);
      }
    }
  });
}

  
</script>

</body>
</html>

Sign In

Calculating totals from a dynamic Table

Recommended Posts

Jakes79

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity