ChugBot test

by David Lobron

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="centered_container">
  <h2>Welcome to the Leveling Page!</h2>
</div>

<div class="control_buttons">
  <input type="submit" name="Save" id="Save" value="Save" />
</div>

<div id="fillmatches"></div>

CSS

.groupholder {
  margin: 10px;
  border: 4px solid #ccc;
  padding: 2px 5px 5px 5px;
  text-align: center;
  width: 75%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.chugholder {
  background-color: white;
  border: 2px dotted silver;
  width: 65%;
  min-height: 30px;
  margin: 0;
  padding: 2px 2px 2px 2px;
  margin-left: 20px;
  margin-top: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.chugholder.custom-state-active {
  background: #eee;
}

.gallery li {
  float: left;
  width: 96px;
  padding: 0.2em;
  margin: 0 0.4em 0.4em 0 text-align: center;
  font-size: 1.2em;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.chugholder li h5 {
  margin: 0 0 0.4em;
  cursor: move;
}

.control_buttons {
  position: relative;
  margin: auto;
  margin-top: 20px;
  text-align: center;
  width: 35%;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

.control_buttons input[type=submit] {
  padding: 3px 8px;
  color: black;
  background-color: #cccccc;
  border: 1px solid grey;
  box-shadow: 2px 2px grey;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-size: 1.5em;
}

.centered_container {
  position: relative;
  margin-top: 5px;
  top: 2px;
  background: #fff;
  margin: 0 auto;
  text-align: center;
  width: 35%;
  padding-bottom: 3px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid silver;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

JavaScript

$(function() {
  var succeeded = 1;
  var groupId2ChugId2MatchedCampers = new Object();
  groupId2ChugId2MatchedCampers[1] = new Object();
  groupId2ChugId2MatchedCampers[2] = new Object();
  groupId2ChugId2MatchedCampers[1][1] = [1, 2];
  groupId2ChugId2MatchedCampers[2][2] = [3];
  groupId2ChugId2MatchedCampers[2][3] = [4];
  var groupId2Name = new Object();
  groupId2Name[1] = "aleph";
  groupId2Name[2] = "bet";
  var camperId2Name = new Object();
  camperId2Name[1] = "Hermann Rarebell";
  camperId2Name[2] = "Klaus Meine";
  camperId2Name[3] = "Rudolf Schenker";
  camperId2Name[4] = "Mattias Jabs";
  var chugId2Name = new Object();
  chugId2Name[1] = "Swimming";
  chugId2Name[2] = "Krav Maga";
  chugId2Name[3] = "Cooking";
  var html = "";
  $.each(groupId2ChugId2MatchedCampers,
    function(groupId, chugId2MatchedCampers) {
      var groupName = groupId2Name[groupId];
      html += "<div class=\"groupholder\" name=\"" + groupId + "\" >\n";
      html += "<h3>" + groupName + " assignments</h3>\n";
      $.each(chugId2MatchedCampers,
        function(chugId, matchedCampers) {
          var chugName = chugId2Name[chugId];
          html += "<div name=\"" + chugId + "\" class=\"ui-widget ui-helper-clearfix chugholder\">\n";
          html += "<h4>" + chugName + "</h4>";
          html += "<ul class=\"gallery ui-helper-reset ui-helper-clearfix\">";
          $.each(matchedCampers,
            function(index, camperId) {
              var camperName = camperId2Name[camperId];
              html += "<li value=\"" + camperId + "\" class=\"ui-widget-content\" <h5 class=\"ui-widget-header\">" + camperName + "</h5></li>\n";
            });
          html += "</ul><br style=\"clear: both\"></div>\n";
        });
      html += "</div>\n";
    });
  $("#fillmatches").html(html);

  if (succeeded) {
    $("ul.gallery li").draggable({
      scroll: false,
      revert: "invalid",
      cursor: "move"
    });
    $('ul.gallery li').each(function() {
      var $el = $(this);
 ...