How was DaShef Backoffice created?

Adding new users, creating a new menu, providing tablets for the restaurants… – these are only some of the interfaces that had to be made, so the restaurant owners would find the digital menus easy to use. We also had to create an interface for viewing of the ordered foods and drinks, mainly for the waiters and the chefs, and it all had to be made as simply as possible. The first question was: which technologies should we use in order to make interfaces which will be as simple and as intuitive as possible for restaurant owners and waiters?

For starters, all the elements, such as buttons, icons and tool tips were made by using Bootstrap 3 framework for front-end, which set up the base to make a responsive interface for tablets and smartphones, planned for some of the future phases.

There is a number of different lists in Backoffice, such as restaurant listings, users, sections, foods, wines, etc. and we needed to find a solution in order to simplify the viewing and the use. We solved the problem by using the jQuery plugin Datatables. By using it, searching for items on lists, sorting lists by columns, automatic pagination by the desired number of elements per page, and asynchronous data loading is simple, so to avoid weak performances with large lists.

Picture 1: An example of a list made using dataTables plugin

One of the most interesting functionalities is menu building using drag and drop interface. The interface is made of two lists: left represents the list of all the foods defined by the restaurant owner, and the right represents all the foods added to the menu. In order to make further description easier, please see the picture below:

Picture 2: Drag and drop interface for menu building

This was made by using Draggable and Sortable. The module draggable makes it possible for every item in the list on the left, such as food or section, to be “dragged” over the screen, while the module sortable makes it possible for those items to be sorted to the right hand side; changing their order by dragging is also an option. Each menu is sorted by a hierarchy structure, so the foods and drinks are categorized, and categories are put into sections. This was made on the basis of jQuery UI module Accordion, which was later modeled to suit our needs.

I would like to end this text with the interface for viewing all the orders, characterized by the fact that it is adjustable for viewing on touch screens. This interface is also made of two lists, the left represents the list of all the tables in the restaurant, while the right shows the orders active at the moment. By clicking a table (for which an order was made), all the details are asynchronously loaded, and a list of actions is shown. One of the important functions is real-time overview of time that passed from the moment the order was initialized, thanks to the jQuery countdown plugin.

Picture 3: Interface for order overview

P.S. A hint for the next version: adding pictures to the menus will be easier by using drag and drop plugin jQuery File Uploader, as well as a new interface for adding foods, which will make translation entries also easier.