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 TypeScript

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

import { ShiftLog, ShiftLogProperties } from 'smart-industrial/source/typescript/smart.industrial';

const shiftLog = document.querySelector('smart-shift-log') as ShiftLog;

shiftLog.label = 'Line 3 shift log';
shiftLog.addEventListener('entryAdd', (event: CustomEvent) => console.log(event.detail));
shiftLog.exportCsv();

Properties

Property	Type, default	Description
`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`	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`	string	Sets or retrieves the heading of the log. It is also the accessible name of the group.
`shift`	object?	Sets or retrieves the current shift as { name, from, to }. Entries from before from are listed under Earlier shifts.
`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`	string	Sets or retrieves the category the list is filtered to; empty lists every entry.
`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`	boolean false	Sets or retrieves whether the application is storing an entry. The Add button waits while it is set.
`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`	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`	number 2000	Sets or retrieves the longest entry, in characters.
`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`	ShiftLogRange all	Sets or retrieves the period shown: everything, this shift (from shift.from), the last 24 hours, the last 7 days.
`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(): 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().

Event	Description and detail
`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.
`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.
`searchChange`	This event is triggered when the search is changed in the box. `search` string The words searched for.
`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