slipdays.html

---
layout: default
title: Check Your Slip Days!
permalink: slipdays/index.html
---

{% include nav.html %}

{% include quicklinks.html %}

<script src="{{ site.baseurl }}/assets/directory-concat.js"></script>

<link href="{{ site.baseurl }}/assets/css/cs10style.css" rel="stylesheet"/>

<script>
    {% include_relative assets/cs10.js %}
</script>

<h1>Check Your Slip Day Usage</h1>

<div class="page-section">
  <br>
  <h2>Please enter your SID</h2>
  <form class="form-inline" id='sid-form'>
    <div class="form-group">
      <label class="sr-only" for="exampleInputAmount">Your SID</label>
      <div class="input-group">
        <input type="text" class="form-control" id="sidInput" placeholder="12345678">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Check my days!</button>
  </form>
  <br />
  <br />
  <div id="msg" class="alert hidden" role="alert">
  </div>
  <br />
  <div id="panel" class="panel panel-primary">
    <div class="panel-heading">
      Slip Day Results
    </div>
    <div class="table-responsive">
      <table border="0" id="results" class="table table-striped table-responsive">
        <thead>
          <tr>
            <th width="60%">Assignment Name</th>
            <th width="10%">Slip Days Used</th>
            <th width="10%">View Assignment</th>
            <th width="20%">Verified By Reader</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="4">
              <em>Verified</em> means a reader has checked the slip days and you can count on that number. Otherwise, the counter could change, and you should use this as an estimation only. Please let your TA know if any of these numbers are wrong.
            </td>
          </tr>
        </tfoot>
        <tbody id="table-contents">
        </tbody>
      </table>
    </div>
  </div>
</div>

<style type="text/css">
.good {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAltJREFUSA3tVL9PFFEQnr3Di9y5BBIKAgkNjbWNhRSXkNjbEwrD32Ar0PMfKAUJrX8ACUYTKWysbWggGkmOwO3Pt+zdPuYbbo536565oMbGucz7NTPfNzPv3RL9l3/dAe9PJPDy8Nlibcr7VvTs0t7z4+8uZs3d3Get4CuPVwgk2Ls4v0Xggmd5RvPL8z+R3JugDG5yI4kriVYxpQudNbCqn2UftMVcGwK4591eZ+e0Q2RpW31HKlDwcf1EkOuTZimlJiVrraiCv1n7tAVfyJBAA2cXZikxCVWRqA9sSZpQnMRUFAXZwtLF2YVk7oKDYPhMN9+vWoBLNhzQnG5Sq9mik68nhHZJNvxKAB7HsYB7NY+g3fNuJbjEYBDhvl39uJJskFUYhhRF0bASPEGAR2FEQRhI5vD7FThwhxVgs3m0usUnr1tzLSFC6b7vkz/jw0xBEFAYhHKhyDzpJmMzlwAe6rrA/GX/9MOTjWUvN3m73qgLiUn5hfDPGEPBZSAthK8J+Vly1eWew+bKSAVq0Eoa043bSviVqOA55lk+EThiRipQEK2k3+u30QrOVIhg7+W9icHhX0kAg5LwPbSxBwkudZK2iP9gGEsAO5N85DvBso2B/047b9eOd3iJ1qrCVNnqsgFO+OPh8/FgMCOB2vq7p68s3/TBi8+7vFfBxUC5LNE+z9w/4guSGeccdicAb7A+YsW7fMgKIpAIEc+atQsOYCiAU9ZooNc8F+WPHVjhiE8jQLAuE/CRiGavBMg+Y0UMcETcCnCgbUI1UN1r5vBxxa0Ea5ApMea/LzcsIEQubh6TAQAAAABJRU5ErkJggg==');
}
.bad {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAABJtJREFUOBG1lUtsE1cUhs88TOzmRUPs2M7DUcSChLwdFFUmYgGiaiGUgEpRsgCllIKoWqnsyqZZdEvViqoNiapKFaVqaVQ5CdBgKBsWQAIFUqgQ5IHlR+w4wTHxjO2ZuT1n6FgOpFI3Hen43pk597v/PY8xwP99/QQgnAHo/9FsXvgB4MR/3Q/XfHaG4xZxzWlirFj3O4CIDr/63G55tq+PeV0uCe9PrnBa5QZ9Tg2tW5d80NnJvKWlSWIQi1z1HV4HGChzu/ds3L8/DxYXwdneLsamp1s64/HSXwB+W4UJBH2ltLS3Zft2C0QiYKutNSViMdd8MukaAvDytIgvLHxnQ3d3nrawAOrcHDB0bDt40Fzkch1BwBcvggmab7P1tu7caVEfP4YMmhoMQk1bm4UXhD06k35YInHqwdmzKdFqBbGkBFg8DqSi7cAB81qX6zDG70sDTtBCu723ravLwmZmgMViYHI6QaishL+uX5c1VdWF6KHA4/reCAYdS5FIo9PjEbl0GhiGhM9koBzvYzMzTTvicfvbADsKKyp6N+3da2FTU6CGwyDYbCDW1MBtn0+WFxa+7gH4hERks4jw82+Gw454JNJQvnmzyMkysKdPc+GNecXFre379lkAlWoYMhGhfHU13Bobk+Vo9BuEfmycjDMmxojH/qqkvr7X3dNjhidPgOIuFBWBYLcDqCqoCFUCAYDiYtAcDhj3euVEKHQaoR8ZDBqzio2HuvJIxLkYCjWWd3SIQioFVCmcogCHsddCIeAtFmCYjxsjI/JyODzwInRVMD3U4dGofTEQaKraskXkCI7JpLgCx4GAybo2OipLkchgN8CHhqjcUS/m3AfGHOuQKcvLDFApW14G7eFD/XgM1RKcY4xhHPVyNdbkji+Fgl5SeRVWVb332qFDZuXOHVDGx0GoqADIywMFQ8Gwapxut2kuEKjvlKQKbIjRXCjNXwJTQxRYrYc37d5tVm/eBOXePb1GeaxTjmocoRlKHp7E0dJiigaDG3fJciWGbyQXvgKMSj8vsNneb+7oMCsIVf1+EF0uAFR77eJFyf/okeJsbTURNIPvKKGO5mbTfDBYtyuVqkb4sAHPglHpyXyr9WiTx2NWJidBm58HsaoKOLQbly5Jcjz+bUaSboX9/gaCc1h66dlZ4DQN7AiPhkJ1byH8HCrvM0KBSk8g9Hh9e7tZuXtXh5oQSMU/cflyMrm09B1m/wNUdAEXl0X8/kZSSk2Qmp4GIHhDgykWCtX+kU6/in5jz7PK88fXNzWZ6ehp7Cg9URiCiStXDOgx44hUXslEYmDc55M0LDsRN0/hR0jD9t7g8ViYIBwhXx3MNG1oamJC5jGWa+rqgEPo7atXJem50izUgFNDyM+e9ePGkoodaaqtBa6sDGbu35ewO382/OCfD/3wsM0m/bltGxsqKEhSa2cd/mVCeTlnsSQnt25l5ysr6UM/bHzoKUz69SnAmhqAQYHnu2RNG3wX/3LwhQmNEkxGpyN/hqahqWT9GPt8jjuK/eL9HuDYGECSfLJgvKE5LaZuJCNorhGcfHQgjpkcU3BuGG0KfwN/3QP6oaQZ+wAAAABJRU5ErkJggg==');
}
.good, .bad {
  content: ' ';
  background-repeat: no-repeat;
  background-position: center;
}
</style>

<!--
This makes a call to the slip day tracker
The API format is entirely custom but pretty simple. View it here:
https://github.com/cs10/Alonzo/blob/master/scripts/cs10-slipdays.js#L128-L175
 -->
<script type="text/javascript">
var buildTable = function(result, xhr, other) {
    var table = $('#table-contents'),
        msg   = $('#msg'),
        panel = $('#panel');

    // Reset the view
    table.html('');
    msg.html('');
    msg.removeClass('hidden alert-danger alert-success alert-warning');
    panel.removeClass('panel-danger panel-success panel-warning');

    if (result.errors) {
      msg.addClass('alert-danger');
      result.errors.forEach(function(error, idx) {
        if (!idx) {
          msg.append($('<strong>').html(error));
          msg.append($('<ul>'));
          msg = $('#msg>ul');
        } else {
          msg.append($('<li>').html(error));
        }
      });
      return;
    }

    // Add any warning messages
    var days = result.daysRemaining;
    var notice = '', bsClass = '';
    if (days > 0) {
        bsClass = 'success';
        notice = 'Good work! You\'ve got some breathing room!';
    } else if (days === 0) {
        bsClass = 'warning';
        notice = 'You\'re at the limit of slip days! Be careful, or you\'ll lose points.';
    } else {
        bsClass = 'danger';
        notice = 'Uh-oh! We\'ll need to dock some points.';
    }
    panel.addClass('panel-' + bsClass);
    msg.addClass('alert-' + bsClass);
    msg.append($('<strong>').html(notice));
    msg.append('<br>');
    msg.append('You have used ' + result.totalDays + ' slip days and have ' +
              days + ' slip days remaining.');

    result.assignments.forEach(function(item) {
        var row  = $('<tr>');
        var link = $('<a>').attr({
          'href':item.url.replace('?preview=1', ''), 'target':'_blank' }).html('View Submission');
        link = link[0].outerHTML;
        var good = item.verified ? 'good' : 'bad';
        var cells  = '<td>' + item.title + '</td>';
            cells += '<td>' + item.slipDays + '</td>';
            cells += '<td>' + link + '</td>';
            cells += '<td class="' + good + '"><span class="sr-only">' + item.verified + '</span></td>';
        row.append(cells);
        table.append(row);
      });
};

var makeSlipDaysCall = function(sid) {
  var dom = 'alonzo.herokuapp.com';
  // Local hosts use a local Alonzo URL
  if (location.port === '4000') {
    dom = 'localhost:8080';
  }

  var url = 'https://' + dom + '/slipdays/' + sid;
  $.ajax({
    url: url,
    cache: true,
    crossDomain: true,
    success: buildTable,
    error: function(a, b, c) { // TODO: Better error handling..
      var table = $('#table-contents');
      table.append($('<tr>').html($('<td>').html('Whoops, an error occured! Sorry!')));
    }
  });
}

$(document).ready(function() {
  var search = location.search.split('?');

  if (search.length > 1 && search[1]) {
    makeSlipDaysCall(search[1]);
  }

  $('#sid-form').submit(function(evt) {
    makeSlipDaysCall($('#sidInput').val());
    evt.preventDefault();
  });
});

</script>