changes
This commit is contained in:
gsinghpal
348
fusion_authorizer_portal/views/portal_schedule.xml
Normal file
348
fusion_authorizer_portal/views/portal_schedule.xml
Normal file
@@ -0,0 +1,348 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<!-- ==================== SCHEDULE OVERVIEW PAGE ==================== -->
|
||||
|
||||
<template id="portal_schedule_page" name="My Schedule">
|
||||
<t t-call="portal.portal_layout">
|
||||
<t t-set="breadcrumbs_searchbar" t-value="True"/>
|
||||
|
||||
<div class="container py-4">
|
||||
<!-- Success/Error Messages -->
|
||||
<t t-if="request.params.get('success')">
|
||||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||||
<i class="fa fa-check-circle me-2"/><t t-out="request.params.get('success')"/>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
|
||||
<div>
|
||||
<h3 class="mb-1"><i class="fa fa-calendar-check-o me-2"/>My Schedule</h3>
|
||||
<p class="text-muted mb-0">View your appointments and book new ones</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<t t-if="share_url">
|
||||
<div class="input-group" style="max-width: 350px;">
|
||||
<input type="text" class="form-control form-control-sm" t-att-value="share_url"
|
||||
id="shareBookingUrl" readonly="readonly" style="font-size: 13px;"/>
|
||||
<button class="btn btn-outline-secondary btn-sm" type="button"
|
||||
id="btnCopyShareUrl">
|
||||
<i class="fa fa-copy" id="copyIcon"/> <span id="copyText">Copy</span>
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var btn = document.getElementById('btnCopyShareUrl');
|
||||
if (!btn) return;
|
||||
btn.addEventListener('click', function() {
|
||||
var url = document.getElementById('shareBookingUrl').value;
|
||||
navigator.clipboard.writeText(url);
|
||||
var icon = document.getElementById('copyIcon');
|
||||
var text = document.getElementById('copyText');
|
||||
icon.className = 'fa fa-check';
|
||||
text.textContent = 'Copied';
|
||||
setTimeout(function() {
|
||||
icon.className = 'fa fa-copy';
|
||||
text.textContent = 'Copy';
|
||||
}, 2000);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
</t>
|
||||
<a href="/my/schedule/book" class="btn btn-primary">
|
||||
<i class="fa fa-plus me-1"/> Book Appointment
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Appointments -->
|
||||
<div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3 pb-2 px-4"
|
||||
style="border-radius: 12px 12px 0 0;">
|
||||
<h5 class="mb-0"><i class="fa fa-sun-o me-2 text-warning"/>Today's Appointments</h5>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 pt-2">
|
||||
<t t-if="today_events">
|
||||
<div class="list-group list-group-flush">
|
||||
<t t-foreach="today_events" t-as="event">
|
||||
<div class="list-group-item px-0 py-3 border-start-0 border-end-0">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-3 text-center px-3 py-2 me-3"
|
||||
t-attf-style="background: #{portal_gradient}; min-width: 70px;">
|
||||
<div class="text-white fw-bold" style="font-size: 14px;">
|
||||
<t t-out="event.start.astimezone(user_tz).strftime('%I:%M')"/>
|
||||
</div>
|
||||
<div class="text-white" style="font-size: 10px;">
|
||||
<t t-out="event.start.astimezone(user_tz).strftime('%p')"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="mb-0"><t t-out="event.name"/></h6>
|
||||
<small class="text-muted">
|
||||
<t t-if="event.location">
|
||||
<i class="fa fa-map-marker me-1"/><t t-out="event.location"/>
|
||||
</t>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="badge bg-light text-dark">
|
||||
<t t-out="'%.0f' % (event.duration * 60)"/> min
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<p class="text-muted mb-0 py-3 text-center">
|
||||
<i class="fa fa-calendar-o me-1"/> No appointments scheduled for today.
|
||||
</p>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming Appointments -->
|
||||
<div class="card border-0 shadow-sm" style="border-radius: 12px;">
|
||||
<div class="card-header bg-white border-bottom-0 pt-3 pb-2 px-4"
|
||||
style="border-radius: 12px 12px 0 0;">
|
||||
<h5 class="mb-0"><i class="fa fa-calendar me-2 text-primary"/>Upcoming Appointments</h5>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 pt-2">
|
||||
<t t-if="upcoming_events">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="border-top:none;">Date</th>
|
||||
<th style="border-top:none;">Time</th>
|
||||
<th style="border-top:none;">Appointment</th>
|
||||
<th style="border-top:none;">Location</th>
|
||||
<th style="border-top:none;">Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<t t-foreach="upcoming_events" t-as="event">
|
||||
<tr>
|
||||
<td>
|
||||
<strong><t t-out="event.start.astimezone(user_tz).strftime('%b %d')"/></strong>
|
||||
<br/>
|
||||
<small class="text-muted">
|
||||
<t t-out="event.start.astimezone(user_tz).strftime('%A')"/>
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<t t-out="event.start.astimezone(user_tz).strftime('%I:%M %p')"/>
|
||||
</td>
|
||||
<td><t t-out="event.name"/></td>
|
||||
<td>
|
||||
<t t-if="event.location">
|
||||
<small><t t-out="event.location"/></small>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<small class="text-muted">-</small>
|
||||
</t>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-light text-dark">
|
||||
<t t-out="'%.0f' % (event.duration * 60)"/> min
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<p class="text-muted mb-0 py-3 text-center">
|
||||
<i class="fa fa-calendar-o me-1"/> No upcoming appointments.
|
||||
<a href="/my/schedule/book">Book one now</a>
|
||||
</p>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</t>
|
||||
</template>
|
||||
|
||||
<!-- ==================== BOOKING FORM ==================== -->
|
||||
|
||||
<template id="portal_schedule_book" name="Book Appointment">
|
||||
<t t-call="portal.portal_layout">
|
||||
<t t-set="breadcrumbs_searchbar" t-value="True"/>
|
||||
|
||||
<div class="container py-4" style="max-width: 800px;">
|
||||
<!-- Error Messages -->
|
||||
<t t-if="error">
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<i class="fa fa-exclamation-circle me-2"/><t t-out="error"/>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-4">
|
||||
<a href="/my/schedule" class="text-muted text-decoration-none mb-2 d-inline-block">
|
||||
<i class="fa fa-arrow-left me-1"/> Back to Schedule
|
||||
</a>
|
||||
<h3 class="mb-1"><i class="fa fa-plus-circle me-2"/>Book Appointment</h3>
|
||||
<p class="text-muted mb-0">Select a time slot and enter client details</p>
|
||||
</div>
|
||||
|
||||
<form action="/my/schedule/book/submit" method="post" id="bookingForm">
|
||||
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
|
||||
|
||||
<!-- Step 1: Appointment Type + Date/Time -->
|
||||
<div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
|
||||
<div class="card-header bg-white border-bottom pt-3 pb-2 px-4"
|
||||
style="border-radius: 12px 12px 0 0;">
|
||||
<h5 class="mb-0">
|
||||
<span class="badge rounded-pill me-2"
|
||||
t-attf-style="background: #{portal_gradient};">1</span>
|
||||
Date & Time
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4">
|
||||
<!-- Appointment Type (if multiple) -->
|
||||
<t t-if="len(appointment_types) > 1">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Appointment Type</label>
|
||||
<select name="appointment_type_id" class="form-select"
|
||||
id="appointmentTypeSelect">
|
||||
<t t-foreach="appointment_types" t-as="atype">
|
||||
<option t-att-value="atype.id"
|
||||
t-att-selected="atype.id == selected_type.id"
|
||||
t-att-data-duration="atype.appointment_duration">
|
||||
<t t-out="atype.name"/>
|
||||
(<t t-out="'%.0f' % (atype.appointment_duration * 60)"/> min)
|
||||
</option>
|
||||
</t>
|
||||
</select>
|
||||
</div>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<input type="hidden" name="appointment_type_id"
|
||||
t-att-value="selected_type.id"/>
|
||||
</t>
|
||||
|
||||
<!-- Date Picker -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Select Date</label>
|
||||
<input type="date" class="form-control" id="bookingDate"
|
||||
required="required"
|
||||
t-att-min="now.strftime('%Y-%m-%d')"/>
|
||||
</div>
|
||||
|
||||
<!-- Week Calendar Preview -->
|
||||
<div id="weekCalendarContainer" class="mb-3" style="display: none;">
|
||||
<label class="form-label fw-semibold">
|
||||
<i class="fa fa-calendar me-1"/>Your Week
|
||||
</label>
|
||||
<div id="weekCalendarLoading" class="text-center py-3" style="display: none;">
|
||||
<div class="spinner-border spinner-border-sm text-primary me-2" role="status"/>
|
||||
Loading calendar...
|
||||
</div>
|
||||
<div id="weekCalendarGrid" class="border rounded-3 overflow-hidden" style="display: none;">
|
||||
<div id="weekCalendarHeader" class="d-flex bg-light border-bottom" style="min-height: 40px;"></div>
|
||||
<div id="weekCalendarBody" class="d-flex" style="min-height: 80px;"></div>
|
||||
</div>
|
||||
<div id="weekCalendarEmpty" class="text-muted py-2 text-center" style="display: none;">
|
||||
<i class="fa fa-calendar-o me-1"/> No events this week -- your schedule is open.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available Slots -->
|
||||
<div id="slotsContainer" style="display: none;">
|
||||
<label class="form-label fw-semibold">Available Time Slots</label>
|
||||
<div id="slotsLoading" class="text-center py-3" style="display: none;">
|
||||
<div class="spinner-border spinner-border-sm text-primary me-2" role="status"/>
|
||||
Loading available slots...
|
||||
</div>
|
||||
<div id="slotsGrid" class="d-flex flex-wrap gap-2 mb-2"></div>
|
||||
<div id="noSlots" class="text-muted py-2" style="display: none;">
|
||||
<i class="fa fa-info-circle me-1"/> No available slots for this date.
|
||||
Try another date.
|
||||
</div>
|
||||
<input type="hidden" name="slot_datetime" id="slotDatetime"/>
|
||||
<input type="hidden" name="slot_duration" id="slotDuration"
|
||||
t-att-value="selected_type.appointment_duration"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Client Details -->
|
||||
<div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
|
||||
<div class="card-header bg-white border-bottom pt-3 pb-2 px-4"
|
||||
style="border-radius: 12px 12px 0 0;">
|
||||
<h5 class="mb-0">
|
||||
<span class="badge rounded-pill me-2"
|
||||
t-attf-style="background: #{portal_gradient};">2</span>
|
||||
Client Details
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Client Name <span class="text-danger">*</span></label>
|
||||
<input type="text" name="client_name" class="form-control"
|
||||
placeholder="Enter client's full name" required="required"/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label fw-semibold">Address</label>
|
||||
<input type="text" name="client_street" class="form-control mb-2"
|
||||
id="clientStreet"
|
||||
placeholder="Start typing address..."/>
|
||||
</div>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-4">
|
||||
<input type="text" name="client_city" class="form-control"
|
||||
id="clientCity" placeholder="City"/>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" name="client_province" class="form-control"
|
||||
id="clientProvince" placeholder="Province"/>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" name="client_postal" class="form-control"
|
||||
id="clientPostal" placeholder="Postal Code"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-0">
|
||||
<label class="form-label fw-semibold">Notes</label>
|
||||
<textarea name="notes" class="form-control" rows="3"
|
||||
placeholder="e.g. Equipment to bring, special instructions, reason for visit..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="/my/schedule" class="btn btn-outline-secondary">
|
||||
<i class="fa fa-arrow-left me-1"/> Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary btn-lg px-4" id="btnSubmitBooking"
|
||||
disabled="disabled">
|
||||
<i class="fa fa-calendar-check-o me-1"/> Book Appointment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Google Maps Places API -->
|
||||
<t t-if="google_maps_api_key">
|
||||
<script t-attf-src="https://maps.googleapis.com/maps/api/js?key=#{google_maps_api_key}&libraries=places&callback=initScheduleAddressAutocomplete"
|
||||
async="async" defer="defer"></script>
|
||||
</t>
|
||||
<script t-attf-src="/fusion_authorizer_portal/static/src/js/portal_schedule_booking.js"></script>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -86,7 +86,7 @@
|
||||
</div>
|
||||
<span class="text-muted"><t t-out="current_task.time_start_display"/> - <t t-out="current_task.time_end_display"/></span>
|
||||
</div>
|
||||
<p class="mb-1"><i class="fa fa-user me-1 text-muted"/><t t-out="current_task.partner_id.name or 'N/A'"/></p>
|
||||
<p class="mb-1"><i class="fa fa-user me-1 text-muted"/><t t-out="current_task.client_display_name or 'N/A'"/></p>
|
||||
<p class="mb-2 text-muted"><i class="fa fa-map-marker me-1"/><t t-out="current_task.address_display or 'No address'"/></p>
|
||||
<t t-if="current_task.description">
|
||||
<p class="mb-2 small"><t t-out="current_task.description"/></p>
|
||||
@@ -103,7 +103,7 @@
|
||||
class="tech-action-btn tech-btn-complete">
|
||||
<i class="fa fa-check"/>Complete
|
||||
</a>
|
||||
<a t-if="current_task.partner_phone" t-attf-href="tel:#{current_task.partner_phone}"
|
||||
<a t-if="current_task.client_display_phone" t-attf-href="tel:#{current_task.client_display_phone}"
|
||||
class="tech-action-btn tech-btn-call">
|
||||
<i class="fa fa-phone"/>Call
|
||||
</a>
|
||||
@@ -128,7 +128,7 @@
|
||||
<span class="ms-2 fw-bold"><t t-out="next_task.name"/></span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-1"><i class="fa fa-user me-1 text-muted"/><t t-out="next_task.partner_id.name or 'N/A'"/></p>
|
||||
<p class="mb-1"><i class="fa fa-user me-1 text-muted"/><t t-out="next_task.client_display_name or 'N/A'"/></p>
|
||||
<p class="mb-1 text-muted"><i class="fa fa-map-marker me-1"/><t t-out="next_task.address_display or 'No address'"/></p>
|
||||
<t t-if="next_task.travel_time_minutes">
|
||||
<p class="mb-2 small text-purple"><i class="fa fa-car me-1"/><t t-out="next_task.travel_time_minutes"/> min drive
|
||||
@@ -192,7 +192,7 @@
|
||||
<span t-attf-class="tech-badge tech-badge-#{task.task_type} me-1">
|
||||
<t t-out="dict(task._fields['task_type'].selection).get(task.task_type, '')"/>
|
||||
</span>
|
||||
<t t-out="task.partner_id.name or task.name"/>
|
||||
<t t-out="task.client_display_name or task.name"/>
|
||||
</div>
|
||||
<div class="tech-timeline-meta">
|
||||
<i class="fa fa-map-marker me-1"/><t t-out="task.address_city or 'No address'"/>
|
||||
@@ -525,7 +525,7 @@
|
||||
<span class="ms-1"><t t-out="task.time_start_display"/></span>
|
||||
</span>
|
||||
<span>
|
||||
<i class="fa fa-user me-1"/><t t-out="task.partner_id.name or '-'"/>
|
||||
<i class="fa fa-user me-1"/><t t-out="task.client_display_name or '-'"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-muted small mt-1">
|
||||
@@ -620,14 +620,14 @@
|
||||
<span>Navigate</span>
|
||||
</a>
|
||||
</t>
|
||||
<t t-if="task.partner_phone">
|
||||
<a t-attf-href="tel:#{task.partner_phone}" class="tech-quick-btn">
|
||||
<t t-if="task.client_display_phone">
|
||||
<a t-attf-href="tel:#{task.client_display_phone}" class="tech-quick-btn">
|
||||
<i class="fa fa-phone"/>
|
||||
<span>Call</span>
|
||||
</a>
|
||||
</t>
|
||||
<t t-if="task.partner_phone">
|
||||
<a t-attf-href="sms:#{task.partner_phone}" class="tech-quick-btn">
|
||||
<t t-if="task.client_display_phone">
|
||||
<a t-attf-href="sms:#{task.client_display_phone}" class="tech-quick-btn">
|
||||
<i class="fa fa-comment"/>
|
||||
<span>Text</span>
|
||||
</a>
|
||||
@@ -665,10 +665,10 @@
|
||||
<i class="fa fa-user"/>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fw-semibold"><t t-out="task.partner_id.name or 'No client'"/></div>
|
||||
<t t-if="task.partner_phone">
|
||||
<a t-attf-href="tel:#{task.partner_phone}" class="text-muted small text-decoration-none">
|
||||
<i class="fa fa-phone me-1"/><t t-out="task.partner_phone"/>
|
||||
<div class="fw-semibold"><t t-out="task.client_display_name or 'No client'"/></div>
|
||||
<t t-if="task.client_display_phone">
|
||||
<a t-attf-href="tel:#{task.client_display_phone}" class="text-muted small text-decoration-none">
|
||||
<i class="fa fa-phone me-1"/><t t-out="task.client_display_phone"/>
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
@@ -718,8 +718,8 @@
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- ===== POD (if required and linked to a sale order) ===== -->
|
||||
<t t-if="task.pod_required and task.sale_order_id">
|
||||
<!-- ===== POD (if required) ===== -->
|
||||
<t t-if="task.pod_required">
|
||||
<div class="tech-card mb-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="tech-card-icon bg-warning-subtle text-warning">
|
||||
@@ -727,14 +727,16 @@
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="fw-semibold">Proof of Delivery</div>
|
||||
<t t-if="task.sale_order_id.x_fc_pod_signature">
|
||||
<t t-set="has_task_pod" t-value="bool(task.pod_signature)"/>
|
||||
<t t-set="has_order_pod" t-value="bool(task.sale_order_id and task.sale_order_id.x_fc_pod_signature)"/>
|
||||
<t t-if="has_task_pod or has_order_pod">
|
||||
<span class="text-success small d-block"><i class="fa fa-check me-1"/>Signature collected</span>
|
||||
<a t-attf-href="/my/pod/#{task.sale_order_id.id}" class="btn btn-sm btn-outline-warning mt-1">
|
||||
<a t-attf-href="/my/technician/task/#{task.id}/pod" class="btn btn-sm btn-outline-warning mt-1">
|
||||
<i class="fa fa-refresh me-1"/>Re-collect Signature
|
||||
</a>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<a t-attf-href="/my/pod/#{task.sale_order_id.id}" class="btn btn-sm btn-warning mt-1">
|
||||
<a t-attf-href="/my/technician/task/#{task.id}/pod" class="btn btn-sm btn-warning mt-1">
|
||||
<i class="fa fa-pencil me-1"/>Collect Signature
|
||||
</a>
|
||||
</t>
|
||||
@@ -846,6 +848,11 @@
|
||||
t-att-data-task-id="task.id">
|
||||
<i class="fa fa-play"/>Start
|
||||
</button>
|
||||
<button class="tech-action-btn tech-btn-complete"
|
||||
onclick="techCompleteTask(this)"
|
||||
t-att-data-task-id="task.id">
|
||||
<i class="fa fa-check-circle"/>Complete
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="task.status == 'en_route'">
|
||||
<a t-if="task.get_google_maps_url()"
|
||||
@@ -860,6 +867,11 @@
|
||||
t-att-data-task-id="task.id">
|
||||
<i class="fa fa-play"/>Start
|
||||
</button>
|
||||
<button class="tech-action-btn tech-btn-complete"
|
||||
onclick="techCompleteTask(this)"
|
||||
t-att-data-task-id="task.id">
|
||||
<i class="fa fa-check-circle"/>Complete
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="task.status == 'in_progress'">
|
||||
<button class="tech-action-btn tech-btn-complete"
|
||||
@@ -1469,15 +1481,15 @@
|
||||
</t>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<strong><t t-out="task.partner_id.name or task.name"/></strong>
|
||||
<strong><t t-out="task.client_display_name or task.name"/></strong>
|
||||
</div>
|
||||
<div class="text-muted small">
|
||||
<i class="fa fa-map-marker me-1"/><t t-out="task.address_display or 'No address'"/>
|
||||
</div>
|
||||
<t t-if="task.partner_phone">
|
||||
<t t-if="task.client_display_phone">
|
||||
<div class="small mt-1">
|
||||
<a t-attf-href="tel:#{task.partner_phone}" class="text-decoration-none">
|
||||
<i class="fa fa-phone me-1"/><t t-out="task.partner_phone"/>
|
||||
<a t-attf-href="tel:#{task.client_display_phone}" class="text-decoration-none">
|
||||
<i class="fa fa-phone me-1"/><t t-out="task.client_display_phone"/>
|
||||
</a>
|
||||
</div>
|
||||
</t>
|
||||
@@ -1551,7 +1563,7 @@
|
||||
<span t-attf-class="tech-badge tech-badge-#{task.task_type} me-1">
|
||||
<t t-out="dict(task._fields['task_type'].selection).get(task.task_type, '')"/>
|
||||
</span>
|
||||
<t t-out="task.partner_id.name or task.name"/>
|
||||
<t t-out="task.client_display_name or task.name"/>
|
||||
</div>
|
||||
<div class="tech-timeline-meta">
|
||||
<i class="fa fa-map-marker me-1"/><t t-out="task.address_city or 'No address'"/>
|
||||
|
||||
@@ -189,6 +189,23 @@
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<!-- My Schedule (All portal roles) -->
|
||||
<div class="col-md-6">
|
||||
<a href="/my/schedule" class="card h-100 border-0 shadow-sm text-decoration-none" style="border-radius: 12px; min-height: 100px;">
|
||||
<div class="card-body d-flex align-items-center p-4">
|
||||
<div class="me-3">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" t-attf-style="width: 50px; height: 50px; background: {{fc_gradient}};">
|
||||
<i class="fa fa-calendar-check-o fa-lg text-white"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-1 text-dark">My Schedule</h5>
|
||||
<small class="text-muted">View and book appointments</small>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Clock In/Out -->
|
||||
<t t-if="clock_enabled">
|
||||
<div class="col-md-6">
|
||||
@@ -3929,4 +3946,232 @@
|
||||
</t>
|
||||
</template>
|
||||
|
||||
<!-- ============================================================ -->
|
||||
<!-- TASK-LEVEL POD SIGNATURE (works for shadow + regular tasks) -->
|
||||
<!-- ============================================================ -->
|
||||
<template id="portal_task_pod_signature" name="Task POD Signature Capture">
|
||||
<t t-call="portal.portal_layout">
|
||||
<t t-set="breadcrumbs_searchbar" t-value="False"/>
|
||||
<t t-set="no_breadcrumbs" t-value="True"/>
|
||||
|
||||
<div class="container mt-3">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-0">
|
||||
<li class="breadcrumb-item"><a href="/my/home">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="/my/technician">Dashboard</a></li>
|
||||
<li class="breadcrumb-item"><a href="/my/technician/tasks">Tasks</a></li>
|
||||
<li class="breadcrumb-item"><a t-attf-href="/my/technician/task/#{task.id}"><t t-out="task.name"/></a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Collect POD Signature</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="container py-4">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h2>
|
||||
<i class="fa fa-pencil-square-o me-2"/>
|
||||
Proof of Delivery - <t t-out="task.name"/>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="fa fa-truck me-2"/>Delivery Summary</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong>Client:</strong> <t t-out="task.client_display_name or 'N/A'"/></p>
|
||||
<p><strong>Task:</strong> <t t-out="task.name"/></p>
|
||||
<p><strong>Type:</strong>
|
||||
<t t-out="dict(task._fields['task_type'].selection).get(task.task_type, '')"/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Delivery Address:</strong></p>
|
||||
<p class="mb-0 text-muted">
|
||||
<t t-out="task.address_display or 'No address'"/>
|
||||
</p>
|
||||
<t t-if="task.scheduled_date">
|
||||
<p class="mt-2"><strong>Scheduled:</strong>
|
||||
<t t-out="task.scheduled_date" t-options="{'widget': 'date'}"/>
|
||||
<t t-out="task.time_start_display"/> - <t t-out="task.time_end_display"/>
|
||||
</p>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-5">
|
||||
<div class="card" id="task-pod-signature-section">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="mb-0"><i class="fa fa-pencil me-2"/>Client Signature</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<t t-if="has_existing_signature">
|
||||
<div class="alert alert-warning">
|
||||
<i class="fa fa-exclamation-triangle me-2"/>
|
||||
A signature has already been collected. Submitting a new one will replace it.
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<form id="taskPodSignatureForm">
|
||||
<div class="mb-3">
|
||||
<label for="task_client_name" class="form-label">
|
||||
Client Name <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="text" class="form-control" id="task_client_name"
|
||||
name="client_name" required=""
|
||||
t-att-value="task.pod_client_name or task.client_display_name or ''"
|
||||
placeholder="Enter the client's full name"/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="task_signature_date" class="form-label">Signature Date</label>
|
||||
<input type="date" class="form-control" id="task_signature_date" name="signature_date"/>
|
||||
<script>document.getElementById('task_signature_date').value = new Date().toISOString().slice(0,10);</script>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Signature <span class="text-danger">*</span></label>
|
||||
<div class="border rounded p-2 bg-white">
|
||||
<canvas id="task-signature-canvas"
|
||||
style="width:100%;height:200px;border:1px dashed #ccc;border-radius:4px;touch-action:none;">
|
||||
</canvas>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mt-2">
|
||||
<small class="text-muted">Draw signature above</small>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary"
|
||||
onclick="clearTaskSignature()">
|
||||
<i class="fa fa-eraser me-1"/>Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="button" class="btn btn-success btn-lg"
|
||||
onclick="submitTaskPODSignature()">
|
||||
<i class="fa fa-check me-2"/>Submit Signature
|
||||
</button>
|
||||
<a t-attf-href="/my/technician/task/#{task.id}" class="btn btn-outline-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tpod-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%;
|
||||
background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
|
||||
z-index:9999; align-items:center; justify-content:center; }
|
||||
.tpod-overlay.show { display:flex; }
|
||||
.tpod-overlay-card { background:#fff; border-radius:20px; padding:2.5rem 2rem;
|
||||
max-width:420px; width:90%; text-align:center; animation:tpodSlideUp 0.3s ease;
|
||||
box-shadow:0 8px 32px rgba(0,0,0,0.2); }
|
||||
.tpod-overlay-icon { font-size:3.5rem; margin-bottom:1rem; }
|
||||
@keyframes tpodSlideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
|
||||
</style>
|
||||
<div id="taskPodOverlay" class="tpod-overlay">
|
||||
<div class="tpod-overlay-card">
|
||||
<div class="tpod-overlay-icon" id="tpodIcon"></div>
|
||||
<h4 id="tpodTitle" style="font-weight:700;"></h4>
|
||||
<p id="tpodMsg" style="color:#6c757d;margin-bottom:1.5rem;"></p>
|
||||
<div id="tpodActions"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var tCanvas, tCtx, tIsDrawing = false;
|
||||
|
||||
function showTaskPodOverlay(type, title, msg, url) {
|
||||
var ov = document.getElementById('taskPodOverlay');
|
||||
document.getElementById('tpodIcon').innerHTML = type === 'success'
|
||||
? '<i class="fa fa-check-circle text-success"></i>'
|
||||
: '<i class="fa fa-exclamation-circle text-danger"></i>';
|
||||
document.getElementById('tpodTitle').textContent = title;
|
||||
document.getElementById('tpodTitle').className = type === 'success' ? 'text-success' : 'text-danger';
|
||||
document.getElementById('tpodMsg').textContent = msg;
|
||||
var acts = document.getElementById('tpodActions');
|
||||
if (type === 'success' && url) {
|
||||
acts.innerHTML = '<a href="' + url + '" class="btn btn-success w-100 rounded-pill mb-2">Continue</a>' +
|
||||
'<p class="text-muted small mb-0">Redirecting in <span id="tpodCD">3</span>s...</p>';
|
||||
ov.classList.add('show');
|
||||
var s = 3, t = setInterval(function() { s--; var c = document.getElementById('tpodCD');
|
||||
if (c) c.textContent = s; if (s <= 0) { clearInterval(t); window.location.href = url; } }, 1000);
|
||||
} else {
|
||||
acts.innerHTML = '<button class="btn btn-outline-secondary w-100 rounded-pill" onclick="document.getElementById(\'taskPodOverlay\').classList.remove(\'show\')">OK</button>';
|
||||
ov.classList.add('show');
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
tCanvas = document.getElementById('task-signature-canvas');
|
||||
if (!tCanvas) return;
|
||||
tCtx = tCanvas.getContext('2d');
|
||||
var r = tCanvas.getBoundingClientRect();
|
||||
tCanvas.width = r.width * 2; tCanvas.height = r.height * 2;
|
||||
tCtx.scale(2, 2); tCtx.lineCap = 'round'; tCtx.lineJoin = 'round';
|
||||
tCtx.lineWidth = 2; tCtx.strokeStyle = '#000';
|
||||
tCanvas.addEventListener('mousedown', tStart);
|
||||
tCanvas.addEventListener('mousemove', tDraw);
|
||||
tCanvas.addEventListener('mouseup', tStop);
|
||||
tCanvas.addEventListener('mouseout', tStop);
|
||||
tCanvas.addEventListener('touchstart', function(e) { e.preventDefault(); tStart(e); }, {passive:false});
|
||||
tCanvas.addEventListener('touchmove', function(e) { e.preventDefault(); tDraw(e); }, {passive:false});
|
||||
tCanvas.addEventListener('touchend', tStop);
|
||||
var sec = document.getElementById('task-pod-signature-section');
|
||||
if (sec) setTimeout(function() { sec.scrollIntoView({behavior:'smooth', block:'start'}); }, 300);
|
||||
});
|
||||
|
||||
function tPos(e) {
|
||||
var r = tCanvas.getBoundingClientRect();
|
||||
if (e.touches) return { x: e.touches[0].clientX - r.left, y: e.touches[0].clientY - r.top };
|
||||
return { x: e.clientX - r.left, y: e.clientY - r.top };
|
||||
}
|
||||
function tStart(e) { tIsDrawing = true; var p = tPos(e); tCtx.beginPath(); tCtx.moveTo(p.x, p.y); }
|
||||
function tDraw(e) { if (!tIsDrawing) return; var p = tPos(e); tCtx.lineTo(p.x, p.y); tCtx.stroke(); }
|
||||
function tStop() { tIsDrawing = false; }
|
||||
function clearTaskSignature() { if (tCtx) tCtx.clearRect(0, 0, tCanvas.width, tCanvas.height); }
|
||||
|
||||
function submitTaskPODSignature() {
|
||||
var name = document.getElementById('task_client_name').value.trim();
|
||||
var sigDate = document.getElementById('task_signature_date').value;
|
||||
if (!name) { showTaskPodOverlay('error', 'Missing Information', 'Please enter the client name.'); return; }
|
||||
var blank = document.createElement('canvas');
|
||||
blank.width = tCanvas.width; blank.height = tCanvas.height;
|
||||
if (tCanvas.toDataURL() === blank.toDataURL()) {
|
||||
showTaskPodOverlay('error', 'Missing Signature', 'Please draw a signature before submitting.'); return;
|
||||
}
|
||||
var sigData = tCanvas.toDataURL('image/png');
|
||||
var btn = document.querySelector('button[onclick="submitTaskPODSignature()"]');
|
||||
var orig = btn.innerHTML; btn.innerHTML = '<i class="fa fa-spinner fa-spin me-2"></i>Saving...'; btn.disabled = true;
|
||||
fetch('<t t-out="'/my/technician/task/' + str(task.id) + '/pod/sign'"/>', {
|
||||
method: 'POST', headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({ jsonrpc:'2.0', method:'call',
|
||||
params: { client_name: name, signature_data: sigData, signature_date: sigDate || null },
|
||||
id: Math.floor(Math.random()*1000000) })
|
||||
}).then(function(r) { return r.json(); }).then(function(d) {
|
||||
if (d.result && d.result.success) {
|
||||
showTaskPodOverlay('success', 'Signature Saved!', 'Proof of Delivery recorded.', d.result.redirect_url);
|
||||
} else {
|
||||
showTaskPodOverlay('error', 'Error', d.result?.error || 'Unknown error');
|
||||
btn.innerHTML = orig; btn.disabled = false;
|
||||
}
|
||||
}).catch(function() {
|
||||
showTaskPodOverlay('error', 'Connection Error', 'Please check your connection.');
|
||||
btn.innerHTML = orig; btn.disabled = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
|
||||
Reference in New Issue
Block a user