<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>test2</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="mainBox">
<div class="box" startTime="2017/03/13 10:50:00" deliveryTime="1800">
<div class="row">
<div class="workplace">P1</div>
<div class="material">QKHA - Volanty</div>
<div class="time">spuštěno<br/>
<span class="timeFrom">--:--:--</span><br/>
<span class="endTime">--:--</span> [<span class="dTime">--:--</span>]
</div>
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
<div class="box" startTime="2017/03/13 10:45:00" deliveryTime="3600">
<div class="row">
<div class="workplace">P2</div>
<div class="material">R33 - Motory</div>
<div class="time">spuštěno<br/>
<span class="timeFrom">--:--:--</span><br/>
<span class="endTime">--:--</span> [<span class="dTime">--:--</span>]
</div>
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
<div class="box" startTime="2017/03/13 10:43:00" deliveryTime="1800">
<div class="row">
<div class="workplace">P2</div>
<div class="material">QKHA - Volanty</div>
<div class="time">spuštěno<br/>
<span class="timeFrom">--:--:--</span><br/>
<span class="endTime">--:--</span> [<span class="dTime">--:--</span>]
</div>
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
<div class="box" startTime="2017/03/13 10:42:00" deliveryTime="7200">
<div class="row">
<div class="workplace">P3</div>
<div class="material">Šroubky M1</div>
<div class="time">spuštěno<br/>
<span class="timeFrom">hh:mm:ss</span><br/>
<span class="endTime">--:--</span> [<span class="dTime">--:--</span>]
</div>
</div>
<div class="bar-container">
<div class="bar"></div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://momentjs.com/downloads/moment-with-locales.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/--pk--/test2-gmWJaL */
body {
background-color: #2c2e41;
font-family: "Helvetica Neue", sans-serif;
}
.mainBox {
margin: 15px;
max-width: 800px;
}
.box {
background: #2ecc71;
padding: 5px;
margin-bottom: 15px;
border-radius: 10px 10px 0px 0px;
height: 80px;
}
.alert2 {
background: #e74c3c;
}
.alert1 {
background: #e67e22;
}
.box .row {
width:100%;
position: relative;
}
.workplace {
background: rgba(0,0,0,0.13);
border-radius: 8px 0px 0px 0px;
padding: 4px 0px;
width: 150px;
height: 55px;
text-align: center;
font-size: 42px;
font-weight: 900;
color: #000;
left:0px;
position: absolute;
top:0;
}
.material {
background: rgba(0,0,0,0.13);
padding: 4px 0px;
margin-left: 155px;
margin-right: 155px;
height: 55px;
text-align: center;
font-size: 45px;
font-weight: 900;
color: #fff;
overflow: hidden;
}
.time {
background: rgba(0,0,0,0.13);
padding: 4px 0px;
width: 150px;
height: 55px;
text-align: center;
font-size: 15px;
color: #333;
border-radius: 0px 8px 0px 0px;
right:0px;
position: absolute;
top:0;
}
.timeFrom{
color:#fff;
}
.bar-container {
float: right;
height: 9px;
background: rgba(0,0,0,0.4);
width: 100%;
margin: 7px 0px;
overflow: hidden;
}
.bar {
float: left;
background: #f1c40f;
width: 0%;
height: 5px;
margin-top: 2px;
}
/*Downloaded from https://www.codeseek.co/--pk--/test2-gmWJaL */
$(document).ready(function() {
refreshTable();
getSorted();
setInterval(function(){ refreshTable() }, 3000);
function refreshTable() {
$( ".box" ).each(function() {
s_DT = $(this).attr('deliveryTime'); //String Delivery Time (seconds)
s_ST = $(this).attr('startTime'); //String Start Time
d_ST = moment.utc(s_ST).format('YYYY/MM/DD HH:mm:ss'); //Date Sart Time
d_ET = moment(moment(d_ST)).add(s_DT, 'seconds'); //Date End Time
remain = d_ET.diff(moment.utc(), 'seconds');
$(this).find(".row > .time > .dTime").html(moment().startOf('day').seconds(s_DT).format('HH:mm'));
$(this).find(".row > .time > .timeFrom").html(moment(s_ST).format('HH:mm:ss'));
if (remain>0) {
$(this).find(".row > .time > .endTime").html(moment().startOf('day').seconds(remain).format('HH:mm'));
if (remain<601) { //10 minut do termínu
$(this).addClass('alert1');
}
$(this).find(".bar-container > .bar").width((remain/s_DT)*100+"%");
} else {
$(this).find(".row > .time > .endTime").html('--:--');
$(this).removeClass('alert1');
$(this).addClass('alert2');
$(this).height('64px'); //zmenšít červený box
$(this).find('.bar-container').hide();
}
$(this).attr('sort',remain);
});
} // end of function refreshTable
function getSorted() {
$('.box').sort(function (a, b) {
return $(a).attr('sort') - $(b).attr('sort');
}).each(function (_, container) {
$(container).parent().append(container);
});
}
});