Calendar View of item availablity

[squidgetx]

much like we have in shifts, only instead of people in locations, it's specifically colored kits of one item.

Should have two views: Patrons and Checkout persons have only view of what equipment is available, admin view also lists who has reserved the name.

[dgoerger]

http://stackoverflow.com/questions/9217666/jquery-ui-datepicker-can-i-make-it-static

• inline on the equipment model show page
• tooltip / popup on the catalogue page

can we re-use some code from blackout dates? I feel like it might be possible. :-)

[mnquintana]

This might be useful: http://www.tripwiremagazine.com/2012/04/jquery-calendar-date-pickers.html

[dgoerger]

I had a look at those; unfortunately, of those it looks like the only options that we could use (many of the js extensions on that page are 'premium' / cost money, which means we can't redistribute them with our app, which would entirely defeat the purpose) that would add any functionality over datepicker, would be full-blown event calendars, à la Google Calendar. Most unfortunately, no. 3 (which is for products availibility listings) is one of the closed-source ones. :-/

[dgoerger]

While we wait for a front-end, on the backend we need:

• pass variable with value of Max of model availibility over date_range
• array of hashes [{date: [Date], available_count: [#]},{...}] for date_range

then export to_json

[adambray]

@mnquintana mentioning you as a reminder

[mnquintana]

Just found this: http://timeline.verite.co/

We've only been looking at calendar solutions so far, but a timeline display, like this one, might actually work even better. It would more clearly show length, it would be interactive, and it would still show dates and days like we would want a strict calendar to do.

[dgoerger]

I like it! It can even show duration! I'll take a look at this. :-)

Project page: https://github.com/VeriteCo/TimelineJS

[dgoerger]

TimelineJS works really well and would be super-easy to implement! Big problem: It would add about 140 kB to our JS file (minimized).

For future reference: 300px is the height we'd want for TimelineJS.

Example JSON:

    { "timeline":
      { "headline":"Equipment Model (Chemical X)",
        "type":"default",
          "text":"Availability Yo",
        "date": [{ "startDate":"2012,1,26",
                   "endDate":"2012,1,29",
                   "headline":"3 available"
                 },
                   {
                   "startDate":"2012,1,18",
                   "endDate":"2012,1,25",
                   "headline":"1 available"
                 }]
      }
    }

I'm going to push this back from 3.1 as non-critical..

[mnquintana]

I think TimelineJS is still the best option for what we want. But I think we'll need to load it separately from application.js, and only when the calendar view specifically is selected, to keep initial file sizes low.

[orenyk]

Bumping! Via the Google Form (thanks to Julie Cohen):

It would be very helpful to be able to see the availability of an item in a calendar view first, then select a date for the reservation & add to cart instead of needing to find an available date by trial and error.

I'm pretty sure this falls underneath this issue, not sure how we want to proceed given that two years of development have happened since all this work was done.

[squidgetx]

Hey-o!
~90 lines of JS, ~70 lines of CSS, 30 lines of ERB

I've implemented a calendar view of item availability as a week view to replace the progress availability bar.

• unlimited scrolling by day or week with no requests to the server
• linear time render in JS (O(n) where n is the number of reservations active for the given equipment model)
• dynamic cell coloring based on availability
• click the calendar date to set the cart start date and update

@mnquintana could you take a look at this?

[squidgetx]

to do : add blackout date functionality
stretch goal: figure out how to package as a gem/rails helper style thing so we could have multiple calendars rendered on the same page

[squidgetx]

• Added support for blackout dates and restricted time to 1 month ahead in order to reduce lag, though I'm not confident that's even necessary
• Fixed up some issues that were causing other parts of our JS to break
• Finally, cleaned up equipmentmodel show.erb by removing the disabling of the add to cart button if the cart date is a blackout date. Since users can see the blackout dates in the calendar it's not super necessary and also this functionality was one-way only anyway (changing the cart date doesn't remove the restriction, which is frustrating)

[squidgetx]

Ready for review

[mnquintana]

I reviewed this!