Merge pull request #393 from YaleSTC/335_shift_schedule_tooltips

Tooltips for shift everything. Closes #335, #253, #273 and #144.

app/assets/javascripts/tooltip.js

@@ -1,22 +1,7 @@
 $(document).ready(function(){
-  $("div.timeslots li.click_to_add_new").click(function(e){
-    e.preventDefault();
-    window.location.href = newTimeSlotPath;
-  });
-
+  initialize("body");
 });
 
-
-
-
-
-
-
-
-
-
-initialize("body");
-
 function initialize(element) {
 
   $(element+' td.click_to_show').click(function (e) {
@@ -179,9 +164,8 @@ function popup_new_timeslot(parent_element, e, raw_element){
   var relX = e.pageX - getXOffset(raw_element);
   var widthPercentage = relX / parent_element.width();
   var date = params[1];
-
   loading_tooltip(e.pageX, e.pageY);
-  $.ajax({data:"calendar="+calendar+"&location_id="+locationID+"&date="+date+"&xPercentage="+widthPercentage, dataType:'script', type:'get', url:newTimeSlotPath});
+  $.ajax({data:"location_id="+locationID+"&date="+date+"&xPercentage="+widthPercentage, dataType:'script', type:'get', url:newTimeSlotPath});
 }
 
 function popup_new_shift(parent_element, e, raw_element){

app/assets/stylesheets/_timeline.css.scss

@@ -189,20 +189,20 @@ div.center_content {
 img.right_arrow { position:absolute; right:0; }
 img.left_arrow {  position:absolute; left:0;  }
 
-// div#tooltip{
-// 	text-align: left;
-// 	z-index: 1000;
-// 	display: block;
-// 	background: #DDDDFF;
-// 	color: #000;
-// 	padding: 5px;
-// 	padding-top:15px;
-// 	min-width: 200px;
-// 	font-style: normal;
-// 	font-weight: normal;
-//     font-family: "Trebuchet MS", Helvetica, sans-serif;
-// 	font-size: 12px;
-// }
+div#tooltip{
+	text-align: left;
+	z-index: 1000;
+	display: block;
+	background: #DDDDFF;
+	color: #000;
+	padding: 5px;
+	padding-top:15px;
+	min-width: 200px;
+	font-style: normal;
+	font-weight: normal;
+    font-family: "Trebuchet MS", Helvetica, sans-serif;
+	font-size: 12px;
+}
 
 div#tooltip strong{
 	border: 0;

app/helpers/shifts_helper.rb

@@ -351,7 +351,7 @@ def calendar_day_preprocessing(day)
 
     @timeslot_rows = 0 #counter
 
-    @row_height = 24 #pixels - this could be user-configurable
+    @row_height = 48 #pixels - this could be user-configurable
     @divider_height = 3 #pixels - this could be user-configurable
     @table_height = rowcount
     @table_pixels = @row_height * rowcount + rowcount+1

app/models/shift.rb

@@ -107,12 +107,12 @@ def self.delete_part_of_shift(shift, start_of_delete, end_of_delete)
   def self.mass_delete_with_dependencies(shifts_to_erase)
     array_of_shift_arrays = shifts_to_erase.batch(450)
     array_of_shift_arrays.each do |shifts|
-      subs_to_erase = SubRequest.where(shifts.collect{|shift| "(shift_id = #{shift})"}.join(" OR "))
+      subs_to_erase = SubRequest.where(shifts.collect{|shift| "(shift_id = #{shift.id})"}.join(" OR "))
       array_of_sub_arrays = subs_to_erase.batch(450)
       array_of_sub_arrays.each do |subs|
-        SubRequest.delete_all([subs.collect{|sub| "(id = #{sub})"}.join(" OR ")])
+        SubRequest.delete_all([subs.collect{|sub| "(id = #{sub.id})"}.join(" OR ")])
       end
-      Shift.delete_all([shifts.collect{|shift| "(id = #{shift})"}.join(" OR ")])
+      Shift.delete_all([shifts.collect{|shift| "(id = #{shift.id})"}.join(" OR ")])
     end
   end
 
@@ -135,11 +135,11 @@ def self.make_future(end_date, cal_id, r_e_id, days, loc_id, start_time, end_tim
       seed_end_time = seed_start_time+diff
       while seed_end_time <= (end_date + 1.day)
         if active
-          inner_test.push "(user_id = #{user_id} AND active = #{true} AND department_id = #{department_id} AND start <= #{seed_end_time.utc} AND end >= #{seed_start_time.utc})"
+          inner_test.push "(user_id = #{user_id} AND active = #{true} AND department_id = #{department_id} AND start <= '#{seed_end_time.utc}' AND end >= '#{seed_start_time.utc}')"
         else
-          inner_test.push "(user_id  = #{user_id} AND calendar_id = #{cal_id} AND department_id = #{department_id} AND start <= #{seed_end_time.utc} AND end >= #{seed_start_time.utc})"
+          inner_test.push "(user_id  = #{user_id} AND calendar_id = #{cal_id} AND department_id = #{department_id} AND start <= '#{seed_end_time.utc}' AND end >= '#{seed_start_time.utc}')"
         end
-        inner_make.push "#{loc_id}, #{cal_id}, #{r_e_id}, #{seed_start_time.utc}, #{seed_end_time.utc}, #{Time.now.utc}, #{Time.now.utc}, #{user_id}, #{department_id}, #{active}"
+        inner_make.push "#{loc_id}, #{cal_id}, #{r_e_id}, '#{seed_start_time.utc}', '#{seed_end_time.utc}', '#{Time.now.utc}', '#{Time.now.utc}', #{user_id}, #{department_id}, #{active}"
         #Once the array becomes big enough that the sql call will insert 450 rows, start over w/ a new array
         #without this bit, sqlite freaks out if you are inserting a larger number of rows. Might need to be changed
         #for other databases (it can probably be higher for other ones I think, which would result in faster execution)

app/views/calendars/schedule/_location.html.erb

@@ -1,4 +1,4 @@
-<div class="day" style="height: <%= @table_pixels / (@table_height) * (@location_rows[location].length) + @location_rows[location].length - 1 %>px;">
+<div class="day" style="height: <%= (@table_pixels / (@table_height)) * @location_rows[location].length %>px;">
 <%# Why is the div on the next line there? where does it appear?
     You can't click on the box in this column to add anything     %>
   <div class="center_container click_to_add_new" id="location<%=location.id%>_<%=day%>_label">

app/views/shifts/create.js.erb

@@ -1,8 +1,13 @@
 $('#tooltip').remove();
-$('#<%= @shift.start.strftime("%Y-%m-%d") %>').html('<%= escape_javascript render partial: (params[:calendar] ? "calendars/schedule/day" : "shifts/schedule/day"), object: @shift.start.to_date  %>')
+$('#<%= @shift.start.strftime("%Y-%m-%d") %>').html(
+	'<%= escape_javascript render partial: 
+	(params[:calendar] ? "calendars/schedule/day" : "shifts/schedule/day"), 
+	object: @shift.start.to_date %>');
 
 // TODO: Figure out how to make this work in jQuery
 // page["#shift#{@shift.id}"].visual_effect :highlight
+$('#shift<%= @shift.id %>').effect('highlight', 1100);
 initialize('body');
 
 // display alert 
+// alert("shift created");

app/views/shifts/show.html.erb

@@ -21,7 +21,7 @@
     <%= link_to "View report", shift_report_path(@shift) %>
   <% elsif current_user==@shift.user %>
     <p>
-    <%= link_to "Request a sub for this shift", new_shift_sub_path(@shift) %>
+    <%= link_to "Request a sub for this shift", new_shift_sub_request_path(@shift) %>
     </p>
 	<% if within_sign_in_window?(@shift) %>
 	<p>

app/views/shifts/show.js.erb

@@ -1,3 +1,3 @@
 $('#tooltip').html('<%= escape_javascript render partial: "shifts/tooltips/show", object: @shift %>');
 
-// page.replace_html "tooltip", partial: "shifts/tooltips/show", object: @shift
+// page.replace_html "tooltip", partial: "shifts/tooltips/show", object: @shift

app/views/shifts/tooltips/_new.html.erb

@@ -12,17 +12,16 @@
 	  <%= form_for @shift, remote: true do |f| %>
 		<%= f.error_messages %>
 		  <%= render partial: 'shifts/form', locals: {f: f} %>
-    <p><%= submit_to_remote "add_button", "Create New", url: { action: 'create', calendar: params[:calendar] } %></p>
-
+    	<p><%= submit_tag "Create New", url: { action: 'create', calendar: params[:calendar] } %></p>
 	  <% end %>
 	</div>
 
 	<% if current_user.is_admin_of?(@department) %>
 	  <div class="toggle_me" style="display:none">
-		<%= form_for(@repeating_event = RepeatingEvent.new, remote: true) do |f| %>
+		<%= form_for(@repeating_event = RepeatingEvent.new) do |f| %>
 		  <%= render partial: 'shifts/form_repeating', locals: {f: f, shift_start: params[:date].to_date.midnight, shift_end: params[:date].to_date.midnight } %>
 		  <%= hidden_field_tag 'rerender_date', params[:date] %>
-		  <p><%= submit_to_remote "add_button", "Create New Repeating Event", url: { controller: 'repeating_events', action: 'create', calendar: params[:calendar] }, loading: "$(this).val('creating...'); $(this).attr('disabled', 'true')" %></p>
+		  <p><%= submit_tag "Create New Repeating Event", url: { controller: 'repeating_events', action: 'create', calendar: params[:calendar] }, loading: "$(this).val('creating...'); $(this).attr('disabled', 'true')" %></p>
 		<% end %>
 	  </div>
 	<% end %>

app/views/shifts/tooltips/_repeating_destroy.html.erb

@@ -0,0 +1,4 @@
+<p>This shift is part of a repeating event.<br>What do you wish to destroy?</p>
+<%= button_to "Just this shift", {controller: 'shifts', action: 'destroy', id: @shift.id, calendar: params[:calendar]}, data:{confirm: 'Are you sure?'}, method: :delete %><br />
+<%= button_to "This and all future shifts", {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], delete_after_date: @shift.start}, data:{confirm: 'Are you sure?'}, method: :delete %><br />
+<%= button_to "All events in this series", {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], rerender_date: @shift.start}, data:{confirm: 'Are you sure?'}, method: :delete %>

app/views/shifts/tooltips/_show.html.erb

@@ -3,10 +3,7 @@
 <% if (current_user.is_admin_of?(current_department) or ( current_user == @shift.user and @shift.calendar.public? and [email protected]? )) and @shift.scheduled? %>
   <% if params[:delete_options] and @shift.repeating_event %>
     <div id="repeating_event_delete_options">
-      <p>This shift is part of a repeating event.<br>What do you wish to destroy?</p>
-      <%= button_to_remote "Just this shift", {url: {controller: 'shifts', action: 'destroy', id: @shift.id, calendar: params[:calendar]}, confirm: 'Are you sure?', method: :delete} %><br />
-      <%= button_to_remote "This and all future shifts", {url: {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], delete_after_date: @shift.start}, confirm: 'Are you sure?', method: :delete} %><br />
-      <%= button_to_remote "All events in this series", {url: {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], rerender_date: @shift.start}, confirm: 'Are you sure?', method: :delete} %>
+      <%= render partial: 'shifts/tooltips/repeating_destroy' %>
     </div>
   <% else%>
     <% if @shift.report %>
@@ -41,9 +38,7 @@
           <%= link_to_function "Destroy this shift", "$('#repeating_event_delete_options').toggle()" %>
           <div id="repeating_event_delete_options" style="display:none">
             <p>This shift is part of a repeating event.<br>What do you wish to destroy?</p>
-            <%= button_to_remote "Just this shift", {url: {controller: 'shifts', action: 'destroy', id: @shift.id, calendar: params[:calendar]}, confirm: 'Are you sure?', method: :delete} %><br />
-            <%= button_to_remote "This and all future shifts", {url: {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], delete_after_date: @shift.start}, confirm: 'Are you sure?', method: :delete} %><br />
-            <%= button_to_remote "All events in this series", {url: {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], rerender_date: @shift.start}, confirm: 'Are you sure?', method: :delete} %>
+            <%= render partial: 'shifts/tooltips/repeating_destroy' %>
           </div>
         <% end %>
       <% end %>
@@ -60,7 +55,7 @@
       <div class="toggle_me">
         <%= form_for @shift, remote: true do |f| %>
     		  <%= render partial: 'shifts/form', locals: {f: f} %>
-          <p><%= submit_to_remote "edit_button", "Save Changes", url: { controller: 'shifts', action: 'update', calendar: params[:calendar] } %></p>
+          <p><%= submit_tag "Save Changes", url: { controller: 'shifts', action: 'update', calendar: params[:calendar] } %></p>
         <% end %>
 
         <% if current_user == @shift.user and !@shift.has_passed? %>
@@ -87,19 +82,16 @@
         <% else %>
           <%= link_to_function "Destroy this shift", "$('#repeating_event_delete_options').toggle()" %>
           <div id="repeating_event_delete_options" style="display:none">
-            <p>This shift is part of a repeating event.<br>What do you wish to destroy?</p>
-            <%= button_to_remote "Just this shift", {url: {controller: 'shifts', action: 'destroy', id: @shift.id, calendar: params[:calendar]}, confirm: 'Are you sure?', method: :delete} %><br />
-            <%= button_to_remote "This and all future shifts", {url: {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], delete_after_date: @shift.start}, confirm: 'Are you sure?', method: :delete} %><br />
-            <%= button_to_remote "All events in this series", {url: {controller: 'repeating_events', action: 'destroy', id: @shift.repeating_event.id, calendar: params[:calendar], rerender_date: @shift.start}, confirm: 'Are you sure?', method: :delete} %>
+            <%= render partial: 'shifts/tooltips/repeating_destroy' %>
           </div>
         <% end %>
       </div>
       <% if current_user.is_admin_of?(@department) and @shift.repeating_event %>
         <div class="toggle_me" style="display:none">
-          <%= form_for (@repeating_event = @shift.repeating_event), remote: true do |f| %>
+          <%= form_for (@repeating_event = @shift.repeating_event) do |f| %>
             <%= render partial: 'shifts/form_repeating', locals: {f: f, shift_start: @shift.start, shift_end: @shift.end} %>
             <%= hidden_field_tag 'rerender_date', @shift.start.to_date.to_s %>
-            <p style="clear:both"><%= submit_to_remote "add_button", "Update Repeating Event", url: { controller: 'repeating_events', action: 'update', id: @repeating_event.id, calendar: params[:calendar] } %></p>
+            <p style="clear:both"><%= submit_tag "Update Repeating Event", url: { controller: 'repeating_events', action: 'update', id: @repeating_event.id, calendar: params[:calendar] } %></p>
           <% end %>
         </div>
       <% end %>
@@ -147,8 +139,8 @@
     <% elsif current_user == @shift.user %>
       <% unless @shift.has_passed? or @shift.submitted? %>
         <% if @shift.has_sub?%>
-          <%= link_to "Edit sub request", edit_sub_request_path(@shift.sub_request) %> |
-		  <%= link_to 'Cancel Request and Sign In', sub_request_path(@sub_request, sign_in: true), method: :delete%>
+          <%= link_to "Edit sub request", edit_sub_request_path(@shift.sub_request) %> 
+		      <%= link_to 'Cancel Request and Sign In', sub_request_path(@shift.sub_request, sign_in: true), method: :delete%>
         <% else%>
           <%= link_to "Request a sub for this shift", new_shift_sub_request_path(@shift) %>
         <% end %>

app/views/shifts/update.js.erb

@@ -1,8 +1,15 @@
-$('#shift.start.strftime("%Y-%m-%d")').html('<%= escape_javascript render partial: (params[:calendar] ? "calendars/schedule/day" : "shifts/schedule/day"), object: @shift.start.to_date %>');
+$('#tooltip').remove();
+$('#<%= @shift.start.strftime("%Y-%m-%d") %>').html(
+	'<%= escape_javascript render partial: 
+	(params[:calendar] ? "calendars/schedule/day" : "shifts/schedule/day"), 
+	object: @shift.start.to_date %>');
+
+// TODO: Figure out how to make this work in jQuery
 // page["#shift#{@shift.id}"].visual_effect :highlight
-$("#tooltip").remove();
 
-initialize('##{@shift.start.strftime("%Y-%m-%d")}');
+$('#shift<%= @shift.id %>').effect('highlight', 1100);
+
+initialize('#<%= @shift.start.strftime("%Y-%m-%d") %>');
 
 // display alert
-alert("shift updated");
+//alert("shift updated");

app/views/time_slots/_time_slot_day.html.erb

@@ -1,4 +1,4 @@
 <ul id="location<%=location.id%>_<%= time_slot_day %>_timeslots" class="events" style="height: 11%;">
-  <li id="location<%=location.id%>_<%= time_slot_day %>_free_time" style="width:100%" class="click_to_add_new">
-  <%= render partial: "time_slots/time_slot", locals: {time_slot_day: time_slot_day}, collection: fetch_timeslots(time_slot_day,location) %>
+  <li id="location<%=location.id%>_<%= time_slot_day %>_free_time" style="width:100%" class="click_to_add_new_timeslot">
+  <%= render partial: "time_slots/time_slot", locals: {time_slot_day: time_slot_day}, collection: fetch_timeslots(time_slot_day,location) -%>
 </ul>

app/views/time_slots/create.js.erb

@@ -1,9 +1,6 @@
 $("#tooltip").remove()
 
 $("#location<%= @time_slot.location.id %>_<%= @time_slot_day.strftime("%Y-%m-%d") %>_timeslots").append('<%= escape_javascript render partial: "time_slots/time_slot", object: @time_slot, locals: {time_slot_day: @time_slot_day} %>');
-//TODO How to do this in jQuery
-//page["#timeslot#{@time_slot.id}"].visual_effect :highlight
+$("#timeslot<%= @time_slot.id %>").effect("highlight", 1100);
 $('#timeslot<%= @time_slot.id %>').click(function (e) {popup_edit_timeslot($(this), e); return false;});
 
-// display alert
-alert("timeslot created");

app/views/time_slots/tooltips/_new.html.erb

@@ -12,17 +12,18 @@
     <%= form_for @time_slot, remote: true do |f| %>
       <%= f.error_messages %>
       <%= render partial: 'time_slots/form', locals: {f: f}  %>
-      <p><%= submit_to_remote "add_button", "Create New", url: { action: 'create' } %></p>
+      <p><%= submit_tag  "Create New" %></p>
     <% end %>
   </div>
 
   <% if current_user.is_admin_of?(@department) %>
     <div class="toggle_me" style="display:none">
-      <%= form_for (@repeating_event = RepeatingEvent.new), remote: true do |f| %>
+      <%= form_for (@repeating_event = RepeatingEvent.new) do |f| %>
         <%= render partial: 'time_slots/form_repeating', locals: {f: f} %>
         <%= hidden_field_tag 'rerender_date', params[:date] %>
-        <p><%= submit_to_remote "add_button", "Create New Repeating Event", url: { controller: 'repeating_events', action: 'create', calendar: params[:calendar] } %></p>
+        <p><%= submit_tag "Create New Repeating Event", url: { controller: 'repeating_events', action: 'create', calendar: params[:calendar] } %></p>
       <% end %>
     </div>
   <% end %>
 
+