Skip to content
This repository has been archived by the owner on Sep 5, 2019. It is now read-only.

Commit

Permalink
Adds event dependent rendering to reservation form popup
Browse files Browse the repository at this point in the history
  • Loading branch information
Denis Krienbühl committed Apr 21, 2016
1 parent 0655789 commit bb6723b
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 36 deletions.
99 changes: 65 additions & 34 deletions onegov/town/assets/js/reservationcalendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ rc.showActionsPopup = function(calendar, element, event) {
$('<h3 />').text(locale('Allocation')).appendTo(wrapper);
$(event.actions.join('')).appendTo(wrapper);

ReservationForm.render(reservation.get(0));
ReservationForm.render(reservation.get(0), event);

rc.showPopup(calendar, element, wrapper);
};
Expand Down Expand Up @@ -597,50 +597,81 @@ ReservationSelection.resize = function(selection) {
Allows to fine-adjust the reservation before adding it.
*/
ReservationForm = React.createClass({
getInitialState: function() {
return {
start: !this.props.wholeDay && this.props.start.format('HH:mm') || "",
end: !this.props.wholeDay && this.props.end.format('HH:mm') || "",
quota: 1,
wholeDay: this.props.wholeDay
};
},
handleChangeWholeDay: function(e) {
var state = _.extend({}, this.state.selected);
state.wholeDay = e.target.value === 'yes';
this.setState(state);
},
render: function() {
return (
<form>
<div className="field">
<span className="label-text">{locale("Whole day")}</span>

<input id="reserve-whole-day-yes"
name="reserve-whole-day"
type="radio"
value="yes"
/>
<label htmlFor="reserve-whole-day-yes">{locale("Yes")}</label>
<input id="reserve-whole-day-no"
name="reserve-whole-day"
type="radio"
value="no"
/>
<label htmlFor="reserve-whole-day-no">{locale("No")}</label>
</div>

<div className="field split">
<div>
<label htmlFor="start">{locale("From")}</label>
<input name="start" type="time" size="4"/>
{this.props.partlyAvailable && this.props.wholeDay && (
<div className="field">
<span className="label-text">{locale("Whole day")}</span>

<input id="reserve-whole-day-yes"
name="reserve-whole-day"
type="radio"
value="yes"
checked={this.state.wholeDay}
onChange={this.handleChangeWholeDay}
/>
<label htmlFor="reserve-whole-day-yes">{locale("Yes")}</label>
<input id="reserve-whole-day-no"
name="reserve-whole-day"
type="radio"
value="no"
checked={!this.state.wholeDay}
onChange={this.handleChangeWholeDay}
/>
<label htmlFor="reserve-whole-day-no">{locale("No")}</label>
</div>
<div>
<label htmlFor="end">{locale("Until")}</label>
<input name="end" type="time" size="4"/>
)}

{this.props.partlyAvailable && (!this.props.wholeDay || !this.state.wholeDay) && (
<div className="field split">
<div>
<label htmlFor="start">{locale("From")}</label>
<input name="start" type="time" size="4" defaultValue={this.state.start}/>
</div>
<div>
<label htmlFor="end">{locale("Until")}</label>
<input name="end" type="time" size="4" defaultValue={this.state.end}/>
</div>
</div>
</div>

<div className="field">
<div>
<label htmlFor="count">{locale("Count")}</label>
<input name="count" type="number" size="4"/>
)}
{!this.props.partlyAvailable && this.props.quota > 1 && (
<div className="field">
<div>
<label htmlFor="count">{locale("Count")}</label>
<input name="count" type="number" size="4" defaultValue={this.state.quota}/>
</div>
</div>
</div>
)}

<button className="button">{locale("Okay")}</button>
</form>
);
}
});

ReservationForm.render = function(element) {
React.render(<ReservationForm />, element);
ReservationForm.render = function(element, event) {
React.render(
<ReservationForm
partlyAvailable={event.partlyAvailable}
quota={event.quota}
quotaLeft={event.quotaLeft}
start={event.start}
end={event.end}
wholeDay={event.wholeDay}
/>,
element);
};
17 changes: 15 additions & 2 deletions onegov/town/utils.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,15 +198,24 @@ def event_time(self):
self.allocation.display_end()
)

@property
def quota(self):
return self.allocation.quota

@property
def quota_left(self):
return int(self.quota * self.availability / 100)

@property
def event_title(self):
if self.allocation.partly_available:
available = self.translate(_("${percent}% Available", mapping={
'percent': int(self.availability)
}))
else:
quota = self.allocation.quota
quota_left = int(quota * self.availability / 100)

quota = self.quota
quota_left = self.quota_left

if quota == 1:
if quota_left:
Expand Down Expand Up @@ -297,6 +306,10 @@ def as_dict(self):
'start': self.event_start,
'end': self.event_end,
'title': self.event_title,
'wholeDay': self.allocation.whole_day,
'partlyAvailable': self.allocation.partly_available,
'quota': self.allocation.quota,
'quotaLeft': self.allocation.quota_left,
'className': self.event_class,
'partitions': self.allocation.availability_partitions(),
'actions': [
Expand Down

0 comments on commit bb6723b

Please sign in to comment.