Current placement form

May 8 2012

by stevescotthome

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="placement-form">
    <div id="main-container">
        <!-- Header Area -->
        <div id="capacity-header">
            <div class="pod">
                Choose Rotation:
            </div>
            <div class="pod">
                Launch Date:
            </div>
            <div class="pod">
                Due Date:
            </div>
            <div id="loading">
                LOADING...</div>
            <div class="clear">
            </div>
        </div>
        <h1 id="clekership-header">
            <span data-bind="text: Clerkship">Loading...</span>&nbsp;<span class="range"><span
                data-bind="text: start">From</span>&nbsp;-&nbsp;<span data-bind="text: end">To</span></span></h1>
        <div id="campus-wrapper">
            <div class="region-wrapper" data-template="campus-template" data-bind="source: Campuses">
            </div>
        </div>
         
        
        <!-- NOT PART OF THE APP -->
        <div id="problems">
        <h3>Problems</h3>
        <p>NOTE: In my actual app I have Ajax calls going on to persist the changes, like clicking release, or add new</p>
        <ul>
            <li><h4>Add New</h4>
                <ol>
                    <li>Click Add new, rotation dropdown is set to display none, shouldn't be...not sure why it is :)</li>
                    <li>Rotation Combo is set to rotation value #6...by me in code.  However after it's set, .value() returns 26.  So I have a temp workaround to check against 6 (as you can see)</li>            
                </ol>                
            </li>
            <li><h4>Edit a Site</h4>
                <ol>
                    <li>I think this is a JS fiddle problem, but I...

CSS

#main-container{position:absolute;width:100%;height:100%;background:#f0f0f0}
#clekership-header .range{color:#999;font-size:14px}
#capacity-header{width:100%;border-bottom:1px solid #d0d0d0;background:#f0f0f0}
#capacity-header .pod{float:left;padding:10px;border-right:1px solid #d0d0d0;border-left:1px solid #fff;background:#f5f5f5;font-size:13px;font-weight:bold}
#capacity-header .pod:first-child{border-left:0}
.region-wrapper{padding:10px}
.region-wrapper .region-header{border:1px solid #d0d0d0;background:#f5f5f5;margin-bottom:10px}
.region-wrapper .region-header h1{margin:0;padding:0;font-size:20px;color:#fff}
.region-wrapper .region-header .pod-left{float:left;padding:10px}
.region-wrapper .region-header .pod-button{float:right;padding:12px;padding-bottom:13px;font-weight:bold;padding-left:40px;cursor:pointer;color:#fff}
.region-wrapper .region-header .pod-button.add{background:url("") no-repeat 10px 10px}
.region-wrapper .region-header .pod-button.release{background:url("") no-repeat 10px 10px}
.region-wrapper .region-header{background:#ff6e6e;border:1px solid #c65b5b}
.region-wrapper .region-header h1{text-shadow:0 -1px 0 #c65b5b}
.region-wrapper .region-header .pod-button{border-left:1px solid #c65b5b}
.region-wrapper .region-header.released{background:#82e8c9;border:1px solid #63d1b5}
.region-wrapper .region-header.released h1{text-shadow:0 -1px 0 #63d1b5}
.region-wrapper .region-header.released .pod-button{border-left:1px solid #63d1b5}
.region-wrapper .rotation{border:1px solid #d0d0d0;background:#fff;padding:10px 0 0 10px;margin-bottom:10px}
.region-wrapper .rotation .region-sites{clear:both}
.region-wrapper .rotation .site{position:relative;padding:10px 90px 2px 10px;border:1px solid #d0d0d0;background:#f4f4f4;width:auto;float:left;margin-right:10px;margin-bottom:10px;height:30px}
.region-wrapper .rotation .site .capacity{position:absolute;top:5px;right:5px;padding:5px;background:#fff;border:1px solid #d0d0d0}
.region-wrapper .rotation .site...

JavaScript

var coredata = {
    "BlockID": 14,
    "ClerkshipID": 1,
    "Cohort": 2013,
    "Clerkship": "Anesthesiology",
    "IsSelective": false,
    "StartDate": "2011-12-05T00:00:00",
    "EndDate": "2011-12-19T00:00:00",
    "Campuses": [{
        "CampusID": 0,
        "Campus": "Hamilton",
        "Released": true,
        "AvailableToHamilton": false,
        "Rotations": [{
            "RotationID": 6,
            "Rotation": "Anesthesiology",
            "Sites": [{
                "SiteID": 2,
                "Site": "Chedoke Hospital",
                "Min": 1,
                "Max": 2},
            {
                "SiteID": 11,
                "Site": "Hamilton General Hospital",
                "Min": 0,
                "Max": 2},
            {
                "SiteID": 45,
                "Site": "Hamilton Health Sciences",
                "Min": 1,
                "Max": 4}]}]},
    {
        "CampusID": 1,
        "Campus": "Waterloo",
        "Released": true,
        "AvailableToHamilton": false,
        "Rotations": [{
            "RotationID": 6,
            "Rotation": "Anesthesiology",
            "Sites": [{
                "SiteID": 47,
                "Site": "Kitchener-Waterloo",
                "Min": 3,
                "Max": 3}]}]},
    {
        "CampusID": 2,
        "Campus": "Niagara",
        "Released": false,
        "AvailableToHamilton": false,
        "Rotations": []}],
    "AllReleased": false
};


var clerkshipID = 14;
var viewModel = null;
var editWindow = null;

var addWindow = null;
var capacitySlider = null;
var rotationCombo = null;
var sitesCombo = null;

$(document).ready(function() {
    $("#loading").ajaxStart(function() {
        $(this).show();
    }).ajaxComplete(function() {
        $(this).fadeOut(200);
    });

    initMVVMBinders();
    populateForm();
});

function populateForm() {
    createViewModel(coredata);

    //Add in the extra clears on the site level
    $(".region-sites").each(function() {
       ...