JSFiddle - React, Tailwind, and code Playground

by Andy Novocin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="navPane upload-screen"></div>
<div class="topPane upload-screen"></div>
<div class="leftPane upload-screen"></div>
<div class="mainPane upload-screen"><div class="upload-queue"><div class="queue-header">
  <h1>Upload to eBay screen</h1>
  <h2>There are <span class="total">3</span> items to upload over the course of <span class="length">2</span> night(s).</h2>
  <button type="button" class="btn btn-primary upload-all">Upload all</button>
  <h3>You have excluded <span class="excluded">0</span> of them (<span class="success">0</span> success(es)) and included <span class="included">3</span> of them.</h3>
  <h4>There are:</h4>
  <ul>
    <li><span class="ready">3</span> with status: Ready</li>
    <li><span class="waiting">0</span> with status: Waiting</li>
    <li><span class="success">0</span> with status: Success</li>
    <li><span class="error">0</span> with status: Error</li>
  </ul>
  <hr>
</div>
<ul class="nights-view"><li class="night-queue"><div class="queue-header">
  <h2>Items to upload for <span class="date">10/15/2014</span></h2>
  <button type="button" class="btn btn-primary upload-night">Upload night</button>
  <h3>There are <span class="total">2</span> items to upload over the course of <span class="length">2</span> night(s).</h3>
  <h4>You have excluded <span class="excluded">0</span> of them (<span class="success">0</span> success(es)) and included <span class="included">2</span> of them.</h4>
  <h5>There are:</h5>
  <ul>
    <li><span class="ready">2</span> with status: Ready</li>
    <li><span class="waiting">0</span> with status: Waiting</li>
    <li><span class="success">0</span> with status: Success</li>
    <li><span class="error">0</span> with status: Error</li>
  </ul>
  <hr>
</div>
<ul class="night-items"><li class="ebay-item"><label for="include">
  ...

CSS

.status.ready {
  color: blue;
}

.status.waiting {
  color: yellow;
}

.status.success {
  color: lime;
}

.status.error {
  color: red;
}

JavaScript

//hacks to simulate the backbone stuff
$(".detail-button").on('click', function(ev){
    console.log(ev);
    $(ev.currentTarget).next().next().modal('show');
});

var statusClasses = ["ready", "waiting", "success", "error"];

$(".status").on('click', function(ev){
  var $el = $(ev.currentTarget);
  var classList =$el.attr('class').split(/\s+/);
  var sind = classList.indexOf('status');
    classList.splice(sind, 1);
  var curStatus = classList[0];
  var i = statusClasses.indexOf(curStatus);
  var j = (i+1) % statusClasses.length;
  $el.removeClass(statusClasses[i]).addClass(statusClasses[j]);
  $el.html(statusClasses[j]);
});