Production floor

Downtime Log <smart-downtime-log>

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

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

Usage in TypeScript

The package ships its definitions: DowntimeLog is the element type and DowntimeLogProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-downtime-log') is typed as DowntimeLog.

import { DowntimeLog, DowntimeLogProperties } from 'smart-industrial/source/typescript/smart.industrial';

const downtimeLog = document.querySelector('smart-downtime-log') as DowntimeLog;

downtimeLog.label = 'Line 3 downtime';
downtimeLog.addEventListener('stopClassify', (event: CustomEvent) => console.log(event.detail));
downtimeLog.exportCsv();

Properties

Property	Type, default	Description
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	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	string	Sets or retrieves the heading of the log. It is also the accessible name of the group.
view	DowntimeLogView unclassified	Sets or retrieves which stops are listed: the ones waiting for a reason, or all of them.
showShort	boolean false	Sets or retrieves whether the stops shorter than their machine's threshold are listed and counted.
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	DowntimeLogSortOrder desc	Sets or retrieves which way: newest, longest or last first, or the other way.
pageSize	number 100	Sets or retrieves how many stops are drawn at once; the rest are a "Show more" away.
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	string	Sets or retrieves the id of the stop the application is recording a reason for. Its Save button waits.
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(): 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().

Event	Description and detail
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.
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.
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