Production floor

Shift Log `<smart-shift-log>`

ShiftLog is the book on the control-room desk, kept where the screens are: what one shift needs the next to know that no tag says - that a filler jammed twice and was cleared by hand, that maintenance is coming at ten.

JavaScript TypeScript Angular React Vue Blazor

<smart-shift-log> · 14 properties, 1 methods, 4 events · source/modules/smart.shiftlog.js

Usage in Angular

The Angular wrapper is ShiftLogComponent from ShiftLogModule: 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 { ShiftLogModule, ShiftLogComponent } from 'smart-industrial/angular/shiftlog';

<smart-shift-log #shiftLog [label]="'Line 3 shift log'"
    (onEntryAdd)="onEntryAdd($event)"></smart-shift-log>

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

Properties

Input	Type, default	Description
`[entries]` entries	array	Sets or retrieves the entries as [{ id, at, author, role, category, text, tag, correcting }], the shape a Scada Studio station returns from /api/shiftlog. correcting is the id of the entry an entry corrects; the corrected entry stays, marked as corrected. Assign a new array to update the component.
`[categories]` categories	array ["note","handover","maintenance","qua…	Sets or retrieves the categories an entry can have, and the filters above the list. Each is named through the category-<name> message, so a plant's own category needs a message too.
`[label]` label	string	Sets or retrieves the heading of the log. It is also the accessible name of the group.
`[shift]` shift	object?	Sets or retrieves the current shift as { name, from, to }. Entries from before from are listed under Earlier shifts.
`[author]` author	string	Sets or retrieves the name shown as writing the next entry. It is only shown: the station stamps the author of the session that sends the entry.
`[filter]` filter	string	Sets or retrieves the category the list is filtered to; empty lists every entry.
`[readOnly]` readOnly	boolean false	Sets or retrieves whether the log only shows the entries. The box and the Correct buttons are removed: a supervisor's view.
`[busy]` busy	boolean false	Sets or retrieves whether the application is storing an entry. The Add button waits while it is set.
`[errorMessage]` errorMessage	string	Sets or retrieves the reason the station refused an entry. When set, it is shown and announced, and the draft is put back into the box rather than lost - unless the operator has started another entry meanwhile, which is kept: the refused text then waits beside the reason, with a button that puts it back below what is in the box.
`[error]` error	string	Sets the reason the station refused an entry, by its earlier name: it sets errorMessage. Reading it returns the element's error-reporting method, which reads as the message where text is wanted; read errorMessage for the message.
`[maxLength]` maxLength	number 2000	Sets or retrieves the longest entry, in characters.
`[search]` search	string	Sets or retrieves the words the entries shown must contain - in the text, the author, the tag or the category. The words are marked where they are found. The box above the list sets it as it is typed.
`[range]` range	ShiftLogRange all	Sets or retrieves the period shown: everything, this shift (from shift.from), the last 24 hours, the last 7 days.
`[pageSize]` pageSize	number 100	Sets or retrieves how many entries are drawn at once; the rest are a "Show more" away, so a year's log opens as fast as a day's.

Methods

Method	Description
`exportCsv(): Promise<any>` and `exportCsvSync(): string`	Returns the entries shown - after the category, the search and the period - as CSV: time, author, category, tag, text and the entry each corrects. A cell a spreadsheet would read as a formula is written as text.

Events

The data of an event is in event.detail. entryAdd is a request: the shift log raises it only while readOnly and busy are clear, shows the entry once the application adds it to entries, and puts the draft back when the application sets error. filterChange and searchChange follow a change the log has already made to filter or search, and after exportRequest the log downloads the CSV unless the application calls preventDefault().

Output	Description and detail
`(onEntryAdd)` entryAdd	This event is triggered when the operator adds an entry, with the Add button or Ctrl+Enter. The component does not store it: the application sends it to the station, which stamps the time and the author, and hands back the entries. The box is cleared; if the application then sets error, the text comes back. `text` string The text of the entry. `category` string Its category. `tag` string The tag it is about, when one was given. `correcting` string The id of the entry it corrects, when it is a correction.
`(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. `count` number The entries in it.
`(onSearchChange)` searchChange	This event is triggered when the search is changed in the box. `search` string The words searched for.
`(onFilterChange)` filterChange	This event is triggered when the operator filters the list by a category. `category` string The category filtered to; empty for every entry.

Types

`type ShiftLogRange`

'all' | 'shift' | 'day' | 'week'

CSS variables

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

--smart-shift-log-handover --smart-shift-log-safety --smart-shift-log-error --smart-shift-log-mono