256 lines
16 KiB
XML
256 lines
16 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<templates xml:space="preserve">
|
|
|
|
<t t-name="fusion_tasks.FusionTaskMapView">
|
|
<div class="o_fusion_task_map_view">
|
|
<Layout display="display">
|
|
<t t-set-slot="control-panel-additional-actions">
|
|
<CogMenu/>
|
|
</t>
|
|
<t t-set-slot="layout-buttons">
|
|
<t t-call="{{ props.buttonTemplate }}"/>
|
|
</t>
|
|
<t t-set-slot="layout-actions">
|
|
<SearchBar toggler="searchBarToggler"/>
|
|
</t>
|
|
<t t-set-slot="control-panel-navigation-additional">
|
|
<t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
|
|
</t>
|
|
|
|
<div class="fc_map_wrapper">
|
|
|
|
<!-- ========== SIDEBAR ========== -->
|
|
<div t-att-class="'fc_sidebar' + (state.sidebarOpen ? '' : ' fc_sidebar--collapsed')">
|
|
|
|
<!-- Sidebar header -->
|
|
<div class="fc_sidebar_header">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<h6 class="mb-0 fw-bold">
|
|
<i class="fa fa-list-ul me-2"/>Deliveries
|
|
<span class="badge text-bg-primary ms-1" t-esc="state.taskCount"/>
|
|
</h6>
|
|
<button class="btn btn-sm btn-link text-muted p-0" t-on-click="toggleSidebar"
|
|
title="Toggle sidebar">
|
|
<i t-att-class="'fa ' + (state.sidebarOpen ? 'fa-chevron-left' : 'fa-chevron-right')"/>
|
|
</button>
|
|
</div>
|
|
<!-- New task button -->
|
|
<button class="btn btn-primary btn-sm w-100 mt-2" t-on-click="createNewTask">
|
|
<i class="fa fa-plus me-1"/>New Delivery Task
|
|
</button>
|
|
|
|
<!-- Day filter chips -->
|
|
<div class="fc_day_filters mt-2">
|
|
<t t-foreach="state.groups" t-as="group" t-key="group.key + '_filter'">
|
|
<button t-att-class="'fc_day_chip' + (isGroupVisible(group.key) ? ' fc_day_chip--active' : '')"
|
|
t-att-style="isGroupVisible(group.key) ? 'background:' + group.dayColor + ';color:#fff;border-color:' + group.dayColor : ''"
|
|
t-on-click="() => this.toggleDayFilter(group.key)">
|
|
<t t-esc="group.label"/>
|
|
<span class="fc_day_chip_count" t-esc="group.count"/>
|
|
</button>
|
|
</t>
|
|
<button class="fc_day_chip fc_day_chip--all" t-on-click="showAllDays"
|
|
title="Show all">All</button>
|
|
</div>
|
|
|
|
<!-- Technician filter -->
|
|
<t t-if="state.allTechnicians.length > 1">
|
|
<div class="fc_tech_filters mt-2">
|
|
<t t-foreach="state.allTechnicians" t-as="tech" t-key="tech.id">
|
|
<button t-att-class="'fc_tech_chip' + (isTechVisible(tech.id) ? ' fc_tech_chip--active' : '')"
|
|
t-on-click="() => this.toggleTechFilter(tech.id)"
|
|
t-att-title="tech.name">
|
|
<span class="fc_tech_chip_avatar" t-esc="tech.initials"/>
|
|
<span class="fc_tech_chip_name" t-esc="tech.name"/>
|
|
</button>
|
|
</t>
|
|
<button class="fc_tech_chip fc_tech_chip--all" t-on-click="showAllTechs"
|
|
title="Show all technicians">All</button>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
|
|
<!-- Sidebar body: grouped task list -->
|
|
<div class="fc_sidebar_body">
|
|
<t t-foreach="state.groups" t-as="group" t-key="group.key">
|
|
<!-- Group header (collapsible) with day color -->
|
|
<div class="fc_group_header" t-on-click="() => this.toggleGroup(group.key)">
|
|
<i t-att-class="'fa me-1 ' + (isGroupCollapsed(group.key) ? 'fa-caret-right' : 'fa-caret-down')"/>
|
|
<i class="fa fa-circle me-1" style="font-size:8px;"
|
|
t-att-style="'color:' + group.dayColor"/>
|
|
<span class="fc_group_label" t-esc="group.label"/>
|
|
<span t-if="!isGroupVisible(group.key)" class="fc_group_hidden_tag">hidden</span>
|
|
<span class="fc_group_badge" t-esc="group.count"/>
|
|
</div>
|
|
|
|
<!-- Group tasks -->
|
|
<div t-if="!isGroupCollapsed(group.key)" class="fc_group_tasks">
|
|
<t t-foreach="group.tasks" t-as="task" t-key="task.id">
|
|
<div t-att-class="'fc_task_card' + (state.activeTaskId === task.id ? ' fc_task_card--active' : '')"
|
|
t-on-click="() => this.focusTask(task.id)">
|
|
|
|
<!-- Card top row: number + status -->
|
|
<div class="fc_task_card_top">
|
|
<span class="fc_task_num" t-att-style="'background:' + task._dayColor">
|
|
<t t-esc="'#' + task._scheduleNum"/>
|
|
</span>
|
|
<span class="fc_task_status" t-att-style="'color:' + task._statusColor">
|
|
<i t-att-class="'fa ' + task._statusIcon" style="margin-right:3px;"/>
|
|
<t t-esc="task._statusLabel"/>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Client name -->
|
|
<div class="fc_task_client" t-esc="task._clientName"/>
|
|
|
|
<!-- Type + time -->
|
|
<div class="fc_task_meta">
|
|
<span><i class="fa fa-tag me-1"/><t t-esc="task._typeLbl"/></span>
|
|
<span><i class="fa fa-clock-o me-1"/><t t-esc="task._timeRange"/></span>
|
|
</div>
|
|
|
|
<!-- Date -->
|
|
<div class="fc_task_date">
|
|
<i class="fa fa-calendar me-1"/><t t-esc="task._dateLabel"/>
|
|
</div>
|
|
|
|
<!-- Technician + address -->
|
|
<div class="fc_task_detail">
|
|
<span><i class="fa fa-user me-1"/><t t-esc="task._techName"/></span>
|
|
</div>
|
|
<div t-if="task.address_display" class="fc_task_address">
|
|
<i class="fa fa-map-marker me-1"/>
|
|
<t t-esc="task.address_display"/>
|
|
</div>
|
|
|
|
<!-- Travel + source -->
|
|
<div class="fc_task_bottom_row">
|
|
<span t-if="task.travel_time_minutes" class="fc_task_travel">
|
|
<i class="fa fa-car me-1"/>
|
|
<t t-esc="task.travel_time_minutes"/> min travel
|
|
</span>
|
|
<span t-if="task._sourceLabel" class="fc_task_source"
|
|
t-att-style="'background:' + task._sourceColor">
|
|
<i class="fa fa-building-o me-1"/>
|
|
<t t-esc="task._sourceLabel"/>
|
|
</span>
|
|
<span class="fc_task_edit_btn"
|
|
t-on-click.stop="() => this.openTask(task.id)"
|
|
title="Edit task">
|
|
<i class="fa fa-pencil me-1"/>Edit
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</t>
|
|
</div>
|
|
</t>
|
|
|
|
<!-- Empty state -->
|
|
<div t-if="state.groups.length === 0 and !state.loading" class="fc_sidebar_empty">
|
|
<i class="fa fa-inbox fa-2x text-muted d-block mb-2"/>
|
|
<span class="text-muted">No tasks found</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar footer: technician count -->
|
|
<div class="fc_sidebar_footer">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<svg width="14" height="14" viewBox="0 0 48 48">
|
|
<rect x="2" y="2" width="44" height="44" rx="12" ry="12" fill="#1d4ed8" stroke="#fff" stroke-width="3"/>
|
|
<text x="24" y="30" text-anchor="middle" fill="#fff" font-size="17" font-family="Arial,sans-serif" font-weight="bold">T</text>
|
|
</svg>
|
|
<small class="text-muted">
|
|
<t t-esc="state.techCount"/> technician(s) online
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collapsed sidebar toggle -->
|
|
<button t-if="!state.sidebarOpen"
|
|
class="fc_sidebar_toggle_btn" t-on-click="toggleSidebar"
|
|
title="Open sidebar">
|
|
<i class="fa fa-chevron-right"/>
|
|
</button>
|
|
|
|
<!-- ========== MAP AREA ========== -->
|
|
<div class="fc_map_area">
|
|
<!-- Legend bar -->
|
|
<div class="fc_map_legend_bar d-flex align-items-center gap-3 px-3 py-2 border-bottom bg-view flex-wrap">
|
|
<button class="btn btn-sm d-flex align-items-center gap-1"
|
|
t-att-class="state.showTasks ? 'btn-primary' : 'btn-outline-secondary'"
|
|
t-on-click="toggleTasks">
|
|
<i class="fa fa-map-marker"/>Tasks <t t-esc="state.taskCount"/>
|
|
</button>
|
|
<button class="btn btn-sm d-flex align-items-center gap-1"
|
|
t-att-class="state.showTechnicians ? 'btn-primary' : 'btn-outline-secondary'"
|
|
t-on-click="toggleTechnicians">
|
|
<i class="fa fa-user"/>Techs <t t-esc="state.techCount"/>
|
|
</button>
|
|
<span class="border-start mx-1" style="height:20px;"/>
|
|
<span class="text-muted fw-bold" style="font-size:11px;">Pins:</span>
|
|
<span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#f59e0b;"/>Pending</span>
|
|
<span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#ef4444;"/>Today</span>
|
|
<span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#3b82f6;"/>Tomorrow</span>
|
|
<span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#10b981;"/>This Week</span>
|
|
<span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#a855f7;"/>Upcoming</span>
|
|
<span style="font-size:11px;"><i class="fa fa-map-marker me-1" style="color:#9ca3af;"/>Yesterday</span>
|
|
<span class="flex-grow-1"/>
|
|
<button class="btn btn-sm d-flex align-items-center gap-1"
|
|
t-att-class="state.showRoute ? 'btn-info' : 'btn-outline-secondary'"
|
|
t-on-click="toggleRoute" title="Toggle route animation">
|
|
<i class="fa fa-road"/>Route
|
|
</button>
|
|
<button class="btn btn-sm d-flex align-items-center gap-1"
|
|
t-att-class="state.showTraffic ? 'btn-warning' : 'btn-outline-secondary'"
|
|
t-on-click="toggleTraffic" title="Toggle traffic layer">
|
|
<i class="fa fa-car"/>Traffic
|
|
</button>
|
|
<button class="btn btn-outline-secondary btn-sm" t-on-click="onRefresh" title="Refresh">
|
|
<i class="fa fa-refresh" t-att-class="{'fa-spin': state.loading}"/>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Map container -->
|
|
<div class="fc_map_container">
|
|
<div t-ref="mapContainer" style="position:absolute;top:0;left:0;right:0;bottom:0;"/>
|
|
|
|
<!-- Loading -->
|
|
<div t-if="state.loading"
|
|
class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
|
|
style="z-index:10;background:rgba(255,255,255,.92);">
|
|
<div class="text-center">
|
|
<i class="fa fa-spinner fa-spin fa-3x text-primary mb-3 d-block"/>
|
|
<span class="text-muted">Loading Google Maps...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div t-if="state.error"
|
|
class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
|
|
style="z-index:10;background:rgba(255,255,255,.92);">
|
|
<div class="alert alert-danger m-4" role="alert">
|
|
<i class="fa fa-exclamation-triangle me-2"/><t t-esc="state.error"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div t-if="!state.loading and !state.error and state.taskCount === 0 and state.techCount === 0"
|
|
class="position-absolute top-50 start-50 translate-middle text-center" style="z-index:5;">
|
|
<div class="bg-white rounded-3 shadow p-4">
|
|
<i class="fa fa-map-marker fa-3x text-muted mb-3 d-block"/>
|
|
<h5>No locations to show</h5>
|
|
<p class="text-muted mb-0">Try adjusting the filters or date range.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
</div>
|
|
</t>
|
|
|
|
<t t-name="fusion_tasks.FusionTaskMapView.Buttons"/>
|
|
|
|
</templates>
|