audit.html

<!DOCTYPE html>
<html>
<head>

<title></title>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Keywords" content="x,y" />

<meta name="Description" content="x,y" />

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////">
<script type="text/javascript">
"use strict"

function addRow( _event )
{
    var tr = document.querySelector( "table.productList tbody tr" );
    var newTr = document.createElement( "tr" );

    newTr.innerHTML = tr.innerHTML;

    // Update location
    newTr.querySelector( ".location select" ).value = document.querySelector( "select.place" ).value;

    tr.parentNode.appendChild( newTr );

    _event.currentTarget.scrollIntoViewIfNeeded();
}

function handleInput( _event )
{
    // Enter key triggers an onchange event

    // Figure out what we want to do with the current data
    var tr = _event.currentTarget.parentNode.parentNode;
    var amount = Number( tr.querySelector( ".amount input" ).value );
    var barcode = tr.querySelector( ".barcode input" ).value;
    var barcodeField = tr.querySelector( ".barcode input" ) === _event.currentTarget;

    var val = _event.currentTarget.value;

    var locations = [];
    var locationIndex;
    var globalSelect = document.querySelector( "select.place" );
    [].forEach.call( globalSelect.options, function( _item )
    {
        locations[ _item.value ] = _item.text.toLowerCase();
    } );

    if ( Number( val ) < 1000 )
    {
        console.info( "number" );
        // Number and < 1000: set amount; if barcode already set (!bulk): addRow()

        _event.currentTarget.value = "";
        tr.querySelector( ".amount input" ).value = val;

        // Focus on barcode (if not exist)
        //if ( barcode )
        //else tr.querySelector( ".barcode input" ).focus
        if ( barcode && barcode !== val )
        {
            addRow( _event );
            tr.parentNode.querySelector( "tr:last-child .barcode input" ).focus();
        }
        else
        {
            tr.querySelector( ".barcode input" ).focus();
        }
    }
    else if ( ( locationIndex = locations.indexOf( val.toLowerCase() ) ) >= 0 )
    {
        console.info( "location" );
        // text within location list: update local and global location
        _event.currentTarget.value = "";

        tr.querySelector( ".location select" ).value = globalSelect.value = locationIndex;
    }
    else if ( val == "bulk_" )
    {
        console.info( "unit bulk" );
        // Update list to crt
        tr.querySelector( ".unit select" ).value = "crt";

        // clear input
        _event.currentTarget.value = "";
    }
    else if ( val == "single_" )
    {
        console.info( "unit single" );
        // Update list to btl
        tr.querySelector( ".unit select" ).value = "btl";

        // clear input
        _event.currentTarget.value = "";
    }
    else
    {
        console.info( "barcode" );
        // Barcode:
        // amount empty: setfocus
        // barcode already entered: assume 1
        if ( ( amount && amount !== Number( val ) ) || ( !barcodeField && barcode ) )
        {
            // Update picture
            loadProduct( tr );

            addRow( _event );
            tr.parentNode.querySelector( "tr:last-child .barcode input" ).focus();
        }
        else if ( barcodeField )
        {
            // Update picture
            loadProduct( tr );

            tr.querySelector( ".amount input" ).focus();
        }
        else
        {
            // Was amount field, ignore the fact that the value was >1000 and focus on barcode field
            tr.querySelector( ".barcode input" ).focus();
        }
    }
}

function submitData( _event )
{
	var arrBarcodes = [].map.call( document.querySelectorAll( ".barcode input" ), function( _element )
	{
		return _element.value;
	} );
	var arrUnits = [].map.call( document.querySelectorAll( ".unit select" ), function( _element )
	{
		return _element.value;
	} );
	var arrAmounts = [].map.call( document.querySelectorAll( ".amount input" ), function( _element )
	{
		return _element.value;
	} );
	var arrLocations = [].map.call( document.querySelectorAll( ".location select" ), function( _element )
	{
		return _element.value;
	} );
	var arrDestinations = [].map.call( document.querySelectorAll( ".destination select" ), function( _element )
	{
		return _element.value;
	} );

    var strUser = document.querySelector( "#user" ).value;

	//console.log( arrBarcodes, arrUnits, arrAmounts, arrLocations, arrDestinations );

    var strUri = "https://ackspace.nl/spaceAPI/" + document.location.search + "&update=sensors";

    for ( var nItem = 0; nItem < arrBarcodes.length; nItem++ )
    {
        if ( !arrBarcodes[ nItem ] )
            continue;

        var barcode = "";

        if ( arrUnits[ nItem ] === "crt" )
            barcode += "bulk_";
        barcode += arrBarcodes[ nItem ];

        // Amount defaults to 1
        var amount = arrAmounts[ nItem ];
        if ( !amount )
            amount = 1;

        strUri += "&address[]=" + barcode + "&value[]=" + amount + "&location[]=" + arrLocations[ nItem ] + "&user[]=" + strUser + "&type[]=audit";
        if ( false )
            strUri += "&destination[]=" + arrDestinations[ nItem ];

    }


    fetch( strUri ).then( function( _response )
    {
        return _response.text();
    } ).then( function( _text )
    {
        console.log( _text );
    } );

    console.log( strUri );
}

function window_load()
{
    console.log( "loaded" );

    // Fetch locations, update select
    // Update (all) table rows
    fetchLocations().then( function( _data )
    {
        //console.log( "data", _data );
        [].forEach.call( document.querySelectorAll( "select.place" ), function( _select )
        {
            var option;
            _select.innerHTML=""

            if ( _select.parentNode.className === "destination" )
            {
                option = document.createElement( "option" );
                option.value = 0;
                option.text = "None";
                _select.appendChild( option );
            }
            _data.forEach( function( _option, _index )
            {
                option = document.createElement( "option" );
                option.value = _index;
                option.text = _option;
                _select.appendChild( option );
            } );
        } );
    } );

    document.querySelector( "#user" ).focus();

    if( !document.location.search )
        document.body.innerHTML = "add ?key=&lt;apikey&gt;";
}

function fetchLocations()
{
    return new Promise( function( _resolve, _reject )
    {
        _resolve( ["slACKspace", "hACKspace", "stACKspace" ] );
    } );
}

function loadProduct( _tr )
{
    // barcode, unit
    var barcode = "";

    if ( _tr.querySelector( ".unit select" ).value === "crt" )
        barcode += "bulk_";
    barcode += _tr.querySelector( ".barcode input" ).value;
    console.log( "load image for barcode", barcode );
    console.log( _tr.querySelector( ".product img" ).src );

    fetch( "https://ackspace.nl/spaceAPI/stock.php?type=product&barcode=" + barcode ).then( function( _response )
    {
        return _response.json();
    } ).then( function( _data )
    {
        var product = "unknown product";
        var image = "unknown.png";

        if ( _data.length )
        {
            product = _data[0].name + " (" + _data[0].amount + ")";
            image = _data[0].unit + "_" + _data[0].image;
        }

        _tr.querySelector( ".product img" ).src = "products/" + image;
        //TODO: prevent bulk_bulk_barcodes _tr.querySelector( ".unit select" ).value = _data[0].unit;

        var elemName = _tr.querySelector( ".name select" );
        elemName.value = product;
        // If the option didn't exist, add it and select again
        if ( elemName.value === "" )
        {
            var option = document.createElement( "option" );
            option.appendChild( document.createTextNode( product ) );
            elemName.appendChild( option );
            elemName.value = product;
        }
    } );

    //_tr.querySelector( ".product img" ).src = "https://ackspace.nl/spaceAPI/barcodeimage.php?barcode=" + barcode;
}


var $ = document.querySelector.bind( document );

window.addEventListener( "load", window_load, false );
</script>

<style type="text/css" media="screen,all">
*,*:before,*:after
{
    box-sizing: border-box;
}

.product > img
{
    max-width: 2em;
    max-height: 2em;
}

/*
.product:before
{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 1px 0 0 rgba(255,255,255,.85);
}
*/
</style>

</head>

<body>

User:<input type="user" list="users" id="user" onchange="document.querySelector('tr:last-child .barcode input').focus()"/>
Default location:<select name="defaultLocation" id="defaultLocation" class="place">
    <!--option value="3">slACKspace</option>
    <option value="66">hACKspace</option>
    <option value="1">stACKspace</option-->
</select>

<button onclick="submitData.apply( this, arguments );">submit</button>
<table class="productList">
    <thead>
        <tr>
            <th class="product">
                Product
            </th>
            <th class="product">
                Barcode
            </th>
            <th class="unit">
                Unit
            </th>
            <th class="name">
                Name
            </th>
            <th class="amount">
                Amount
            </th>
            <th class="location">
                Location
            </th>
            <th class="destination">
                Destination
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="product">
                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="/>
            </td>
            <td class="barcode">
                <input type="text" name="barcode[]" onchange="handleInput.apply( this, arguments )"/>
            </td>
            <td class="unit">
                <select name="unit[]" onchange="loadProduct( arguments[0].currentTarget.parentNode.parentNode )">
                    <option disabled>sgl</option>
                    <option selected>btl</option>
                    <option>crt</option>
                    <option disabled>gr</option>
                    <option disabled>plt</option>
                </select>
            </td>
            <td class="name">
                <select name="name[]" disabled>
                    <option>Club Mate</option>
                    <option>Premium Cola with a pinch of salt</option>
                </select>
            </td>
            <td class="amount">
                <input type="number" list="numbers" name="amount[]" onchange="handleInput.apply( this, arguments )"/>
            </td>
            <td class="location">
                <select name="location[]" class="place">
                    <option>slACKspace</option>
                </select>
            </td>
            <td class="destination">
                <select name="destination[]" class="place">
                    <option>None</option>
                    <option>slACKspace</option>
                </select>
            </td>
        </tr>

    </tbody>
    <tfoot>
        <tr>
            <th colspan="7"><button onclick="addRow.apply( this, arguments )">+</button></th>
        </tr>
    </tfoot>
</table>

<datalist id="numbers">
   <option>1</option>
   <option>3</option>
   <option>6</option>
   <option>10</option>
   <option>12</option>
   <option>20</option>
   <option>24</option>
   <option>36</option>
   <option>50</option>
</datalist>
<datalist id="users">
   <option>xopr</option>
</datalist>

For unknown product + bulk, update both barcde and stock table

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<!--
FORM
--------------------------------------------------------------------------------
        User :     [...|v] (submit)
        Location : [...|v]

input entry
   img     [unit|v]   [name|v]   <amount>   [location|v]   ([destination|v])
[barcode]


img: combination of unit + name: Club%20Mate_btl.png
barcode:    atm, single entry point with addition of "bulk_"
unit:       toggle crate/bottle, list all
name:       list all (with icon?), currently, read-only "Unknown product" or barcode->name
location:   defaults to global location, list all
amount:     sliding scale with snapping amounts (1, 3, 6, 10, 12, 20, 24, 36, 50, 100, 500)
destination:toggle NULL/location, list all
-->
</body>
</html>