Skip to content

Instantly share code, notes, and snippets.

@zkent

zkent/Foo.html

Last active August 29, 2015 14:16
Show Gist options
  • Save zkent/e8c7fa7bb3cdb3735764 to your computer and use it in GitHub Desktop.
Save zkent/e8c7fa7bb3cdb3735764 to your computer and use it in GitHub Desktop.
Download ZIP
Kendo UI
Raw
Readme
These are example elements in a hybrid mobile application using Kendo UI, HTML5, JavaScript and CSS. The API uses ASP.NET Web API connected to SQL Server. I am unable to post the code for the entire app for obvious reasons. Many function and variable names were changed also.
* Foo.html: Kendo UI is an MVVM framework and this is one of the views we defined. Its a calculator for to calculate the patient's responsibility. This file is HTML5 and hooks into the framework using the data- elements much like AngularJS and KnockoutJS.
* Foo.js: This contains the definition of the viewmodel and the functions related to the function of the Foo.html page.
* FooUtil.js: This file contains setup and configuration functions, AJAX functions, and functions not directly related to the presentation.
* ProductController.cs: This is one of the methods from a controller file in the ASP.NET API that is called from this mobile app.
Raw
Foo.html
<div id="Foo-view"
data-layout="default"
data-role="view"
data-title="Foo"
data-init="DataInit"
data-before-show="DataBeforeShow"
data-show="DataShow"
data-model="app.Foo.viewModel">
<div class="pageLeft">
<div data-role="scroller"
class="pageColumn"
data-visible-scroll-hints="true">
<div class="g-body">
<div id="PatientInfo">
<h2>Patient Information</h2>
<table class="patientTable" style="margin-left: 10px">
<tr>
<td colspan="2">
<button data-role="button" onclick="pdfScan('PDF417', parseDL)" class="ez-button-small secondary-button" style="width: 345px"><i class="fa fa-credit-card">&nbsp;</i>Scan Driver's License</button>
</td>
</tr>
<tr>
<td>
<label class="param-label required">First Name</label>
<input id="" tabindex="1" type="text" class="k-textbox" data-bind="value: Patient.FirstName" name="First Name" required autocomplete="off" autocorrect="off" spellcheck="false" style="text-transform: capitalize" />
</td>
<td>
<label class="param-label required">Last Name</label>
<input id="" tabindex="2" type="text" class="k-textbox" data-bind="value: Patient.LastName" name="Last Name" required autocomplete="off" autocorrect="off" spellcheck="false" style="text-transform: capitalize" />
</td>
</tr>
<tr>
<td>
<label class="param-label required">Date of Birth</label>
<input id="" tabindex="3" type="date" data-bind="value: Patient.DateOfBirth" placeholder="MM/DD/YYYY" name="Date of Birth" pattern="[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}" title="invalid Date Of Birth" required>
<span class="k-invalid-msg" data-for="Date of Birth"></span>
</td>
<td>
<label class="param-label">Phone Number</label>
<input tabindex="4" type="text" class="k-textbox"
data-bind="value: Patient.Phone" name="Phone Number"
pattern="^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$"
title="Invalid Phone Number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="RequestMPI" data-bind="visible: MPIActive">
<label class="param-label" style="clear: both">Master Patient Identifier</label>
<div>
<select id="cboMPIFoo" class="k-dropdown k-textbox" data-bind="value: MasterPatientIdentifier.Id" style="width: 155px; float: left"></select>
</div>
<div>
<input type="text" id="mpiFoo" class="k-textbox" style="width: 165px; float: right; margin-right: 15px" data-bind="value: MasterPatientIdentifier.Text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<label class="param-label">Address</label>
<input id="Address1" tabindex="5" style="width: 95%" type="text" class="k-textbox" data-bind="value: Patient.Address" name="Address" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
<br /><br />
<input id="Address2" tabindex="6" style="width: 95%" type="text" class="k-textbox" data-bind="value: Patient.Address2" name="Address Line 2" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
<tr>
<td>
<label class="param-label">City</label>
<input id="" tabindex="7" type="text" class="k-textbox" data-bind="value: Patient.City" name="City" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
<td>
<label class="param-label">State</label>
<select id="ddlState" tabindex="8" class="k-dropdown k-textbox" data-bind="value: Patient.State"></select>
</td>
</tr>
<tr>
<td>
<label class="param-label">ZIP Code</label>
<input id="" tabindex="9" type="text" class="k-textbox" data-bind="value: Patient.ZipCode" name="ZIP Code" pattern="^\d{5}(?:[-\s]\d{4})?$" title="Invalid Zip Code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
<td>
<label class="param-label">Account No</label>
<input id="" tabindex="10" type="text" class="k-textbox" data-bind="value: Patient.AccountNo" name="Account Nunber" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
<tr>
<td colspan="2">
<label class="param-label">Email</label>
<input id="" tabindex="11" style="width: 95%" type="text" class="k-textbox" data-bind="value: Patient.Email" name="Email Address" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
</table>
</div>
</div>
<br>
</div>
</div>
<div class="pageRight">
<div data-role="scroller" class="pageColumn">
<div class="g-body">
<h2>Product Information</h2>
<table class="productTable" style="margin-left: 10px">
<tr data-bind="visible: ChannelsActive">
<td>
<label class="param-label">Channel Selection</label>
<select data-bind="value: Products.Channel.Selected" class="k-textbox k-dropdown" id="ddlChannel"></select>
<br /><br />
</td>
</tr>
<tr>
<td style="width: 70%">
<br /><br />
<label class="param-label required">
Product Name/CPT Code/Item Number
</label>
<input id="ProductName" tabindex="xxxx" autocomplete="off" autocorrect="off"
autocapitalize="off" spellcheck="false" style="height: 45px;width: 350px; background-color: transparent" class="k-textbox k-dropdown" />
</td>
<td style="vertical-align: bottom">
<button onclick="pdfScan('', SetProductInfo)" class="ez-button-small secondary-button" style="margin: 0">
<i class="fa fa-barcode">&nbsp;</i>Scan Product
</button>
</td>
</tr>
<tr>
<td colspan="2">
<br /><br />
<table class="priceTable">
<tr>
<td>
<label class="param-label required">Product Price</label>
<input id="price" type="text" data-bind="value: Products.BasePrice" class="k-textbox" />
</td>
<td>
<label class="param-label required">Multiplier</label>
<input id="multiplier" type="text" data-bind="value: Products.Multiplier" class="k-textbox" />
</td>
<td>
<label class="param-label">Amount Billed</label>
<input type="text" data-bind="value: Products.FinalPrice" class="k-textbox" readonly />
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left">
<br /><br />
<button data-role="button" data-bind="click: Products.AddSelectedProductDataSource" class="ez-button-small secondary-button" style="width: 98%"><i class="fa fa-plus">&nbsp;</i>Add Product</button>
</td>
</tr>
</table>
<br /><br /><br />
</td>
</tr>
</table>
<br />
</div>
</div>
</div>
<div class="pageWhole">
<div class="pageColumn">
<div class="g-body" style="width: 98%">
<table class="cartTable">
<tr>
<td>
<div id="productGrid" style="overflow: hidden; width: 97%"></div>
<div data-bind="invisible: TotalItemsNumber" style="text-align: center; margin-top: 15px;">Cart is currently Empty.</div>
</td>
<td width="200px;">
Total Items:
<label id="Foo_totalItemsNumber" data-bind="text: TotalItemsNumber"></label>
<br />
Total Items Charge:
<label id="Foo_totalItemsCharge" data-bind="text: Formatted.TotalItemsCharge"></label>
<br />
<div id="divCheckout" data-bind="visible: hasPatientResponsibility() == 1">
<button data-role="button" data-bind="click: ProcessEstimation" class="ez-button success-button" style="width: 200px"><i class="fa fa-shopping-cart">&nbsp;</i>Checkout</button>
</div>
<div id="divSaveExit" data-bind="visible: hasPatientResponsibility() == 0">
<button data-role="button" data-bind="click: ProcessPatientResponseCash" class="ez-button success-button" style="width: 200px"><i class="fa fa-floppy-o">&nbsp;</i>Save &amp; Exit</button>
</div>
<button data-role="button" data-bind="click: PrintReport" class="ez-button-small secondary-button" style="width: 200px"><i class="fa fa-print">&nbsp;</i>Print Report</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Patient Responsibility Report -->
<div id="Foo-report-modalview"
data-role="modalview"
data-title="Patient Responsibility Report"
data-model="app.Foo.viewModel"
style="width:100%; height: 500px;">
<div data-role="header">
<div style="float: left">
<button data-role="button" onclick="Print()" class="ez-button-small secondary-button" style="margin: 5px"><i class="fa fa-print">&nbsp;</i>Print</button>
</div>
<div style="float: right">
<button data-role="button" data-click="ClosePRR" class="ez-button-small error-button" style="margin: 5px">Close</button>
</div>
</div>
<div id="Print"
data-role="scroller"
data-elastic="false"
style="font-size:14px">
<table style="width:100%; text-align:center">
<tbody>
<tr>
<td style="width:200px">
<div style="width:200px; padding:10px">
&nbsp;
</div>
</td>
<td style="width:400px">
<div style="border:1px black solid">
<h1 style="font-size:25px">
Patient Responsibility Report
</h1>
<p>
<label id="PRR-CreatedDate" data-bind="text: Formatted.CreatedDate"></label>
</p>
</div>
</td>
<td style="width:200px">
<div>
<img src="/images/Logo.png" style="padding-top: 5px; width:120px">
</div>
</td>
</tr>
</tbody>
</table>
<div style="border:2px black solid; text-align:left; padding:0 10px 5px 10px; margin: 0 10px 0 10px">
<h1 style="text-decoration:underline; font-size:25px">Patient Information</h1>
<table style="text-align:left" cellpadding="10" cellspacing="10">
<tbody>
<tr>
<td style="vertical-align:top; width: 250px;">
<label id="PRR-FullName" data-bind="text: Patient.Formatted.FullName"></label><br /><br />
<strong>DOB:</strong>&nbsp;
<label id="PRR-DateOfBirth" data-bind="text: Patient.Formatted.DateOfBirth"></label><br />
</td>
<td style="vertical-align:top">
<strong>Email:</strong> &nbsp;
<label id="PRR-MembershipID" data-bind="text: Patient.Email"></label><br /><br />
<strong>Address:</strong> &nbsp;
<label id="PRR-Address" data-bind="text: Patient.Formatted.FullAddress"></label>
</td>
</tr>
</table>
</div>
<div style="border: 2px black solid; text-align: left; padding: 0 10px 5px 10px; margin: 1px 10px 0 10px; min-height: 500px">
<h1 style="text-decoration: underline; font-size: 25px">Detail for Durable Medical Equipment Purchased</h1>
<table style="width: 900px">
<tr>
<td width="50%">
&nbsp;
</td>
<td width="50%">
<strong>*Patient Responsibility Today:</strong>
<label id="PRR-PatientResponsability" data-bind="text: Formatted.PatientResponsibility"></label>
<br/>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
<div>
<!--<div id="PRR-product-grid"></div>-->
<table style="font-size: 15px; width: 90%">
<tr id="PRR-product-grid">
<td style="font-weight: bold">
Item#:
</td>
<td style="font-weight: bold">
HCPC2:
</td>
<td style="font-weight: bold">
Description:
</td>
<td style="font-weight: bold">
Amount Billed:
</td>
<td style="font-weight: bold">
Channel:
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div style="text-align:left; padding:0 10px; margin:0; font-size:14px">
<h3>
*Patient Acknowledgment: By signing this form you are acknowledge receipt of this form.
</h3>
<strong> *Patient Signature: ______________________________ &nbsp;&nbsp;&nbsp; Dated: ___________________________ </strong>
<br><br>
</div>
</div>
</div>
<script id="PRR-Products-template" type="text/x-kendo-template">
# for (var i = 0; i < data.length; i++) { #
<tr>
<td>
#= data[i]['cptCode'] #
</td>
<td>
#= data[i]['hcpc2'] #
</td>
<td>
#= data[i]['name'] #
</td>
<td>
#:kendo.toString(data[i]['finalPrice'], "c")#
</td>
<td>
#if (data[i]['channel']) {#
#= data[i]['channel'] #
#} else {#
N/A
#}#
</td>
</tr>
#} #
</script>
Raw
Foo.js
<div id="Foo-view"
data-layout="default"
data-role="view"
data-title="Foo"
data-init="DataInit"
data-before-show="DataBeforeShow"
data-show="DataShow"
data-model="app.Foo.viewModel">
<div class="pageLeft">
<div data-role="scroller"
class="pageColumn"
data-visible-scroll-hints="true">
<div class="g-body">
<div id="PatientInfo">
<h2>Patient Information</h2>
<table class="patientTable" style="margin-left: 10px">
<tr>
<td colspan="2">
<button data-role="button" onclick="pdfScan('PDF417', parseDL)" class="ez-button-small secondary-button" style="width: 345px"><i class="fa fa-credit-card">&nbsp;</i>Scan Drivers License</button>
</td>
</tr>
<tr>
<td>
<label class="param-label required">First Name</label>
<input id="" tabindex="1" type="text" class="k-textbox" data-bind="value: Patient.FirstName" name="First Name" required autocomplete="off" autocorrect="off" spellcheck="false" style="text-transform: capitalize" />
</td>
<td>
<label class="param-label required">Last Name</label>
<input id="" tabindex="2" type="text" class="k-textbox" data-bind="value: Patient.LastName" name="Last Name" required autocomplete="off" autocorrect="off" spellcheck="false" style="text-transform: capitalize" />
</td>
</tr>
<tr>
<td>
<label class="param-label required">Date of Birth</label>
<input id="" tabindex="3" type="date" data-bind="value: Patient.DateOfBirth" placeholder="MM/DD/YYYY" name="Date of Birth" pattern="[0-9]{1,2}/[0-9]{1,2}/[0-9]{4}" title="invalid Date Of Birth" required>
<span class="k-invalid-msg" data-for="Date of Birth"></span>
</td>
<td>
<label class="param-label">Phone Number</label>
<input tabindex="4" type="text" class="k-textbox"
data-bind="value: Patient.Phone" name="Phone Number"
pattern="^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$"
title="Invalid Phone Number" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
<tr>
<td colspan="2">
<div id="RequestMPI" data-bind="visible: MPIActive">
<label class="param-label" style="clear: both">Master Patient Identifier</label>
<div>
<select id="cboMPIFoo" class="k-dropdown k-textbox" data-bind="value: MasterPatientIdentifier.Id" style="width: 155px; float: left"></select>
</div>
<div>
<input type="text" id="mpiFoo" class="k-textbox" style="width: 165px; float: right; margin-right: 15px" data-bind="value: MasterPatientIdentifier.Text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<label class="param-label">Address</label>
<input id="Address1" tabindex="5" style="width: 95%" type="text" class="k-textbox" data-bind="value: Patient.Address" name="Address" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
<br /><br />
<input id="Address2" tabindex="6" style="width: 95%" type="text" class="k-textbox" data-bind="value: Patient.Address2" name="Address Line 2" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
<tr>
<td>
<label class="param-label">City</label>
<input id="" tabindex="7" type="text" class="k-textbox" data-bind="value: Patient.City" name="City" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
<td>
<label class="param-label">State</label>
<select id="ddlState" tabindex="8" class="k-dropdown k-textbox" data-bind="value: Patient.State"></select>
</td>
</tr>
<tr>
<td>
<label class="param-label">ZIP Code</label>
<input id="" tabindex="9" type="text" class="k-textbox" data-bind="value: Patient.ZipCode" name="ZIP Code" pattern="^\d{5}(?:[-\s]\d{4})?$" title="Invalid Zip Code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
<td>
<label class="param-label">Account No</label>
<input id="" tabindex="10" type="text" class="k-textbox" data-bind="value: Patient.AccountNo" name="Account Nunber" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
<tr>
<td colspan="2">
<label class="param-label">Email</label>
<input id="" tabindex="11" style="width: 95%" type="text" class="k-textbox" data-bind="value: Patient.Email" name="Email Address" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</td>
</tr>
</table>
</div>
</div>
<br>
</div>
</div>
<div class="pageRight">
<div data-role="scroller" class="pageColumn">
<div class="g-body">
<h2>Product Information</h2>
<table class="productTable" style="margin-left: 10px">
<tr data-bind="visible: ChannelsActive">
<td>
<label class="param-label">Channel Selection</label>
<select data-bind="value: Products.Channel.Selected" class="k-textbox k-dropdown" id="ddlChannel"></select>
<br /><br />
</td>
</tr>
<tr>
<td style="width: 70%">
<br /><br />
<label class="param-label required">
Product Name/CPT Code/Item Number
</label>
<input id="ProductName" tabindex="xxxx" autocomplete="off" autocorrect="off"
autocapitalize="off" spellcheck="false" style="height: 45px;width: 350px; background-color: transparent" class="k-textbox k-dropdown" />
</td>
<td style="vertical-align: bottom">
<button onclick="pdfScan('', SetProductInfo)" class="ez-button-small secondary-button" style="margin: 0">
<i class="fa fa-barcode">&nbsp;</i>Scan Product
</button>
</td>
</tr>
<tr>
<td colspan="2">
<br /><br />
<table class="priceTable">
<tr>
<td>
<label class="param-label required">Product Price</label>
<input id="price" type="text" data-bind="value: Products.BasePrice" class="k-textbox" />
</td>
<td>
<label class="param-label required">Multiplier</label>
<input id="multiplier" type="text" data-bind="value: Products.Multiplier" class="k-textbox" />
</td>
<td>
<label class="param-label">Amount Billed</label>
<input type="text" data-bind="value: Products.FinalPrice" class="k-textbox" readonly />
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left">
<br /><br />
<button data-role="button" data-bind="click: Products.AddSelectedProductDataSource" class="ez-button-small secondary-button" style="width: 98%"><i class="fa fa-plus">&nbsp;</i>Add Product</button>
</td>
</tr>
</table>
<br /><br /><br />
</td>
</tr>
</table>
<br />
</div>
</div>
</div>
<div class="pageWhole">
<div class="pageColumn">
<div class="g-body" style="width: 98%">
<table class="cartTable">
<tr>
<td>
<div id="productGrid" style="overflow: hidden; width: 97%"></div>
<div data-bind="invisible: TotalItemsNumber" style="text-align: center; margin-top: 15px;">Cart is currently Empty.</div>
</td>
<td width="200px;">
Total Items:
<label id="Foo_totalItemsNumber" data-bind="text: TotalItemsNumber"></label>
<br />
Total Items Charge:
<label id="Foo_totalItemsCharge" data-bind="text: Formatted.TotalItemsCharge"></label>
<br />
<div id="divCheckout" data-bind="visible: hasPatientResponsibility() == 1">
<button data-role="button" data-bind="click: ProcessEstimation" class="ez-button success-button" style="width: 200px"><i class="fa fa-shopping-cart">&nbsp;</i>Checkout</button>
</div>
<div id="divSaveExit" data-bind="visible: hasPatientResponsibility() == 0">
<button data-role="button" data-bind="click: ProcessPatientResponseCash" class="ez-button success-button" style="width: 200px"><i class="fa fa-floppy-o">&nbsp;</i>Save &amp; Exit</button>
</div>
<button data-role="button" data-bind="click: PrintReport" class="ez-button-small secondary-button" style="width: 200px"><i class="fa fa-print">&nbsp;</i>Print Report</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Patient Responsibility Report -->
<div id="Foo-report-modalview"
data-role="modalview"
data-title="Patient Responsibility Report"
data-model="app.Foo.viewModel"
style="width:100%; height: 500px;">
<div data-role="header">
<div style="float: left">
<button data-role="button" onclick="Print()" class="ez-button-small secondary-button" style="margin: 5px"><i class="fa fa-print">&nbsp;</i>Print</button>
</div>
<div style="float: right">
<button data-role="button" data-click="ClosePRR" class="ez-button-small error-button" style="margin: 5px">Close</button>
</div>
</div>
<div id="Print"
data-role="scroller"
data-elastic="false"
style="font-size:14px">
<table style="width:100%; text-align:center">
<tbody>
<tr>
<td style="width:200px">
<div style="width:200px; padding:10px">
&nbsp;
</div>
</td>
<td style="width:400px">
<div style="border:1px black solid">
<h1 style="font-size:25px">
Patient Responsibility Report
</h1>
<p>
<label id="PRR-CreatedDate" data-bind="text: Formatted.CreatedDate"></label>
</p>
</div>
</td>
<td style="width:200px">
<div>
<img src="/images/Logo.png" style="padding-top: 5px; width:120px">
</div>
</td>
</tr>
</tbody>
</table>
<div style="border:2px black solid; text-align:left; padding:0 10px 5px 10px; margin: 0 10px 0 10px">
<h1 style="text-decoration:underline; font-size:25px">Patient Information</h1>
<table style="text-align:left" cellpadding="10" cellspacing="10">
<tbody>
<tr>
<td style="vertical-align:top; width: 250px;">
<label id="PRR-FullName" data-bind="text: Patient.Formatted.FullName"></label><br /><br />
<strong>DOB:</strong>&nbsp;
<label id="PRR-DateOfBirth" data-bind="text: Patient.Formatted.DateOfBirth"></label><br />
</td>
<td style="vertical-align:top">
<strong>Email:</strong> &nbsp;
<label id="PRR-MembershipID" data-bind="text: Patient.Email"></label><br /><br />
<strong>Address:</strong> &nbsp;
<label id="PRR-Address" data-bind="text: Patient.Formatted.FullAddress"></label>
</td>
</tr>
</table>
</div>
<div style="border: 2px black solid; text-align: left; padding: 0 10px 5px 10px; margin: 1px 10px 0 10px; min-height: 500px">
<h1 style="text-decoration: underline; font-size: 25px">Detail for Durable Medical Equipment Purchased</h1>
<table style="width: 900px">
<tr>
<td width="50%">
&nbsp;
</td>
<td width="50%">
<strong>*Patient Responsibility Today:</strong>
<label id="PRR-PatientResponsability" data-bind="text: Formatted.PatientResponsibility"></label>
<br/>
<br/>
</td>
</tr>
<tr>
<td colspan="2">
<div>
<!--<div id="PRR-product-grid"></div>-->
<table style="font-size: 15px; width: 90%">
<tr id="PRR-product-grid">
<td style="font-weight: bold">
Item#:
</td>
<td style="font-weight: bold">
HCPC2:
</td>
<td style="font-weight: bold">
Description:
</td>
<td style="font-weight: bold">
Amount Billed:
</td>
<td style="font-weight: bold">
Channel:
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div style="text-align:left; padding:0 10px; margin:0; font-size:14px">
<h3>
*Patient Acknowledgment: By signing this form you are acknowledge receipt of this form.
</h3>
<strong> *Patient Signature: ______________________________ &nbsp;&nbsp;&nbsp; Dated: ___________________________ </strong>
<br><br>
</div>
</div>
</div>
<script id="PRR-Products-template" type="text/x-kendo-template">
# for (var i = 0; i < data.length; i++) { #
<tr>
<td>
#= data[i]['cptCode'] #
</td>
<td>
#= data[i]['hcpc2'] #
</td>
<td>
#= data[i]['name'] #
</td>
<td>
#:kendo.toString(data[i]['finalPrice'], "c")#
</td>
<td>
#if (data[i]['channel']) {#
#= data[i]['channel'] #
#} else {#
N/A
#}#
</td>
</tr>
#} #
</script>
Raw
FooUtils.js
function InitializeControls() {
InitializeProductSelection();
InitializeProductGrid();
PopulateStatesDropdown("ddlState");
InitializeChangeEvents();
}
function InitializeChangeEvents() {
var model = app.Foo.viewModel;
$("#price").change(function (e) {
var num = kendo.parseFloat(e.currentTarget.value);
if (num) {
model.set("Products.BasePrice", RoundToTwoDecimal(num));
}
else {
model.set("Products.BasePrice", 0);
}
});
$("#price").focus(function (e) {
// convert to decimal
var num = kendo.parseFloat(e.currentTarget.value);
if (num) {
model.set("Products.BasePrice", RoundToTwoDecimal(num));
}
else {
model.set("Products.BasePrice", 0);
}
});
$("#price").blur(function (e) {
// convert to currency
var num = kendo.parseFloat(e.currentTarget.value);
if (num) {
model.set("Products.BasePrice", kendo.toString(RoundToTwoDecimal(num), "c"));
}
else {
model.set("Products.BasePrice", kendo.toString(0, "c"));
}
});
$("#multiplier").change(function (e) {
var num = kendo.parseFloat(e.currentTarget.value);
if (num) {
model.set("Products.Multiplier", RoundToTwoDecimal(num));
}
else {
model.set("Products.Multiplier", kendo.toString(1, "0.00"));
}
});
$("#multiplier").focus(function (e) {
// convert to decimal
var num = kendo.parseFloat(e.currentTarget.value);
if (num) {
model.set("Products.Multiplier", RoundToTwoDecimal(num));
}
else {
model.set("Products.Multiplier", RoundToTwoDecimal(1));
}
});
$("#multiplier").blur(function (e) {
// convert to decimal with 3 significant digits
var num = kendo.parseFloat(e.currentTarget.value);
if (num) {
model.set("Products.Multiplier", kendo.toString(RoundToTwoDecimal(num), "0.00"));
}
else {
model.set("Products.Multiplier", kendo.toString(RoundToTwoDecimal(1), "0.00"));
}
});
}
function InitializeProductGrid() {
$("#productGrid").kendoGrid({
columns: [
{
field: "selectedGlobalProduct",
hidden: true
},
{
field: "name",
title: "Name",
width: "150px"
},
{
field: "channel",
title: "Channel",
width: "80px"
},
{
field: "channelValue",
hidden: true
},
{
field: "cptCode",
title: "CPT Code",
width: "80px"
},
{
field: "hcpc2",
title: "HCPC 2",
width: "80px"
},
{
field: "basePrice",
title: "Base Price<br />Billed",
format: "{0:c}",
width: "80px"
},
{
field: "multiplier",
title: "Multiplier<br />Billed",
format: "{0:0.00}",
width: "80px"
},
{
field: "finalPrice",
title: "Amount<br />Billed",
format: "{0:c}",
width: "80px"
},
{ command: "destroy" }
],
editable: true,
dataBound: function (e) {
productGridDataBound(e);
}
});
var grid = $("#productGrid").data("kendoGrid");
}
function productGridDataBound(e) {
var model = app.Foo.viewModel;
var displayedData = $("#productGrid").data().kendoGrid.dataSource.view();
NumberOfItemsIntheProductsGrid(displayedData, model);
CalculatePatientResponsibility(displayedData);
}
function NumberOfItemsIntheProductsGrid(data, model) {
var numberOfItems = data.length;
model.set('TotalItemsNumber', numberOfItems);
}
function TotalAmountForItemsInProductGrid(data, model) {
var totalAmount = 0.0;
for (var i = 0; i < data.length; i++) {
totalAmount += parseFloat(data[i].finalPrice);
}
return totalAmount;
}
function CalculatePatientResponsibility(data) {
var model = app.Foo.viewModel;
var totalProductCharge = TotalAmountForItemsInProductGrid(data, model);
model.set('TotalItemsCharge', totalProductCharge);
}
function FindGlobalProductRecord(nameOrCptCode) {
var productName = encodeURIComponent(nameOrCptCode);
var siteId = sessionStorage.getItem("siteId");
var dataObject;
var url = GetCurrentApplicationRootURL() + "/API/ProductSelector/FooProductInfoSingle/" + siteId + "?" + productName;
$.ajax({
url: url,
async: false,
beforeSend: function (xhr) {
var token = sessionStorage.getItem("token");
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.setRequestHeader("deviceId", sessionStorage.getItem("deviceId"));
xhr.setRequestHeader("username", sessionStorage.getItem("username"));
},
success: function (results) {
dataObject = results;
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
//Product NOt found
dataObject = [];
} else if (xhr.status == 400) {
} else if (xhr.status == 405) {
DisplayMessageForNewDevice(xhr);
} else {
AlertMessage("We are unable to reach the server now. Please try again later");
}
}
});
return dataObject;
}
function CreateSelectedGlobalProductObject(results) {
var model = app.Foo.viewModel;
var selectedGlobalProduct = {
finalPrice: model.get('Products.FinalPrice()'),
basePrice: model.get("Products.BasePrice"),
cmsPrice: model.get("Products.CMSPrice"),
multiplier: model.get('Products.Multiplier'),
cptCode: results[0].cptCode,
hcpc2: results[0].cptCode2,
id: results[0].id,
idAndType: results[0].idAndType,
name: results[0].name,
nameAndCptCode: results[0].nameAndCptCode,
channel: model.get('Products.Channel.Selected')
};
return selectedGlobalProduct;
}
function PopulateProductsGrid(results) {
var selectedGlobalProduct = CreateSelectedGlobalProductObject(results);
var gridData = $("#productGrid").data("kendoGrid");
var model = app.Foo.viewModel;
var channelName = (model.get("Products.Channel.Selected") !== null ? model.get("Products.Channel.Name()") : "N/A");
var channelValue = (model.get("Products.Channel.Selected") !== null ? model.get("Products.Channel.Value()") : null);
if (!channelValue) {
channelName = "N/A";
}
gridData.dataSource.add({
name: selectedGlobalProduct.name,
channel: channelName,
channelValue: channelValue,
cptCode: selectedGlobalProduct.cptCode,
hcpc2: selectedGlobalProduct.hcpc2,
basePrice: kendo.parseFloat(model.get('Products.BasePrice')),
finalPrice: kendo.parseFloat(selectedGlobalProduct.finalPrice),
multiplier: selectedGlobalProduct.multiplier,
selectedGlobalProduct: selectedGlobalProduct
});
}
function AddSelectedProductToGridDataSource(model) {
var productSelected = model.Products.GlobalProductSelected;
var validator = $("table.patientTable").kendoValidator().data("kendoValidator");
if (validator.validate()) {
if (!productSelected) {
AlertMessage('No product was selected');
return;
}
kendo.ui.progress($("#loading"), true);
var data = FindGlobalProductRecord(productSelected);
sessionStorage.setItem("productSelected", JSON.stringify(data));
IsDuplicateProductTransaction(model.Patient.FirstName, model.Patient.LastName, model.Patient.DateOfBirth, sessionStorage.getItem("siteId"), data[0].itemNumber)
.then(function(isDup) {
if (isDup) {
$("#modalview-duplicate-transaction").kendoMobileModalView("open");
} else {
PopulateProductsGrid(data);
ClearPricePreviewGrid();
}
})
.always(function() {
kendo.ui.progress($("#loading"), false);
});
}
}
function DuplicateTransactionYes() {
var data = sessionStorage.getItem("productSelected");
var product = $.parseJSON(data);
PopulateProductsGrid(product);
ClearPricePreviewGrid();
$("#modalview-duplicate-transaction").kendoMobileModalView("close");
sessionStorage.removeItem("productSelected");
}
function DuplicateTransactionNo() {
ClearPricePreviewGrid();
$("#modalview-duplicate-transaction").kendoMobileModalView("close");
sessionStorage.removeItem("productSelected");
}
function IsDuplicateProductTransaction(firstname, lastname, dob, siteid, productid) {
var dfd = jQuery.Deferred();
var request = {
firstName: firstname,
lastName: lastname,
dateOfBirth: dob,
siteId: siteid,
productId: productid
};
var jsonObject = JSON.stringify(request);
var url = GetCurrentApplicationRootURL() + "/API/ProductSelector/LookupTransaction";
$.ajax({
url: url,
data: jsonObject,
type: "POST",
dataType: "json",
contentType: "application/json",
beforeSend: function (xhr) {
var token = sessionStorage.getItem("token");
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.setRequestHeader("deviceId", sessionStorage.getItem("deviceId"));
xhr.setRequestHeader("username", sessionStorage.getItem("username"));
},
success: function (result) {
dfd.resolve(result);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
} else if (xhr.status == 400) {
AlertMessage("Invalid parameters. Please ensure that all required fields are filled in.");
} else if (xhr.status == 405) {
} else {
AlertMessage("We are unable to reach the server now. Please try again later.");
}
dfd.reject(xhr, ajaxOptions, thrownError);
}
});
return dfd.promise();
}
function ClearPricePreviewGrid() {
var model = app.Foo.viewModel;
model.set("Products.GlobalProductSelected", null);
model.set("Products.BasePrice", kendo.toString(0, "c"));
model.set("Products.Multiplier", kendo.toString(1, "0.00"));
model.set("Products.Channel.Selected", 0);
$("#ProductName").data("kendoAutoComplete").value("");
}
function SaveEstimationOnServer(request, source) {
var jsonObject = JSON.stringify(request);
var url = GetCurrentApplicationRootURL() + "/API/Foo/FooSaveInformation";
$.ajax({
url: url,
data: jsonObject,
type: 'POST',
dataType: "json",
asynch: false,
contentType: 'application/json; charset=utf-8',
beforeSend: function (xhr) {
var token = sessionStorage.getItem('token');
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.setRequestHeader('deviceId', sessionStorage.getItem('deviceId'));
xhr.setRequestHeader("username", sessionStorage.getItem('username'));
},
success: function (result) {
kendo.ui.progress($("#loading"), false);
if (source === "Payment") {
sessionStorage.setItem("estimationId", result.saleIdentifier);
sessionStorage.setItem("applicationType", result.applicationType);
sessionStorage.setItem("amount", result.totalAmount);
sessionStorage.setItem("subscriberId", result.subscriberId);
PopulateUserPaymentData();
app.application.navigate('views/Payment.html');
}
else if (source === "Report") {
PrintFinalReport();
} else if (source === "PaymentCash") {
sessionStorage.setItem("estimationId", result.saleIdentifier);
sessionStorage.setItem("applicationType", result.applicationType);
sessionStorage.setItem("amount", result.totalAmount);
sessionStorage.setItem("subscriberId", result.subscriberId);
var model = app.CreditCardPayment.viewModel;
var fooViewModel = app.Foo.viewModel;
model.set('firstNameCard', fooViewModel.get('Patient.FirstName'));
model.set('lastNameCard', fooViewModel.get('Patient.LastName'));
ProcessPatientResponsibility(model);
}
},
error: function (xhr, ajaxOptions, thrownError) {
kendo.ui.progress($("#loading"), false);
if (xhr.status == 404) {
} else if (xhr.status == 400) {
AlertMessage("Record was not saved");
} else if (xhr.status == 405) {
DisplayMessageForNewDevice(xhr);
} else {
AlertMessage("We are unable to reach the server now. Please try again later");
}
},
always: function () {
kendo.ui.progress($("#loading"), false);
}
});
}
function PopulateUserPaymentData() {
ResetCreditCardPaymentModel();
var creditCardPaymentViewModel = app.CreditCardPayment.viewModel;
var fooViewModel = app.Foo.viewModel;
creditCardPaymentViewModel.set('firstNameCard', fooViewModel.get('Patient.FirstName'));
creditCardPaymentViewModel.set('lastNameCard', fooViewModel.get('Patient.LastName'));
creditCardPaymentViewModel.set('address1Card', fooViewModel.get('Patient.Address'));
creditCardPaymentViewModel.set('address2Card', fooViewModel.get('Patient.Address2'));
creditCardPaymentViewModel.set('cityCard', fooViewModel.get('Patient.City'));
creditCardPaymentViewModel.set('zipCard', fooViewModel.get('Patient.ZipCode'));
creditCardPaymentViewModel.set('stateCard', fooViewModel.get('Patient.State'));
creditCardPaymentViewModel.set('dateOfBirth', fooViewModel.get('Patient.DateOfBirth'));
}
function InitializeProductSelection() {
var model = app.Foo.viewModel;
$("#ProductName").kendoAutoComplete({
dataTextField: "name",
filter: "contains",
minLength: 3,
dataSource: PopulateProductSelector(),
template: kendo.template($("#productSelectorTemplate").html()),
select: function(e) {
var item = e.item;
var text = item.text().trim();
if (typeof text !== "undefined") {
text = text.split("___")[0];
model.set('Products.GlobalProductSelected', text);
var selectedGlobalProduct = FindGlobalProductRecord(text);
$.when(PopulateProductPriceMultiplierFields(selectedGlobalProduct))
.done(function(result) {
FillPriceModelFromProduct(result);
});
}
}
});
}
function PopulateProductSelector() {
var dataSource = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: function (options) {
kendo.ui.progress($("#loading"), true);
var strProduct = $('#ProductName').val().trim();
var siteID = sessionStorage.getItem('siteId');
var url = GetCurrentApplicationRootURL() + "/API/ProductSelector/FooProducts/ProductName/" + strProduct + "/SiteId/" + siteID;
$.ajax({
url: url,
beforeSend: function (xhr) {
var token = sessionStorage.getItem('token');
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.setRequestHeader('deviceId', sessionStorage.getItem('deviceId'));
xhr.setRequestHeader("username", sessionStorage.getItem('username'));
},
success: function (results) {
options.success(results);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
options.success([]);
} else if (xhr.status == 400) {
} else if (xhr.status == 405) {
DisplayMessageForNewDevice(xhr);
} else {
AlertMessage("We are unable to reach the server now. Please try again later");
}
},
complete: function () {
kendo.ui.progress($("#loading"), false);
}
});
}
}
});
return dataSource;
}
function PopulateProductPriceMultiplierFields(productDetailsArray) {
var url = GetCurrentApplicationRootURL() + "/API/ProductSelector/ProductPriceInfo/Calculation"
+ "/SiteId/" + sessionStorage.getItem('siteId')
+ "/ProductId/" + productDetailsArray[0].id;
var dfd = jQuery.Deferred();
$.ajax({
url: url,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
beforeSend: function (xhr) {
var token = sessionStorage.getItem('token');
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.setRequestHeader('deviceId', sessionStorage.getItem('deviceId'));
xhr.setRequestHeader("username", sessionStorage.getItem('username'));
},
success: function (xhr) {
dfd.resolve(xhr);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 404) {
} else if (xhr.status == 400) {
} else if (xhr.status == 405) {
DisplayMessageForNewDevice(xhr);
} else {
AlertMessage("We are unable to reach the server now. Please try again later");
}
dfd.reject(xhr, ajaxOptions, thrownError);
},
});
return dfd.promise();
}
function PrintFinalReport() {
var model = app.Foo.viewModel;
var data = $("#productGrid").data("kendoGrid").dataSource.data();
$("#PRR-product-grid").siblings().remove();
var template = kendo.template($("#PRR-Products-template").html());
var result = template(data);
$("#PRR-product-grid").after(result);
model.set("CreatedDate", null);
OpenPRR();
}
function SetProductInfo(itemNumber) {
var model = app.Foo.viewModel;
model.set("Products.BasePrice", kendo.toString(0, "c"));
model.set("Products.Multiplier", kendo.toString(1, "0.00"));
itemNumber = itemNumber.replace(/\*/g, '');
$.when(GetProductInfoFromServer(itemNumber))
.then(
//resolve route
function (xhr, ajaxOptions, thrownError) {
if (xhr != null)
SetProductInScreen(xhr);
},
//reject route
function (xhr, ajaxOptions, thrownError) {
if (xhr.status = 404) {
AlertMessage("Product not found: " + itemNumber);
}
else if (xhr.status == 400) {
AlertMessage("Product Details not found: " + itemNumber);
} else {
AlertMessage("We are unable to reach the server now. Please try again later.");
}
});
}
function GetProductInfoFromServer(itemNumber) {
// Here we convert item number to a string 64 to remove non friendly characters
// var jsonObject = JSON.stringify(itemNumber)
var dfd = new jQuery.Deferred();
var siteId = sessionStorage.getItem("siteId");
var url = GetCurrentApplicationRootURL() + "/API/ProductSelector/ProductInfoByItemNumber/" + itemNumber + "/" + siteId;
$.ajax({
url: url,
dataType: "json",
beforeSend: function (xhr) {
var token = sessionStorage.getItem('token');
xhr.setRequestHeader("Authorization", "Bearer " + token);
xhr.setRequestHeader('deviceId', sessionStorage.getItem('deviceId'));
xhr.setRequestHeader("username", sessionStorage.getItem('username'));
},
success: function (xhr, ajaxOptions, thrownErr) {
dfd.resolve(xhr);
},
error: function (xhr, ajaxOptions, thrownErr) {
if (xhr.status == 404) {
AlertMessage("We are unable to find the product scanned. Product scanned was " + itemNumber + ".");
} else if (xhr.status == 400) {
AlertMessage("We are unable to find the product scanned. Product scanned was " + itemNumber + ".");
} else if (xhr.status == 405) {
DisplayMessageForNewDevice(xhr);
} else {
AlertMessage("We are unable to find the product scanned. Product scanned was " + itemNumber + ".");
}
dfd.reject(xhr);
},
});
return dfd.promise();
}
function SetProductInScreen(globalProduct) {
var arrayofGlobalProduct = [globalProduct];
$.when(PopulateProductPriceMultiplierFields(arrayofGlobalProduct))
.done(function (result) {
FillPriceModelFromProduct(result);
});
var model = app.Foo.viewModel;
model.set('Products.GlobalProductSelected', globalProduct.name);
$("#ProductName").val(globalProduct.name);
}
function FillPriceModelFromProduct(result) {
if (result !== null) {
var model = app.Foo.viewModel;
model.set("Products.BasePrice", kendo.toString(result.basePrice, "c"));
model.set("Products.Multiplier", kendo.toString(result.multiplier, "0.00"));
model.set("Products.CMSPrice", kendo.toString(result.cmsPrice, "c"));
}
$('#ProductName').blur();
}
Raw
ProductController.cs
// GET /API/ProductSelector/ProductInfo
[Route("ProductInfo")]
[HttpGet]
[ResponseType(typeof(IEnumerable<GlobalProduct>))]
public IHttpActionResult GetProductInfo(string productName, Guid productId, int siteId, EnumMasterListProductSource source, bool single = false)
{
try
{
if (productId == default(Guid))
{
return BadRequest();
}
var response = LogViewManager.LoadByProductId(productId);
if (response == null)
{
return NotFound();
}
if (!response.SiteId.HasValue &&
response.SiteId.IsNullOrWhiteSpace())
{
return NotFound();
}
var secondarySiteId = response.SiteId;
if (!response.SiteId.HasValue)
{
var car = SiteSelectorManager.GetSiteList(response.SiteName, response.SiteId).OrderBy(x => x.SiteName).FirstOrDefault();
if (car != null)
secondarySiteId = car.SiteId;
}
if (!response.SiteId.HasValue && !secondarySiteId.HasValue)
{
return NotFound();
}
var result = ProductSelectorManager.GetListOfProducts(productName, response.SiteId).OrderBy(x => x.Name).ToList();
// If we pass the parameter for single, then return a single one.
if (result.SafeAny())
{
return Ok(single ? result.Take(1) : result.Take(10));
}
return NotFound();
}
catch (Exception ex)
{
ExceptionHandler.LogException(ex);
return InternalServerError(new Exception(StringConstants.InternalServerError));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment