@fleetbase/fleetops-engine 0.6.65 → 0.6.66

package/addon/components/public-inspection.js

@@ -0,0 +1,279 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action, get } from '@ember/object';
+import config from 'ember-get-config';
+import { task } from 'ember-concurrency';
+import { normalizeFieldGroups, flattenFields } from '../utils/inspection-form-structure';
+import { answerRows, seedAnswers, summarize } from '../utils/inspection-answers';
+
+/*
+ * FleetOps mounts its API at the application root — `fleetops.api.routing.prefix`
+ * is null, which is why its consumable routes are `/v1/...` and its internal
+ * ones `/int/v1/...` rather than sitting under an engine name the way ledger's
+ * do. The public inspection routes follow it, so the namespace here is `public`
+ * and not `fleet-ops/public`.
+ */
+const PUBLIC_NAMESPACE = 'public';
+
+/** The largest photo the link's upload endpoint accepts, matched to the server's limit. */
+const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
+
+/** How many digits a link's PIN has, matched to the server. */
+const PIN_LENGTH = 6;
+
+/*
+ * The fetch service turns a failed response carrying a string `error` into a
+ * bare Error of that message, dropping the rest of the body, so the page never
+ * saw `pin_required` and showed the PIN prompt as an error with nowhere to
+ * type. `rawError` rejects with the body itself.
+ */
+const REQUEST_OPTIONS = { namespace: PUBLIC_NAMESPACE, rawError: true };
+
+/** Asked for explicitly: without it Laravel answers a refused request with a redirect. */
+const JSON_ACCEPT = { Accept: 'application/json' };
+
+/**
+ * An inspection filled in from a tokenised link, outside the console.
+ *
+ * Registered into the `auth:login` menu registry as the hidden slug
+ * `inspection`, which the host console's top-level `virtual` route resolves at
+ * `/~/inspection` — a sibling of `console`, so none of the console's chrome or
+ * its authentication gate applies. The link itself carries the form and the
+ * token as query parameters.
+ *
+ * The sheet is the same `inspection-sheet` the console renders: whoever built
+ * the form sees it laid out the way they built it, whether it is being
+ * answered by a manager at a desk or a contractor on a phone.
+ */
+export default class PublicInspectionComponent extends Component {
+    @service urlSearchParams;
+    @service fetch;
+    @service intl;
+
+    @tracked form = null;
+    @tracked identity = null;
+    @tracked groups = [];
+    @tracked values = {};
+    @tracked odometer = '';
+    @tracked engineHours = '';
+    @tracked signatureName = '';
+    @tracked error = null;
+    @tracked submission = null;
+
+    /** The PIN given with the link, asked for before the form is shown. */
+    @tracked pin = '';
+    @tracked pinRequired = false;
+    @tracked pinError = null;
+
+    constructor() {
+        super(...arguments);
+        this.loadInspection.perform();
+    }
+
+    get formId() {
+        return this.urlSearchParams.get('id');
+    }
+
+    get token() {
+        return this.urlSearchParams.get('token');
+    }
+
+    get pinIsComplete() {
+        return this.pin.length === PIN_LENGTH;
+    }
+
+    /**
+     * The PIN travels as a header on every request the page makes, so it
+     * stays out of the URL and the access logs that record URLs.
+     */
+    get pinHeaders() {
+        return this.pin ? { ...JSON_ACCEPT, 'X-Inspection-Pin': this.pin } : { ...JSON_ACCEPT };
+    }
+
+    get fields() {
+        return flattenFields(this.groups);
+    }
+
+    get summary() {
+        return summarize(this.fields, this.values);
+    }
+
+    get hasSheet() {
+        return this.fields.length > 0;
+    }
+
+    /**
+     * What still stops this being submitted, said plainly rather than by
+     * greying out a button with no explanation.
+     */
+    get blockedReason() {
+        const { missingRequired, incompleteDefects } = this.summary;
+
+        if (missingRequired) {
+            return 'required';
+        }
+
+        return incompleteDefects ? 'defects' : null;
+    }
+
+    get canSubmit() {
+        return this.hasSheet && !this.blockedReason && !this.submitInspection.isRunning && !this.submission;
+    }
+
+    @task({ restartable: true })
+    *loadInspection() {
+        this.error = null;
+
+        if (!this.formId || !this.token) {
+            this.error = 'This inspection link is missing its form or its token.';
+            return;
+        }
+
+        try {
+            const response = yield this.fetch.get(`inspections/forms/${this.formId}`, { token: this.token }, { ...REQUEST_OPTIONS, headers: this.pinHeaders });
+
+            this.pinRequired = false;
+            this.pinError = null;
+            this.form = response?.form;
+            this.identity = response?.identity;
+            this.groups = normalizeFieldGroups(this.form);
+            this.values = seedAnswers(this.groups);
+        } catch (error) {
+            const body = yield this.failureBody(error);
+
+            // The link wants its PIN, or the one given was wrong: ask again,
+            // saying how many tries are left. Anything else, including a link
+            // locked by too many wrong PINs, is the page's error.
+            if (body?.pin_required) {
+                this.pinRequired = true;
+                this.pinError = this.pin ? this.intl.t('inspection.public.pin-wrong', { count: body.attempts_left ?? 0 }) : null;
+                this.pin = '';
+                return;
+            }
+
+            this.pinRequired = false;
+            this.error = yield this.describeFailure(error, 'This inspection could not be loaded.', body);
+        }
+    }
+
+    @task({ drop: true })
+    *submitInspection() {
+        this.error = null;
+
+        try {
+            const response = yield this.fetch.post(
+                `inspections/forms/${this.formId}/submit`,
+                {
+                    token: this.token,
+                    odometer: this.odometer === '' ? null : parseInt(this.odometer, 10),
+                    engine_hours: this.engineHours === '' ? null : parseInt(this.engineHours, 10),
+                    signature: this.signatureName ? { name: this.signatureName, signed_at: new Date().toISOString() } : null,
+                    custom_field_values: answerRows(this.fields, this.values),
+                },
+                { ...REQUEST_OPTIONS, headers: this.pinHeaders }
+            );
+
+            this.submission = response?.submission;
+        } catch (error) {
+            this.error = yield this.describeFailure(error, 'This inspection could not be submitted.');
+        }
+    }
+
+    /**
+     * Upload a photo or a signature through this link.
+     *
+     * The console's uploader posts to the platform's file endpoint, which
+     * needs a session a link does not have; this posts to the link's own
+     * upload endpoint with its token instead, and answers in the shape the
+     * sheet expects from the console.
+     */
+    @action async uploadFile(file, type) {
+        if (file?.size > MAX_UPLOAD_BYTES) {
+            this.error = 'That photo is larger than 10 MB. Try a smaller one.';
+            throw new Error(this.error);
+        }
+
+        const url = `${get(config, 'API.host')}/${PUBLIC_NAMESPACE}/inspections/forms/${encodeURIComponent(this.formId)}/files`;
+
+        try {
+            const response = await file.upload(url, { data: { token: this.token, type }, headers: { Accept: 'application/json', ...this.pinHeaders } });
+            const body = await response.json();
+
+            this.error = null;
+
+            return { id: body.file.id, url: body.file.url, filename: body.file.filename };
+        } catch (error) {
+            this.error = await this.describeFailure(error, 'This photo could not be uploaded.');
+            throw error;
+        }
+    }
+
+    /**
+     * What the server said went wrong, in words an inspector can act on. A
+     * link that was already used or has expired says so; being rate limited
+     * says to wait rather than showing a bare status code.
+     */
+    async describeFailure(error, fallback, body = null) {
+        body = body ?? (await this.failureBody(error));
+
+        // Laravel's throttle answers with this message and nothing else.
+        if (error?.status === 429 || body?.message === 'Too Many Attempts.') {
+            return 'Too many attempts from this device. Wait a minute and try again.';
+        }
+
+        const message = body?.error ?? body?.errors?.[0] ?? body?.message ?? error?.message;
+
+        return typeof message === 'string' && message ? message : fallback;
+    }
+
+    /**
+     * The JSON the server answered a failed request with. A `rawError` request
+     * rejects with that body itself; an upload rejects with the response, whose
+     * body can be read only once.
+     */
+    async failureBody(error) {
+        if (!error) {
+            return null;
+        }
+
+        if (error.payload) {
+            return error.payload;
+        }
+
+        if (typeof error.json === 'function') {
+            return await error.json().catch(() => null);
+        }
+
+        return error instanceof Error ? null : error;
+    }
+
+    /** Digits only, and no more than a PIN has: pasted spaces or dashes are dropped. */
+    @action updatePin(event) {
+        this.pin = String(event.target.value ?? '')
+            .replace(/\D/g, '')
+            .slice(0, PIN_LENGTH);
+        this.pinError = null;
+    }
+
+    @action submitPin() {
+        if (this.pinIsComplete && !this.loadInspection.isRunning) {
+            this.loadInspection.perform();
+        }
+    }
+
+    @action pinKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.submitPin();
+        }
+    }
+
+    @action setValue(value, field) {
+        this.values = { ...this.values, [field.uuid]: value };
+    }
+
+    @action updateReading(key, event) {
+        this[key] = event.target.value;
+    }
+}

package/addon/components/purchase-rate/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{(or @purchaseRate @resource)}}
+    @resourceType="purchase-rate"
+    @title={{@title}}
+    @titleFallback={{@titleFallback}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

package/addon/components/purchase-rate/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{(or @purchaseRate @resource)}} @resourceType="purchase-rate" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

package/addon/components/radar/agenda/entry.hbs

@@ -0,0 +1,17 @@
+<button
+    type="button"
+    class="fleet-ops-radar-agenda-entry is-{{@entry.severity}} {{if @compact 'is-compact'}} {{if @entry.planned 'is-planned'}} {{if @positioned 'is-positioned'}}"
+    style={{if @positioned this.leftStyle}}
+    draggable={{if @draggable "true" "false"}}
+    title={{@entry.title}}
+    {{on "click" this.open}}
+    {{on "dragstart" this.dragStart}}
+    data-test-radar-agenda-entry={{@entry.key}}
+>
+    <span class="fleet-ops-radar-severity is-{{@entry.severity}}"></span>
+    {{#if @entry.subject}}<strong>{{@entry.subject.label}}</strong>{{/if}}
+    <span class="fleet-ops-radar-agenda-entry-title">{{@entry.title}}</span>
+    {{#if @entry.label}}<span class="fleet-ops-radar-agenda-entry-time">{{@entry.label}}</span>{{/if}}
+    {{#if @entry.planned}}<FaIcon @icon="calendar-check" class="ml-1" />{{/if}}
+    {{#if @draggable}}<FaIcon @icon="grip-vertical" class="fleet-ops-radar-agenda-grip" />{{/if}}
+</button>

package/addon/components/radar/agenda/entry.js

@@ -0,0 +1,26 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+export default class RadarAgendaEntryComponent extends Component {
+    get leftStyle() {
+        return htmlSafe(`left: ${Math.max(0, Math.min(96, Number(this.args.entry?.pct) || 0))}%`);
+    }
+
+    @action open() {
+        const entry = this.args.entry;
+        if (entry?.rule === 'shift_handover' && this.args.onHandover) {
+            return this.args.onHandover(entry.key);
+        }
+
+        return this.args.onOpen?.(entry);
+    }
+
+    @action dragStart(event) {
+        if (!this.args.draggable) {
+            return;
+        }
+        event.dataTransfer?.setData('text/radar-key', this.args.entry.key);
+        event.dataTransfer.effectAllowed = 'move';
+    }
+}

package/addon/components/radar/agenda/lane.hbs

@@ -0,0 +1,33 @@
+<div class="fleet-ops-radar-agenda-lane is-{{@lane.key}} {{if this.isOver 'is-drop-target'}}" data-test-radar-agenda-lane={{@lane.key}}>
+    <div class="fleet-ops-radar-agenda-lane-label">
+        <span>{{@lane.label}}</span>
+        <span class="fleet-ops-radar-row-meta">{{@lane.entries.length}}</span>
+    </div>
+    <div class="fleet-ops-radar-agenda-track" {{on "dragover" this.dragOver}} {{on "dragleave" this.dragLeave}} {{on "drop" this.drop}} data-test-radar-agenda-track>
+        {{#each this.rows as |row|}}
+            <div class="fleet-ops-radar-agenda-row">
+                {{#each row as |entry|}}
+                    {{#if (eq entry.kind "shift")}}
+                        <button
+                            type="button"
+                            class="fleet-ops-radar-agenda-shift is-{{entry.state}} {{if entry.severity (concat 'has-' entry.severity)}} {{if entry.handover_key 'has-handover'}}"
+                            style={{this.barStyle entry}}
+                            title={{entry.driver.label}}
+                            {{on "click" (fn this.openShift entry)}}
+                            data-test-radar-agenda-shift={{entry.key}}
+                        >
+                            <span class="fleet-ops-radar-avatar is-user">{{initials entry.driver.label}}</span>
+                            <span class="fleet-ops-radar-agenda-shift-label">{{entry.driver.label}}</span>
+                            <span class="fleet-ops-radar-agenda-shift-meta">{{entry.label}} · {{t (concat "radar.agenda.shift-states." entry.state)}}{{#if entry.active_orders}} · {{entry.active_orders}} orders{{/if}}</span>
+                            {{#if entry.handover_key}}<FaIcon @icon="right-left" class="ml-1" />{{/if}}
+                        </button>
+                    {{else}}
+                        <Radar::Agenda::Entry @entry={{entry}} @positioned={{true}} @onOpen={{@onOpen}} @onHandover={{@onHandover}} />
+                    {{/if}}
+                {{/each}}
+            </div>
+        {{else}}
+            <div class="fleet-ops-radar-agenda-empty-lane">{{t "radar.agenda.no-events"}}</div>
+        {{/each}}
+    </div>
+</div>

package/addon/components/radar/agenda/lane.js

@@ -0,0 +1,80 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+/**
+ * One lane on the time scale. Entries are placed by their percentage
+ * offset; overlapping entries are dealt into rows so nothing hides under
+ * anything else. Dropping a tray item on the track gives it the time under
+ * the cursor.
+ */
+export default class RadarAgendaLaneComponent extends Component {
+    @tracked isOver = false;
+
+    /** Entries dealt into rows: an entry goes to the first row where it does not collide. */
+    get rows() {
+        const entries = [...(this.args.lane?.entries ?? [])].sort((a, b) => (a.pct ?? 0) - (b.pct ?? 0));
+        const rows = [];
+
+        for (const entry of entries) {
+            const start = entry.pct ?? 0;
+            const end = start + (entry.width_pct ?? 12);
+            let row = rows.find((candidates) => candidates.every((placed) => start >= placed.end || end <= placed.start));
+            if (!row) {
+                row = [];
+                rows.push(row);
+            }
+            row.push({ ...entry, start, end });
+        }
+
+        return rows;
+    }
+
+    @action barStyle(entry) {
+        const left = Math.max(0, Math.min(100, Number(entry.pct) || 0));
+        const width = Math.max(2, Math.min(100 - left, Number(entry.width_pct) || 2));
+
+        return htmlSafe(`left: ${left}%; width: ${width}%`);
+    }
+
+    @action openShift(entry) {
+        if (entry.handover_key) {
+            return this.args.onHandover?.(entry.handover_key);
+        }
+
+        return this.args.onOpen?.(entry);
+    }
+
+    @action dragOver(event) {
+        if (!event.dataTransfer?.types?.includes('text/radar-key')) {
+            return;
+        }
+        event.preventDefault();
+        this.isOver = true;
+    }
+
+    @action dragLeave() {
+        this.isOver = false;
+    }
+
+    @action drop(event) {
+        this.isOver = false;
+        const key = event.dataTransfer?.getData('text/radar-key');
+        if (!key) {
+            return;
+        }
+        event.preventDefault();
+
+        const track = event.currentTarget;
+        const rect = track.getBoundingClientRect();
+        const pct = rect.width ? Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)) : 0;
+        const window = this.args.window ?? {};
+        const start = new Date(window.start_at);
+        const hours = Number(window.hours) || 24;
+        const at = new Date(start.getTime() + pct * hours * 3600 * 1000);
+        at.setMinutes(Math.round(at.getMinutes() / 15) * 15, 0, 0);
+
+        this.args.onDrop?.(key, at.toISOString(), this.args.lane?.key);
+    }
+}

package/addon/components/radar/agenda.hbs

@@ -0,0 +1,69 @@
+<div class="fleet-ops-radar-agenda" data-test-radar-agenda>
+    <div class="fleet-ops-radar-agenda-toolbar">
+        <div class="fleet-ops-radar-view-toggle" role="group">
+            <button type="button" class="fleet-ops-radar-view-toggle-button {{if (eq @window '24h') 'is-active'}}" {{on "click" (fn @onChangeWindow "24h")}} data-test-radar-agenda-window="24h">{{t "radar.agenda.window-24h"}}</button>
+            <button type="button" class="fleet-ops-radar-view-toggle-button {{if (eq @window '7d') 'is-active'}}" {{on "click" (fn @onChangeWindow "7d")}} data-test-radar-agenda-window="7d">{{t "radar.agenda.window-7d"}}</button>
+        </div>
+        {{#if @agenda}}
+            <span class="fleet-ops-radar-row-meta" data-test-radar-agenda-summary>{{t "radar.agenda.summary" shifts=@agenda.counts.shifts overdue=@agenda.counts.overdue anytime=@agenda.counts.anytime}}</span>
+        {{/if}}
+        <span class="fleet-ops-radar-row-meta">{{t "radar.agenda.drag-hint"}}</span>
+        <div class="ml-auto"><Button @size="xs" @icon="print" @text={{t "radar.agenda.print"}} @onClick={{this.print}} data-test-radar-agenda-print /></div>
+    </div>
+
+    {{#if @agenda}}
+        <div class="fleet-ops-radar-agenda-grid">
+            <div class="fleet-ops-radar-agenda-band" data-test-radar-agenda-overdue>
+                <div class="fleet-ops-radar-agenda-band-title is-overdue">{{t "radar.agenda.overdue"}} <span>{{@agenda.overdue.length}}</span></div>
+                {{#each @agenda.overdue as |entry|}}
+                    <Radar::Agenda::Entry @entry={{entry}} @compact={{true}} @onOpen={{@onOpen}} />
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">—</div>
+                {{/each}}
+            </div>
+
+            <div class="fleet-ops-radar-agenda-scale">
+                <div class="fleet-ops-radar-agenda-ruler">
+                    <div class="fleet-ops-radar-agenda-lane-label"></div>
+                    <div class="fleet-ops-radar-agenda-track">
+                        {{#each @agenda.window.ticks as |tick|}}
+                            <span class="fleet-ops-radar-agenda-tick" style={{this.leftStyle tick.pct}}>{{tick.label}}</span>
+                        {{/each}}
+                        <span class="fleet-ops-radar-agenda-now" style={{this.leftStyle @agenda.window.now_pct}}><em>{{format-date-fns @agenda.now "HH:mm"}}</em></span>
+                    </div>
+                </div>
+                {{#each this.lanes as |lane|}}
+                    <Radar::Agenda::Lane @lane={{lane}} @window={{@agenda.window}} @onOpen={{@onOpen}} @onDrop={{@onPlan}} @onHandover={{@onHandover}} />
+                {{/each}}
+            </div>
+
+            <div class="fleet-ops-radar-agenda-band" data-test-radar-agenda-later>
+                <div class="fleet-ops-radar-agenda-band-title">{{t "radar.agenda.later"}} <span>{{@agenda.later.length}}</span></div>
+                {{#each @agenda.later as |entry|}}
+                    <Radar::Agenda::Entry @entry={{entry}} @compact={{true}} @onOpen={{@onOpen}} />
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">—</div>
+                {{/each}}
+            </div>
+        </div>
+
+        <div class="fleet-ops-radar-agenda-tray" data-test-radar-agenda-tray>
+            <div class="fleet-ops-radar-agenda-band-title">
+                <FaIcon @icon="thumbtack" />
+                {{t "radar.agenda.anytime"}} <span>{{t "radar.agenda.anytime-count" count=@agenda.anytime.length}}</span>
+                {{#if @agenda.anytime.length}}
+                    <button type="button" class="fleet-ops-radar-briefing-link ml-auto" {{on "click" @onSeeAll}} data-test-radar-agenda-see-all>{{t "radar.agenda.see-all" count=@agenda.anytime.length}}</button>
+                {{/if}}
+            </div>
+            <div class="fleet-ops-radar-agenda-tray-items">
+                {{#each this.trayItems as |entry|}}
+                    <Radar::Agenda::Entry @entry={{entry}} @draggable={{true}} @onOpen={{@onOpen}} />
+                {{else}}
+                    <div class="fleet-ops-radar-row-meta">{{t "radar.agenda.no-events"}}</div>
+                {{/each}}
+            </div>
+        </div>
+    {{else if @isLoading}}
+        <div class="fleet-ops-radar-empty"><Spinner @size="lg" /></div>
+    {{/if}}
+</div>

package/addon/components/radar/agenda.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { htmlSafe } from '@ember/template';
+
+export const AGENDA_LANES = ['shifts', 'maintenance', 'expiries', 'notices'];
+export const TRAY_LIMIT = 8;
+
+export default class RadarAgendaComponent extends Component {
+    @service intl;
+
+    get lanes() {
+        const lanes = this.args.agenda?.lanes ?? {};
+
+        return AGENDA_LANES.map((key) => ({ key, label: this.intl.t(`radar.agenda.lanes.${key}`), entries: lanes[key] ?? [] }));
+    }
+
+    get trayItems() {
+        return (this.args.agenda?.anytime ?? []).slice(0, TRAY_LIMIT);
+    }
+
+    @action leftStyle(pct) {
+        return htmlSafe(`left: ${Math.max(0, Math.min(100, Number(pct) || 0))}%`);
+    }
+
+    @action print() {
+        window.print();
+    }
+}