JSFiddle - React, Tailwind, and code Playground

by zazvorniki

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id='props'>
  <h4>
  Control Panel
  </h4>
  <div class=’form-control’>
    <p>
      Time in between transition (milliseconds) ext. 2000
    </p>
    <input class=’WaitlistTime’ />
  </div>
  <div class=’form-control’>
    <p>
      Items on the list before transition (1-20)
    </p>
    <input class="MaxPatientsOnPage" />
  </div>
  <div class=’form-control’>
    <p>
      Does the list rotate?
    </p>
    <input type="checkbox" class="WaitlistMovement" />
  </div>
  <inpit type='button' class='btn btn-default'>Save</inpit>
</form>




<div class='kioskWaitlist'>
  <h3>
People in Waiting
</h3>
  <ul id="waitlist">
    <li>
      <span class='order'>1. </span>
      <span class='displayName'>Test, One</span>
    </li>
    <li>
      <span class='order'>2. </span>
      <span class='displayName'>Test, Two</span>
    </li>
    <li>
      <span class='order'>3. </span>
      <span class='displayName'>Test, Three</span>
    </li>
    <li>
      <span class='order'>4. </span>
      <span class='displayName'>Test, Four</span>
    </li>
    <li>
      <span class='order'>5. </span>
      <span class='displayName'>Test, Five</span>
    </li>
    <li>
      <span class='order'>6. </span>
      <span class='displayName'>Test, Six</span>
    </li>
    <li>
      <span class='order'>7. </span>
      <span class='displayName'>Test, Seven</span>
    </li>
    <li>
      <span class='order'>8. </span>
      <span class='displayName'>Test, Eight</span>
    </li>
    <li>
      <span class='order'>9. </span>
      <span class='displayName'>Test, Nine</span>
    </li>
    <li>
      <span class='order'>10. </span>
      <span class='displayName'>Test, Ten</span>
    </li>
    <li>
      <span class='order'>11....

CSS

p {
  margin: 1em 0 0 0;
}

.btn {
  margin-top: 1em;
}

form {
  border: 1px solid #000;
  width: 40%;
  padding: .5em;
  float: left;
  margin:1em;
  }

.kioskWaitlist {
  border: 2px dashed #000;
  width: 40%;
  margin: 1em;
  padding: .5em;
  height: 25em;
  float:left;
}

.kioskWaitlist h3 {
  text-align: center;
}

ul#waitlist li {
  display: none;
  list-style-type: none;
  width: 100%;
  margin-top: .5em;
}

ul#waitlist li span {
  display: inline-block;
}

.order {
  width: 20%;
}

.displayName {
  width: 70%;
}

JavaScript

$(".btn").on("click", function() {
  var props = {};
  props.listLimit = Number($('.MaxPatientsOnPage').val());
  props.inbetween = Number($('.WaitlistTime').val());
  props.rotate = $('.WaitlistMovement').is(':checked');
console.log(props.rotate)
  if (props.rotate === true) {
    var j = 1;

    function page() {
      var maxLength = $("ul#waitlist li").length;
      var start = j;
      var end = j + props.listLimit - 1;
      var complete = 0;
      console.log(j, start, end);

      var range = $('ul#waitlist li:nth-child(n+' + start + '):nth-child(-n+' + end + ')');
      range
        .fadeIn(800)
        .delay(props.inbetween)
        .fadeOut(1000, function() {
          if (j++ >= maxLength) {
            j = 1;
          }
          if (++complete >= props.listLimit) {
            page();
          }
        });
    };
    page();
  }else{
   $('ul#waitlist li:lt('+props.listLimit+')').show();
  }

});