senaduka/old-zsterminator
1
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

12 Added notes and colours to customers

Browse Source
This commit is contained in:
Nedim Uka
2025-07-23 15:35:19 +02:00
parent 84d43f0dac
commit 541b181c87
17 changed files with 362 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/views/customers/_customer.html.erb
View File

@@ -19,6 +19,14 @@
<%= customer.notes %>
</p>
<p class="my-5">
<strong class="block font-medium mb-1">Color:</strong>
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
style="background-color: <%= customer.color_hex %>20; color: <%= customer.color_hex %>; border: 1px solid <%= customer.color_hex %>;">
<%= customer.color_emoji %> <%= (customer.color || 'green').humanize %>
</span>
</p>
<p class="my-5">
<strong class="block font-medium mb-1">Email:</strong>
<%= customer.email %>

12
app/views/customers/_form.html.erb
View File

@@ -31,6 +31,18 @@
<%= form.text_area :notes, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
</div>
<div class="my-5">
<%= form.label :color %>
<%= form.select :color,
options_for_select([
['Green', 'green'],
['Yellow', 'yellow'],
['Red', 'red']
], customer.color),
{ prompt: 'Select color' },
{ class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" } %>
</div>
<div class="my-5">
<%= form.label :email %>
<%= form.text_field :email, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>

111
app/views/layouts/calendar.html.erb
View File

@@ -11,7 +11,6 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<style>
html, body {
@@ -51,6 +50,114 @@
padding: 5px;
border-radius: 5px;
}
/* ToastUI Calendar Event Styling */
.toastui-calendar-events {
margin-right: 8px;
text-wrap: auto;
}
.toastui-calendar-event-time {
cursor: pointer;
transition: all 0.2s ease;
min-width: 50px !important;
}
.toastui-calendar-event-time:hover {
z-index: 1000 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
border-radius: 3px !important;
}
.toastui-calendar-event-time-content {
padding: 2px 4px !important;
text-wrap: auto;
word-wrap: break-word;
line-height: 1.1 !important;
overflow: hidden;
}
.toastui-calendar-template-time {
font-size: 10px !important;
line-height: 1.1 !important;
}
.toastui-calendar-template-time strong {
font-size: 10px !important;
font-weight: 600;
display: block;
margin-bottom: 1px;
}
.toastui-calendar-template-time span {
font-size: 9px !important;
line-height: 1.0 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
/* Hover tooltip effect */
.toastui-calendar-event-time:hover::after {
content: "Click to edit reservation";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 11px;
white-space: nowrap;
z-index: 2000;
pointer-events: none;
opacity: 0;
animation: tooltipFadeIn 0.3s ease forwards;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.toastui-calendar-event-time:hover::before {
content: '';
position: absolute;
bottom: calc(100% - 6px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: rgba(0, 0, 0, 0.9);
z-index: 2000;
pointer-events: none;
opacity: 0;
animation: tooltipFadeIn 0.3s ease forwards;
}
@keyframes tooltipFadeIn {
to {
opacity: 1;
}
}
/* Improve visibility for small events */
.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time strong,
.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time strong {
display: none; /* Hide time for very small events */
}
.toastui-calendar-event-time[style*="height: calc(1%"] .toastui-calendar-template-time span,
.toastui-calendar-event-time[style*="height: calc(2%"] .toastui-calendar-template-time span {
font-size: 8px !important;
line-height: 1.0 !important;
}
/* Better text contrast */
.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] {
color: white !important;
}
.toastui-calendar-event-time[style*="background-color: rgb(66, 109, 215)"] .toastui-calendar-template-time {
color: white !important;
}
</style>
</head>
@@ -60,4 +167,4 @@
</main>
</body>
</html>
want
want

5
app/views/reservations/_form.html.erb
View File

@@ -28,14 +28,13 @@
} %>
</div>
<div data-customer-search-target="newCustomerFields" class="">
<div class="my-5">
<%= form.label :phone_number, t('reservations.form.phone_number') %>
<%= form.telephone_field :customer_original_phone,
class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
data: { customer_search_target: "phoneField" } %>
</div>
<div data-customer-search-target="newCustomerFields" class="hidden">
<div class="my-5">
<%= form.label :first_name, t('reservations.form.first_name') %>
<%= form.text_field :customer_first_name,
@@ -56,6 +55,8 @@
class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full",
data: { customer_search_target: "birthYearField" } %>
</div>
</div>
<div class="my-5">

2
app/views/reservations/index.html.erb
View File

@@ -65,4 +65,4 @@
%>
</div>
</div>
</div>
</div>