diff --git a/app/views/customer_appointments/_calendar_event.html.erb b/app/views/customer_appointments/_calendar_event.html.erb
index 9bb564f..292620a 100644
--- a/app/views/customer_appointments/_calendar_event.html.erb
+++ b/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 %>
+
+
+
+
+
+ <% if appointment.customer %>
+
+ <%= appointment.customer.name %>
+
<% end %>
-
- <%= link_to appointment.subject,
- customer_appointment_path(appointment) %>
-
+ <% if appointment.vehicle %>
+
+ <%= appointment.vehicle.name %>
+
+ <% end %>
+
+
+
+
-
- Customer:
- <%= appointment.customer&.name %>
-
- Vehicle:
- <%= appointment.vehicle&.name %>
-
- Technician:
- <%= appointment.user&.name %>
-
- Hours:
- <%= appointment.estimated_hours %>
+ <%= render(
+ partial: "customer_appointments/tooltip",
+ locals: { appointment: appointment }
+ ) %>
<% end %>
\ No newline at end of file
diff --git a/app/views/customer_appointments/_tooltip.html.erb b/app/views/customer_appointments/_tooltip.html.erb
new file mode 100644
index 0000000..566423c
--- /dev/null
+++ b/app/views/customer_appointments/_tooltip.html.erb
@@ -0,0 +1,86 @@
+
+ <%= link_to appointment.subject,
+ customer_appointment_path(appointment) %>
+
+
+
+ <%= appointment.status %>
+
+
+
+
+ <% if appointment.customer %>
+
+ | <%= l(:label_customer) rescue "Customer" %> |
+ <%= link_to appointment.customer %> |
+
+ <% end %>
+
+ <% if appointment.vehicle %>
+
+ | Vehicle |
+ <%= link_to appointment.vehicle %> |
+
+ <% end %>
+
+ <% if appointment.user %>
+
+ | Technician |
+
+ <%= avatar(appointment.user, size: 16) %>
+ <%= appointment.user.name %>
+ |
+
+ <% end %>
+
+ <% if appointment.project %>
+
+ | <%= l(:label_project) %> |
+ <%= link_to_project appointment.project %> |
+
+ <% end %>
+
+ <% if appointment.estimate %>
+
+ | Estimate |
+
+ <%= link_to "##{appointment.estimate.id}",
+ appointment.estimate %>
+ |
+
+ <% end %>
+
+
+ | Start |
+ <%= format_date(appointment.start_date) %> |
+
+
+
+ | Finish |
+ <%= format_date(appointment.end_date || appointment.start_date) %> |
+
+
+
+ | Estimated Time |
+ <%= number_with_precision(appointment.estimated_hours, precision: 1) %> hrs |
+
+
+
+
+<% if appointment.description.present? %>
+
+
+
+
+ <%= textilizable(appointment.description) rescue simple_format(h(appointment.description)) %>
+
+
+<% end %>
+
+
+
+
+ <%= link_to "Open Appointment",
+ customer_appointment_path(appointment),
+ class: "icon icon-edit" %>
+
\ No newline at end of file
diff --git a/app/views/customer_appointments/show.html.erb b/app/views/customer_appointments/show.html.erb
index 5a94afb..657974d 100644
--- a/app/views/customer_appointments/show.html.erb
+++ b/app/views/customer_appointments/show.html.erb
@@ -9,7 +9,7 @@
| <%= t(:vehicle) %> |
-<%= link_to@appointment&.vehicle %> |
+<%= link_to @appointment&.vehicle unless @appointment&.vehicle.nil? %> |
diff --git a/assets/stylesheets/customer_appoitments.css b/assets/stylesheets/customer_appoitments.css
index 50c951c..c8ae757 100644
--- a/assets/stylesheets/customer_appoitments.css
+++ b/assets/stylesheets/customer_appoitments.css
@@ -1,20 +1,164 @@
-.customer-appointment {
- background: #4caf50;
- color: white;
- border-radius: 4px;
- padding: 2px 4px;
- margin-bottom: 2px;
+.appointment-block {
+ margin:2px;
+ padding:4px;
+
+ border-left:5px solid #3c78d8;
+ background:#edf4ff;
+ border-radius:4px;
+
+ overflow: visible;
+
+ position: relative;
+
+ font-size:11px;
+ transition:.15s;
}
-.customer-appointment a {
- color: white;
- text-decoration: none;
+/* Customer appointment tooltip */
+.appointment-block .tip {
+ width: 420px;
+ max-width: 420px;
+
+ min-height: 250px;
+
+ padding: 12px;
+
+ white-space: normal;
+ overflow: visible;
+
+ z-index: 10000;
}
-.customer-appointment.starting {
- border-left: 3px solid #1b5e20;
+.appointment-block .tip table.attributes {
+ width: 100%;
+ table-layout: fixed;
}
-.customer-appointment.ending {
- border-right: 3px solid #1b5e20;
+.appointment-block .tip th {
+ width: 120px;
+ white-space: nowrap;
+ vertical-align: top;
+ text-align: left;
+}
+
+.appointment-block .tip td {
+ white-space: normal;
+ word-break: break-word;
+}
+
+/* .appointment-block .tip th {
+ width: 90px;
+ font-weight: bold;
+}
+
+.appointment-block .tip td {
+ width: auto;
+} */
+
+.appointment-block .tip h3 {
+ margin: 0 0 8px;
+ font-size: 22px;
+}
+
+.appointment-block .tip .subtitle {
+ margin-bottom: 12px;
+}
+
+.appointment-block:hover{
+
+ transform:scale(1.02);
+
+ box-shadow:0 2px 6px rgba(0,0,0,.25);
+
+ z-index:100;
+
+ position:relative;
+}
+
+.appointment-link{
+
+ color:inherit;
+
+ text-decoration:none;
+
+ display:block;
+
+ height:100%;
+}
+
+.appointment-header{
+
+ display:flex;
+
+ align-items:center;
+
+ gap:6px;
+
+ font-weight:bold;
+}
+
+.appointment-avatar{
+
+ flex-shrink:0;
+}
+
+.appointment-title{
+
+ overflow:hidden;
+
+ text-overflow:ellipsis;
+
+ white-space:nowrap;
+}
+
+.appointment-customer{
+
+ margin-top:3px;
+
+ color:#555;
+
+ font-size:10px;
+}
+
+.appointment-footer{
+
+ margin-top:6px;
+
+ display:flex;
+
+ justify-content:space-between;
+
+ font-size:10px;
+
+ font-weight:bold;
+}
+
+.appointment-block.scheduled{
+ border-left-color:#1f77d0;
+}
+
+.appointment-block.in-progress{
+ border-left-color:#e68a00;
+ background:#fff4df;
+}
+
+.appointment-block.completed{
+ border-left-color:#2d8a34;
+ background:#edf9ee;
+}
+
+.tip table.attributes {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.tip table.attributes th {
+ text-align: left;
+ padding-right: 10px;
+ white-space: nowrap;
+ font-weight: bold;
+}
+
+.tip table.attributes td {
+ padding: 2px 0;
}
\ No newline at end of file