We Keep Coding

Is there a way to display a unique countdown timer in table rows with time stored in the database using Asp.net Core MVC?

I am building a cart booking system. Since bookings can be from 1 hour to 6 hours, there must be a countdown timer using the time stored in the database. All booked carts are displayed in a table, with a countdown timer for each cart stored in the database.
<table id="example" class="table table-striped dt-responsive nowrap" width="100%"
cellspacing="0">
<thead class="thead-light">
<tr>
<th>
#Html.DisplayNameFor(model => model.CartNumber)
</th>
<th>
#Html.DisplayNameFor(model => model.CartType)
</th>
<th>
#Html.DisplayNameFor(model => model.Status)
</th>
<th>
#Html.DisplayNameFor(model => model.CustomerID)
</th>
<th>
#Html.DisplayNameFor(model => model.Duration)
</th>
<th>
Remaining Time
</th>
<th>
#Html.DisplayNameFor(model =>
model.ImageContent)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem =>
item.CartNumber)
</td>
<td>
#Html.DisplayFor(modelItem =>
item.CartType)
</td>
<td>
#Html.DisplayFor(modelItem => item.Status)
</td>
<td>
#Html.DisplayFor(modelItem =>
item.CustomerID)
</td>
<td>
#Html.DisplayFor(modelItem =>
item.Duration)
</td>
<td>
<p class="demo#(item.ID)"></p>
</td>
<td>
<img height="50" width="70"
src='#Url.Action( "BookedCarts", "File", new { id = item.ID })' />
</td>
</tr>
}
</tbody>
</table>
<script>
// Set the date we're counting down to
var countDownDate = new Date('#item.DurationCountdown').getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
//document.getElementsByClassName('demo')[0].innerHTML = hours + "h "
// + minutes + "m " + seconds + "s ";
[... document.getElementsByClassName("demo#(item.ID)")].forEach(e =>
e.innerHTML = hours + "h "
+ minutes + "m " + seconds + "s ");
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementsByClassName("demo")[0].innerHTML = "EXPIRED";
}
}, 1000);
</script>
My challenge is that only one timer is displayed for all carts; I want all the booked carts to display unique countdown timers based on the hours booked. Below is my code. I am using JavaScript Countdown Timer and ASP.NET Core MVC with Razor Pages, and I will greatly appreciate any help. 

In my opinion, I think we don't need to think about how to save the remain time in our database. The records are useless when the orders were finished, they should be deleted to save the resource.
Countdown based on creating records, I think this fits the countdown you want to be unique.
As you know, when you created a new record and it will have the createTime. And I don't know what the bookings time value, so I assume it is 2 hours, you can accord to your business to change it. Then I can accord to the createTime to get the remain seconds like below.
Then we don't need to store the remain time in our database, every time when we refresh the page, it will returns the exact time with the entity data.
I also find a good countdown sample for you. You can check the source code and use it in your page. We just need to replace the value of data.
Source Code:
/**
* Plugin
* #author Tungse
* #param dayTag show day html
* #param hourTag show hour html
* #param minTag show minutes html
* #param secTag show second html
* #param dayClass bind day tag ClassName
* #param hourClass bind hours tag ClassName
* #param minClass bind minutes tag ClassName
* #param secClass bind seconds tag ClassName
* #param isDefault whether use default tagTemp
* #param showTemp show template 0：(day hour min sec) 1：(hour min sec)
* #param backfun finish callback
*/
(function ($) {
$.fn.countdownsync = function (tagTemp, backfun) {
var data = "";
var _DOM = null;
var _defaultTag = _TempTag = {
dayTag: "<li class='countdownday'></li><li class='split'>day</li>",
hourTag: "<li class='countdownhour'></li><li class='split'>:</li>",
minTag: "<li class='countdownmin'></li><li class='split'>:</li>",
secTag: "<li class='countdownsec'></li><li class='split'>:</li>",
dayClass: ".countdownday",
hourClass: ".countdownhour",
minClass: ".countdownmin",
secClass: ".countdownsec",
isDefault: false,
showTemp:0
};
var _temp = $.extend(_TempTag, tagTemp);
var TIMER;
createdom = function (dom) {
_DOM = dom;
data = Math.round($(dom).attr("data"));
var htmlstr = (_temp.showTemp == 0 ? _temp.dayTag : "") + _temp.hourTag + _temp.minTag + _temp.secTag;
if (_temp.isDefault) {
htmlstr = (_temp.showTemp == 0 ? _defaultTag.dayTag : "") + _defaultTag.hourTag + _defaultTag.minTag + _defaultTag.secTag;
htmlstr = "<ul class='countdown'>" + htmlstr + "</ul>";
$("head").append("<style type='text/css'>.countdown {list-style:none;}.countdown li{float:left;background:#000;color:#fff;border-radius:50%;padding:10px;font-size:14px; font-weight:bold;margin:10px;}.countdown li.split{background:none;margin:10px 0;padding:10px 0;color:#000000;}</style>");
}
$(_DOM).html(htmlstr);
reflash();
};
reflash = function () {
var range = data,
secday = 86400, sechour = 3600,
days = parseInt(range / secday),
hours = _temp.showTemp == 0 ? parseInt((range % secday) / sechour) : parseInt(range / sechour),
min = parseInt(((range % secday) % sechour) / 60),
sec = ((range % secday) % sechour) % 60;
data--;
if (range < 0) {
window.clearInterval(TIMER); //clear timer
} else {
$(_DOM).find(_temp.dayClass).html(nol(days));
$(_DOM).find(_temp.hourClass).html(nol(hours));
$(_DOM).find(_temp.minClass).html(nol(min));
$(_DOM).find(_temp.secClass).html(nol(sec));
}
if ((range - 1) == 0) {
undefined == backfun ? function () { } : backfun();
}
};
TIMER = setInterval(reflash, 1000);
nol = function (h) {
return h > 9 ? h : '0' + h;
};
return this.each(function () {
var $box = $(this);
createdom($box);
});
};
})(jQuery);
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>countdown plugin</title>
<style>
h3{margin-top: 30px}
.ys1{
color: #009AC1;
font-weight: bold;
}
.ys2{
color: #2FAB11;
font-weight: bold;
}
.ys3{
color: #C16000;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h3>60s countdown</h3>
<p>data="60" </p>
<div class="container timeBar ys1" data="60" ></div>
<h3>600s countdown</h3>
<p>data="600" </p>
<div class="container timeBar ys2" data="600" ></div>
<h3>160000s countdown</h3>
<p>data="160000" </p>
<div class="container timeBar ys3" data="160000" ></div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="countdown.js"></script>
<script type="text/javascript">
$(function(){
$(".timeBar").each(function () {
$(this).countdownsync({
dayTag: "",
hourTag: "<label class='tt hh dib vam'>00</label><span> hours </span>",
minTag: "<label class='tt mm dib vam'>00</label><span> minutes </span>",
secTag: "<label class='tt ss dib vam'>00</label><span> seconds </span>",
dayClass: ".dd",
hourClass: ".hh",
minClass: ".mm",
secClass: ".ss",
isDefault: false,
showTemp:1
}, function () {
location.reload();
});
});
});
</script>
</body>
</html>

Countdown counter in Hours

I want to write code for a counter which countdown from 4 hours in hour, minute and second components (3:59:59 ... 3:59:58 ..... 0:0:1 ... 0:0:0) in which the user can increment or decrement any of those components by using +/-icons. I wrote a code but I cannot make it? How can I complete it? In my code just increase/decrease icon works.
function increment() {
hour = parseInt(document.getElementsByName("hour")[0].value);
minute = parseInt(document.getElementsByName("minute")[0].value);
second = parseInt(document.getElementsByName("second")[0].value);
if (second + 1 == 61) {
minute = minute + 1;
if (minute == 61) {
hour = hour + 1;
if (hour == 3) {
hour = 0;
}
minute = 0;
}
second = 0;
} else {
second += 1;
}
document.getElementsByName("hour")[0].value = hour.toString();
document.getElementsByName("minute")[0].value = minute.toString();
document.getElementsByName("second")[0].value = second.toString();
}
function decrement() {
hour = parseInt(document.getElementsByName("hour")[0].value);
minute = parseInt(document.getElementsByName("minute")[0].value);
second = parseInt(document.getElementsByName("second")[0].value);
if (second - 1 <= 0) {
minute -= 1;
if (minute <= 0) {
hour -= 1;
if (hour <= 0) {
hour = 2;
minute = 60;
} else {
minute = 60;
}
}
second = 60;
} else {
second -= 1;
}
document.getElementsByName("hour")[0].value = hour.toString();
document.getElementsByName("minute")[0].value = minute.toString();
document.getElementsByName("second")[0].value = second.toString();
}
<html>
<body>
<table>
<tr>
<td>Hour</td>
<td>
<input type="text" name = "hour" placeholder = "HOUR" value="0"/>
</td>
<td>Minute</td>
<td>
<input type="text" name="minute" placeholder="MINUTE" value="0"/>
</td>
<td>Second</td>
<td>
<input type="text" name="second" placeholder="SECOND" value="0"/>
</td>
</tr>
<tr>
<td><br>
<input type="button" name="+" value="+" onclick= "return increment()"/>
</td>
<td><br>
<input type="button" name="-" value="-" onclick="return decrement()"/>
</td>
</tr>
</table>
</body>
</html>

Here is how i would go about it, first of all, you had the script execute before the body which caused problems since the elements you were trying to select didn't exist yet,
also, you're trying to do everything everywhere, but if you keep state, it is much more manageable
<script>
const maxTime = 4 * 60 * 60; // 4 hours in seconds
const hours = document.querySelector("[name='hour']");
const minutes = document.querySelector("[name='minute']");
const seconds = document.querySelector("[name='second']");
let remaining = maxTime;
let counter = setInterval(decrement, 1000);
function increment() {
remaining = Math.max(maxTime, remaining + 1);
display();
}
function decrement() {
remaining = Math.max(0, remaining - 1);
display();
}
function display() {
const time = new Date(remaining * 1000).toISOString();
hours.value = time.slice(11, 13);
minutes.value = time.slice(14, 16);
seconds.value = time.slice(17, 19);
}
</script>

You can use the setInterval function
This will call your decrement function every second
setInterval(decrement, 1000)
The first parameter is the function to be executed.
The second parameter indicates the number of milliseconds before execution.

automatic summation of values ​/ looping of the code

Description of the situation:
I have time inputs described in class = "start" and time inputs described in class = "end". The difference is calculated based on the equation 'end-start = actual' 'Actual' are time inputs. Actual inputs should add up and write to the input with id = "sum_actual" (type = text)
Problem:
I have two problems in this question:
a) I don't know how to loop the code that sums up individual inputs class = actual, ultimately there are over 30
b) the code is written in such a way that I have to enter the time manually in the input class = actual so that it updates to the whole sum, when the result comes automatically calculated, it does not add up
Notes:
ultimately, class = actual inputs will be readonly
ultimately there are several other columns with inputs (unimportant
) between the start and end and actual inputs (cosmetics, I pay attention to the way of writing the code)
My code/I tried this code above in javascript is to be improved
//code that sums values ​​from the actual class / should loop it
function msToTime(duration) {
var minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor(duration / (1000 * 60 * 60));
hours = hours < 10 ? "0" + hours : hours;
minutes = minutes < 10 ? "0" + minutes : minutes;
return hours + ":" + minutes;
}
console.log(msToTime(300000));
function sum_diff() {
zxc = document.getElementById("actual_1").value;
xcz = document.getElementById("actual_2").value;
czx = document.getElementById("actual_3").value;
zxc = zxc.split(":");
xcz = xcz.split(":");
czx = czx.split(":");
var zxcDate = new Date(0, 0, 0, zxc[0], zxc[1], 0);
var xczDate = new Date(0, 0, 0, xcz[0], xcz[1], 0);
var czxDate = new Date(0, 0, 0, czx[0], czx[1], 0);
var zxcMs =
zxcDate.getHours() * 60 * 60 * 1000 +
zxcDate.getMinutes() * 60 * 1000;
var xczMs =
xczDate.getHours() * 60 * 60 * 1000 +
xczDate.getMinutes() * 60 * 1000;
var czxMs =
czxDate.getHours() * 60 * 60 * 1000 +
czxDate.getMinutes() * 60 * 1000;
var ms = zxcMs + xczMs + czxMs;
return msToTime(ms);
}
var elements = document.getElementsByClassName("actual");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("change", function(e) {
document.getElementById("sum_actual").value = sum_diff();
});
}
// code calculating differences start from end and writing to actual / do not touch it
function diff(start, end) {
start = start.split(":");
end = end.split(":");
const startDate = new Date(0, 0, 0, start[0], start[1], 0);
const endDate = new Date(0, 0, 0, end[0], end[1], 0);
let diff = endDate.getTime() - startDate.getTime();
const hours = Math.floor(diff / 1000 / 60 / 60);
diff -= hours * 1000 * 60 * 60;
const minutes = Math.floor(diff / 1000 / 60);
return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}
document.querySelector('table').addEventListener('change', function (e) {
const classList = e.target.classList
if (classList.contains('start') || classList.contains('end')) {
//retrieve the associated inputs
const tr = e.target.parentNode.parentNode
const [start, end, actual] = [...tr.querySelectorAll('.start,.end,.actual')]
const value = diff(start.value, end.value)
actual.value = value
}
})
<table>
<tbody>
<tr>
<td><input class="start" type="time"/></td>
<td><input class="end" type="time"/></td>
<td><input class="actual" type="time" id="actual_1" value="00:00" /></td>
</tr>
<tr><td><input class="actual" type="time" id="actual_2" value="00:00" /></td></tr>
<tr><td><input class="actual" type="time" id="actual_3" value="00:00" /></td></tr>
</tbody>
<tfoot>
<tr><th><input type="text" id="sum_actual" readonly /></th></tr>
</tfoot>
</table>
Note:
thanks, it turned out that I have a problem with the counting script and it counts only to 99:59, can you change this limit? to show hours until 300:00?

When confronted with this type of situations, I like to break my big problem into really small problems, and make really small functions which do one thing, but do it well:
const actuals = [...document.getElementsByClassName("actual")];
document.querySelector('table').addEventListener('change', function(e) {
const classList = e.target.classList;
if (classList.contains('start') || classList.contains('end')) {
//retrieve the associated inputs
const tr = e.target.parentNode.parentNode;
const [start, end, actual] = [...tr.querySelectorAll('.start,.end,.actual')];
const value = diff(start.value, end.value);
actual.value = value;
updateActualSum();
}
});
// Update total duration once on load
updateActualSum();
function msToTime(duration) {
const minutes = Math.floor((duration / (1000 * 60)) % 60),
hours = Math.floor(duration / (1000 * 60 * 60));
return twoOrMoreDigits(hours) + ":" + twoOrMoreDigits(minutes);
}
function twoOrMoreDigits(n) {
return n < 10 ? '0' + n : n;
}
function timeToMs(time) {
if (time) { // may be "" if the value is not set
const [hours, minutes] = time.split(":").map(str => parseInt(str, 10));
return (hours * 60 + minutes) * 60 * 1000;
}
return 0;
}
function sum_diff() {
const sum = actuals.reduce((acc, el) => acc + timeToMs(el.value), 0);
return msToTime(sum);
}
function diff(start, end) {
return msToTime(timeToMs(end) - timeToMs(start));
}
function updateActualSum() {
document.getElementById('sum_actual').value = sum_diff();
}
body {font-family: Arial, Helvetica, sans-serif; } table { border-collapse: collapse; } td, th { border: 1px solid #ddd; padding: .2rem; } input[readonly] { background: #f5f5f5; border: none; font-family: inherit; text-align: center; padding: .2rem; }
<table>
<tbody>
<thead>
<tr>
<th>Start</th>
<th>End</th>
<th>Duration</th>
</tr>
</thead>
<tr>
<td><input class="start" type="time" /></td>
<td><input class="end" type="time" /></td>
<td><input class="actual" type="time" id="actual_1" value="00:00" readonly /></td>
</tr>
<tr>
<td><input class="start" type="time" /></td>
<td><input class="end" type="time" /></td>
<td><input class="actual" type="time" id="actual_2" value="00:00" readonly /></td>
</tr>
<tr>
<td><input class="start" type="time" /></td>
<td><input class="end" type="time" /></td>
<td><input class="actual" type="time" id="actual_2" value="00:00" readonly /></td>
</tr>
<tr>
<td><input class="start" type="time" /></td>
<td><input class="end" type="time" /></td>
<td><input class="actual" type="time" id="actual_2" value="00:00" readonly /></td>
</tr>
<tr>
<td><input class="start" type="time" /></td>
<td><input class="end" type="time" /></td>
<td><input class="actual" type="time" id="actual_3" value="00:00" readonly /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3"><input type="text" id="sum_actual" readonly /></th>
</tr>
</tfoot>
</table>

Get all actual values in an array and then using moment, calculate the sum duration
//const durations = document.getElementsByClassName('actual').map(input => input.value);
// And let say, we got following durations
const durations = ['01:30', '05:00', '10:20'];
const totalDuration = durations.slice(1)
.reduce((prev, cur) => moment.duration(cur).add(prev),
moment.duration(durations[0]));
const requiredOutput = `${totalDuration.asHours().toFixed(0)}:${totalDuration.minutes().toString().padStart(2, '0')}`;
console.log(requiredOutput)
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Resetting a timer

I have a countdown timer for clicking a button at 0 second and it works but I want the time itself to reset after the click. Using this code I want Time 1 to be reset when work2 is clicked
function toTimeString(seconds) {
return (new Date(seconds * 1000)).toUTCString().match(/(:\d\d:\d\d)/)[0];
}
function startTimer() {
var nextElem = $(this).parents('td').next();
var duration = nextElem.text();
var a = duration.split(':');
var seconds = (+a[0]) * 60 * 60 + (+a[1]) * 60 + (+a[2]);
setInterval(function() {
seconds--;
if (seconds >= 0) {
nextElem.html(toTimeString(seconds));
}
if (seconds === 0) {
document.getElementById('work2').click();
clearInterval(seconds);
}
}, 1000);
}
$('.lazy').on('click', startTimer);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input id="work1" class="lazy" type="button" value="Time 1"/>
</td>
<td>:00:05</td>
</tr>
<tr>
<td>
<input id="work2" class="lazy" type="button" value="Time 2" type="button" />
</td>
<td>:10:00</td>
</tr>
</table>

Timers are used like this: You start the timer and store the timer handle in a variable. When stopping the timer, you hand over this variable.
var timer1 = setInterval(function(){}, 1000);
..
clearInterval(timer1);

JavaScript clock (timer) to start from the provided time span stored in asp hidden field

<html>
<head>
<title>Digital clock</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="../Styles/jquery.alerts.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery.alerts.js" type="text/javascript"></script>
</head>
<body onunload="return returnTime()" >
<script language="JavaScript" type="text/javascript">
function returnTime() {
var closeTime = new Date();
window.returnValue = closeTime;
}
function CloseWindow() {
window.close();
}
</script>
<body onload="timer()" >
<style type="text/css">
#time{
font-size:50pt;
}
#body
{
background-color:#F3F3F3;
}
</style>
<script type="text/javascript">
var digiclock = "00:00:00";
i = 0;
function timer() {
var digiformat = "";
if (i > 3599) {
var H = Math.floor(i / 3600);
}
else {
var H = 0;
}
var M = i - (H * 3600)
if (M > 59) {
M = Math.floor(M / 60)
}
else {
M = 0
}
var S = i - (M * 60)
if (H < 10) {
H = "0" + H;
}
if (M < 10) {
M = "0" + M;
}
if (S < 10) {
S = "0" + S;
}
document.getElementById('time').innerHTML = H + ":" + M + ":" + S;
setTimeout('timer()', 1000);
i++;
}
</script>
<table style="background-color:#F3F3F3;">
<tr>
<td><div><center><p style="font-family:Calibri;font-size:1.8em;color:#104E8B;">Total Elapsed Time</p> </center></div>
</td>
</tr>
<tr>
<td><div id="time"><center>90</center></div>
</td>
</tr>
<tr>
<td>
<center>
<form runat="server">
<asp:Button ID="btnStop" runat="server" Text="Stop"
style="width:150px;height:30px;font-weight:bold;background-color:#104E8B;color:White;border:1px solid"
onclick="btnStop_Click" /></form></center>
<input id="HiddenTaskname" type="hidden" value="" runat="server" />
</td>
</tr>
</table>
</body>
Above you can see that when the above page opens a timer(Clock) is starting from 00:00:00 .
I want to update it in such a way that it will start from the specified time as mentioned .
For example if we pass an argument to this page as 14:30:58 then the timer will start from 14:30:58 and so on.
I ll pass this argument from the query string and storing it in an asp hidden field in this page .Please help me to update above code so that it fulfills my requirement.

var digiclock = "<%= Request.QueryString["QueryStringVariableName"] %>";
Should work, Haven't tested it, you might need to change the double quotes to single. I'm not a pro so play with it.