Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
190 changes: 190 additions & 0 deletions addon/components/ai/create-order-preview.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
<div class="fleetbase-ai-response-region fleetbase-ai-create-order-preview" {{did-update this.updatePreview @preview}}>
<div class="fleetbase-ai-create-order-preview__header">
<div>
<div class="fleetbase-ai-action-title">{{this.preview.label}}</div>
<div class="fleetbase-ai-action-message">{{this.preview.message}}</div>
</div>
<span class="fleetbase-ai-action-status">{{if this.isCancelled "Cancelled" (if this.preview.ready "Ready" "Needs info")}}</span>
</div>

{{#if this.isCancelled}}
<div class="fleetbase-ai-create-order-preview__cancelled">
<FaIcon @icon="circle-xmark" />
<span>{{this.cancelledMessage}}</span>
</div>
{{else}}
<div class="fleetbase-ai-create-order-preview__map">
{{#if this.canShowMap}}
<LeafletMap
class="fleetbase-ai-create-order-preview__leaflet"
@lat={{this.mapCenter.latitude}}
@lng={{this.mapCenter.longitude}}
@zoom={{12}}
@zoomControl={{false}}
as |layers|
>
<layers.tile @url="https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" />
<layers.polyline @locations={{this.routeLineCoordinates}} @color="#3b82f6" @weight={{4}} @opacity={{0.82}} />
{{#each this.coordinates as |stop index|}}
<layers.marker @location={{stop.coordinates}} @title={{stop.address}} as |marker|>
<marker.tooltip @permanent={{false}} @sticky={{true}}>{{add index 1}}. {{stop.label}}</marker.tooltip>
</layers.marker>
{{/each}}
</LeafletMap>
{{else}}
<div class="fleetbase-ai-create-order-preview__empty-map">
<FaIcon @icon="route" />
<span>Select pickup and dropoff with coordinates to preview the route.</span>
</div>
{{/if}}
</div>
<div class="fleetbase-ai-create-order-preview__route-list">
{{#each this.routeStops as |stop index|}}
<div class="fleetbase-ai-create-order-preview__stop">
<span>{{add index 1}}</span>
<div>
<strong>{{stop.label}}</strong>
<small>{{or stop.address "No address resolved"}}</small>
</div>
</div>
{{/each}}
</div>

<div class="fleetbase-ai-create-order-preview__grid">
<InputGroup @name="Order type" @wrapperClass="fleetbase-ai-create-order-preview__field">
<ModelSelect
@modelName="order-config"
@selectedModel={{this.draft.order_config_uuid}}
@placeholder="Select order type"
@triggerClass="form-select form-input form-input-sm"
@infiniteScroll={{false}}
@renderInPlace={{true}}
@onChange={{this.setOrderConfig}}
as |model|
>
{{or model.name model.key}}
</ModelSelect>
</InputGroup>

<InputGroup @name="Pickup" @wrapperClass="fleetbase-ai-create-order-preview__field">
<ModelSelect
@modelName="place"
@selectedModel={{this.payload.pickup}}
@placeholder="Pickup address"
@triggerClass="form-select form-input form-input-sm"
@customSearchEndpoint="places/search"
@query={{hash geo=true}}
@infiniteScroll={{false}}
@renderInPlace={{true}}
@onChange={{fn this.setPayloadPlace "pickup"}}
as |place|
>
<div class="fleetbase-ai-create-order-preview__select-label">{{this.addressLabel place}}</div>
</ModelSelect>
</InputGroup>

<InputGroup @name="Dropoff" @wrapperClass="fleetbase-ai-create-order-preview__field">
<ModelSelect
@modelName="place"
@selectedModel={{this.payload.dropoff}}
@placeholder="Dropoff address"
@triggerClass="form-select form-input form-input-sm"
@customSearchEndpoint="places/search"
@query={{hash geo=true}}
@infiniteScroll={{false}}
@renderInPlace={{true}}
@onChange={{fn this.setPayloadPlace "dropoff"}}
as |place|
>
<div class="fleetbase-ai-create-order-preview__select-label">{{this.addressLabel place}}</div>
</ModelSelect>
</InputGroup>

<InputGroup @name="Driver" @wrapperClass="fleetbase-ai-create-order-preview__field">
<ModelSelect
@modelName="driver"
@placeholder="Assign driver"
@triggerClass="form-select form-input form-input-sm"
@allowClear={{true}}
@infiniteScroll={{false}}
@renderInPlace={{true}}
@onChange={{this.setDriver}}
as |driver|
>
{{driver.name}}
</ModelSelect>
</InputGroup>

<InputGroup @name="Vehicle" @wrapperClass="fleetbase-ai-create-order-preview__field">
<ModelSelect
@modelName="vehicle"
@placeholder="Assign vehicle"
@triggerClass="form-select form-input form-input-sm"
@allowClear={{true}}
@infiniteScroll={{false}}
@renderInPlace={{true}}
@onChange={{this.setVehicle}}
as |vehicle|
>
{{or vehicle.display_name vehicle.name vehicle.plate_number}}
</ModelSelect>
</InputGroup>

<InputGroup @name="Proof" @wrapperClass="fleetbase-ai-create-order-preview__field fleetbase-ai-create-order-preview__field--inline">
<Toggle @isToggled={{this.draft.pod_required}} @onToggle={{this.setPodRequired}} @label="Require POD" />
{{#if this.draft.pod_required}}
<Select
@options={{this.podMethods}}
@value={{this.draft.pod_method}}
@onSelect={{this.setPodMethod}}
@placeholder="POD method"
class="form-input-sm"
/>
{{/if}}
</InputGroup>

<InputGroup @name="Dispatch" @wrapperClass="fleetbase-ai-create-order-preview__field fleetbase-ai-create-order-preview__field--inline">
<Toggle @isToggled={{this.draft.dispatched}} @onToggle={{this.setDispatched}} @label="Dispatch after create" />
</InputGroup>
</div>

<InputGroup @name="Notes" @wrapperClass="fleetbase-ai-create-order-preview__field">
<Textarea @value={{this.draft.notes}} class="form-input form-input-sm w-full" rows={{2}} placeholder="Add order notes" {{on "change" this.setNotes}} />
</InputGroup>

{{#if this.hasMissingFields}}
<div class="fleetbase-ai-action-list">
<div class="fleetbase-ai-action-list-title">Required before apply</div>
<ul>
{{#each this.missingFields as |field|}}
<li>{{field}}</li>
{{/each}}
</ul>
</div>
{{/if}}

{{#if this.preview.result}}
<div class="fleetbase-ai-action-result">{{this.preview.result.message}}</div>
{{/if}}

{{#if this.preview.error}}
<div class="fleetbase-ai-action-error">{{this.preview.error.message}}</div>
{{/if}}

<div class="fleetbase-ai-create-order-preview__controls">
<Button
@type="primary"
@size="sm"
@icon="check"
@text="Create order"
@disabled={{this.isApplyDisabled}}
@isLoading={{@isApplying}}
@onClick={{this.apply}}
/>
<Button @size="sm" @icon="xmark" @text="Cancel" @disabled={{@isCancelling}} @onClick={{this.cancel}} />
{{#if this.refreshPreview.isRunning}}
<span class="fleetbase-ai-create-order-preview__refreshing">Updating preview...</span>
{{/if}}
</div>
{{/if}}
</div>
Loading
Loading