Simple Order Management web application built using NodeJS, ExpressJS, Polymer, MongoDB
APACHE-2.0 License
Toy project to play with Polymer
I assumed that an order only contains one type of drink.
##Source code structure
Database includes two following collections:
{
"type" : <drink type>,
"name" : <drink name>,
"size" : <drink size>,
"price" : <drink price>
}
{
"type" : <drink type> ,
"name" : <drink name>,
"size" : <drink size>,
"price" : <drink price>,
"quantity" : <quantity>,
"amount" : <total amount>,
"time" : <order date>,
}
All orders are displayed in a table, default sorted by order time in descending order. Date time is in UTC, not local time.
View all orders on desktop:
View all orders on mobile:
Using filter by type to group order by drinks type: coffee or/and tea
Using filter by size to group order by drinks size: tall, grande and/or venti
A new type of drink can be easily added from the database. Front-end is implemented in a way that dynamically read all drink type and display on UI. For example, I added following a new drink type Americano:
{
"size" : "Tall",
"price" : "1.98",
"name" : "Americano",
"type" : "Coffee"
}
New size can be added in the same way as adding new drink type except we need to add CSS code for new drink size. CSS can be added to add-order-form.html file as follow:
iron-icon.<name of new size> {
height: <desired height which is relative to other sizes>;
width: <desired width which is relative to other sizes >;
}
For example: I add a Mini size for Cappuccino into database:
{
"size" : "Mini",
"price" : "2.75",
"name" : "Cappuccino",
"type" : "Coffee"
}
And as new CSS to add-order-form.html file as follow
iron-icon.Mini {
height: 24px;
width: 24px;
}
Add hot/cold will require adding a new property in drink model. On the frontend, we also need to add a new input field such as radio button group for users to select the hot/cold option.
We can follow either of two below methods to support condiments: