NIT_time table

by sthag

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<p>
<span id=tableX></span> / <span id=tableY></span> > <span id="tableNewX"></span> / <span id="tableNewY"></span>
</p>

<table class="table table-sm table-bordered" id="downloadTimes">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col" colspan="4">00:00</th>
      <th scope="col" colspan="4">02:00</th>
      <th scope="col" colspan="4">04:00</th>
      <th scope="col" colspan="4">06:00</th>
      <th scope="col" colspan="4">08:00</th>
      <th scope="col" colspan="4">10:00</th>
      <th scope="col" colspan="4">12:00</th>
      <th scope="col" colspan="4">14:00</th>
      <th scope="col" colspan="4">16:00</th>
      <th scope="col" colspan="4">18:00</th>
      <th scope="col" colspan="4">20:00</th>
      <th scope="col" colspan="4">22:00</th>
      <th scope="col">#</th>
    </tr>
  </thead>
  <tbody>
    <tr id="montagRange">
      <th scope="row">Montag</th>
      <td class="timeSet" data-time="30"></td>
      <td class="timeSet" data-time="60"></td>
      <td class="timeSet" data-time="90"></td>
      <td class="timeSet" data-time="120"></td>
      <td data-time="150"></td>
      <td data-time="180"></td>
      <td class="timeSet" data-time="210"></td>
      <td class="timeSet" data-time="240"></td>
      <td data-time="270"></td>
      <td data-time="300"></td>
      <td class="timeSet" data-time="330"></td>
      <td class="timeSet" data-time="360"></td>
      <td data-time="390"></td>
      <td data-time="420"></td>
      <td...

CSS

.markerTime {
  display: inline-block;
  width: 1rem;
  height: 2rem;
  border: 1px solid lightgray;
}

.timeSet {
  background-color: crimson;
}

td:nth-child(2n+1) {
  border-right-color: black;
}

JavaScript

var drawTime = false;
var action = false;
// Time selection functionality
$('#getTimes').click(function() {
  let times = {};
  let day = $('#downloadTimes tbody tr').first().attr('id').substring(0, $('#downloadTimes tbody tr').first().attr('id').length - 5);
  let time = $('#downloadTimes tbody tr').find('.timeSet').first().attr('data-time');

  console.clear();
  $('#downloadTimes tbody tr').each(function(row) {

    let range = [];
    day = $(this).attr('id').substring(0, $(this).attr('id').length - 5);

    $(this).find('.timeSet').each(function(index) {

      time = $(this).attr('data-time');
      range.push(parseInt(time));

      /* console.log(time, formatTime(time)); */
    });
    /* console.log(range); */

    let chunks = [
      []
    ];
    let prev = 0;
    range.forEach((curr) => {

      if (prev + 30 == curr) {
        chunks[chunks.length - 1].push(curr);

      } else {
        chunks.push([curr]);
      }

      prev = curr;
    });

    let stst = [];
    chunks.forEach((curr) => {
      if (curr.length) {
        stst.push([formatTime(curr[0] - 30), formatTime(curr[curr.length - 1] - 30)]);
      }
    });

    // Build object
    times[day] = stst;
  });
  console.log(times);
});

$('#downloadTimes td').on({
  // 'click': function () {
  // 	$(this).css('background-color', 'crimson');
  // },
  'mousedown': function(event) {
    event.preventDefault();
    drawTime = true;
    let tableX = $(this).index();
    let tableY = $(this).parent().index() + 1;
    if ($(this).hasClass('timeSet')) {
      action = false;
    } else {
      action = true;
    }
    $(this).toggleClass('timeSet');
    $("#tableX").html(tableX);
    $("#tableY").html(tableY);
  },
  'mouseup': function() {
    drawTime = false;
    console.log('Times set');
  },
  'mouseenter': function() {
    if (drawTime) {
    let tableNewX = $(this).index();
    let tableNewY = $(this).parent().index() + 1;
      if (action) {
        $(this).addClass('timeSet');
      } else...