I have spent more than two days trying to solve this issue, but I still can’t get the reCAPTCHA value to return properly in my form. Interestingly, when I log the field using console.log, it does return the value. Additionally, it’s worth noting that the form spans across two pages

provide the solution

I’m trying to make a tournament pairing similar to the new UEFA Champion League format. There are 36 teams competing in the league phase. They are divided into 4 pots. Each team will play 8 matches (2 opponents from each pot). That adds up to 144 matches in total. I have a hard time coming up a function with good backtracking logic. Here is my failed code:

https://jsfiddle.net/4cgm1Lo8/5/

const pots = [
    ["A1", "A2", "A3", "A4", "A5", "A6", "A7", "A8"],
    ["B1", "B2", "B3", "B4", "B5", "B6", "B7", "B8"],
    ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8"],
    ["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8"],
];

const MATCH_COUNT = 144;
const MAX_ROUNDS = 8

function run() {
    const teamIds = _.flatten(pots)
    return teamIds.reduce((matches,thisTeamId) => {
        for (let round = 0; round < MAX_ROUNDS; round++) {
            const thisTeamMatches = matches.filter(match => match.includes(thisTeamId))
            if (thisTeamMatches.length >= MAX_ROUNDS) {
                break;
            }
            const pool = teamIds.filter(poolTeamId => {
                const encounteredBefore = thisTeamMatches.find(match => match.includes(poolTeamId))
                const potEncounterCount = thisTeamMatches.filter(match => {
                    const opponentId = match.find(m => m != thisTeamId)
                    return getTeamPot(opponentId, pots) === getTeamPot(poolTeamId, pots)
                })
                const poolTeamIdMatches = matches.filter(match => match.includes(poolTeamId))
                return poolTeamId != thisTeamId && !encounteredBefore && potEncounterCount.length < 2 && poolTeamIdMatches.length < MAX_ROUNDS
            })
            matches.push([thisTeamId, _.sample(pool)])
        }
        return matches
    }, [] as string[][])
}



function getTeamPot(teamId: string, pots: string[][]) {
    return pots.findIndex((pot) =>
        pot.find((potTeamId) => potTeamId === teamId),
    );
}

function getOpponent(yourTeamId: string, match: string[][]){
    return match.find(m => m != thisTeamId)                 
}

console.log(run())

This function is unable to create 144 matches. Some of the matches created have undefined opponents. The code really doesn’t account for situations where it is unable to find a valid opponent for a team.

How would you make a backtracking method so that it can fill up some of the matchups that contains undefined opponent?

I’m starting with npm and despite several tutorials, advice, I can’t get the swipe JS library to work, only js, not with a framework

Link : https://swiperjs.com/get-started

I created a file for my script, I took the basic code to initialize my slider:
script.js

// Swiper
import {Swiper} from '../../node_modules/swiper/swiper-bundle.js';

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

HTML, I added a module type because the console asked me to do so

<script type="module"  src="dist/js/script.js"></script>
</body>
</html> 

css /scss -> here ok
@use '../../node_modules/swiper/swiper-bundle.css';

I’m trying to customise the suitelet of the EFT Bill Payment and set a defaultValue on a filter.

I found this documentation : [https://docs.oracle.com/en/cloud/saas/netsuite/ns-online-help/section_0724095855.html]

here is the code that I try to implement :

const onRequest = (context) => {
try {

            var epPlugin = plugin.loadImplementation({type: "customscript_17239_ep_api_plugin",implementation: "default"});
            var epPaymentSelectionForm = epPlugin.getEPForm(); epPaymentSelectionForm.setPaymentType('EFT');
            epPaymentSelectionForm.setGlobalPayment(false);
            
            //FILTERS 
            epPaymentSelectionForm.AddFilter(true,'custbody18', 'checkbox', 'Block for payment', 'normal', 'T');
            epPaymentSelectionForm.AddFilter(true,'custbody17', 'multiselect', 'Payment Method', 'inline','1,6', '', 'customlist819', '');
        
          
            //COLUMNS
            epPaymentSelectionForm.AddColumn('text', 'Payment Method', 'custbody17'); 
            epPaymentSelectionForm.BuildUI(context);
            var form = epPaymentSelectionForm.GetForm();
            context.response.writePage(form);
            
         } catch (e) {
            log.error("error in loading",e)
        }
    }

    return {onRequest}

});

the error is the following : ‘Invalid value. Please enter valid default value.’ I have already try ‘T’, ‘true’, ‘True’, true none of them work.

Anyone has ever faced this issue ?

Thank you,

The defaultValue is never set neither for the first filter or the second one.

Assume I have an editable div which contains these lines:

How to retrieve the position of ‘w’ in the text ?

I can’t use:

window.getSelection().anchorOffset;

Because this gets the position in the line, but not in text, that is 0 instead of 5.

I prefer not to use:

element.innerText.indexOf(selectedText);

Because it may retrieve similar texts.

I’m using CodeMirror 6 with Angular 14.
I’d like to turn off some parsing errors I get with this linter.

This is my code:

// other import...
import { basicSetup } from 'codemirror';
import { javascript, esLint } from '@codemirror/lang-javascript';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { indentWithTab, redo, undo } from '@codemirror/commands';
import { linter, lintGutter } from '@codemirror/lint';
import * as eslint from "eslint-linter-browserify";

@ViewChild('textEditor', { static: false }) textEditor: any;
editorView: EditorView;
val: string = '';

// constructor, other functions...
initCodeMirror() {
    let editorElement = this.textEditor.nativeElement;
    let context = this;

    textMode = javascript();
    const config = {
        parserOptions: {
        ecmaVersion: 6,
    }
    let exts = [basicSetup, keymap.of([indentWithTab])];
    exts.push(lintGutter(), linter(esLint(new eslint.Linter(), config)));
    let state: EditorState = EditorState.create({
        doc: this.val,
        extensions: exts
    });
    this.editorView = new EditorView({
        state,
        parent: editorElement
    });

    this.editorView.focus();
}

I found this example but here it explains how to create a completely custom linter and that’s not what I want.

I would like to know if there is a way to create a custom linter starting from a set of rules defined in a standard linter (like the one I’m using).

Good afternoon,
I have a simple HTML page that run batch stopwatches, and you can log athlete’s bib numbers accordingly to log split times. However, my total time is calculated wrong, as it add to the current time every time. I am not an expert in coding, so need some help finding the issue and fix it. WIll really appreciate if someone can help me

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;
    }

    .blue-button {
      background-color: #6495ED;
      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;
    }   
    
        .red-button {
      background-color: #E97451;
      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>
           <th>Total Laps</th>
           <th>Total Time</th>                 
            <!-- Dynamic lap headers -->
            <th id="lapHeadersA"></th>
          </tr>
        </thead>
        <tbody id="tbodyA"></tbody>
      </table>
    </div>
  </div>
  
  
  
  
  <button class="blue-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="red-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
  }


  function calculateTotalTime(batch, bibNo) {
  let splitTimesArray = splitTimes[batch][bibNo];
  let totalTimeMillis = 0;
  
  // Sum up all the split times
  for (let i = 0; i < splitTimesArray.length; i++) {
    totalTimeMillis += timeStringToMillis(splitTimesArray[i]);
  }
  
  // Convert the total time back to the time string format
  return millisToTimeString(totalTimeMillis);
}




// 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 "Laps done"
  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


    let totalTimeCell = existingRow.cells[3];
    let totalTime = calculateTotalTime(batch, bibNo);
    totalTimeCell.innerText = totalTime;

  // 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 totalLapsHeader = document.createElement("th"); // Create new header element
  totalLapsHeader.textContent = "Total Laps"; // Set its text content
  headerRow.appendChild(totalLapsHeader); // Append it to the header row
  
   let totalTimeHeader = document.createElement("th");
    totalTimeHeader.textContent = "Total Time";
    headerRow.appendChild(totalTimeHeader);
  
  


  // 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) {
    const lapStartTime = document.querySelector(`#tbody${batch} tr[data-bib="${bibNo}"] td:nth-child(4)`);
    const lapEndTime = document.querySelector(`#tbody${batch} tr[data-bib="${bibNo}"] td:nth-child(5)`);

    if (lapStartTime && lapEndTime) {
        const startTime = lapStartTime.innerText.trim();
        const endTime = lapEndTime.innerText.trim();
        
        // Your calculation logic here
    } else {
        console.error("Unable to find lap start or end time for batch " + batch + ", bibNo " + bibNo);
    }
}


    
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>
           <th>Total Laps</th>
           <th>Total Time</th>      
          <!-- Dynamic lap headers -->
          <th id="lapHeaders${batch}"></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>

I am not an expert, and doing this with the help of ChatGPT. But it have its limitations. Cannot get the sum of each batch to calculate correctly.

I want to know the caret distance from the left in side an input field. How can I achieve this ?

I know that inputEl.selectionStart will give me the position of the caret but how can I determine the distance from the left ?

So i need to do a school project and i would like to make a page with a cartoon drawing of a car and by hovering over different parts they highlight and by clicking they enlarge and a text appears by. I don’t want the full answer i just would like to know how to build the clickable car (and my idea was to either putting a bunch of images with links or retextured buttons) and the zoom animation with the text appearing. Thanks to everyone willing to help.

I have tried but i cant figure out how to allign different images close to eachother and i cantmanage to give each button a different texture and alignment. For the hovering i managed to give it an “expanding” effect but the zoom animation and the text appearing i just can’t even start to figure It out

I have a ratio numeric field which is editable and it is set to have percentage formatting using the column attribute:

{
   field: weight,
   editable: true,
   valueFormatter: percentFormatter,
   valueParser: 'Number(newValue)'    
}

However, when the user clicks the cell to edit it, she sees a ratio instead of a percentage. How to make sure that the users always sees a percentage though the field is internally stored a ratio? Is there a dedicated AG Grid configuration for that?

Problem

I’ve created a Vue application with Vite. Afterwards, I’ve installed Electron and Electron Forge. If I create and pack the App, all works fine after installing on my Linux system. But on other systems it doesn’t work.

The reason is, that the index.html loads the main.js from the absolute path of the /dist/assets/ directory which is not obviously not existing on other systems.

How can I config Vite to use the compiled JavaScript from the assets folder, so I can use the packaged (.deb) file on other systems?

Folder structure

├── dist/
│  ├── assets/
│  │  ├── index-<bunchofchars>.js
│  ├── index.html
├── public/
├── src/
│  ├── App.vue
│  └── main.js
├── forge.config.js
├── index.html
├── index.js
├── jsconfig.json
├── package.json
├── preload.json
└── vite.config.js

Source Code

/forge.config.js

const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin'],
    },
    {
      name: '@electron-forge/maker-deb',
      config: {},
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {},
    },
  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="src/main.js"></script>
  </body>
</html>

/index.js

// index.js
const { app, BrowserWindow } = require("electron");
const path = require("path");
const express = require('./backend/app')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  win.loadFile("dist/index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

/jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

/package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "private": true,
  "main": "index.js",
  "author": "The Author",
  "description": "A simple test",
  "license": "UNLICENSED",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "build-start": "npm run build && electron .",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "dependencies": {
    "axios": "^1.6.8",
    "electron-squirrel-startup": "^1.0.0",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.4.0",
    "@electron-forge/maker-deb": "^7.4.0",
    "@electron-forge/maker-rpm": "^7.4.0",
    "@electron-forge/maker-squirrel": "^7.4.0",
    "@electron-forge/maker-zip": "^7.4.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
    "@electron-forge/plugin-fuses": "^7.4.0",
    "@electron/fuses": "^1.8.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "^30.0.2",
    "vite": "^5.2.8"
  }
}

/preload.js

// preload.js
window.addEventListener("DOMContentLoaded", () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector);
    if (element) element.innerText = text;
  };

  for (const type of ["chrome", "node", "electron"]) {
    replaceText(`${type}-version`, process.versions[type]);
  }
});

/vite.config.js

import { fileURLToPath, URL } from 'node:url'
import path from 'path'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base: path.resolve(__dirname, './dist/'),
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Is it possible to extend default formatter textarea of Tabulator without losing its base functionality?

function myTextarea(cell) {
    var value = cell.getValue().replace(/s{2,}/g, ' ');
    cell.setValue(value);
    return new Tabulator.formatters.textarea(cell); 
}

I have the following code that works fine for me, and it have been used succesfully multiple times in my application that I’m working on:

function rotate(position, angle, axis) {
    if (angle !== 0) {
        const x = position.x;
        const y = position.y;
        const z = position.z;
        const sin = Math.sin(angle);
        const cos = Math.cos(angle);

        if (axis === 'X') {
            position.x = x * cos + z * sin;
            position.z = -x * sin + z * cos;
        } else if (axis === 'Y') {
            position.y = y * cos - z * sin;
            position.z = y * sin + z * cos;
        } else if (axis === 'Z') {
            position.x = x * cos - y * sin;
            position.y = x * sin + y * cos;
        }
    }

    return position;
}

function applyAngle(position, angles) {
    position = rotate(position, angles.x, 'X');
    position = rotate(position, angles.y, 'Y');
    position = rotate(position, angles.z, 'Z');

    return position;
}

I want to create an “addAngles(a, b)” function where I can simply add angles together. I have written a unit test for this:

const testAngleA = {
    x: Math.random() * Math.PI * 2,
    y: Math.random() * Math.PI * 2,
    z: Math.random() * Math.PI * 2,
};

const testAngleB = {
    x: Math.random() * Math.PI * 2,
    y: Math.random() * Math.PI * 2,
    z: Math.random() * Math.PI * 2,
};

const testAdditionResult = addAngles(testAngleA, testAngleB);

let testPositionA = {x: 0, y: 1, z: 0};
let testPositionB = {x: 0, y: 1, z: 0};

testPositionA = applyAngle(testPositionA, testAdditionResult);

testPositionB = applyAngle(testPositionB, testAngleA);
testPositionB = applyAngle(testPositionB, testAngleB);

let strA = JSON.stringify(testPositionA);
let strB = JSON.stringify(testPositionB);

if(strA === strB) {
    console.log('succeed', strA, strB);
} else {
    console.log('failed', strA, strB);
}

I have tried a lot of things (Quaternion multiplication, matrix multiplication) but I can’t make it. Chat gpt, Geminy and Claude is also struggeling to solve it 🙂

How to validate input file upload using angular 15 if a user has changed the extension of some malicious file.

I am trying to implement “file-type”, but I am unable to do so with Angular and also tried to check MIME type but that is also not working.

I’ve read some blog articles and documentation in Node.js’s official docs. They mention that Node.js uses threads from a thread pool when handling blocking tasks.

Another confusing part is that all asynchronous functions run on separate threads? such as setTimeout, fetch, or any network call.

Is there any way to visualize how many threads are being used or to write logs when a thread is used or left?