Create account/invoice page

by Swarts

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<html>
    <head>
                <script type="text/x-jquery-tmpl" id="invoiceTemplate">
            <div data-bind="template: 'clientTemplate'"></div>
            <div data-bind="template: 'descriptionTemplate'"></div>
            <div data-bind="template: 'invoiceDateTemplate'"></div>
            <div data-bind="template: 'invoiceNumberTemplate'"></div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>Description</th>
                        <th>Unit Price</th>
                        <th>Quantity</th>
                        <th>Unit</th>
                        <th>Taxable</th>
                        <th class="rightAligned">Total</th>
                    </tr>
                </thead>
                <tbody data-bind="template:{name: stateTemplate, foreach:lineItems}">
                </tbody>
            </table>
            <div data-bind="click: addLineItem, button: {icon: 'ui-icon-plusthick', text: false}" class="add"></div>
                    <div class="totals">Total:&nbsp;<span data-bind="text: totalFormatted"></span></div>
        </script>
        <script type="text/x-jquery-tmpl" id="clientTemplate">
            <label for="clientSelector">Client Name </label>
            <input type="text" id="clientSelector" placeholder="Enter client name..." data-bind="value: this.clientName" class="ui-corner-all ui-state-default ui-widget-content">
        </script>
        <script type="text/x-jquery-tmpl" id="descriptionTemplate">
            <label for="descriptionTextBox">Invoice Description</label>
            <textarea id="descriptionTextBox" data-bind="value: description"...

CSS

.invoiceForm {
                font-family: Helvetica;
                font-size:1em;
            }
            .invoiceForm>div{
                margin:0.5em;
            }
            .invoiceForm input, #invoiceForm textarea {
                font-family:inherit;
                font-size:100%;
                padding:0.3em;
            }
            .invoiceForm textarea{
                min-width:50%;
max-width:20em;
                min-height:2em;
            }
            .invoiceForm label {
                width:8em;
                float:left;
                text-align:right;
                margin:0.5em;
            }
            .invoiceForm table {
                border-collapse:collapse;
                border:none;
                width:100%;
            }
            .invoiceForm table textarea, .invoiceForm table input {
                width:100%;
            }
            .invoiceForm table td, .invoiceForm table th {
                padding:0.5em;
            }
            .invoiceForm table th {
                text-align:left;
                border-bottom: 1px solid gray;
            }
            .invoiceForm table td {
                border-bottom: 1px dashed gray;
            }
            .invoiceForm .rightAligned {
                text-align:right;
            }
            .invoiceForm .add {
                float:left;
            }
            .invoiceForm .totals {
                width:10em;
                float:right;
                text-align:right;
                font-weight:bold;
            }
            .ui-button-icon-only {
                width: 1.5em;
                height: 1.5em;
            }
            .ui-widget {
                font-size:100%;
            }

JavaScript

var clientsFixture = ["Client ABC",
                        "Client DEF",
                        "Client GHI",
                        "Client JKL",
                        "Client MNO",
                        "Client PQR",
                        "Client STU",
                        "Client VWX",
                        "Client YZ"];
            
            var myItemsFixture = ["Consulting : General","Travel"];
            

            var newInvoiceNumberFixture = "Inv20034";
            var taxRateFixture = 0.14;
            
            function formatCurrency(num,dec,sep,decChar,pre,post) {
                var n = num.toString().split(decChar);
                return (pre || '') 
                    + n[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1" + sep) 
                    + decChar 
                    + ((n.length > 1 ? n[1].substr(0,dec.length) : '') + dec).substr(0,dec.length)
                    + (post || '');
            }
            
            (function ($) {
                jQuery.fn.invoiceForm = function (options) {
                    return this.each(function() {
                        
                        ko.bindingHandlers.tabToggles = {
                            init: function(element, valueAccessor) {
                                $(element).keydown(function(ev) {
                                    if(ev.which === 9 && !ev.shiftKey) {
                                        var toggle = valueAccessor();
                                        toggle(!toggle());
                                    }
                                });
                            }
                        };                       
                        
                        ko.bindingHandlers.autoComplete = {
                              init: function(element, valueAccessor) {
                                  $(element).autocomplete({
                                      source: valueAccessor()
                                 ...