SnipeITMobileApp/platforms/android/assets/www/screens/home.html

<div id="item-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="item-info-header">Edit</h4>
            </div>
            <div class="modal-body" id="item-info-body">
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-font fa-fw"></i></span>
                    <input type="text" placeholder="Name" id="item-name" class="form-control"/>
                </div>
                <br />
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-fw fa-map-marker"></i></span>
                    <select class="form-control" id="item-location" placeholder="Location">

                    </select>
                </div>
                <br class="item-only-asset"/>
                <div class="input-group item-only-asset">
                    <span class="input-group-addon"><i class="fa fa-fw fa-tag"></i></span>
                    <select class="form-control" id="item-status" placeholder="Status">

                    </select>
                </div>
                <br class="item-only-asset"/>
                <div class="input-group item-only-asset">
                    <span class="input-group-addon"><i class="fa fa-fw fa-desktop"></i></span>
                    <input type="text" class="form-control" placeholder="Asset Tag" id="item-asset-tag" />
                    <span class="input-group-btn">
                        <button id="scancodebtn" onclick="scancode('#item-asset-tag');" class="btn btn-default"><i class="fa fa-barcode"></i></button>
                    </span>
                </div>
                <br class="item-only-asset"/>
                <div class="input-group item-only-asset">
                    <span class="input-group-addon"><i class="fa fa-fw fa-credit-card"></i></span>
                    <input type="text" class="form-control" placeholder="Serial" id="item-serial" />
                    <span class="input-group-btn">
                        <button id="scancodebtn" onclick="scancode('#item-serial');" class="btn btn-default"><i class="fa fa-barcode"></i></button>
                    </span>
                </div>
                <br class="item-only-asset"/>
                <div class="input-group item-only-asset">
                    <span class="input-group-addon"><i class="fa fa-fw fa-th"></i></span>
                    <select class="form-control" id="item-model" placeholder="Model">

                    </select>
                </div>
                <br class="item-only-asset item-hidden"/>
                <div class="input-group item-only-asset item-hidden">
                    <span class="input-group-addon"><i class="fa fa-fw fa-hdd-o"></i></span>
                    <input type="text" class="form-control" id="item-hdd-secure" placeholder="Hard Drive Secure (Y/N)" />
                </div>
                <br />
                <div class="input-group item-not-asset">
                    <span class="input-group-addon"><i class="fa fa-hashtag fa-fw"></i></span>
                    <input type="number" placeholder="Quantity" id="item-qty" class="form-control"/>
                </div>
                <br class="item-not-asset" />
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-barcode fa-fw"></i></span>
                    <input type="text" placeholder="Order Number" id="item-order-number" class="form-control"/>
                    <span class="input-group-btn">
                        <button id="scancodebtn" onclick="scancode('#item-order-number');" class="btn btn-default"><i class="fa fa-barcode"></i></button>
                    </span>
                </div>
                <input type="hidden" value="asset" id="item-from" />
                <input type="hidden" value="" id="item-id" />
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-default"><i class="fa fa-times"></i> Close</button>
                <button type="button" class="btn btn-primary" onclick="saveitem();"><i class="fa fa-floppy-o"></i> Save</button>
            </div>
        </div>
    </div>
</div>
<br />
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <div class="input-group">
                <span class="input-group-btn">
                    <button id="scancodebtn" onclick="scancode('#searchbox');" class="btn btn-default"><i class="fa fa-barcode"></i></button>
                </span>
                <input type="text" placeholder="Lookup" class="form-control" id="searchbox"/>
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="searchtypelabel">Assets</span> <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#" onclick="$('#searchtypelabel').text('Assets');"><i class="fa fa-fw fa-desktop"></i> Assets</a></li>
                        <li><a href="#" onclick="$('#searchtypelabel').text('Acc');"><i class="fa fa-fw fa-keyboard-o"></i> Accessories</a></li>
                        <li><a href="#" onclick="$('#searchtypelabel').text('Con');"><i class="fa fa-fw fa-tint"></i> Consumables</a></li>
                    </ul>
                </div>
                <span class="input-group-btn">
                    <button id="searchbtn" onclick="dosearch($('#searchbox').val(), $('#searchtypelabel').text().toLowerCase());" class="btn btn-primary"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </div>
        <br />
        <div class="col-xs-4">
            <div class="dropdown">
                <button id="additembtn" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-plus"></i> <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#" onclick="additem('asset');" id="addassetbtn"><i class="fa fa-fw fa-desktop"></i> Asset</a></li>
                    <li><a href="#" onclick="additem('accessory');" id="addaccessorybtn"><i class="fa fa-fw fa-keyboard-o"></i> Accessory</a></li>
                    <li><a href="#" onclick="additem('consumable');" id="addconsumablebtn"><i class="fa fa-fw fa-tint"></i> Consumable</a></li>
                    <li class="item-hidden"><a href="#" onclick="additem('hdd');" id="addassetbtn"><i class="fa fa-fw fa-hdd-o"></i> Hard Drive</a></li>
                </ul>
            </div>
        </div>
    </div>
    <hr />
    <div class="list-group" id="searchresults">

    </div>
</div>
<script>

    var modal = $('#item-modal');

    // Press the button when Enter pressed in search box.
    $("#searchbox").keydown(function (event) {
        if (event.keyCode == 13) {
            $("#searchbtn").click();
        }
    });

    /**
     * Make a Bootstrap list item.
     * @param {type} innerhtml HTML content of item
     * @param {type} badge Content for badge, else false
     * @param {type} classes Additional CSS classes
     * @param {type} onclick Javascript onclick
     * @returns {String} The HTML for the list item.
     */
    function mkListItem(innerhtml, badge, classes, onclick) {
        var cssclass = "list-group-item " + classes;
        var listitem = "<div class=\"" + cssclass + "\"";
        if (onclick === false) {
            listitem += ">";
        } else {
            listitem += " onclick=\"" + onclick + "\">";
        }
        if (badge) {
            listitem += "<span class=\"badge\">" + badge + "</span>";
        }
        listitem += innerhtml;
        listitem += "</div>";
        return listitem;
    }

    function additem(from) {
        $("[id^='item-']").val('');
        $('#item-from').val(from);
        $('#item-info-header').text('Create ' + from);
        if (from == 'asset') {
            $('.item-not-asset').css('display', 'none');
            $('.item-only-asset').css('display', '');
            getstatusselector(0, from);
            getmodelselector(0);
        } else if (from == 'hdd') {
            $('#item-from').val('asset');
            $('.item-not-asset').css('display', 'none');
            $('.item-only-asset').css('display', '');
            getstatusselector(0, from);
            getmodelselector(0, from);
            $("#item-model option:not(:contains('Hard Drive'))").remove();
            $("#item-status option:not(:contains('HDD: '))").remove();
            $('#item-name').val('Hard Drive');
        } else {
            $('.item-only-asset').css('display', 'none');
            $('.item-not-asset').css('display', '');
        }
        getlocationselector(0, from);
        $('#item-modal').modal('show');
    }

    function getlocationselector(id, from) {
        $.ajax({
            type: "GET",
            url: mkApiUrl("getlocation"),
            data: {id: id, from: from},
            cache: false,
            crossDomain: true,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                if (data.status === 'OK') {
                    var innerhtml = "<option selected hidden disabled value='0'>Location</option>"
                    for (var i = 0; i < data.list.length; i++) {
                        innerhtml += "<option value=\"" + data.list[i].id + "\">" + data.list[i].name + "</option>";
                    }
                    $('#item-location').html(innerhtml);
                    // Set the selected index to the actual one
                    $('#item-location').val(data.location);
                } else {
                    alert('An error occurred: ' + data.message);
                }
            },
            error: function () {
                alert('An error occurred. Check your connection.');
            }
        });
    }

    function getstatusselector(id, from) {
        $.ajax({
            type: "GET",
            url: mkApiUrl("getstatus"),
            data: {id: id, from: from},
            cache: false,
            crossDomain: true,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                if (data.status === 'OK') {
                    var innerhtml = "<option selected hidden disabled value='0'>Status</option>"
                    for (var i = 0; i < data.list.length; i++) {
                        if (from == 'hdd' && data.list[i].name.indexOf('HDD') == -1) {
                            continue;
                        }
                        innerhtml += "<option value=\"" + data.list[i].id + "\">" + data.list[i].name + "</option>";
                    }
                    $('#item-status').html(innerhtml);
                    // Set the selected index to the actual one
                    if (data.itemstatus != 0) {
                        $('#item-status').val(data.itemstatus);
                    }
                } else {
                    alert('An error occurred: ' + data.message);
                }
            },
            error: function () {
                alert('An error occurred. Check your connection.');
            }
        });
    }

    function getmodelselector(id, from) {
        $.ajax({
            type: "GET",
            url: mkApiUrl("getmodel"),
            data: {id: id, from: 'assets'},
            cache: false,
            crossDomain: true,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                if (data.status === 'OK') {
                    var innerhtml = "<option selected hidden disabled value='0'>Model</option>"
                    for (var i = 0; i < data.list.length; i++) {
                        if (from == 'hdd' && data.list[i].name != 'Hard Drive') {
                            continue;
                        }
                        innerhtml += "<option value=\"" + data.list[i].id + "\">" + data.list[i].name + "</option>";
                    }
                    $('#item-model').html(innerhtml);
                    // Set the selected index to the actual one
                    if (data.model != 0) {
                        $('#item-model').val(data.model);
                    }
                } else {
                    alert('An error occurred: ' + data.message);
                }
            },
            error: function () {
                alert('An error occurred. Check your connection.');
            }
        });
    }

    function saveitem() {
        $.ajax({
            type: "POST",
            url: mkApiUrl("updateitem"),
            data: {
                id: $('#item-id').val(),
                from: $('#item-from').val(),
                name: $('#item-name').val(),
                qty: $('#item-qty').val(),
                location: $('#item-location').val(),
                status: $('#item-status').val(),
                serial: $('#item-serial').val(),
                model: $('#item-model').val(),
                asset_tag: $('#item-asset-tag').val(),
                hdd_secure: $('#item-hdd-secure').val(),
                order_number: $('#item-order-number').val()
            },
            cache: false,
            crossDomain: true,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                if (data.status === 'OK') {
                    $('#item-modal').modal('hide');
                    dosearch($('#searchbox').val(), $('#searchtypelabel').text().toLowerCase());
                } else {
                    alert('An error occurred: ' + data.message);
                }
            },
            error: function () {
                alert('An error occurred. Check your connection.');
            }
        });
    }

    function openitem(id, from) {
        $.ajax({
            type: "GET",
            url: mkApiUrl("getitem"),
            data: {id: id, from: from},
            cache: false,
            crossDomain: true,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                if (data.status === 'OK') {
                    // Load item info into modal and show it
                    getlocationselector(id, from);
                    $('#item-id').val(id);
                    $('#item-from').val(from);
                    if (data.results.name == '') {
                        $('#item-info-header').text("Edit " + data.results.asset_tag);
                    } else {
                        $('#item-info-header').text("Edit " + data.results.name);
                    }
                    $('#item-name').val(data.results.name);
                    if (from == 'assets') {
                        $('.item-not-asset').css('display', 'none');
                        $('.item-only-asset').css('display', '');
                        $('#item-serial').val(data.results.serial);
                        $('#item-asset-tag').val(data.results.asset_tag);
                        $('#item-hdd-secure').val(data.results._snipeit_hard_drive_secure__y_n_);
                        getstatusselector(id, from);
                        getmodelselector(id);
                    } else {
                        $('.item-only-asset').css('display', 'none');
                        $('.item-not-asset').css('display', '');
                        $('#item-qty').val(data.results.qty);
                    }
                    $('#item-order-number').val(data.results.order_number);
                    $('#item-modal').modal('show');
                } else {
                    alert('An error occurred: ' + data.message);
                }
            },
            error: function () {
                alert('An error occurred. Check your connection.');
            }
        });
    }

    function dosearch(text, from) {
        $.ajax({
            type: "GET",
            url: mkApiUrl("search"),
            data: {q: text, from: from},
            cache: false,
            crossDomain: true,
            dataType: 'json',
            xhrFields: {
                withCredentials: true
            },
            success: function (data) {
                if (data.status === 'OK') {
                    var innerhtml = "";
                    if (data.results.length == 0) {
                        $('#searchresults').html(mkListItem('No results found.', false, 'disabled', false));
                    } else {
                        for (var i = 0; i < data.results.length; i++) {
                            if (from != 'assets') {
                                innerhtml += mkListItem(
                                        data.results[i].name + "<br />" + data.results[i].order_number,
                                        "Qty " + data.results[i].qty,
                                        '',
                                        "openitem('" + data.results[i].id + "', '" + from + "');"
                                        );
                            } else {
                                innerhtml += mkListItem(
                                        data.results[i].name + "<br />" + data.results[i].asset_tag,
                                        false,
                                        '',
                                        "openitem('" + data.results[i].id + "', '" + from + "');"
                                        );
                            }
                            $('#searchresults').html(innerhtml);
                        }
                    }
                } else {
                    $('#searchresults').html(mkListItem('An error occurred: ' + data.message, false, 'disabled', false));
                }
            },
            error: function () {
                $('#searchresults').html(mkListItem("An error occurred.  Check your connection.", false, 'disabled', false));
            }
        });
    }

    function scancode(target) {
        try {
            cordova.plugins.barcodeScanner.scan(
                    function (result) {
                        if (!result.cancelled) {
                            //alert(result.format + ": " + result.text);
                            $(target).val(result.text);
                            if (target == '#searchbox') {
                                dosearch(result.text, $('#searchtypelabel').text().toLowerCase());
                            }
                        }
                    });
        } catch (ex) {
            alert(ex.message);
        }
    }
</script>