Timeline component

For the last two weeks I have been working on the timeline component. This is the centrepiece of the customer interface because it is the tool students will use to visualise the equipment availabilities over a period of time and place a reservation. But it is taking a lot more time than I had expected.

First I had to write a PHP interface between Flex and the database. Long had written a function that would do this already, but the problem was it only checked the availability for one item on one date. That would mean if we had three items and two weeks on screen, we would have to make 42 HTTP service requests. This would slow down the application because there would be 42 queries going to and from the client and the server. So I wrote a function that takes an array of product IDs, a start date and an end date and returns all of the appropriate equipment availabilities. That was a 250 line beast so I guess some of the time went in there.

Here's an excerpt of the code:


The function returns XML in a structure like this:


I am using Repeater elements to display the rows of products and columns of days in Flex. First I got the component to display static data that was saved in a variable in Flex, and then I got it to display data that was loaded in from an XML feed. This is what the component is looking like now:


The next step will be to hook this up with the rest of the student interface. Users will need to be able to drag products onto this timeline. They will also need to scroll horizontally to view the dates they are looking for. After that I will need to make the buttons actually place a reservation when they are clicked.