Permalink
Browse files

Add event page

  • Loading branch information...
1 parent e09c6ba commit 0376690395beb4d67dad6bf01b182222b3209662 @nickstenning nickstenning committed Jun 10, 2012
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -1,4 +1,103 @@
+//=require strftime
+
$(document).ready(function() {
$('.event-start-date input').datetimepicker();
$('.event-end-date input').datetimepicker();
+
+ var url = 'http://localhost:5000/event/867cf935-7b70-428c-8f83-ccc1fb91f157/attendance?start=2012-05-09T00:00:00&callback=?';
+
+ var data = JSON.parse($('.attendance').text());
+ var att = data.attendance;
+
+ att.forEach(function(d) {
+ d[0] = new Date(d[0]);
+ });
+
+ var dates = att.map(function (d) { return d[0]; });
+
+ var m = [20, 40, 20, 40],
+ w = 1020 - m[1] - m[3],
+ h = 390 - m[0] - m[2];
+
+ var x = d3.time.scale()
+ .domain([dates[0], dates.slice(-1)[0]])
+ .range([0, w]);
+
+ var y = d3.scale.linear()
+ .domain([0, d3.max(att, function (d) { return d[1]; })])
+ .range([h, 0]);
+
+ var xAxis = d3.svg.axis().scale(x).tickSize(-h);
+ yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");
+
+ var svg = d3.select("#graph").append("svg:svg")
+ .attr("width", w + m[1] + m[3])
+ .attr("height", h + m[0] + m[2])
+ .append("svg:g")
+ .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+ svg.append("g").selectAll("rect")
+ .data(att)
+ .enter().append("rect")
+ .attr("class", "foreground bar")
+ .attr("x", function (d) { return x(new Date(d[0])) + 2; })
+ .attr("y", function (d) { return y(d[1]); })
+ .attr("width", w / att.length - 4)
+ .attr("height", function (d) { return h - y(d[1]); })
+
+ // Add the x-axis.
+ svg.append("svg:g")
+ .attr("class", "x axis")
+ .attr("transform", "translate(0," + h + ")")
+ .call(xAxis);
+
+ // Add the y-axis.
+ svg.append("svg:g")
+ .attr("class", "y axis")
+ .attr("transform", "translate(" + w + ",0)")
+ .call(yAxis);
+
+ // Resizing support
+ function resizePath(d) {
+ var e = +(d == "e"),
+ x = e ? 1 : -1,
+ y = h / 3;
+ return "M" + (.5 * x) + "," + y
+ + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6)
+ + "V" + (2 * y - 6)
+ + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y)
+ + "Z"
+ + "M" + (2.5 * x) + "," + (y + 8)
+ + "V" + (2 * y - 8)
+ + "M" + (4.5 * x) + "," + (y + 8)
+ + "V" + (2 * y - 8);
+ }
+
+ var brush = d3.svg.brush()
+ .x(x)
+ .on("brush", function () {
+ var g = d3.select(this.parentNode),
+ extent = brush.extent();
+
+ g.select(".brush")
+ .call(brush.extent(extent = extent.map(d3.time.hour.round)))
+ })
+ .on("brushend", function () {
+ var e = brush.extent(),
+ fmt = "%m/%d/%Y %H:%M";
+ jQuery('#start_date').val(e[0].strftime(fmt));
+ jQuery('#end_date').val(e[1].strftime(fmt));
+ });
+
+ var gBrush = svg.append("svg:g")
+ .attr("class", "brush")
+ .call(brush)
+
+ gBrush.selectAll("rect")
+ .attr("height", h)
+
+ gBrush.selectAll(".resize")
+ .append("path")
+ .attr("d", resizePath);
+
});
@@ -15,36 +15,48 @@
*/
body {
+ font-size: 62.5%;
+ line-height: 1.5em;
+ font-family: Helvetica Neue, Helvetica, sans-serif;
margin: 0;
}
+p {
+ margin: 10px;
+ font-size: 14px;
+ font-size: 1.4rem;
+}
+
input, textarea {
position: absolute;
height: 42px;
border: none;
background: #fff;
}
+#create-event-hack input[type=submit], #event-hack input[type=submit] {
+ text-indent: -9999em;
+ background: transparent;
+ cursor: pointer;
+}
+
#create-event-hack {
height: 1396px;
width: 1020px;
background: url(event_create.jpg) no-repeat left top;
}
-#create-event-hack input, #create-event-hack textarea {
+#create-event-hack input, #event-hack input, #create-event-hack textarea {
font-size: 36px;
left: 310px;
width: 395px;
}
#create-event-hack input[type=submit] {
- text-indent: -9999em;
width: 190px;
height: 64px;
- background: transparent;
left: 411px;
top: 1178px;
- cursor: pointer;
}
#create-event-hack #event_name {
@@ -53,12 +65,12 @@ input, textarea {
#create-event-hack #event_start_date {
top: 661px;
- width: 350px;
+ width: 345px;
}
#create-event-hack #event_end_date {
top: 766px;
- width: 350px;
+ width: 345px;
}
#create-event-hack #event_location {
@@ -71,6 +83,82 @@ input, textarea {
font-size: 14px;
}
+#event-hack {
+ height: 1020px;
+ width: 1020px;
+ background: url(event.jpg) no-repeat left top;
+}
+
+#event-hack .location, #event-hack .title, #event-hack .description {
+ display: block;
+ position: absolute;
+}
+
+
+#event-hack .title {
+ color: #fff;
+ font-weight: bold;
+ font-size: 40px;
+ background: rgb(53, 53, 53);
+ height: 25px;
+ padding: 15px 0;
+ top: 12px;
+ left: 47px;
+ width: 240px;
+}
+
+#event-hack .location {
+ font-weight: bold;
+ font-size: 36px;
+ background: #fff;
+ height: 25px;
+ padding: 10px 0 0 0;
+ top: 522px;
+ left: 65px;
+ width: 520px;
+}
+
+#event-hack .description {
+ font-size: 16px;
+ background: #fff;
+ height: 200px;
+ padding: 5px 0;
+ top: 592px;
+ left: 63px;
+ width: 520px;
+}
+
+#event-hack #graph {
+ position: absolute;
+ top: 72px;
+}
+
+#event-hack #start_date, #event-hack #end_date {
+ left: 682px;
+ height: 30px;
+ width: 270px;
+ font-size: 24px;
+}
+
+#event-hack #start_date {
+ top: 641px;
+}
+
+#event-hack #end_date {
+ top: 733px;
+}
+
+#event-hack input[type=submit] {
+ width: 190px;
+ height: 64px;
+ left: 746px;
+ top: 806px;
+}
+
+.hidden {
+ display: none;
+}
+
.ui-datepicker {
font-size: 12px !important;
}
@@ -0,0 +1,34 @@
+
+.foreground.bar {
+ fill: steelblue;
+}
+
+.axis line, .axis path {
+ fill: none;
+ stroke: #000;
+ shape-rendering: crispEdges;
+}
+
+.axis line {
+ stroke: #aaa;
+}
+
+.axis line.minor {
+ stroke: #ccc;
+}
+
+.x.axis path {
+ stroke: none;
+}
+
+.brush .extent {
+ stroke: #fff;
+ fill: #000;
+ fill-opacity: .125;
+ shape-rendering: crispEdges;
+}
+
+.brush .resize path {
+ fill: #eee;
+ stroke: #666;
+}
No changes.
@@ -14,5 +14,6 @@ def create
def show
@event = Event.find params[:id]
+ @attendance = Api::CrowdshiftService.new.get_attendance(@event.event_api_id, @event.start_date, @event.end_date)
end
end
@@ -1,8 +1,23 @@
-.title
- = @event.name
-.description
- = @event.description
-.time
- = "From #{@event.start_date} to #{@event.end_date}"
-
-= link_to "Create a commitment", new_event_commitment_path(@event.id)
+#event-hack
+
+ #graph
+
+ .title
+ = @event.name
+ .location
+ = @event.location
+ .description
+ = @event.description
+
+
+ #new-commitment
+ = form_tag event_commitments_path(@event), :method => :post do
+ .commitment-start-date
+ = text_field_tag :start_date
+ .commitment-end-date
+ = text_field_tag :end_date
+
+ = submit_tag "Create"
+
+ .attendance.hidden
+ = @attendance.to_json
@@ -5,6 +5,9 @@
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
+
+ <script src="https://raw.github.com/csnover/js-iso8601/master/iso8601.min.js"></script>
+ <script src="http://d3js.org/d3.v2.js"></script>
</head>
<body>
@@ -16,8 +16,10 @@ def create_commitment(event_api_id, start_date, end_date)
self.class.post("/event/#{event_api_id}/commitment", options).parsed_response
end
- def get_attendance(event_api_id)
- options = { :headers => { 'authorization' => "bearer 30a17a7e-faeb-46dd-a54c-94f36b9e1464"} }
+ def get_attendance(event_api_id, start_date, end_date)
+ options = { :headers => { 'authorization' => "bearer 30a17a7e-faeb-46dd-a54c-94f36b9e1464"},
+ :query => { 'start' => start_date.utc.strftime("%Y-%m-%dT%H:%M:%S"),
+ 'end' => end_date.utc.strftime("%Y-%m-%dT%H:%M:%S") }}
self.class.get("/event/#{event_api_id}/attendance", options).parsed_response
end
Oops, something went wrong.

0 comments on commit 0376690

Please sign in to comment.