SambaPOS 5.1.60 Release

##Applications

Our new message server also contains a web server to serve your web applications. On SambaPOS installation folder (or where message server executable is running) create a sub folder called /apps/test and place an index.html file in it. When you navigate to that url you should see your index.html running.

PoorMan POS is a simple test application we developed to demonstrate how to access SambaPOS API from web applications. To test PMPos you can teplace the content of index.html with this code.

<!DOCTYPE html>
<html>

<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
    <script src='http://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.0.min.js'></script>
    <script src="/signalr/hubs"></script>
    <script>
     
$.postJSON = function(url, data, callback) {
    return jQuery.ajax({
    'type': 'POST',
    'url': url,
    'contentType': 'application/json',
    'data': JSON.stringify(data),
    'dataType': 'json',
    'success': callback
    });
};
    
var orders = [];

$(document).ready(function(){
    $('#header').html('<b>PoorMan POS</b>');
    //initialize menu
    updateCategories();
    
    $('#categories').on('click', '.cBtn', function(){
        updateMenuItems(this.innerHTML);
    });
    
    $('#menuItems').on('click', '.mBtn', function(){
        orders.push({name:this.innerHTML,quantity:1,price:this.getAttribute('price')});
        updateOrders();
    });
    
    $('#addTicketButton').click(()=>{
        if(!orders || orders.length == 0) return;
        var tableName = $('#tableNameEditor').val();
        createTicket(orders,tableName);
        updateTableColor(tableName);
        orders = [];
        updateOrders();
        $('#tableNameEditor').val('');
    });
});

function getCategoriesScript(){
    return `{categories: getMenuCategories(menu:"Menu"){id,name}}`;
}

function getMenuItemsScript(category){
    return `{items:getMenuItems(menu:"Menu",category:"${category}"){id,name,product{price}}}`;
}

function getAddTicketScript(orders,tableName){
    
    var orderLines = orders.map(order=>{
       return `{name:"${order.name}",states:[{stateName:"Status",state:"New"}]}`; 
    });
    
    var entityPart = tableName
        ? `entities:[{entityType:"Tables",name:"${tableName}"}],`
        : '';
    
    return `
        mutation m{addTicket(
            ticket:{ticketType:"Ticket",
                department:"Restaurant",
                user:"Administrator",
                terminal:"Server",
                ${entityPart}
                states:[{stateName:"Status",state:"Unpaid"}],
                orders:[${orderLines.join()}]
            }){id}}
    `;
}

function getUpdateTableColorScript(tableName){
    return `
        mutation m{updateEntityState(
            entityTypeName:"Tables",
            entityName:"${tableName}",
            stateName:"Status",
            state:"New Orders"
        ){name}}
    `;
}

function createTicket(orders,tableName){
    var query = getAddTicketScript(orders,tableName);
        $.postJSON('/api/graphql/', {query: query}, function(response) {
        if (response.errors) {
            // handle errors
        } else {                                   
           sendRefreshMessage();
        }
    });
}

function updateTableColor(tableName){
    if(!tableName) return;
    var query = getUpdateTableColorScript(tableName);
        $.postJSON('/api/graphql/', {query: query});
}

function sendRefreshMessage(){
    var query = "mutation m{postTicketRefreshMessage(id:0){id}}";
    $.postJSON('/api/graphql/', {query: query});
}

function updateCategories(){
    var query = getCategoriesScript();
    $.postJSON('/api/graphql/', {query: query}, function(response) {
        if (response.errors) {
            // handle errors
        } else {                        
            $('#categories').empty();            
            response.data.categories.forEach(category=> {
                $('#categories').append(`<li class='cBtn' id='c_${category.id}'>${category.name}</li>`);
            });
            updateMenuItems(response.data.categories[0].name);
        }
    });
}

function updateMenuItems(category){
    var query = getMenuItemsScript(category);
    $.postJSON('/api/graphql/', {query: query}, function(response) {
        if (response.errors) {
            // handle errors
        } else {                      
            $('#menuItems').empty();        
            response.data.items.forEach(item=> {
                $('#menuItems').append(`<li price='${item.product.price}' class='mBtn' id='m_${item.id}'>${item.name}</li>`);
            });
        }
    });
}

function updateOrders(){
    $('#orders').empty();  
    orders.forEach(order=>{
        $('#orders').append(`
            <li>
                <span>${order.quantity}</span>
                <span>${order.name}</span>
                <span>${order.price}</span>
            </li>
        `)
    });
}

    </script>
</head>

<body>
    <p id='header'>Tooo List</p>
    <p>
        <span>Table Name:</span>
        <input id='tableNameEditor'></input>
        <button id='addTicketButton'>Add Ticket</button>
    </p>
    <p>
        <ul id='categories'></ul>
    </p>
    <p>
        <ul id='menuItems'></ul>
    </p>
    <p>
        <ul id='orders'></ul>
    </p>
</body>

</html>

That will fetch SambaPOS menus and allow adding tickets. You can run it next to SambaPOS to test how it works. You’ll notice the top part is menu categories, middle part is menu items and third part is added orders.

I hardcoded few stuff in source code so if your menu name, ticket type names or department names are different from default ones you need to edit source code to fix them.

Please note API primarily designed to give access to external applications so we don’t mean to replace SambaPOS client yet but there is an attempt in beta group to test possibilities. I think we’ll have more discussions about that so if you’re interested you can follow & contribute to related topics to discuss possibilities with us.

3 Likes