Adds a select-reservartion panel to reservation calendar

onegov/town/app.py

@@ -238,7 +238,7 @@ def get_fullcalendar_asset():
     yield 'moment.de.js'
     yield 'fullcalendar.js'
     yield 'fullcalendar.de.js'
-    yield 'reservationcalendar.js'
+    yield 'reservationcalendar.jsx'
     yield 'reservationcalendar_custom.js'
 
 
@@ -288,6 +288,7 @@ def get_dropzone_asset():
 @TownApp.webasset('common')
 def get_common_asset():
     yield 'jquery.datetimepicker.css'
+    yield 'locale.js'
     yield 'modernizr.js'
     yield 'jquery.js'
     yield 'fastclick.js'

onegov/town/assets/js/locale.js

@@ -0,0 +1,12 @@
+var locales = {
+    de: {
+        "Reservations": "Reservationen",
+        "Select allocations on the right to reserve them": "Wählen Sie die gewünschten Daten rechts aus"
+    }
+};
+
+var language = document.documentElement.getAttribute("lang").split('-')[0] || "en";
+
+window.locale = function(text) {
+    return locales[language] && locales[language][text] || text;
+};

onegov/town/assets/js/reservationcalendar.js → onegov/town/assets/js/reservationcalendar.jsx

@@ -71,11 +71,11 @@ rc.getFullcalendarOptions = function(options) {
         selectable: rcOptions.editable,
         defaultView: rcOptions.view,
         highlights: rcOptions.highlights,
-        afterSetup: []
+        afterSetup: [],
+        viewRenderers: [],
+        eventRenderers: []
     };
 
-    var eventRenderers = [];
-
     // the reservation calendar type definition
     var views = [];
 
@@ -140,19 +140,31 @@ rc.getFullcalendarOptions = function(options) {
     }
 
     // after event rendering
-    eventRenderers.push(rc.renderPartitions);
-    eventRenderers.push(rc.highlightEvents);
-    eventRenderers.push(rc.setupEventPopups);
+    fcOptions.eventRenderers.push(rc.renderPartitions);
+    fcOptions.eventRenderers.push(rc.highlightEvents);
+    fcOptions.eventRenderers.push(rc.setupEventPopups);
 
     fcOptions.eventAfterRender = function(event, element, view) {
-        for (var i = 0; i < eventRenderers.length; i++) {
-            eventRenderers[i](event, element, view);
+        var renderers = view.calendar.options.eventRenderers;
+        for (var i = 0; i < renderers.length; i++) {
+            renderers[i](event, element, view);
+        }
+    };
+
+    // view change rendering
+    fcOptions.viewRender = function(view, element) {
+        var renderers = view.calendar.options.viewRenderers;
+        for (var i = 0; i < renderers.length; i++) {
+            renderers[i](view, element);
         }
     };
 
     // history handling
     rc.setupHistory(fcOptions);
 
+    // reservation selection
+    rc.setupReservationSelect(fcOptions);
+
     // switch to the correct date after the instance has been creted
     if (rcOptions.date) {
         fcOptions.afterSetup.push(function(calendar) {
@@ -167,6 +179,7 @@ $.fn.reservationCalendar = function(options) {
     var fcOptions = rc.getFullcalendarOptions($.extend(true, defaultOptions, options));
 
     return this.map(function(_ix, element) {
+
         var calendar = $(element).fullCalendar(fcOptions);
 
         for (var i = 0; i < fcOptions.afterSetup.length; i++) {
@@ -235,7 +248,7 @@ rc.setupHistory = function(fcOptions) {
     var isPopping = false;
     var isFirst = true;
 
-    fcOptions.viewRender = function(view) {
+    fcOptions.viewRenderers.push(function(view) {
         if (isPopping) {
             return;
         }
@@ -259,7 +272,7 @@ rc.setupHistory = function(fcOptions) {
         } else {
             window.history.pushState.apply(window.history, state);
         }
-    };
+    });
 
     fcOptions.afterSetup.push(function(calendar) {
         window.onpopstate = function(event) {
@@ -271,6 +284,30 @@ rc.setupHistory = function(fcOptions) {
     });
 };
 
+// setup the reservation selection on the left
+rc.setupReservationSelect = function(fcOptions) {
+    var selection = null;
+
+    fcOptions.afterSetup.push(function(calendar) {
+        var view = $(calendar).find('.fc-view-container');
+
+        selection = $('<div class="reservation-selection"></div>')
+            .insertBefore(view);
+
+        calendar.fullCalendar('option', 'aspectRatio', 1.1415926);
+        rc.resizeReservationSelection(selection);
+        rc.renderReservationSelection(selection.get(0), []);
+    });
+
+    fcOptions.windowResize = function() {
+        rc.resizeReservationSelection(selection);
+    };
+
+    fcOptions.viewRenderers.push(function() {
+        rc.resizeReservationSelection(selection);
+    });
+};
+
 // renders the occupied partitions on an event
 rc.renderPartitions = function(event, element, calendar) {
 
@@ -411,3 +448,28 @@ rc.sumPartitions = function(partitions) {
         return running_total + p[0];
     }, 0);
 };
+
+ReservationSelection = React.createClass({
+    render: function() {
+        return (
+            <div className="reservation-selection-inner">
+                <h3>{locale("Reservations")}</h3>
+                {
+                    this.props.reservations.length === 0 &&
+                        <p>{locale("Select allocations on the right to reserve them")}</p>
+                }
+            </div>
+        );
+    }
+});
+
+rc.renderReservationSelection = function(element, reservations) {
+    React.render(<ReservationSelection reservations={reservations} />, element);
+};
+
+rc.resizeReservationSelection = function(selection) {
+    var element = $(selection);
+    var view = element.parent().find('.fc-view-container');
+
+    element.css('min-height', view.height());
+};

onegov/town/theme/styles/town.scss

@@ -2051,29 +2051,6 @@ button {
     }
 }
 
-
-/*
-    Fullcalendar Screen Flicker Prevention
-*/
-
-@media #{$small-only} {
-    .calendar {
-        min-height: $small-breakpoint * .5;
-    }
-}
-
-@media #{$medium-only} {
-    .calendar {
-        min-height: $medium-breakpoint * .5;
-    }
-}
-
-@media #{$large-up} {
-    .calendar {
-        min-height: $large-breakpoint * .5;
-    }
-}
-
 /*
     Popup Menu
 */
@@ -2488,3 +2465,34 @@ ul.search-results {
 .subscribers li:hover span {
     background-color: $yellow-pastel;
 }
+
+/*
+    Reservation calendar
+*/
+.reservation-selection {
+    border: 1px solid $gainsboro;
+    border-right: 0;
+    float: left;
+    width: 20%;
+
+    h3 {
+        background-color: $white-smoke;
+        border-bottom: 1px solid $gainsboro;
+        font-size: .875rem;
+        font-weight: bold;
+        line-height: 18px;
+        margin: 0;
+        text-align: center;
+    }
+
+    p {
+        font-size: .875rem;
+        padding: 1ex;
+        text-align: center;
+    }
+}
+
+.fc-view-container {
+    display: inline-block;
+    width: 80%;
+}