Calculating Table Row and Showing The Result into Text Box

Ask the community
, , ,
1

Hi! I’m new on developing website using Wix and Velo Code.

Currently, I am creating a member area that has a database in it. I want to calculate a table that is connected to a CMS dataset. The data in the CMS comes from an input column that will be filled in by our website members. In the database, there is a column that contains a time duration with the format (hh:mm:ss) which comes from a time counter that I created with code, but in the CMS the column type is Text. This can be seen in the image below:

Table to be calculated
image

Please help me how to calculate the time duration presented downwards to be displayed in the text box containing the words “Total coaching log” which is located below the table.

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(function () {
    $w("#resetTimer").onClick(function () {
        resetTimer();
    });

    $w("#startStop").onClick(function () {
        startStop();
    });
    $w("#saveButton").onClick(() => {
        saveTimerValue();
    });
});

//▶TIMER
var x;
var startOrStop = 0;
let lastTimerValue = "";

//▶START AND STOP TIMER
function startStop() {

    startOrStop = startOrStop + 1;

    if (startOrStop === 1) {
        start();
        $w("#startStop").label = "Pause ⏸"
    } else if (startOrStop === 2) {
        startOrStop = 0;
        pauseTimer();
        $w("#startStop").label = "Start ▶"
        $w("#saveButton").show();
    } else {
        startOrStop = 0;
        pauseTimer();
        $w("#startStop").label = "Start ▶"
        $w("#saveButton").show();
    }

}

//▶START TIMER
function start() {
    x = setInterval(timer, 10);
}

//▶PAUSE TIMER
function pauseTimer() {
    clearInterval(x);
}

var milisec = 0;
var sec = 0;
var min = 0;
var hr = 0;

var miliSeconds = 0;
var Seconds = 0;
var Minutes = 0;
var Hour = 0;

function timer() {

    //▶MAIN TIMER
    miliSeconds = checkTimerZeros(milisec);
    Seconds = checkTimerZeros(sec);
    Minutes = checkTimerZeros(min);
    Hour = checkTimerZeros(hr);

    milisec = ++milisec;

    if (milisec === 100) {
        milisec = 0;
        sec = ++sec;
    }

    if (sec === 60) {
        min = ++min;
        sec = 0;
    }
    if (min === 60) {
        min = 0;
        hr = ++hr;

    }

    lastTimerValue = `${Hour}:${Minutes}:${Seconds}`;
    $w("#timer").text = lastTimerValue;

}

function checkTimerZeros(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

//▶RESET TIMER
function resetTimer() {

    milisec = 0;
    sec = 0;
    min = 0
    hr = 0;

    $w("#timer").text = `00:00:00`;

}

function saveTimerValue() {
    // Field duration field
    $w("#timerField").value = lastTimerValue;
   
}

//END ▶

/**
*	Adds an event handler that runs when the element is clicked.
	[Read more](https://www.wix.com/corvid/reference/$w.ClickableMixin.html#onClick)
*	 @param {$w.MouseEvent} event
*/
export function submitButton_click(event) {

    // Get date from #sessionDateField
	let rawDate = new Date($w('#sessionDateField').value);

    // Format date into "DD/MM/YYYY"
    let day = String(rawDate.getDate()).padStart(2, '0');
    let month = String(rawDate.getMonth() + 1).padStart(2, '0'); // Month start from 0, then +1
    let year = rawDate.getFullYear();

    let formattedDate = `${year}-${month}-${day}`;

    // Save input to data collection
    let toSave = {
        "coacheeName": $w('#coacheeNameField').value,
        "coacheeTitle": $w('#coachTitleField').value,
        "sessionDate": formattedDate,  // Gunakan tanggal yang sudah diformat
        "coachingAgenda": $w('#coachingAgendaField').value,
        "improvementNote": $w('#improvementNoteField').value,
        "coachingDuration": lastTimerValue,
        // Add another properties if needed
    };
    
    wixData.save("CoachingLog", toSave)
        .then((results) => {
            console.log("Data saved:", results);
        })
        .catch((err) => {
            console.error("Error saving data:", err);
    });
}
2

Hi, Denito_Respati !

If you store the time in milliseconds in a collection, it should be easier to calculate the total later.