Locations live admin

by Craig Martin

HTML

<h1>Case Number: <span id="casenumber">100049</span></h1>

<button class="ui-btn ui-btn-b ui-corner-all ui-shadow" type="button" id="start">Start / Stop<span id="msoutput"></span>

</button>
<div id="contcontainer">
    <input id="location_title" type="text" name="location_title" placeholder="Enter a Location Title">
    <div id="admindiv">
        <button id="setbtnnorm" class="ui-btn ui-btn-b ui-corner-all ui-shadow">Set Location</button>
    </div>
    <div id="errorupdatebox" class="showit">
         <h2 style="text-align: center;">Your input is required!</h2>

        <input id="errortext" type="text" name="location_title" placeholder="Error! Enter a Location title!" required>
        <div class="ui-grid-b ui-responsive">    
            <div class="ui-block-a">
                <button id="errorsubmitupdate" class="ui-btn ui-btn-b ui-corner-all ui-shadow">Save Updated Location Title</button>
            </div>
            <div class="ui-block-b">
                <button id="cancelupdate" class="ui-btn ui-btn-b ui-corner-all ui-shadow ui-btn-active">Cancel Updated Title Entry</button>
            </div>
        </div>
    </div>
    <div id="infolog" class="ui-body ui-body-a ui-corner-all">
         <h2 style="text-align: center;">LOG INFO</h2>

        <div id="infologdata"></div>
    </div>

CSS

#infolog {
    transition: ALL 1.5s;
}
#contcontainer {
    margin-top: 50px;
}
#admindiv {
    overflow:auto;
    cursor:default;
}
#admindiv div {
    margin:5px;
    text-align: center;
    padding: 10px;
    border:1px solid gray;
    background-color:#ccc;
    width:130px;
}
#admindiv div.selected {
    border:1px solid red;
    background-color:#faa;
}
.showit {
    display: none;
}

JavaScript

var jQuery = jQuery.noConflict();


var admindiv = jQuery('#admindiv > button'),
    msoutput = jQuery('#msoutput'),
    tarr = [0],
    delay = 100;

function saveLocationdata() {
    var idx = admindiv.filter('.selected').index();
    var locationtitle = document.getElementById("location_title").value;
    tarr[idx] = tarr[idx] + delay;
    milliSecs = +tarr[idx];
    if (locationtitle == "") {
        document.getElementById("infologdata").innerHTML = "<div id='result" + idx + " '>Location MS: " + milliSecs + "<br><div id='titleresult'>Location Title: Empty Title Error!</div><br></div>";
        jQuery("#location_title").hide();
        jQuery("#setbtnnorm").hide();
        jQuery("#errorupdatebox").show();
    } else {
        document.getElementById("infologdata").innerHTML = "<div id='result" + idx + " '>Location MS: <span id='timeresult'>" + milliSecs + "</span><div id='titleresult'>Location Title: " + locationtitle + "</div><br></div>";
        ajaxsaveLocation();
    }
};

jQuery("#errorsubmitupdate").click(function () {
    var newtexttitle = document.getElementById("errortext").value;
    if (newtexttitle == "") {
        jQuery("#location_title").hide();
        jQuery("#setbtnnorm").hide();
        document.getElementById("errortext").setAttribute("placeholder", "ERROR! Must include a Location Title");
    } else {
        jQuery("#errorupdatebox").hide();
        jQuery("#location_title").show();
        jQuery("#setbtnnorm").show();
        document.getElementById("errortext").value = "";
        document.getElementById("titleresult").innerHTML = "Location Title: " + newtexttitle;
        ajaxsaveLocation();
    }
});

function ajaxsaveLocation() {
    var lstr = document.getElementById("location_title").value;
    if (!lstr) {
        return;
    }
    var postval = encodeURIComponent(lstr);
    var casenum = jQuery("#casenumber").html();
    var timeset = jQuery("#timeresult").html();
    var exhibit_file = "1";
    var ex_start = "2";
    var...