Snapshot Templates

_snapshot-cards.tmpl.html

<!-- primary templates -->

<script id="js-template-card-attending-physician" type="text/x-kendo-template">
    #= bo.dataService.renderCardHeaderTemplate({heading:'Attending physician'}) #
    <div class="bo-card__content">
        # if(attendingPhysician.providerContact !== null) { #
            #= bo.dataService.renderContactListTemplate({contact: attendingPhysician.providerContact, mailTo: "" })  #
        # } #

        #if (attendingPhysician.id > 0) { #
        <dl class="bo-card__list">
            <dt class="bo-card__label">Effective Date</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(attendingPhysician.effectiveDate, 'MM/DD/YYYY') #</dd>
            <dt class="bo-card__label">Works for</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(attendingPhysician.worksFor) #</dd>
        </dl>
        <dl class="bo-card__list">
            <span class="bo-card__name">MCO Memberships</span>
            <ul class="bo-card__phone-list is-important">
                # for (var  i= 0; i < attendingPhysician.mcoMemberships.length; i++) { #
                <li> #= attendingPhysician.mcoMemberships[i] #</li>
                # } #
            </ul>
        </dl>
        # } else { #
        <span>No attending physician on file</span>
        #}#
    </div>
</script>

<script id="js-template-card-claim" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Claim'}) #

    <div class="bo-card__content">

        <dl class="bo-card__list">
            <dt class="bo-card__label">Region</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(claimRegion) #</dd>
            <dt class="bo-card__label">Status</dt>
            # if (claimStatus) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(claimStatus.date, 'MM/DD/YYYY') # <span class="is-important">#= claimStatus.description #</span></dd>
            # } #

            <dt class="bo-card__label">Type</dt>
            # if (claimType) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(claimType.date, 'MM/DD/YYYY') # <span class="is-important">#= claimType.description #</span></dd>
            # } #

        </dl>

        <dl class="bo-card__list">
            <dt class="bo-card__label">Voc status</dt>
            # if (vocStatus) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(vocStatus.date, 'MM/DD/YYYY') # <span class="is-important">#= vocStatus.description #</span></dd>
            # } #
            <dt class="bo-card__label">Work release</dt>
            # if (workRelease) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(workRelease.date, 'MM/DD/YYYY') # <span class="is-important">#= workRelease.description #</span></dd>
            # } #

            <dt class="bo-card__label">Work status</dt>
            # if (workStatus) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(workStatus.date, 'MM/DD/YYYY') # <span class="is-important">#= workStatus.description #</span></dd>
            # } #

        </dl>

        <dl class="bo-card__list">
            <dt class="bo-card__label">Date of injury</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(dateOfInjury, 'MM/DD/YYYY') #</dd>
            <dt class="bo-card__label">Knowledge date</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(knowledgeDate, 'MM/DD/YYYY') #</dd>

            <dt class="bo-card__label">3<sup>rd</sup> party status</dt>
            # if (thirdPartyStatus) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(thirdPartyStatus.date, 'MM/DD/YYYY') # <span class="is-important">#= thirdPartyStatus.description #</span></dd>
            # } #
            <dt class="bo-card__label">Agg rights</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(aggRightStatusDate, 'MM/DD/YYYY') #</dd>
            <dt class="bo-card__label">First closure</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(firstClosureDate, 'MM/DD/YYYY') #</dd>

            <dt class="bo-card__label">Last TL</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(lastPaymentDate, 'MM/DD/YYYY') # <span class="is-important">#= bo.utilities.formatAsCurrency(lastPaymentAmount) #</span></dd>

            <dt class="bo-card__label">Pharm eligible</dt>
            # if (pharmacyEligibility) { #
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(pharmacyEligibility.date, 'MM/DD/YYYY') # <span class="is-important">#= pharmacyEligibility.description #</span></dd>
            # } #

            <dt class="bo-card__label">Body part</dt>
            # if (primaryBodyPart) { #
            <dd class="bo-card__info">#= primaryBodyPart.description #</dd>
            # } #

        </dl>

    </div>

</script>

<script id="js-template-card-claim-contacts" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Contacts'}) #

    <div class="bo-card__content">

        # for (var  i= 0; i < contacts.length; i++) { #
        #= bo.dataService.renderContactListTemplate( { contact: contacts[i], mailTo: standardEmailSubject }) #
        # } #


    </div>

</script>

<script id="js-template-card-conditions" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Conditions'}) #

    <div class="bo-card__content">
        #
        var conditionsLength = conditions.length,
        tmp = '';

        for(var i=0; i < conditionsLength; i++) {
        tmp += bo.dataService.renderConditionsListTemplate(conditions[i]);
        }
        #
        #= tmp #
    </div>
</script>

<script id="js-template-card-legal" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Legal'}) #

    <div class="bo-card__content">

        # if (legal.hasLegalCases) { #

        # if(legal.hearingStatus || legal.mediationStatus) { #
        <div class="alert alert-info bo-card__alert">
            # if(legal.hearingStatus) { #
                <ul class="bo-card__list">
                    <li class="bo-card__title">Hearing status</li>
                    <li class="">#= legal.hearingStatus #</li>
                    <li class="">#= bo.utilities.formatNullableDate(legal.hearingDate, 'MM/DD/YYYY') #</li>
                    <li class="">#= legal.hearingTime #</li>
            </ul>
        # } #

                # if(legal.mediationStatus) { #
                    <ul class="bo-card__list">
                        <li class="bo-card__title">Mediation status</li>
                        <li class="">#= legal.mediationStatus #</li>
                        <li class="">#= bo.utilities.formatNullableDate(legal.mediationDate, 'MM/DD/YYYY') #</li>
                        <li class="">#= legal.mediationTime #</li>
                    </ul>
                # } #

        </div>
        # } #

            <div id="saif-contacts">
                # if(legal.attorney !== null) { #
                #= bo.dataService.renderContactListTemplate({contact: legal.attorney, mailTo: emailSubject })  #
        # } #

                # if(legal.secretary !== null) { #
                #= bo.dataService.renderContactListTemplate({contact: legal.secretary, mailTo: emailSubject })  #
        # } #
            </div>

            <div>
        <ul class="bo-card__contact bo-card__contact--mini">
                    # if (legal.outsideCounselFirm) { #
                    <li class="bo-card__name bo-card__main">#= legal.outsideCounselFirm #</li>
            <li class="is-important">Outside Councel</li>
            # } #
                    # if (legal.outsideCounselAttorney) { #
                    <li class="bo-card__name bo-card__main">#= legal.outsideCounselAttorney #</li>
            <li class="is-important">Outside Attorney</li>
            # } #
        </ul>
            </div>

        <dl class="bo-card__list">
            <dt class="bo-card__label">Multiple cases</dt>
                <dd class="bo-card__info">#= bo.templates.displayBoolean(legal.multipleCases) #</dd>
        </dl>

        # } else { #
        <span>No active legal cases on file</span>
        #}#

    </div>

</script>

<script id="js-template-card-mco" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'MCO Plan'}) #

    <div class="bo-card__content">
        # if( mco.contact !== null ) { #
        #= bo.dataService.renderContactListTemplate({contact: mco.contact, mailTo: emailSubject }) #
        # } #

        <dl class="bo-card__list">
            <dt class="bo-card__label">Effective Date</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(mco.effectiveDate, 'MM/DD/YYYY') #</dd>
            <dt class="bo-card__label">Status</dt>
            <dd class="bo-card__info"><span class="is-important">#= bo.utilities.handleNullableString(mco.status) #</span></dd>
        </dl>
    </div>
</script>

<script id="js-template-card-policy" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Policy'}) #

    <div class="bo-card__content">

        # if( policy.policyContact !== null ) { #
        #= bo.dataService.renderContactListTemplate({contact: policy.policyContact, mailTo: emailSubject }) #
        # } #
        
        # if( policy.policyClaimContact !== null ) { #
        #= bo.dataService.renderContactListTemplate({contact: policy.policyClaimContact, mailTo: emailSubject }) #
        # } #

        <dl class="bo-card__list">
            <dt class="bo-card__label">Policy Number</dt>
            <dd class="bo-card__info">#= policy.policyNumber #</dd>
            <dt class="bo-card__label">Policy county</dt>
           # if( policy.policyCounty ) { #
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.policyCounty.countyName) #</dd>
            # } else { #
            <dd class="bo-card__info"></dd>
            #}#

            <dt class="bo-card__label">Agent</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.agentName) #</dd>
            <dt class="bo-card__label">Customer Svc team</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.customerServiceTeam) #</dd>

            <dt class="bo-card__label">District office</dt>
            # if( policy.districtOffice) { #
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.districtOffice.description) #</dd>
            # } else { #
            <dd class="bo-card__info"></dd>
            #}#

            <dt class="bo-card__label">Group</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.groupName) #</dd>

            <dt class="bo-card__label">Rate account</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.rateAccount) #</dd>

            <dt class="bo-card__label">Rate account county</dt>
           # if( policy.rateAccountCounty ) { #
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.rateAccountCounty.countyName) #</dd>
            # } else { #
            <dd class="bo-card__info"></dd>
            #}#


            <dt class="bo-card__label">Standard premium</dt>
            <dd class="bo-card__info">#= bo.utilities.formatAsCurrency(policy.standardPremium) #</dd>
            <dt class="bo-card__label">Status</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(policy.policyStatus) #</dd>

        </dl>
        <dl class="bo-card__list">
            <span class="bo-card__name">MCO Memberships</span>
            <ul class="bo-card__phone-list is-important">
                # for (var  i= 0; i < policy.mcoNames.length; i++) { #
                <li> #= policy.mcoNames[i] #</li>
                # } #
            </ul>
        </dl>

    </div>

</script>

<script id="js-template-card-reserves" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Reserves'}) #


    <div class="bo-card__content">

        # if (data.length > 0) { #

        <div class="bo-table__container--collapsible">
            <table class="bo-table bo-table__data">
                <caption>Reserves</caption>
                <thead>
                    <tr>
                        <th scope="column" class="bo-table__data--collapsible__heading">Reserves</th>
                        <th class="bo-table__currency" scope="column">Incurred</th>
                        <th class="bo-table__currency" scope="column">Paid</th>
                        <th class="bo-table__currency" scope="column">Outstanding</th>
                    </tr>
                </thead>
                <tbody>
                    # for (var  i= 0; i < data.length; i++) { #
                    <tr>
                        <th scope="row">#= data[i].costCategory.description #</th>
                        <td class="bo-table__currency">#= bo.utilities.formatAsCurrency(data[i].incurredAmount) #</td>
                        <td class="bo-table__currency">#= bo.utilities.formatAsCurrency(data[i].paidAmount)  #</td>
                        <td class="bo-table__currency">#= bo.utilities.formatAsCurrency(data[i].outstandingReserveAmount)  #</td>
                    </tr>
                    # } #

                </tbody>
            </table>
        </div>

        # } else { #
        <span>No Reserves on file</span>
        #}#

    </div>

</script>

<script id="js-template-card-worker" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Worker'}) #

    <div class="bo-card__content">

        #= bo.dataService.renderContactListTemplate({contact: worker.contact, mailTo: emailSubject }) #

        <dl class="bo-card__list">
            <dt class="bo-card__label">Contact preference</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(worker.preferredContactMethod) #</dd>
            <dt class="bo-card__label">Date of Birth</dt>
            <dd class="bo-card__info">#= bo.utilities.formatNullableDate(worker.birthDate, 'MM/DD/YYYY') #</dd>
            <dt class="bo-card__label">Age</dt>
            <dd class="bo-card__info">#= worker.age #</dd>
            <dt class="bo-card__label">Gender</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(worker.gender) #</dd>
            <dt class="bo-card__label">Health insurance</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(worker.healthInsuranceProvider) #</dd>
            <dt class="bo-card__label">Language</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(worker.languagePreference) #</dd>
            <dt class="bo-card__label">Other claims</dt>
            <dd class="bo-card__info">#= worker.otherClaims #</dd>
            <dt class="bo-card__label">SSN</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(worker.workerSsn) #</dd>
        </dl>

    </div>
</script>

<script id="js-template-card-worker-representative" type="text/x-kendo-template">

    #= bo.dataService.renderCardHeaderTemplate({heading:'Worker representative'}) #

    <div class="bo-card__content">
        #
        tmp = '';
        if (workerRep.worksFor !== null) {
            tmp = "Works for";
        }
        #
        # if (workerRep.workerRepContact !== null) { #
        #= bo.dataService.renderContactListTemplate({contact: workerRep.workerRepContact, mailTo: emailSubject }) #
            <dl class="bo-card__list">
                <dt class="bo-card__label">#= tmp #</dt>
            <dd class="bo-card__info">#= bo.utilities.handleNullableString(workerRep.worksFor) #</dd>
            </dl>
        # } #
        # if (workerRep.workerRepContact == null) { #
        <span class="bo-card__label">Worker does not have current representation</span>
        # } #
        
        #
        historyString = 'No';
        if (workerRep.hasHistory) {
        historyString = "Yes";
        }
        #

        <dl class="bo-card__list">
            <dt class="bo-card__label">History</dt>
            <dd class="bo-card__info">#= historyString #</dd>
        </dl>

    </div>

</script>

<!-- partial templates ---------------------------------------------------------------------------------------------------------------------------- -->

<script id="js-template-card-header" type="text/x-kendo-template">
    <div class="bo-card__header">
        <i class="icon-grab icon-muted bo-card__header__icon-sortable"></i>
        <h1 class="bo-card__header__title">#= heading #</h1>
        <button class="btn btn-link bo-btn__icon bo-card__header__btn js-bo-card__header__btn--close"><i class="icon-x"></i></button>
    </div>
</script>

<!-- formatted lists should be called from within a loop which exists outside this template -->
<script id="js-template-conditions-list" type="text/x-kendo-template">
    <dl class="bo-card__list">
        <dt class="bo-card__label">Decison</dt>
        <dd class="bo-card__info">#= bo.utilities.formatNullableDate(decisionDate, 'MM/DD/YYYY') # <span class="is-important">#= decision #</span></dd>
        <dt class="bo-card__label">Med station date</dt>
        <dd class="bo-card__info">#= bo.utilities.formatNullableDate(medicallyStationaryDate, 'MM/DD/YYYY') #</dd>
        <dt class="bo-card__label">Description</dt>
        <dd class="bo-card__info">#= conditionDescription #</dd>
    </dl>
</script>

<!-- this basic list can be created as a single string, the loop exists within this template -->
<script id="js-template-address-list" type="text/x-kendo-template">
    <ul class="bo-card__address-list">
        #
        var tmp = '';
        for(var i=0; i < data.length; i++) {
        tmp += '<li>' + data[i] + '</li>';
        }
        #

        #= tmp #
    </ul>
</script>

<script id="js-template-phone-list" type="text/x-kendo-template">
    <ul class="bo-card__phone-list">
        #
        var phoneLength = data.length,
        tmp = '';

        for(var i=0; i < phoneLength; i++) {
        tmp += '<li class="">' + data[i].formattedValue + ' - ' + '<span class="bo-ss-phone-type">' + data[i].phoneType.description + '</span></li>';
        }
        #
        #= tmp #
    </ul>
</script>

<script id="js-template-contact-list" type="text/x-kendo-template">

    <ul class="bo-contact">

        # if (contact.id !== null) { #
        <li class="bo-contact__item bo-contact__item--thumbnail">
            <span class="bo-contact__item--thumbnail"><img src="//saifonline/EmployeeResourceAPI/api/employeeImage/#= contact.id #"></span>
        </li>
        # } #

        # if (contact.formattedName !== null) { #
        <li class="bo-contact__item bo-contact__item--main">
            #= contact.formattedName #
        </li>
        # } #

        # if (contact.type !== null) { #
        <li class="bo-contact__item bo-contact__item--title">#= contact.type # &nbsp; #= bo.utilities.handleNullableString(contact.description) #</li>
        #  }#


        # if (contact.address !== null) { #
        <li class="bo-contact__item bo-card__address">#= bo.dataService.renderAddressListTemplate(contact.address.formattedList) #</li>
        # } #

        <li class="bo-contact__item">
            #= bo.dataService.renderPhoneListTemplate(contact.phoneNumbers) #
        </li>
        # var mailRef = 'mailto:' + contact.email + encodeURI(mailTo); #

        # if (contact.email) { #
        <li class="bo-card__email"><a href= #= mailRef #>#= contact.email #</a></li>
        # } #

        # if (contact.id !== null) { #
        <li class="bo-contact__item bo-contact__item--location">
            #= bo.utilities.handleNullableString(contact.location) #
        </li>
        # } #
    </ul>

</script>
<script id="js-template-request-ime-email" type="text/html">
    <div>
        <span class="bo-card__email"><a href= #=data #> Request IME </a></span>
    </div>
</script>

app.less

@import "C:\tfs\SAIFCode\Assets2\WebApps\Assets\v1\src\css\bo-variables.less";

@import "less\variables.less";

ul {
    list-style-type: none;
}

/* Promote to Assets */
.bo-site-content {
    padding-left: 5px;
    padding-right:0;
}

#web-context-value {
    width: 98%;
}

.is-important {
  color: @tertiary-blue;
}


@import (less) "less\panels.less";
@import (less) "less\tabs.less";
@import (less) "less\cards.less";
@import (less) "less\contact.less";

cards.less

@import "C:\tfs\SAIFCode\Assets2\WebApps\Assets\v1\src\css\bo-variables.less";
@import "variables.less";



.bo-card__drop {
  margin: auto;
}

.bo-card__placeholder {    
    border: 1px dashed @gray-lighter;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: @gray-lightest;
    clear: both;
    color: @gray-light;
    height: 100px;
    margin-bottom: 30px;
    padding: 40px auto;
    text-align: center;
}

.bo-card {
  /*border:1px dashed @white;*/
  background-color: @white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  clear: both;
  margin-bottom: 30px;
  padding: 0;
  transition: all 0.2s ease;

  .bo-table__data {
      caption {
        display: none;
      }
      tfoot {
        display: none;
      }
  }

  .bo-card__header__icon-sortable {
        color: @gray-lightest;
        font-size: 1.6rem;
      }
  
 

}

.bo-card__header {
  background-color: @gray-lightest;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-color: @gray-neutral;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 1rem;
  padding: 0.6rem 0 0.6rem 0.6rem;

  .bo-card__header__icon-sortable {
    color: @gray-lightest;
  }

  .icon-drag,
  .icon-grab {
    /*font-size: 2rem;*/
  }

  .bo-btn__icon {
    color: @gray-light;
    float: right;

    &:hover {
      color: @gray-dark;
    }
  }
}



.bo-card__header__title {
  color: @gray-darkest;
  display: inline-block;
  font-size: 1.2rem;
  margin-left: 1rem;
}

.bo-card__alert {
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  /*width: 90%;*/

  
    .bo-card__list {
        border-top: none;
        float: left;
        margin: auto;
        padding: 10px 0 10px 0;
        width: 50%;
    }

}




#legal {
}

.alert-info {
    .bo-card__title {
        border-bottom: 1px solid @info-text-color;
        color: @info-text-color;
        font-size: 1.2rem;
        font-weight: bold;
        margin-right: 20px;
        margin-right: 2rem;
    }

    
    
}

.bo-card__list {
  border-top: 1px solid @gray-light;
  display: inline-block;
  margin-bottom:2rem;
  padding: 6px 10px 0 10px;
  width: 100%;

  .bo-card__label {
    color: @gray-light;
    display: inline-block;
    font-weight: normal;
    line-height: 2;
    margin:0;
    width: 35%;
  }

  .bo-card__info {
    display: inline-block;
    line-height: 2;
    margin:0;
    width: 65%;

    /*ul {
        padding-left: 0;
        margin-bottom: 0;
    }*/
  }
}

.bo-card__content {
    clear: both;
    margin: 0 5px;
    overflow: hidden;
    padding: 0 5px;

    .bo-card__list:nth-of-type(1) {
        border-top: none;
    }
}


.bo-half {
    float: left;
    width: 50%;
}




.is-dragging {
    display: block !important;
    opacity: 0.7;
}

.bo-panel__hover__btn--close {
    clear: left;
    float: right;
}

contact.less

@import "C:\tfs\SAIFCode\Assets2\WebApps\Assets\v1\src\css\bo-variables.less";
@import "variables.less";


.bo-contact {
  color: @gray;
  margin-bottom:3rem;
    padding: 10px;

    .bo-contact__item {
        
    }

    &:nth-of-type(odd) {
        clear: left;
    }
}

.bo-contact__item--main {
  border-bottom: 1px solid @gray-light;
  font-weight: bold;
}

.bo-contact__item--thumbnail {

    img {
        border:1px solid @gray-light;
        height: 48px;
        width: 48px;
    }
}

.bo-contact__item--title {
    
}

.bo-contact__item--location {

}


.bo-card__contact--mini {
  float: left;
  // width: 50%;
}

.bo-card__address-list,
.bo-card__phone-list {
    padding-left: 0;
}

.bo-card__phone-list {
    padding-left: 0;
}

.bo-contact__item--phone:before {
  content: "P: "
}

.bo-contact__item--fax:before {
  content: "F: "
}

#claim-contacts, #legal {
    .bo-contact {
        display: block;
        float: left;
        width: 50%;
    }
}

data-service.js

bo.namespace('dataService');

bo.dataService = (function () {
    'use strict';

    var claimTopic,

        claimPromise = function (claimId) {
            $.ajax({
                url: '/ClaimInfoAPI/snapshotApi/' + claimId
            }).always(_loadTemplate).done(_claimSuccess).error(_claimError)
        },

    _loadTemplate = function () {

        //bo.templates.loader('/Claimsnapshot/blocks/_snapshot-cards.tmpl.html', 'SNAPSHOT_CARDS');
    },

    _claimSuccess = function (results) {

        var mailRef = formatRequestImeEmail(results.data),

            workerTemplate = kendo.template($('#js-template-card-worker').html()),
            workerResults = workerTemplate({ worker: results.data.worker, emailSubject: results.data.contacts.standardEmailSubject }),

            claimTemplate = kendo.template($('#js-template-card-claim').html()),
            claimResults = claimTemplate(results.data.claim),

            claimContactsTemplate = kendo.template($('#js-template-card-claim-contacts').html()),
            claimContactsResults = claimContactsTemplate(results.data.contacts),

            reservesTemplate = kendo.template($('#js-template-card-reserves').html()),
            reserveResults = reservesTemplate(results.data.reserves.categoryDetails),

            conditionsTemplate = kendo.template($('#js-template-card-conditions').html()),
            conditionsResults = conditionsTemplate(results.data.conditions),

            mcoTemplate = kendo.template($('#js-template-card-mco').html()),
            mcoResults = mcoTemplate({ mco: results.data.mcoPlan, emailSubject: results.data.contacts.standardEmailSubject }),

            legalTemplate = kendo.template($('#js-template-card-legal').html()),
            legalResults = legalTemplate({ legal: results.data.legal, emailSubject: results.data.contacts.standardEmailSubject }),

            attendingPhysicianTemplate = kendo.template($('#js-template-card-attending-physician').html()),
            attendingPhysicianResults = attendingPhysicianTemplate({ attendingPhysician: results.data.attendingPhysician, emailSubject: results.data.contacts.standardEmailSubject }),

            workerRepresentativeTemplate = kendo.template($('#js-template-card-worker-representative').html()),
            workerRepresentativepResults = workerRepresentativeTemplate({ workerRep: results.data.workerRepresentative, emailSubject: results.data.contacts.standardEmailSubject }),

            policyTemplate = kendo.template($('#js-template-card-policy').html()),
            policyResults = policyTemplate({ policy: results.data.policy, emailSubject: results.data.contacts.standardEmailSubject }),

            requestImeTemplate = kendo.template($('#js-template-request-ime-email').html()),
            requestImeResults = requestImeTemplate(mailRef);


        $('#attending-physician').html(attendingPhysicianResults);
        $('#claim').html(claimResults);
        $('#claim-contacts').html(claimContactsResults);
        $('#conditions').html(conditionsResults);
        $('#legal').html(legalResults);
        $('#mco-plan').html(mcoResults);
        $('#policy').html(policyResults);
        $('#reserves').html(reserveResults);
        $('#worker').html(workerResults);
        $('#worker-representative').html(workerRepresentativepResults);
        $('#request-ime-email').html(requestImeResults);


        //check for claim alerts and display
        if (results.data.claim.claimAttributes.length > 0) {
            var alerts = results.data.claim.claimAttributes;
            var alert = '<ul class="list-inline">';

            for (var i = 0; i < alerts.length; i++) {
                alert += '<li>' + alerts[i] + '</li>';
            }

            alert += '</ul>';
            $("#js-claim-alerts").html(alert);

        }

    },

    formatRequestImeEmail = function (data) {
        var mailFirst = encodeURIComponent(formatBeginText(data)),
            mailMid = encodeURIComponent(formatMidText(data)),
            mailLast = encodeURIComponent(formatEndText(data)),
            mailTo = 'mailto:' + encodeURI(data.contacts.standardEmailSubject) + '&body=',
            initLength = mailTo.length + mailFirst.length + mailLast.length,
            truncLength = 2032 - initLength - mailMid.length,
            mailNewLine = '%0D%0A',
            mailTrunc = '';

        if (truncLength < 0) {
            mailTrunc = mailMid.substring(0, mailMid.length + truncLength - 6) + mailNewLine;
        } else {
            mailTrunc = mailMid;
        }
        return mailTo + mailFirst + mailTrunc + mailLast;

    },
    formatBeginText = function (data) {
        return formatWorker(data.worker) + formatClaimInfo(data.claim);

    },
    formatMidText = function (data) {
        return formatConditions(data.conditions.acceptedConditions) + formatConditions(data.conditions.deniedConditions) + formatConditions(data.conditions.deferredConditions);
    },
    formatEndText = function (data) {
        var newLine = '\n';
        return newLine + formatAttendingPhysician(data.attendingPhysician) + formatWorkerRep(data.workerRepresentative) + formatSaifInfo(data.contacts);

    },
   toProperCase = function (str) {
       var i, j, lowers, uppers;
       str = str.replace(/([^\W_]+[^\s-]*) */g, function (txt) {
           return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
       });

       // Certain minor words should be left lowercase unless 
       // they are the first or last words in the string
       lowers = ['A', 'An', 'The', 'And', 'But', 'Or', 'For', 'Nor', 'As', 'At',
       'By', 'For', 'From', 'In', 'Into', 'Near', 'Of', 'On', 'Onto', 'To', 'With'];
       for (i = 0, j = lowers.length; i < j; i++)
           str = str.replace(new RegExp('\\s' + lowers[i] + '\\s', 'g'),
             function (txt) {
                 return txt.toLowerCase();
             });

       // Certain words such as initialisms or acronyms should be left uppercase
       uppers = ['Nw', 'Ne', 'Sw', 'Se', 'N', 'E', 'S', 'W', 'or'];
       for (i = 0, j = uppers.length; i < j; i++)
           str = str.replace(new RegExp('\\b' + uppers[i] + '\\b', 'g'),
             uppers[i].toUpperCase());

       return str;
   },
    formatWorker = function (data) {
        var newLine = '\n';
        var sb = '';
        if (data !== null) {
            if (data.contact !== null) {
                sb = 'Worker: ' + bo.utilities.handleNullableString(data.contact.formattedName) + newLine;
                sb += 'Address: ';
                if (data.contact.address !== null && data.contact.address.formattedList !== null) {
                    for (var i = 0; i < data.contact.address.formattedList.length; i++) {
                        sb += toProperCase(data.contact.address.formattedList[i]) + newLine;
                    }
                }
                if (data.contact.phoneNumbers !== null) {
                    for (var i = 0; i < data.contact.phoneNumbers.length; i++) {
                        if (data.contact.phoneNumbers[i].phoneType.description !== null) {
                            sb += data.contact.phoneNumbers[i].phoneType.description + ': ';
                        } else {
                            sb += 'Phone: ';
                        }
                        sb += bo.utilities.handleNullableString(data.contact.phoneNumbers[i].formattedValueWithExtension) + newLine;
                    }
                }
            }
            sb += 'Gender: ' + bo.utilities.handleNullableString(data.gender) + newLine;
            sb += 'Language preference: '
            if (data.languagePreference !== null && data.languagePreference !== '<blank>') {
                sb += bo.utilities.handleNullableString(data.languagePreference);
            }
            sb += newLine;
            sb += 'Birth date: ' + bo.utilities.formatNullableDate(data.birthDate, 'MM/DD/YYYY') + newLine;
        } else {
            sb += 'Worker info not on file' + newLine;
        }
        return sb + newLine;
    },
    formatClaimInfo = function (data) {

        var newLine = '\n',
            sb = '';
        if (data !== null && data.dateOfInjury !== null) {
            sb = 'Injury: ' + bo.utilities.formatNullableDate(data.dateOfInjury, 'MM/DD/YYYY') + newLine;
            if (data.primaryBodyPart !== null) {
                sb += 'Body part: ' + bo.utilities.handleNullableString(data.primaryBodyPart.description) + newLine;
            }

            sb += newLine;
        }
        return sb;

    },
    formatConditions = function (data) {
        var newLine = '\n',
            sb = '';
        if (data !== null && data.length > 0) {
            sb = bo.utilities.handleNullableString(data[0].decision) + ' conditions: ' + newLine;
            for (var i = 0; i < data.length; i++) {
                if (data[i].conditionDescription !== null) {
                    sb += bo.utilities.handleNullableString(data[i].conditionDescription) + newLine;
                }
            }
            sb += newLine;
        }
        return sb;
    },
   formatAttendingPhysician = function (data) {
       var newLine = '\n',
           sb = 'Attending Physician: ';
       if (data.providerContact !== null) {
           sb += bo.utilities.handleNullableString(data.providerContact.formattedName);
       } else {
           sb += 'No attending physician on file';
       };
       sb += newLine;
       if (data.worksFor !== null) {
           sb += 'Works for: ' + data.worksFor + newLine;
       }
       if (data.providerContact !== null) {
           if (data.providerContact.address.formattedList !== null) {
               for (var i = 0; i < data.providerContact.address.formattedList.length; i++) {
                   sb += toProperCase(data.providerContact.address.formattedList[i]) + newLine;
               }
           }
           if (data.providerContact.phoneNumbers !== null) {
               for (var i = 0; i < data.providerContact.phoneNumbers.length; i++) {
                   if (data.providerContact.phoneNumbers[i].phoneType.description !== null) {
                       sb += data.providerContact.phoneNumbers[i].phoneType.description + ': ';
                   } else {
                       sb += 'Phone: ';
                   }
                   sb += bo.utilities.handleNullableString(data.providerContact.phoneNumbers[i].formattedValueWithExtension) + newLine;
               }
           }

       }
       if (data.mcoMemberships !== null && data.mcoMemberships.length > 0) {

           for (var i = 0; i < data.mcoMemberships.length; i++) {
               if (data.mcoMemberships[i] !== null) {
                   sb += bo.utilities.handleNullableString(data.mcoMemberships[i].trim()) + newLine;
               }
           }
       }
       sb += newLine;
       return sb;
   },
   formatWorkerRep = function (data) {
       var newLine = '\n',
      sb = '';
       sb += 'Injured worker' + "'" + 's representative: ';
       if (data.workerRepContact !== null) {
           sb += bo.utilities.handleNullableString(data.workerRepContact.formattedName) + newLine;
           if (data.workerRepContact.address.formattedList !== null) {
               for (var i = 0; i < data.workerRepContact.address.formattedList.length; i++) {
                   sb += toProperCase(data.workerRepContact.address.formattedList[i]) + newLine;
               }
           }
           if (data.workerRepContact.phoneNumbers !== null) {
               for (var i = 0; i < data.workerRepContact.phoneNumbers.length; i++) {
                   if (data.workerRepContact.phoneNumbers[i].phoneType.description !== null) {
                       sb += data.workerRepContact.phoneNumbers[i].phoneType.description + ': ';
                   } else {
                       sb += 'Phone: ';
                   }
                   sb += bo.utilities.handleNullableString(data.workerRepContact.phoneNumbers[i].formattedValueWithExtension) + newLine;
               }
           }
       } else {
           sb += 'Worker does not have current representation' + newLine;
       }
       sb += newLine;
       return sb;

   },
formatSaifInfo = function (data) {
    var newLine = '\n',
    sb = 'Contact information' + newLine + 'SAIF Corporation' + newLine;
    if (data.adjusterIndex !== -1 && data.contacts[data.adjusterIndex] !== null) {
        sb += bo.utilities.handleNullableString(data.contacts[data.adjusterIndex].formattedName) + ', ';
        sb += bo.utilities.handleNullableString(data.contacts[data.adjusterIndex].jobTitle) + newLine;
    } else {
        sb += 'Adjuster not assigned' + newLine;
    }
    sb += 'Address: ' + newLine + '440 Church St SE' + newLine + 'Salem, OR 97312-2000' + newLine;
    if (data.adjusterIndex !== -1 && data.contacts[data.adjusterIndex] !== null) {
        if (data.contacts[data.adjusterIndex].phoneNumbers !== null) {
            for (var i = 0; i < data.contacts[data.adjusterIndex].phoneNumbers.length; i++) {
                if (data.contacts[data.adjusterIndex].phoneNumbers[i].phoneType.description !== null) {
                    sb += data.contacts[data.adjusterIndex].phoneNumbers[i].phoneType.description + ': ';
                } else {
                    sb += 'Phone: ';
                }
                sb += bo.utilities.handleNullableString(data.contacts[data.adjusterIndex].phoneNumbers[i].formattedValueWithExtension) + newLine;
            }
        }
        if (data.contacts[data.adjusterIndex].email !== null) {
            sb += data.contacts[data.adjusterIndex].email;
        }
    }

    return sb;

},

    renderCardHeaderTemplate = function (data) {
        return kendo.template($('#js-template-card-header').html())(data);
    },

    renderContactListTemplate = function (data) {
        return kendo.template($('#js-template-contact-list').html())(data);
    },

    renderAddressListTemplate = function (data) {
        return kendo.template($('#js-template-address-list').html())(data);
    },

    renderConditionsListTemplate = function (data) {
        return kendo.template($('#js-template-conditions-list').html())(data);
    },

    renderPhoneListTemplate = function (data) {
        return kendo.template($('#js-template-phone-list').html())(data);
    },

    renderRequestImeTemplate = function (data) {
        return kendo.template($('#js-template-request-ime-email').html())(data);
    },

    _claimError = function () {
        console.log('oops')
    };

    return {
        claimPromise: claimPromise,
        renderCardHeaderTemplate: renderCardHeaderTemplate,
        renderContactListTemplate: renderContactListTemplate,
        renderAddressListTemplate: renderAddressListTemplate,
        renderConditionsListTemplate: renderConditionsListTemplate,
        renderPhoneListTemplate: renderPhoneListTemplate,
        renderRequestImeTemplate: renderRequestImeTemplate
    }

})();

/*
 *  Get claimId
 *  Load data
 *  Load template
 *  When both are done
 */

var claimId = $('#ActiveClaimId').val();

bo.templates.loader('/Claimsnapshot/blocks/_snapshot-cards.tmpl.html', 'SNAPSHOT_CARDS');


//bo.dataService.claimPromise(claimId, 'policy');

$(document).bind('SNAPSHOT_CARDS', function (e, path) {
    console.log('SNAPSHOT_CARDS loaded');

    bo.dataService.claimPromise(claimId);

});

Index.cshtml

@using SAIF.Common.Extensions
@model ClaimSnapshot.ViewModels.SnapshotViewModel

@{
    ViewBag.Title = Model.Header;
}
@Html.AntiForgeryToken()
<div id="SnapshotKeys">
    <input id="ActiveClaimId" value="@Model.ActiveClaimId" type="hidden" />
    <input id="js-active-cards" value="@Model.ActiveCards" type="hidden" />
</div>

<div class="row">
    <div class="col-sm-12">
        <ul class="list-inline">
            <li><h2 class=""><strong>@Model.Header</strong></h2></li>
            <li><span id="js-claim-alerts" class="bo-claim-alerts is-important"></span></li>
            <li><span class="bo-card__label">MyClaim logon</span></li>
            <li><span class="bo-card__email"><a target="_blank" href=@String.Format("//{0}/MyClaim/?clmnum={1}", HttpContext.Current.Request.Url.Host.ToUpper(), Model.ActiveClaimNumber)>@Model.MyClaimLoginInfo</a></span></li>
            <li><span id="request-ime-email"></span></li>
        </ul>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">


        <div class="bo-panels">

            <div class="bo-panel bo-panel__tabs">

                <!-- A tabs data-card attribute should match a reveal panel's ID -->
                <ul class="bo-tabs js-bo-tabs">
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="attending-physician"><i class="icon icon-plus"></i> Attending physician</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="claim"><i class="icon icon-plus"></i> Claim</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="claim-contacts"><i class="icon icon-plus"></i> Contacts</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="conditions"><i class="icon icon-plus"></i> Conditions</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="legal"><i class="icon icon-plus"></i> Legal</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="mco-plan"><i class="icon icon-plus"></i> MCO Plan</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="policy"><i class="icon icon-plus"></i> Policy</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="reserves"><i class="icon icon-plus"></i> Reserves</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="worker"><i class="icon icon-plus"></i> Worker</button>
                    </li>
                    <li>
                        <button class="btn btn-default btn-block bo-tabs__btn js-tabs__btn" data-card="worker-representative"><i class="icon icon-plus"></i> Worker rep</button>
                    </li>
                </ul>

            </div>

            <div class="bo-panel bo-panel__hover js-bo-panel__hover is-hidden">

                <button class="btn btn-link bo-btn__icon bo-panel__hover__btn--close js-bo-panel__hover__btn--close"><i class="icon-x"></i></button>

                <div id="attending-physician" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="claim" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="claim-contacts" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="conditions" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="legal" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="mco-plan" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="policy" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="reserves" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="worker" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>
                <div id="worker-representative" class="bo-card js-bo-card is-hidden"><div class="bo-loading"></div></div>

            </div>

            <div class="bo-panel bo-panel__cards js-bo-panel__cards">

                <div class="bo-panel__column js-bo-panel__column" data-column="1" id="js-column-1"></div>
                <div class="bo-panel__column js-bo-panel__column" data-column="2" id="js-column-2"></div>

            </div>

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

@section PageScripts {
    <script src="~/js/data-service.js"></script>
    <script src="~/js/hover-tabs.js"></script>
}

@section JavascriptTemplates {




}

main.less

*{
    box-sizing: border-box;
}
/* Business Online Overrides */

/*.bo-app-dashboard__data {
    float: left;
    margin: 0;
    line-height: 2.0rem;
}*/
.alert > ul {
    margin: 0;
}
.bo-list--inline {
    list-style-type: none;
}

    .bo-list--inline li {
        float: left;
    }

.bo-button-list {
    margin-left: 0;
    padding-left: 0;
}

.bo-button-list__separator {
    border-right: 1px solid #cccccc;
}

/*.bo-app-dashboard__label {
    font-size: 1.0rem;
    line-height: 2.0rem;
}*/

#card-panel-left {
    margin: 0;
    vertical-align: top;
    height:auto;
}

#card-panel-right {
        margin: 0;
        vertical-align: top;
        height:auto;
}

#CardPanels {
    display: none;
}
/* Snapshot Card Panels */
.panel-title {
    font-size: 1.2em;
}

.panel-heading {
    padding: .4em 1em;
}

/*.ss-panel-hidden {
    display: none;
}*/
.tooltip {
    position: absolute;
    display: none;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: #161616;
    color: #fff;
    font-size: 12px Arial;
}

.ss-option {
    color: slategrey;
    text-decoration: none;
    font-weight: bold;
}

.ss-option-hidden {
    display: none;
}
/*.ss-card-label {
    color: #558712;
    font-weight: bold;
    font-size: 1.0rem;
    line-height: 2.0rem;
}*/
.ss-header {
    font-weight: bolder;
}
    

panels.less

@import "C:\tfs\SAIFCode\Assets2\WebApps\Assets\v1\src\css\bo-variables.less";
@import "variables.less";

.bo-panels {
    position: relative;
    width: 100%;
}

.bo-panel {
    padding: 0 10px;
    padding: 0 1rem;
}

.bo-panel__cards {
    left: 0;
    position: absolute;
    top: 0;
    width: 85%;

     .bo-card {
         &:hover {
            cursor: move;
            opacity: 0.7;

            .bo-card__header__icon-sortable {
                color: @gray-light;
              }
      }

    
  }

    /*
     *  When we put a card in this panel, we want to see it.
     *  Not terribly elegant, but this is easier than toggling .is-hidden with current app architecture
     */
    .is-hidden {
        display: block;
    }

}

.bo-panel__column {
    float: left;
    min-height: 100px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    width: 50%;
}

.bo-panel__tabs {
  margin-bottom: 2rem;
  /*position: relative;*/
  padding: 0;
  position: absolute;
  left: 85%;
  top: 0;
  width: 15%;
}

.bo-panel__hover {
  background-color: @white;
  border:1px solid @gray-light;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  min-height: 400px;
  padding: 20px;
  padding: 2rem;
  position: absolute;
  right: 16%;
  top: 0;
  width: 50%;
  z-index:199;

    -webkit-box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.35);
    -moz-box-shadow:    2px 2px 3px 0px rgba(50, 50, 50, 0.35);
    box-shadow:         2px 2px 3px 0px rgba(50, 50, 50, 0.35);

    /*
     *  Don't show the headers inside the hover panel
     */
    .bo-card__header {
        display: none;
    }

}

.bo-btn__hover-panel--close {
    text-align:right;
}

tabs.less

@import "variables.less";


.bo-tabs {
  margin-bottom: 0;
  padding-left: 0;
  li {
      margin-bottom: .6rem;
  }
}
.bo-tabs__btn {
  background-color: @gray-lightest;
  border: none;
  // border-radius: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  color: @gray-darker;
  padding-left: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  position: relative;
  text-align: left;
  // transition: padding .1s ease-out;

  &:hover,
  &.is-active {
    background-color: @gray-lighter;
    color: @white;
    // padding-left: 2rem;
    z-index: 100;

    &>.icon {
    color: @white;
  }
  }

  &.is-active:before {
    // content: "*"
  }

  &>.icon {
    color: @tertiary-blue;
  }
}

variables.less

@import "c:\tfs\saifcode\assets2\webapps\assets\v1\src\css\bo-variables.less";