brewman/brewman/static/app/journal/journal.html

<form class="form-horizontal" role=form autocomplete="off">
    <h2>Journal Edit / New</h2>

    <div class="form-group">
        <label for="txtDate" class="col-md-2 control-label">Date</label>

        <div class="col-md-10">
            <div class="input-group">
                <input class="form-control" id="txtDate" type="text" uib-datepicker-popup="dd-MMM-yyyy"
                       is-open="dOpen" ng-focus="dOpen = true" ng-model="voucher_Date"
                       ng-model-options="{getterSetter: true}"/>
                <span class="input-group-btn">
                    <button class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="txtAccount" class="col-md-2 control-label">Account</label>

        <div class="col-md-2">
            <select id="ddlDebitCredit" class="form-control" ng-model="debit">
                <option value="1">Dr</option>
                <option value="-1">Cr</option>
            </select>
        </div>
        <div class="col-md-4">
            <input type="text" id="txtAccount" class="form-control" ng-model="account" autocomplete="off"
                   uib-typeahead="account as account.Name for account in accounts($viewValue)"
                   typeahead-editable="false" on-return="add()" focus-on="foAccount"/>

            <p ng-hide="!accBal">Balance as on Date: <strong>{{accBal.Date | accounting}}</strong> / <strong>{{accBal.Total
                | accounting}}</strong></p>
        </div>
        <div class="col-md-4">
            <div class="input-group">
                <span class="input-group-addon">₹</span>
                <input type="text" id="txtAmount" class="form-control" autocomplete="off" placeholder="Amount"
                       ng-model="amount" on-return="add()"/>
                <span class="input-group-btn">
                    <button class="btn btn-info" ng-click="add()">Add <i
                            class="glyphicon glyphicon-plus-sign"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>

    <table id="gvGrid" class="table table-condensed table-bordered table-striped">
        <thead>
        <tr>
            <th>Debit</th>
            <th>Name</th>
            <th>Amount</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody id="tbodyMain">
        <tr ng-repeat="journal in voucher.Journals">
            <td>{{journal.Debit | debit}}</td>
            <td>{{journal.Ledger.Name}}</td>
            <td class="text-right">{{journal.Amount | currency}}</td>
            <td>
                <div class="btn-group">
                    <a class="btn btn-danger" ng-click="removeJournal(journal)"><i
                            class="glyphicon glyphicon-trash"></i> Delete</a>
                    <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a ng-click="modal(journal)"><i class="glyphicon glyphicon-pencil"></i> Edit</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        </tbody>
        <tfoot id="tfootMain">
        </tfoot>
    </table>
    <div class="form-group">
        <label for="txtNarration" class="col-md-2 control-label">Narration</label>

        <div class="col-md-10">
            <textarea rows="3" id="txtNarration" class="form-control" ng-model="voucher.Narration"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10 col-md-offset-2">
            <div class="img-container" ng-repeat="item in voucher.Files">
                <img ng-click="zoomImage(item)" ng-src="{{item.Thumbnail}}" class="img-thumbnail">
                <a href ng-click="deleteFile(item)" class="overlay"><i class="glyphicon glyphicon-trash"></i></a>
            </div>
            <label ng-href for="fileUp">
                <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTUwIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjE1MCIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjUwIiB5PSI3NSIgc3R5bGU9ImZpbGw6I2FhYTtmb250LXdlaWdodDpib2xkO2ZvbnQtc2l6ZToxMDBweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4rPC90ZXh0Pjwvc3ZnPg=="
                     class="img-thumbnail">
            </label>
            <input type="file" id="fileUp" file-upload multiple style="display: none;" accept="image/*">
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button class="btn btn-primary" tan-click="save()" ng-disabled="preventAlteration(voucher)">
                {{voucher.VoucherID | save_button}}
            </button>
            <button class="btn btn-inverse" tan-click="post()" ng-hide="!voucher.VoucherID"
                    ng-disabled="voucher.Posted || !perms['Post Vouchers']">{{voucher.Posted | posted}}
            </button>
            <button class="btn btn-danger" ng-hide="!voucher.VoucherID" ng-disabled="preventAlteration(voucher)"
                    ng-click="confirm()">Delete
            </button>
        </div>
    </div>
    <div class="col-md-offset-2 col-md-10">
        <small>Created on {{voucher.CreationDate | localTime}} and Last Edited on {{voucher.LastEditDate | localTime}}
            by {{voucher.User.Name}}. Posted by {{voucher.Poster}}
        </small>
    </div>
</form>