Inventory Upload Screen

by Andy Novocin

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<div class="container">
     <h2>Upload Inventory Items</h2>

    <div id="messages"></div>
    <hr>
    <form id="uploadform" enctype="multipart/form-data" class="form-horizontal" role="form">
        <div class="form-group">
            <label for="inputFile" class="col-lg-2 control-label">Picture to inventory</label>
            <div class="col-lg-10">
                <input type="file" class="form-control" name="file" id="inputFile" placeholder="PhotoUpload" />
            </div>
        </div>
        <div class="form-group">
            <label for="inputSource_id" class="col-lg-2 control-label">Choose from source list:</label>
            <div class="col-lg-10">
                <select class="form-control" name="source_id" id="inputSource_id"></select>
            </div>
        </div>
        <div class="form-group">
            <label for="inputSource" class="col-lg-2 control-label">Otherwise create source alias:</label>
            <div class="col-lg-10">
                <input type="text" class="form-control" name="alias" id="inputSource" placeholder="Source Alias" />
            </div>
        </div>
        <div class="form-group">
            <label for="inputCost" class="col-lg-2 control-label">Cost of item:</label>
            <div class="col-lg-10">
                <input type="number" min="0" step="0.01" class="form-control" name="cost" id="inputCost" value="0.00" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="measurements" name="measurements" />Include measurements?</label>
           ...

CSS

select option.other {
    background: red !important;
}

JavaScript

var astr = "SOME STRING";
alert(astr.substr(0,7));

Array.prototype.move = function (old_index, new_index) {
    if (new_index >= this.length) {
        var k = new_index - this.length;
        while ((k--) + 1) {
            this.push(undefined);
        }
    }
    this.splice(new_index, 0, this.splice(old_index, 1)[0]);
    return this;
};

var getJsonData = function(){
    var o = $("#uploadform").serializeObject();
    var asianName = $("#isAsian").attr('name');
    if ($("#isAsian").prop('checked')){
     o[asianName] = "1";   
    }
    else {
     o[asianName] = "0";
    }
    var measureName = $("#measurements").attr('name');
    if ($("#measurements").prop('checked')){
     o[measureName] = "1";
    }
    else {
     o[measureName] = "0";
    }    
    return o;
}

var getFormData = function(){
    var fd = new FormData();
    fd.append('pic', $(":file")[0].files[0]);
    var jsonData = getJsonData();
    _.each(_.keys(jsonData), function(key){
       fd.append(key, jsonData[key]); 
    });
    return fd;
}

$("form").on('submit', function(event){
    event.preventDefault();
    $.ajax({
        url: 'http://api.estateauctionapps.com/inventory/20141109080706',
        data : getFormData(),
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
           alert(data);   
        }
    });
    console.log(getFormData());
});

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

var optionFor = function (source) {
    var optionTemplate = '<option value="<%= value %>" data-type="<%= source_type %>"><%= label %></option>';
    return...