Item: test2
Rating: 3.4
Author: --pk--

0 Downloads
50 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

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