Difference between revisions of "Team:Imperial College/Judges"

Line 6: Line 6:
  
 
</style>
 
</style>
 +
  <script>
 +
    $(function () {
 +
    $('.list-group.checked-list-box .list-group-item').each(function () {
 +
       
 +
        // Settings
 +
        var $widget = $(this),
 +
            $checkbox = $('<input type="checkbox" class="hidden" />'),
 +
            color = ($widget.data('color') ? $widget.data('color') : "primary"),
 +
            style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
 +
            settings = {
 +
                on: {
 +
                    icon: 'glyphicon glyphicon-check'
 +
                },
 +
                off: {
 +
                    icon: 'glyphicon glyphicon-unchecked'
 +
                }
 +
            };
 +
           
 +
        $widget.css('cursor', 'pointer')
 +
        $widget.append($checkbox);
 +
 +
        // Event Handlers
 +
        $widget.on('click', function () {
 +
            $checkbox.prop('checked', !$checkbox.is(':checked'));
 +
            $checkbox.triggerHandler('change');
 +
            updateDisplay();
 +
        });
 +
        $checkbox.on('change', function () {
 +
            updateDisplay();
 +
        });
 +
         
 +
 +
        // Actions
 +
        function updateDisplay() {
 +
            var isChecked = $checkbox.is(':checked');
 +
 +
            // Set the button's state
 +
            $widget.data('state', (isChecked) ? "on" : "off");
 +
 +
            // Set the button's icon
 +
            $widget.find('.state-icon')
 +
                .removeClass()
 +
                .addClass('state-icon ' + settings[$widget.data('state')].icon);
 +
 +
            // Update the button's color
 +
            if (isChecked) {
 +
                $widget.addClass(style + color + ' active');
 +
            } else {
 +
                $widget.removeClass(style + color + ' active');
 +
            }
 +
        }
 +
 +
        // Initialization
 +
        function init() {
 +
           
 +
            if ($widget.data('checked') == true) {
 +
                $checkbox.prop('checked', !$checkbox.is(':checked'));
 +
            }
 +
           
 +
            updateDisplay();
 +
 +
            // Inject the icon if applicable
 +
            if ($widget.find('.state-icon').length == 0) {
 +
                $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
 +
            }
 +
        }
 +
        init();
 +
    });
 +
   
 +
    $('#get-checked-data').on('click', function(event) {
 +
        event.preventDefault();
 +
        var checkedItems = {}, counter = 0;
 +
        $("#check-list-box li.active").each(function(idx, li) {
 +
            checkedItems[counter] = $(li).text();
 +
            counter++;
 +
        });
 +
        $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
 +
    });
 +
});</script>
  
 
   
 
   
Line 21: Line 100:
 
   </div>
 
   </div>
  
 +
           
 +
                                <div class="row">
 +
                                    <div class="col-xs-6">
 +
                                        <h3 class="text-center">WET LAB</h3>
 +
                                        <div class="well" style="max-height: 300px;overflow: auto;">
 +
                                            <ul class="list-group checked-list-box">
 +
                                              <li class="list-group-item">Cras justo odio</li>
 +
                                              <li class="list-group-item" data-checked="true">Dapibus ac facilisis in</li>
 +
                                              <li class="list-group-item">Morbi leo risus</li>
 +
                                              <li class="list-group-item">Porta ac consectetur ac</li>
 +
                                              <li class="list-group-item">Vestibulum at eros</li>
 +
                                              <li class="list-group-item">Cras justo odio</li>
 +
                                              <li class="list-group-item">Dapibus ac facilisis in</li>
 +
                                              <li class="list-group-item">Morbi leo risus</li>
 +
                                              <li class="list-group-item">Porta ac consectetur ac</li>
 +
                                              <li class="list-group-item">Vestibulum at eros</li>
 +
                                            </ul>
 +
                                        </div>
 +
                                    </div>
 +
                                 
 +
                                <div class="row">
 +
                                    <div class="col-xs-6">
 +
                                        <h3 class="text-center">DRY LAB</h3>
 +
                                        <div class="well" style="max-height: 300px;overflow: auto;">
 +
                                            <ul class="list-group checked-list-box">
 +
                                              <li class="list-group-item" data-style="button">Cras justo odio</li>
 +
                                              <li class="list-group-item" data-style="button" data-color="success">Dapibus ac facilisis in</li>
 +
                                              <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
 +
                                              <li class="list-group-item" data-style="button" data-color="warning">Porta ac consectetur ac</li>
 +
                                              <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
 +
                                              <li class="list-group-item">Cras justo odio</li>
 +
                                              <li class="list-group-item">Dapibus ac facilisis in</li>
 +
                                              <li class="list-group-item">Morbi leo risus</li>
 +
                                              <li class="list-group-item">Porta ac consectetur ac</li>
 +
                                              <li class="list-group-item">Vestibulum at eros</li>
 +
                                            </ul>
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-xs-6">
 +
                                        <h3 class="text-center">HUMAN PRACTICES</h3>
 +
                                        <div class="well" style="max-height: 300px;overflow: auto;">
 +
                                            <ul class="list-group checked-list-box">
 +
                                              <li class="list-group-item" data-style="button">Cras justo odio</li>
 +
                                              <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
 +
                                              <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
 +
                                              <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
 +
                                              <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
 +
                                            </ul>
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-xs-6">
 +
                                            <h3 class="text-center">PEOPLE</h3>
 +
                                            <div class="well" style="max-height: 300px;overflow: auto;">
 +
                                                <ul class="list-group checked-list-box">
 +
                                                  <li class="list-group-item" data-style="button">Cras justo odio</li>
 +
                                                  <li class="list-group-item" data-color="success">Dapibus ac facilisis in</li>
 +
                                                  <li class="list-group-item" data-style="button" data-color="info">Morbi leo risus</li>
 +
                                                  <li class="list-group-item" data-color="warning">Porta ac consectetur ac</li>
 +
                                                  <li class="list-group-item" data-style="button" data-color="danger">Vestibulum at eros</li>
 +
                                                </ul>
 +
                                            </div>
 +
                                        </div>
 +
                                </div>
 +
                            </div>
 +
        </div>
 +
         
  
 
</div>
 
</div>

Revision as of 22:37, 13 October 2018


For Judges



WET LAB

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

DRY LAB

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

HUMAN PRACTICES

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

PEOPLE

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros