Production floor

Downtime Log `<smart-downtime-log>`

DowntimeLog lists every stop of a line and asks the person who was there why it stopped.

JavaScript TypeScript Angular React Vue Blazor

<smart-downtime-log> · 11 properties, 1 methods, 3 events · source/modules/smart.downtimelog.js

Usage in Angular

The Angular wrapper is DowntimeLogComponent from DowntimeLogModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { DowntimeLogModule, DowntimeLogComponent } from 'smart-industrial/angular/downtimelog';

<smart-downtime-log #downtimeLog [label]="'Line 3 downtime'"
    (onStopClassify)="onStopClassify($event)"></smart-downtime-log>

@ViewChild('downtimeLog', { read: DowntimeLogComponent }) downtimeLog!: DowntimeLogComponent;
// methods are called on the component reference; this one returns a Promise
const result = await this.downtimeLog.exportCsv();

Properties

Input	Type, default	Description
`[stops]` stops	array	Sets or retrieves the stops as [{ id, machine, machineName, from, to, seconds, short, reason, comment, classifiedBy }], the shape a Scada Studio station returns from /api/downtime. to is null while the machine is still stopped. Assign a new array to update the component.
`[reasons]` reasons	array	Sets or retrieves the plant's reasons as [{ code, label, group }]. The picker shows them as large tiles, by group, in the order given.
`[label]` label	string	Sets or retrieves the heading of the log. It is also the accessible name of the group.
`[view]` view	DowntimeLogView unclassified	Sets or retrieves which stops are listed: the ones waiting for a reason, or all of them.
`[showShort]` showShort	boolean false	Sets or retrieves whether the stops shorter than their machine's threshold are listed and counted.
`[sortBy]` sortBy	DowntimeLogSortBy from	Sets or retrieves the column the stops are ordered by. The column headers set it: a second press turns the order round.
`[sortOrder]` sortOrder	DowntimeLogSortOrder desc	Sets or retrieves which way: newest, longest or last first, or the other way.
`[pageSize]` pageSize	number 100	Sets or retrieves how many stops are drawn at once; the rest are a "Show more" away.
`[readOnly]` readOnly	boolean false	Sets or retrieves whether the log only shows the stops and their reasons, with who gave them. Every button is removed.
`[busy]` busy	string	Sets or retrieves the id of the stop the application is recording a reason for. Its Save button waits.
`[errorMessage]` errorMessage	string	Sets or retrieves the reason the station refused a reason. It is shown as an alert above the list and announced; the stop stays waiting for a reason. This property was called error, which is also the name of every element's logging method, so an invalid value given to any other property threw "that.error is not a function" instead of being reported. Assigning error still sets errorMessage; reading error returns the logging method, as on every other element.

Methods

Method	Description
`exportCsv(): Promise<any>` and `exportCsvSync(): string`	Returns the stops shown as CSV: machine, stopped, restarted, seconds, reason, comment and who gave it. A cell a spreadsheet would read as a formula is written as text.

Events

The data of an event is in event.detail. stopClassify is a request: the downtime log raises it only while readOnly and busy are clear and shows the stop unclassified until the application writes the reason into stops. sortChange follows a change the log has already made to sortBy and sortOrder, and after exportRequest the log downloads the CSV unless the application calls preventDefault().

Output	Description and detail
`(onStopClassify)` stopClassify	This event is triggered when the operator gives a stop its reason. The list is not changed: the application records the reason on the station, which notes who gave it, and hands back the stops. `id` string The id of the stop. `reason` string The code of the reason. `comment` string What the operator added, or an empty string.
`(onExportRequest)` exportRequest	This event is triggered by Export CSV, with the file's text. The component then downloads it; an application that stores the file its own way calls preventDefault(). `csv` string The CSV.
`(onSortChange)` sortChange	This event is triggered when the stops are ordered by a column header. `sortBy` string The column. `sortOrder` string asc or desc.

Types

`type DowntimeLogView`

'unclassified' | 'all'

`type DowntimeLogSortBy`

'from' | 'machine' | 'length' | 'reason'

`type DowntimeLogSortOrder`

'asc' | 'desc'

CSS variables

The component declares 3 CSS variables; the CSS page shows how to set them.

--smart-downtime-log-waiting --smart-downtime-log-waiting-text --smart-downtime-log-mono