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 Blazor

The Razor component is <DowntimeLog> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<DowntimeLog @ref="downtimeLog" Label="Line 3 downtime"
    OnStopClassify="OnStopClassify" />

@code {
    DowntimeLog downtimeLog;

    void OnStopClassify(Event ev)
    {
        DowntimeLogStopClassifyEventDetail detail = ev["Detail"];
    }

    // Task<string> ExportCsv()
    void Call() => downtimeLog.ExportCsv();
}

Properties

Parameter	Type, default	Description
`Stops` stops	IEnumerable<object>	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	IEnumerable<object>	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	bool 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	int 100	Sets or retrieves how many stops are drawn at once; the rest are a "Show more" away.
`ReadOnly` readOnly	bool 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
`Task<string> ExportCsv()`	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

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
`OnStopClassify` stopClassify DowntimeLogStopClassifyEventDetail	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 DowntimeLogExportRequestEventDetail	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 DowntimeLogSortChangeEventDetail	This event is triggered when the stops are ordered by a column header. `SortBy` string The column. `SortOrder` string asc or desc.

Types

`enum DowntimeLogView`

DowntimeLogView.Unclassified "unclassified" DowntimeLogView.All "all"

`enum DowntimeLogSortBy`

DowntimeLogSortBy.From "from" DowntimeLogSortBy.Machine "machine" DowntimeLogSortBy.Length "length" DowntimeLogSortBy.Reason "reason"

`enum DowntimeLogSortOrder`

DowntimeLogSortOrder.Asc "asc" DowntimeLogSortOrder.Desc "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