Final Major Project — Finishing Ordering System

I want my application to be in a condition for the deadline that no matter what the user does they can’t end up in a situation where it looks like the application isn’t performing as it should be. In order to address this I began working on the ordering page again, currently once a user has placed one order the application can handle that fine however if they place another order from the same shop it adds it onto the end of the order and duplicates the pricing and if a user places an order from 2 different shops the orders clash resulting in some of the content from just one order being displayed like the shop name.

To tackle this issue I decided to change the way the ordering page works so that a user can have multiple current orders running side by side and can view the separate orders by navigating between them. To tackle this issue I had to change the way in which the application reads the orders from firebase, instead of directly read what is there and just showing it on the page I decided that the application will have a look at all of the orders that are currently adtive for the user and then push these orders into an array. The orders page checks the array and looks at which order is in position 0 in that array and shows just this order first by default. This fixed the isses with clashing orders and by pushing them into an array and also adding in the ID of the shop that the order was from it stopped the orders from clashing as each order as a unique identifier yet I can still find out which shop it is ordered from by accessing the shop ID in side the array.

Then I needed to work on creating a way for a user to navigate between orders as currently they can only see the order at position 0 within the array. I decided to have some text at the bottom of the ordering box which tells the user they are viewing order “1 of of 1” or “1 of 2” etc and then have navigation arrows either side of this text to go to the previous order or the next one, this will work in a cycle so if they get to the highest order in the array when they press the next button they will go to the lowest and I achieved this using if functions. The trickiest part about implementing this way ensuring the application knew which order it was currently showing in order to go up or down to the next one, javascript marks elements in an array starting a 0 but a user would probably find it much it much easier to understand if the orders began at 1 so I have to translate add 1 to each of the numbers in the javascript array when I’m displaying them in the UI.

It is actually fairly unlikely that a user would have multiple orders running at the same time but it is possible and as currently there is no way to edit or cancel an order and it’s unlikely I’ll have time to implement these before the deadline it seemed a sensible way of getting around the fact the multiple orders would cause the app to look extremely buggy and will work much better for demonstrative purposes.

Another element that I thought was important to change on the order page is the order status, the status of the order ois probably the most important piece of information on that page so it needed to be emphasied. I decided that implementing a graphical progress element to display the status alongside text would be informative, draw the attention of the user and be visually pleasing so I began working on some short animated images of a coffee cut being filled up to represent this information. All the images needed to represent the different stages of the order and loaded when the page loads to ensure smooth display of the relevant images and when the status of the order is changed in firebase a listener in the javascript updates the source of the image displayed on the order page. The image is an animated gif which starts at the ending position of the previous image so it seems to the user as if the cup suddenly starts filling up more.

The order once marked as done by the retailer app previously had it’s status simply changed to done and this was reflected by the consumer app however I wanted to chnage that so the order dissapeared. Now when the done button is pressed in the retailer application it creates the order again in both the users part of firebase and it’s own in a subdirectory of orders called old orders and deletes the active order, I then changed the javascript within both applications to be able to stop displaying an order once it was removed. In recent updates I have removed the previous orders button from the orders page, whist this would be a feature in future version of the applciation to be able to review old orders in the old orders part of firebase and place orders again based on past orders it is simply too large a task at this point in the projects lifecycle and I think it would be more important to have a more polished application that have this feature supported.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.