Added tooltip box

app/views/customer_appointments/_calendar_event.html.erb

@@ -1,35 +1,69 @@
-<%= tag.div class: [
-      'calendar-appointment',
-      'tooltip'
-    ] do %>
+<%
+day_hours  = 8.0
+day_height = 120
 
-    <% if appointment.user %>
-      <%= avatar(
-            appointment.user,
-            size: 20,
-            class: 'appointment-avatar'
-          ) %>
+hours  = appointment.estimated_hours.to_f
+height = [(hours / day_hours * day_height).round, 26].max
+%>
+
+<%= tag.div class: ['appointment-block', 'tooltip'],
+            style: "height: #{height}px;" do %>
+
+  <div class="appointment-card">
+
+    <div class="appointment-header">
+
+      <% if appointment.user %>
+        <%= avatar(
+              appointment.user,
+              size: 20,
+              class: "appointment-avatar"
+            ) %>
+      <% end %>
+
+      <div class="appointment-title">
+        <%= link_to(
+              appointment.subject,
+              customer_appointment_path(appointment),
+              class: "appointment-link"
+            ) %>
+      </div>
+
+    </div>
+
+    <% if appointment.customer %>
+      <div class="appointment-customer">
+        <%= appointment.customer.name %>
+      </div>
     <% end %>
 
-  <span >
-    <%= link_to appointment.subject,
-        customer_appointment_path(appointment) %>
-  </span>
+    <% if appointment.vehicle %>
+      <div class="appointment-vehicle">
+        <%= appointment.vehicle.name %>
+      </div>
+    <% end %>
+
+    <div class="appointment-footer">
+
+      <span class="appointment-hours">
+        <%= number_with_precision(hours, precision: 1) %> hrs
+      </span>
+
+      <% if appointment.user %>
+        <span class="appointment-tech">
+          <%= appointment.user.firstname %>
+        </span>
+      <% end %>
+
+    </div>
+
+  </div>
 
   <span class="tip">
-    <strong><%= appointment.subject %></strong><br>
-
-    Customer:
-    <%= appointment.customer&.name %><br>
-
-    Vehicle:
-    <%= appointment.vehicle&.name %><br>
-
-    Technician:
-    <%= appointment.user&.name %><br>
-
-    Hours:
-    <%= appointment.estimated_hours %>
+    <%= render(
+          partial: "customer_appointments/tooltip",
+          locals: { appointment: appointment }
+        ) %>
   </span>
 
 <% end %>

app/views/customer_appointments/_tooltip.html.erb

@@ -0,0 +1,86 @@
+<h3>
+  <%= link_to appointment.subject,
+              customer_appointment_path(appointment) %>
+</h3>
+
+<p class="subtitle">
+  <strong><%= appointment.status %></strong>
+</p>
+
+<table class="attributes">
+
+  <% if appointment.customer %>
+    <tr>
+      <th><%= l(:label_customer) rescue "Customer" %></th>
+      <td><%= link_to appointment.customer %></td>
+    </tr>
+  <% end %>
+
+  <% if appointment.vehicle %>
+    <tr>
+      <th>Vehicle</th>
+      <td><%= link_to appointment.vehicle %></td>
+    </tr>
+  <% end %>
+
+  <% if appointment.user %>
+    <tr>
+      <th>Technician</th>
+      <td>
+        <%= avatar(appointment.user, size: 16) %>
+        <%= appointment.user.name %>
+      </td>
+    </tr>
+  <% end %>
+
+  <% if appointment.project %>
+    <tr>
+      <th><%= l(:label_project) %></th>
+      <td><%= link_to_project appointment.project %></td>
+    </tr>
+  <% end %>
+
+  <% if appointment.estimate %>
+    <tr>
+      <th>Estimate</th>
+      <td>
+        <%= link_to "##{appointment.estimate.id}",
+                    appointment.estimate %>
+      </td>
+    </tr>
+  <% end %>
+
+  <tr>
+    <th>Start</th>
+    <td><%= format_date(appointment.start_date) %></td>
+  </tr>
+
+  <tr>
+    <th>Finish</th>
+    <td><%= format_date(appointment.end_date || appointment.start_date) %></td>
+  </tr>
+
+  <tr>
+    <th>Estimated Time</th>
+    <td><%= number_with_precision(appointment.estimated_hours, precision: 1) %> hrs</td>
+  </tr>
+
+</table>
+
+<% if appointment.description.present? %>
+
+  <hr>
+
+  <div class="description">
+    <%= textilizable(appointment.description) rescue simple_format(h(appointment.description)) %>
+  </div>
+
+<% end %>
+
+<hr>
+
+<p class="buttons">
+  <%= link_to "Open Appointment",
+              customer_appointment_path(appointment),
+              class: "icon icon-edit" %>
+</p>

app/views/customer_appointments/show.html.erb

@@ -9,7 +9,7 @@
 
 <tr>
 <th><%= t(:vehicle) %></th>
-<td><%= link_to@appointment&.vehicle %></td>
+<td><%= link_to @appointment&.vehicle unless @appointment&.vehicle.nil? %></td>
 </tr>
 
 <tr>