Timer in Every Row of Table - javascript

I would like to add a running time/ stopwatch for every row showing the time spent in each process. The timer just shows at the first row and nothing on the rest.
The date to be used would come from a database.
Here's a snippet of my code for reference:
<?php
echo "<h2>On-Going Repairs</h2>";
$query = "SELECT tca_ro, tca_csplate, tca_name, tca_start, tca_process FROM tcs.tca_bp_process WHERE date(tca_start) = curdate() AND tca_status = 'Started'";
if($query_result = mysqli_query($link,$query)){
if(mysqli_num_rows($query_result) > 0)
{
echo "<div class='card-body'>";
echo "<div class='table-responsive'>";
echo "<table class='table table-bordered' id='dataTable' width='100%' cellspacing='0'>";
echo "<thead>";
echo "<tr>";
echo "<th>RO NUMBER</th>";
echo "<th>CS NUMBER</th>";
echo "<th>TECHNICIAN</th>";
echo "<th>START</th>";
echo "<th>PROCESS</th>";
echo "<th>DURATION</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while ($row = mysqli_fetch_array($query_result))
{
echo "<tr>";
echo "<td>".$row['tca_ro']."</td>";
echo "<td>".$row['tca_csplate']."</td>";
echo "<td>".$row['tca_name']."</td>";
echo "<td><input type='text' id='date' value='".$row['tca_start']."'</td>";
echo "<td>".$row['tca_process']."</td>";
echo"<td><div id='data'></div></td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "</div>";
echo "</div>";
}
}
?
<script type="text/javascript">
function func(){
var dateValue = document.getElementById("date").value;
var date = Math.abs(new Date(dateValue).getTime() / 1000).toFixed(0);
var currentDate = Math.abs((new Date().getTime() / 1000).toFixed(0));
var diff = currentDate - date;
var hours = Math.floor(diff/3600) % 24;
var minutes = Math.floor(diff/60) % 60;
var seconds = diff % 60;
var time_str = hours + " : " + minutes +" : "+ seconds
document.getElementById("data").innerHTML =hours+":"+minutes+":"+seconds;
}
func();
setInterval(func, 1000);
</script>
Hope you can help me out. Thank you in advance

You have no need for Timer as they are in the Java programming language. All you need to do is display the values from a database.
Assuming you have start and end times in tca_start and tca_end, and duration in tca_duration just add lines as
echo "<td>".$row['tca_start']."</td>";
echo "<td>".$row['tca_end']."</td>";
echo "<td>".$row['tca_duration']."</td>";
If that is not what you are looking for, maybe enhance you question.

Related

Struggling to increment table column in fives up to a certain number

So basically if $minimum was 30 and $maximum was 40. I wanted the left hand column to from 30 then 35 then 40 while multiplying the values together. I would love some help or even advice.
I added a picture with the result after clicking submit in the html form.
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$costOne = trim($_GET["c1"]);
$costTwo = trim($_GET["c2"]);
$costThree = trim($_GET["c3"]);
$costFour = trim($_GET["c4"]);
$costFive = trim($_GET["c5"]);
$minimum = trim($_GET["min"]);
$maximum = trim($_GET["max"]);
}
echo '<table>';
echo '<tr>';
echo '<th>Cost per person<br>Party size</th>';
echo "<th>$costOne</th>";
echo "<th>$costTwo</th>";
echo "<th>$costThree</th>";
echo "<th>$costFour</th>";
echo "<th>$costFive</th>";
echo '</tr>';
for ($col=$minimum; $col <= $maximum; $col+5) {
echo "<tr>";
echo "<td>$col</td>";
echo "<td>$col*$costOne</td>";
echo "<td>$col*$costTwo</td>";
echo "<td>$col*$costThree</td>";
echo "<td>$col*$costFour</td>";
echo "<td>$col*$costFive</td>";
echo "</tr>";
}
echo '</table>';
?>
Result:
Catering costs

how to export html table to excel, with pagination

I have a form which displays mysql data in the form of an HTML table, using pagination of 5 records per page. I'm trying to export my table to excel, but it's only exporting data of the rows that are currently show, meaning if there are 20 rows, it only shows the first 5 as those get displayed. How can I make it export the one's that are not being displayed but still part of the search? I saw a few other people with a similar question but none have answers( How to export all HTML table rows to Excel file from a paginated table?). Hopefully I can get one!
<?php
if(isset($_GET['submit']) || isset($_GET['page'])){
// Setting up the Pagination below
echo '<center>';
$page_query = "SELECT * FROM tbl_call_log_detail ";
$page_query .= "WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='') ";
$page_result = mysqli_query($conn, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
$start_loop = $page;
$difference = $total_pages - $page;
if($difference <= $total_pages){
$start_loop = $total_pages - $difference;
}
$end_loop = $start_loop + 2;
if($end_loop > $total_pages){
$end_loop = $total_pages;
}
if($difference > $total_pages){
$end_loop = $total_pages;
}
echo '<div class = "center">';
echo '<div class = "pagination">';
if($page > 1){
echo "<a href= 'dealer_call_log.php?page=1".$urlparameter."'>First</a>";
echo "<a href= 'dealer_call_log.php?page=".($page - 1).$urlparameter."'> << </a>";
}
for ($i = $start_loop; $i <= $end_loop; $i++){
echo "<a href= 'dealer_call_log.php?page=".$i.$urlparameter."'>".$i."</a>";
}
if($page < $end_loop){
echo "<a href= 'dealer_call_log.php?page=".($page + 1).$urlparameter."'> >> </a>";
echo "<a href= 'dealer_call_log.php?page=".$total_pages.$urlparameter."'>Last</a>";
}
if($page < 1){
$page = 1;
}
echo '</div>';
echo '</div>';
echo '<br>';
$sql = "SELECT Name, SFID, Comment, Time FROM tbl_call_log_detail
WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='')
ORDER BY Time DESC LIMIT $start_from, $record_per_page ";
$result = mysqli_query($conn, $sql);
$row = mysqli_num_rows($result);
$all_property = array();
echo "<table class = 'data-table' border = '1' cellpadding = '9' bgcolor = '#CCCCCC' id = 'data-table'>
<tr class = 'data-heading'>";
while($property = mysqli_fetch_field($result)){
echo '<td><b> '. $property ->name. ' </b></td>';
array_push($all_property, $property ->name);
}
echo '</tr>';
while ($row = mysqli_fetch_array($result)){
echo '<tr>';
foreach($all_property as $item){
echo '<td> '. $row[$item] . ' </td>';
}
echo '</tr>';
echo '</center>';
}
echo '</table>';
echo '<br>';
?>
// This is what is getting the current rows, but not all
<input type = "submit" onclick = "window.open('data:application/vnd.ms-excel, '+encodeURIComponent(document.getElementById('data-table').outerHTML));" value = "Export into excel" />
<?php
}
?>
UPDATE: Found the answer I was looking for I simply ran a new sql query without the LIMIT clause and stored it in a hidden table. I then use the hidden table to export data
// SQL and hidden table for exporting to excel
$page_query2 = "SELECT * FROM tbl_call_log_detail ";
$page_query2 .= "WHERE
(dealer_id = '$call_id' AND '$endDate'='1970-01-01' AND '$startDate' ='1970-01-01')
OR ( Time <= '$endDate' AND Time >= '$startDate'
AND (dealer_id = '$call_id' OR'$call_id'='' ))
OR ('$endDate'='1970-01-01' AND '$startDate' ='1970-01-01' AND '$call_id'='') ORDER BY TIME DESC ";
$page_result2 = mysqli_query($conn, $page_query2);
$row2 = mysqli_num_rows($page_result2);
$all_property2 = array();
echo "<table class = 'data-table2' border = '1' cellpadding = '9' bgcolor = '#CCCCCC' id = 'data-table2' hidden>
<tr class = 'data-heading2'>";
while($property = mysqli_fetch_field($page_result2)){
echo '<td><b> '. $property ->name. ' </b></td>';
array_push($all_property2, $property ->name);
}
echo '</tr>';
while ($row2 = mysqli_fetch_array($page_result2)){
echo '<tr>';
foreach($all_property2 as $item){
echo '<td> '. $row2[$item] . ' </td>';
}
echo '</tr>';
echo '</center>';
}
echo '</table>';
?>
<input type = "submit" onclick = "window.open('data:application/vnd.ms-excel, '+encodeURIComponent(document.getElementById('data-table2').outerHTML));" value = "Export into excel" />
<?php
}
?>
You can use JQuery table2excel plugin following is the link
http://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html
Try following code pen to only JavaScript
https://codepen.io/kostas-krevatas/pen/mJyBwp

Unix Timestamp Chart.js with PHP echo

I made a line chart with chart.js. For the values is some PHP script added. The axis only displayed the timestamp numbers. When I use a PHP function for timestamp conversion:
<?php echo date('H:i', $time); ?>
It totally crashes.
This is my code for the PHP time echo. How can I display HH:ii on my X axis of the chart?
<?php
$total = (count($data)) - 1;
if ($total > 100) {
$start = $total - 100;
$end = $total;
}
else {
$start = 0;
$end = $total;
}
for ($x = $start; $x < $end; $x++) {
if ($x % 5 == 0) {
//echo $x; //5th element
$row = $data[$x];
$time = intval($row->{'time'});
echo $time;
} else{
echo ' '; //prints empty for other than 5th element
}
echo ', '; //prints ',' for every element
Fixed it with:
echo '\'' . date('H:i', $time) . '\'';

how can i highlight a row when date is older than yesterday

I am very new to jQuery and JavaScript. I have a small question. Let's say i have a HTML table like the following
<?php
include 'dbconnect.php';
$sql = "SELECT * FROM Comments";
$result = mysqli_query($conn,$sql);
if (!$result) {
echo '<div>no comments were set up</div>';
}
$fields_num = mysqli_num_fields($result);
echo "<h1>Table: {$table}</h1>";
echo "<table id='myTable' border='1'><tr>";
// printing table headers
for($i=0; $i<$fields_num; $i++)
{
$field = mysqli_fetch_field($result);
echo "<td>{$field->name}</td>";
}
echo "</tr>\n";
// printing table rows
while($row = mysqli_fetch_row($result))
{
echo "<tr>";
// $row is array... foreach( .. ) puts every element
// of $row to $cell variable
foreach($row as $cell)
echo "<td>$cell</td>";
//delete button
echo "<td><input type='button' value='Delete' onclick='deleteRow(this)'></td>";
//checkbox button
echo "<td><input type='checkbox' value='Highlight' onclick='highlight(this)'></td>";
echo "</tr>\n";
}
mysqli_free_result($result);
?>
I want to check if the date in the 8th column is older than a day the row should be highlighted. How can I proceed.
i found a code but this is not working:
function checkdate(){
$('#myTable tr td').each(function () {
var dtTd = new Date($(this).html());
var dtNew = new Date();
// 15 minutes is 900000 milliseconds
// getTime() doc - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
if (dtTd.getTime() - dtNew.getTime() < 900000 && dtNew < dtTd) {
$(this).css("background-color", "red");
} else {
if (dtNew > dtTd) {
$(this).css("background-color", "yellow");
}
}
});
}
Try this:
$date = date('Y-m-d');
foreach($row as $cell)
{
if($cell['date'] < $date)
{
// for date less then today's date
}
else
{
// for others date
}
}

Multiple Countdown using PHP and Javascript

I am currently stuck on a problem and not sure how to solve it. I am new to php and javascript coding so do please correct me if there is an easier way to do this.
My problem is that I am trying to get a countdown timer working for multiple data in mysql database. I have already made a successful countdown time function that only works with one data using the if statement in php, but when I try to do it with multiple data using the while statement in php it doesn't work.here is my php code
//TODAY'S DATE
$today = time();
//FETCHES DATE AND TIME FOR THE EVENT FROM DATABASE
$sql = "SELECT * FROM post";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
$title = $row['title'];
$cname = $row['cname'];
$team = $row['team'];
$description = $row['description'];
$endtime = $row['endtime'];
echo "<tr>";
echo "<td width='16%'><strong>Title:</strong></td>";
echo "<td width='16%'>$title</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>Client name:</strong></td>";
echo "<td width='16%'>$cname</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>Team:</strong></td>";
echo "<td width='16%'>$team</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>Description:</strong></td>";
echo "<td width='16%'>$description</td>";
echo "</tr><tr>";
echo "<td width='16%'><strong>End time:</strong></td>";
echo "<td width='16%'>$endtime</td>";
echo "</tr><tr>";
echo"</BR>";
echo"</BR>";
}
$conn->close();
below is my javascript that suppose to run the count down
<script language="JavaScript">
var today = new Date();
var DD = today.getDate();
var MM = today.getMonth()+1; //January is 0!
var YYYY = today.getFullYear();
//let get the Difference in Sec btw the two dates
var _DateFromDBProgEndDate = '<?php echo $endtime; ?>';
var ProgEndTime = new Date(_DateFromDBProgEndDate);
var TodayTime = new Date();
var differenceTravel = ProgEndTime.getTime()- TodayTime.getTime() ;
var seconds = Math.floor((differenceTravel) / (1000));
////////////////////////////////
var SecDiffFromToday = seconds;
var seconds = SecDiffFromToday;
function pad(n) {
// utility function to pad a number to 2 digits:
return ('0' + n).substr(-2);
}
function timer() {
var todaySeconds = Math.floor(new Date().getTime() / 1000);
// collect the html first in an array
var html = [];
// keep track whether there are still counters not yet zero:
var allDone = true;
// go through the list of dates:
endDatesInSeconds.forEach(function (endDateSeconds) {
var totalSeconds = endDateSeconds - todaySeconds;
var days = Math.floor(totalSeconds/24/60/60);
var seconds = Math.floor(totalSeconds - days*86400);
var hours = Math.floor(seconds/3600);
seconds = Math.floor(seconds - hours*3600);
var minutes = Math.floor(seconds/60);
seconds = seconds % 60;
// add a part of html
html.push(
totalSeconds <= 0
? 'project time Completed'
: days + ":" + pad(hours) + ":" + pad(minutes) + ":" + pad(seconds));
// when at least one counter is not complete, we are not done:
allDone = allDone && totalSeconds <= 0;
});
// now put the html in the document:
document.getElementById('countdown').innerHTML = html.join('<br/>');
if (allDone) {
clearInterval(countdownTimer);
}
}
var countdownTimer = setInterval('timer()', 1000);
</script>
the javascript run the countdown by getting it value from the php (var _DateFromDBProgEndDate = '<?php echo $endtime; ?>';)

Categories

Resources