Dashboard: Commit #796cfbcff764

Around this time two years ago, in Zuckerberg-ish like attempt to distract myself from a bad breakup, I joined with my good friend Breland in an attempt to create a killer web app called Joupes. After months of working on it (I would design and market, Breland would code), we released the Alpha version. Yeah, you heard right – Alpha, not Beta. This here is real. Long story short, it was a very un-Zuckerberg-ish like failure. We had big ideas and little patience, and while I still believe we had some excellent features, they were far from ready.

Fast forward two years. I’m a Senior in college, engaged and working an internship which has allowed me to learn and practice web development on a daily basis. On top of this, I’ve been blessed to be given a few art opportunities over the last year, which is a dream come true. As with any success, mediocre as it may be, there arise challenges. Over the past few months, I have become increasingly aware of the lack of stable system for tracking canvas orders. Surely, a task-minded, sometimes OCD list-maker would have a system in place to keep track of a years worth of sales? Unfortunately for this list-maker, the answer was no. Over the last few weeks, in the bits of spare time I’ve found between classes and my work schedule, I sought out to remedy this. Below are the details and outline of my progress thus far.

Information

I’m building this application on top of the open source Scaffolding framework by Jimmy Sawczuk.

This is commit #796cfbcff764 and can be viewed here on Bitbucket.

Overview

The original plan for this dashboard is that it would be a simple list of canvas orders and prices, kept in a database and displayed in a table format somewhere in depths of my server. As with all coding projects, though, this quickly turned into much more.

At the base, I wanted to have a working, intuitive system for adding and tracking orders. In it, I would track the price, size, description, customer and if the order had been completed. The gross totals would be added and displayed, along with information pulled from the Facebook fan page. All of this information, including a brief “Recent Orders” list, would be displayed on the main dashboard index. The entire list, including the ability to add items, would be on a separate page.

Also, just for fun, I wanted some way to countdown to my wedding day. Call me crazy, but I cannot wait to be married, and having a visual reminder that the day is drawing nearer is something I’d love to have every time I log in.

Countdown

This has probably been the most fun thing to work on so far in the app. It’s pretty simple, but I played around with some JQuery that let me do some neat things. The code for the countdown is fairly straight forward, though I had to do some research as I had never used the mktime() function. I ended up using a slight variation of this code, which not only figures out the remaining time, but breaks it into hours and days.

$time = ( (mktime ($hour,0,0,$month,$day,$year) – time(void) )/3600 );
$hours = (int)$time;
$days = (int)($hours/24);

After that, I thought it would be neat to pull both of our Facebook pictures from Facebook and display them alongside the countdown. As it turns out, this is incredibly simple and doesn’t require an auth token. In fact all you have to do is use the Graph API picture URL as your image src:

http://graph.facebook.com/ryanlbowen/picture

Finally, I thought it should be livened up with some neat JQuery effects. I decided to animate the containing div by making it grow as soon as the page is loaded, the dropping in the content.

$(‘.box’).animate({width:”930px”}, 2000, function() {
$(‘#marriage’).slideDown();
});

Basically, that just tells the ‘box’ class to increase its width to 930px, do it at a speed of 2000, and once the action is complete, slide down the contents of ‘#marriage’. Aside from the cool effects, here is the end result.

Order Tracking

This piece actually went fairly smoothly. I searched through old emails, Facebook messages, photo comments and text messages to create an order history spreadsheet. I imported this into my database and pulled all orders into the Palmetto Graffiti page.

The one thing I will say about this is that I decided to only show prices for completed orders. For the orders that had not yet been completed (meaning I had not yet collected money), I showed a “Mark As Complete” link. This simply grabbed the ID of the selected order and updated the database to show the order had been complete.


Though most of the functionality is completed for the task list, it’s still not quite done. I’ve also had to rethink the Flickr idea, since the load time for this was a little ridiculous. Once I get these things done, I’ll follow this post up with my next major commit.