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.
<smart-shift-log> · 14 properties, 1 methods, 4 events · source/modules/smart.shiftlog.js
Usage in JavaScript
The component is a custom element: its properties are set on the element, its events are DOM CustomEvents with the data in event.detail, and its methods are called on the element. The properties can also be written as attributes in kebab case (precision-digits="1").
const shiftLog = document.querySelector('smart-shift-log');
shiftLog.label = 'Line 3 shift log';
shiftLog.addEventListener('entryAdd', (event) => 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 | 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 | Sets or retrieves whether the log only shows the entries. The box and the Correct buttons are removed: a supervisor's view. |
busy | boolean | 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 | 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 | 'all' | 'shift' | 'day' | 'week' | Sets or retrieves the period shown: everything, this shift (from shift.from), the last 24 hours, the last 7 days.all shift day week |
pageSize | number | 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() | 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