Complete Bootsrap form

by Steve Coffman

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<form id="assignFaculty" action="#" th:action="@{/clerkship/assignfacultypopup}" method="POST">
    <input type="hidden" name="index" th:value="${index}" />
    <div class="row">
        <div class="col-sm-4">
            <div class="panel panel-primary">
                <div class="panel-heading">
                     <h3 class="panel-title">Student</h3>

                </div>
                <div class="panel-body">
                    <div class="col-xs-12">
                        <div class="row"> <i class="fa fa-user-md fa-3x pull-left"></i>

                            <div id="studentname" th:text="${enrollment.student} ? ${enrollment.student.person.displayName}">Branton, Bill</div>
                            <div id="year" th:text="${enrollment.student} ? ${enrollment.student.studentLevel}">M3</div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <input type="hidden" name="enrollmentId" th:value="${enrollment.uid}" />
                                <div id="course" th:text="${enrollment.scheduledClass.course.courseDescriptionLong}">700 Med U Internal Medicine</div>
                                <div id="period">Period <span th:text="${enrollment.scheduledClass.period}">9</span>:	<span th:text="${#dates.format(enrollment.scheduledClass.startDate,'MM/dd/yyyy')}">01/01/14</span>
- <span th:text="${#dates.format(enrollment.scheduledClass.endDate,'MM/dd/yyyy')}">02/14/14</span>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
   ...

CSS

.row, .col-md-2, .col-md-4, .col-xs-1, .col-xs-2 {
    /*border: 1px solid;*/
}

JavaScript

/*global $:false */

function reArrangeSelect(parentElement, childrenElementArray) {
    'use strict';
    parentElement.html(childrenElementArray.sort(function (a, b) {
        return (a.text === b.text) ? 0 : (a.text < b.text ? -1 : 1);
    }));
}

$(document).ready(function () {
    'use strict';
    $('#btnAddLE').click(function () {
        $('#learningExperiencesOnPlan option:selected').each(function () {
            $('#learningExperienceId option').prop('selected', false);
            $('#learningExperienceId').append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
            $(this).remove();
        });
    });
    $('#btnRemoveLE').click(function () {
        $('#learningExperienceId option:selected').each(function () {
            $('#learningExperiencesOnPlan').append('<option value="' + $(this).val() + '">' + $(this).text() + '</option>');
            $(this).remove();
        });
        $('#learningExperienceId option:first').attr('selected', 'selected');
    });
    $('#btnUpLE').bind('click', function () {
        $('#learningExperienceId option:selected').each(function () {
            var newPos = $('#learningExperienceId option').index(this) - 1;
            if (newPos > -1) {
                $('#learningExperienceId option').eq(newPos).before('<option value="' + $(this).val() + '" selected="selected">' + $(this).text() + '</option>');
                $(this).remove();
            }
        });
    });
    $('#btnDownLE').bind('click', function () {
        var countOptions = $('#learningExperienceId option').size();
        $('#learningExperienceId option:selected').each(function () {
            var newPos = $('#learningExperienceId option').index(this) + 1;
            if (newPos < countOptions) {
                $('#learningExperienceId option').eq(newPos).after('<option value="' + $(this).val() + '" selected="selected">' + $(this).text() + '</option>');
                $(this).remove();
            }
       ...