/
index.erb
208 lines (190 loc) · 8.84 KB
/
index.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<%
if params[:fake_errors]
@party.errors[:base] << "Someone is trying to fake an error"
@party.errors[:base] << "Middle class can't be blank"
@party.errors[:base] << "No, YOU'RE invalid"
end
%>
<div class="party-form">
<% if @party.errors.any? %>
<div class="error-messages">
<header>
<h3>Sorry, there <%= @party.errors.count > 1 ? "were some problems" : "was a problem" %> with your form.</h3>
</header>
<ul>
<% @party.errors.full_messages.each do |msg| %>
<li class="error">
<%= msg %>
</li>
<% end %>
</ul>
<footer>
<p>Please fix <%= @party.errors.count > 1 ? "them" : "it" %> and try again.</p>
</footer>
</div>
<% else %>
<header class="banner">
<div class="big-logo">
<!-- <img src="http://placehold.it/150x150"> -->
<img src="<%= asset_path "disc-200px.png" %>">
</div>
<h1>Come celebrate 31 years<br> of social awkwardness.</h1>
<p>
Against all odds and any semblance of logic, I, <a href="http://twitter.com/ddemaree">David Demaree</a>, will soon be a year older. I know, right? We should have a party or something, to reflect on this situation.
</p>
<p>
If you're interested in coming, in order to schedule and plan this party I will need some information from you. Please fill out the form below precisely as directed, then press the big, shiny submit button at the bottom.
</p>
</header>
<% end %>
<form action="<%= @party.persisted? ? url("/party/#{@party.unique_phrase}") : url("/parties") %>" method="post">
<section class="section row email-section">
<div class="span4 offset1 section-info">
<h2>Who are you, again?</h2>
<p class="section-notes">I'm kidding—<em>of course</em> I know who you are. Unfortunately the computer does not. Please type in your name and email address, and mark yourself in the books of history as "interested in this party."</p>
</div>
<div class="section-body">
<div class="field" id="party-name">
<label for="name-input">
Your name
</label>
<input type="text" id="name-input" name="party[name]" class="xlarge span7" placeholder="Gene Simmons" value="<%= @party.name %>">
<p class="help-block">This field is <strong>required</strong>. Cookies <strong>are</strong> delicious.</p>
</div>
<div class="field" id="party-email">
<label for="email-input">
Your email address
</label>
<input type="text" id="email-input" name="party[email]" class="xlarge span7" placeholder="gene@kissarmy.net" value="<%= @party.email %>">
<p class="help-block">This field is <strong>required</strong>. It <strong>must</strong> be a valid email address. The European debt crisis <strong>is</strong> complicated.</p>
</div>
<div class="field" id="party-guests">
<label for="guests">Including myself, I'm bringing</label>
<select id="guests" name="party[guests]">
<% (1..4).each do |x| %>
<option value="<%= x %>" <%= 'selected' if @party.guests == x %>><%= "#{x} #{x > 1 ? 'people' : 'person'}" %></option>
<% end %>
</select>
</div>
<!-- <p class="section-notes">An added bonus: Further spam related to this birthday will be sent <em>only</em> to the email address you provide here.</p> -->
</div>
</section>
<section class="section row days-section">
<div class="span4 offset1 section-info">
<h2>When are you free?</h2>
<p class="section-notes">Check all the times you’re available to par-tay. If you’re not sure feel free to leave a box unchecked. You can also come back and change your answers later when you're more sure.</p>
<p>You <strong>must</strong> choose at least one time.</p>
</div>
<div class="section-body">
<div class="answer-area">
<% @days.each do |day| %>
<div class="day">
<div class="day-header">
<h3>
<span class="day-of-week"><%= day.strftime("%A") %></span>
<time datetime="<%= day.strftime("%Y-%m-%d") %>"><%= day.strftime("%m/%e").gsub(/ /,"") %></time>
</h3>
<a href="#" data-bind="
html: toggleLabel('<%= datetime_key_path(day) %>'),
click: function(){
toggleAll('<%= datetime_key_path(day) %>')
}">
Toggle
</a>
</div>
<ul>
<% [6,8,10].each do |hour| %>
<li>
<label data-bind="css: { 'checked': (bits().indexOf('<%= datetime_key_path(day, hour) %>') > -1) }">
<input type="checkbox" name="party[bits][]" value="<%= datetime_key_path(day, hour) %>" id="<%= datetime_key_path(day, hour) %>" data-bind="checked: bits" <%= 'checked' if @party.bits.include?(datetime_key_path(day, hour)) %>>
<span class="label-text"><%= time_range(hour) %></span>
</label>
</li>
<% end %>
</ul>
</div>
<% end %>
</div>
</div>
</section>
<section class="section row places-section">
<div class="span4 offset1 section-info">
<h2>What sounds good?</h2>
<p class="section-notes">
Please check any of the places or activities you're interested in. There is also a write-in area at the bottom, to suggest places/activities that aren't listed. This is not <em>voting</em> so much as a way of knowing before I invite everyone to (for example) a crazy molecular cocktail bar or Michelin-starred pig-eteria whether that kind of thing will delight or disgust my friends.</p>
</div>
<div class="span10 section-body">
<div class="places-list">
<div class="checkbox-sections">
<% %w(dinner drinks activities).each do |namespace| %>
<div id="<%= namespace %>-section" class="places-list-section">
<div class="places-list-header">
<h3>
<%= namespace.capitalize %>
<a href="#" data-bind="
html: toggleLabel('<%= namespace %>'),
click: function(){
toggleAll('<%= namespace %>')
}">
Toggle
</a>
</h3>
</div>
<ul class="unstyled places">
<% @bits[namespace].to_a.shuffle.each do |key, name| %>
<li>
<label data-bind="css: { 'checked': (bits().indexOf('<%= namespace %>.<%= key %>') > -1) }">
<input name="party[bits][]" type="checkbox" value="<%= namespace %>.<%= key %>" data-bind="checked: bits" <%= 'checked' if @party.bits.include?("#{namespace}.#{key}") %>>
<span class="label-text"><%= name.gsub('&', '<span class="amp">&</span>') %></span>
</label>
</li>
<% end %>
</ul>
</div>
<% end %>
</div>
<div class="places-list-section notes-section">
<div class="places-list-header">
<h3>Other ideas?</h3>
</div>
<div class="notes">
<textarea name="party[notes]" class="span8" rows="8"><%= @party.notes %></textarea>
</div>
</div>
</div>
</div>
</section>
<div class="actions">
<h3>Please note before clicking the big, shiny submit button:</h3>
<ul>
<li>
By submitting this form, you are expressing a <em>desire</em>, perhaps even an <em>intent</em>, to attend a party, shindig, hootenanny, gathering, or whatever in celebration of David’s 31st birthday.
</li>
<li>
Which implies that you will be in Chicago, Illinois, U.S.A. on one or more of the dates/times checked above. (Sorry, we will not be offering a party conference call, and television coverage of the party will be limited.)
</li>
</ul>
<p>
<strong>Still game?</strong> Awesome. Please click the button below and I'll be in touch.
</p>
<button type="submit" class="btn primary">Save the date</button>
<!-- <button type="button" class="btn info">WTF?</button> -->
</div>
</form>
<%# All of the JSON %>
<script type="application/json" id="bits_json">
<%=
@bits.inject({}) { |hash, row|
namespace, rows = *row
hash[namespace] = rows.map {|p| "#{namespace}.#{p.first}" }
hash
}.to_json
%>
</script>
<script type="application/json" id="party_json">
<%= @party.bits.to_json %>
</script>
<script type="text/javascript">
PartyView.init();
</script>
</div>