Recipes, orders and scheduled jobs

Job Panel `<smart-job-panel>`

JobPanel shows what a station does on its own - the jobs it runs because of the clock rather than because of a person - with what each does, when it runs and how it went last time.

JavaScript TypeScript Angular React Vue Blazor

<smart-job-panel> · 6 properties, 0 methods, 2 events · source/modules/smart.jobpanel.js

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.jobpanel.js';

<smart-job-panel ref="jobPanel" :label="'Line 3 jobs'"
    @jobRun="onEvent"></smart-job-panel>



// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-job-panel :jobs.prop="jobs"></smart-job-panel>

Properties

Binding	Type, default	Description
`:jobs` jobs	array	Sets or retrieves the jobs as [{ id, name, enabled, when, action, lastRun, lastResult, runs, error }]. when is { daily: 'hh:mm' }, { weekly: { days, at } }, { every: milliseconds } or { cron }, and may carry text - the words the station's own schedule reader made of it, shown in place of the expression. action is { kind: 'recipe', recipe }, { kind: 'write', tag, value } or { kind: 'flow', flow }. lastResult is { ok, error }. The shape is what a Scada Studio station returns from /api/jobs. Assign a new array to update the component.
`:label` label	string	Sets or retrieves the heading of the panel. It is also the accessible name of the group.
`:read-only` readOnly	boolean false	Sets or retrieves whether the panel only shows the jobs. The Run now and Enable/Disable buttons are removed rather than disabled, because a control that cannot be used should not invite a press; every job and how it last went stays readable.
`:allow-toggle` allowToggle	boolean true	Sets or retrieves whether the Enable/Disable button is offered. Running a job and changing what the station does on its own are different rights - an operator may run the night setback early, only an engineer may switch it off - so an application can give the first without the second. When false the button is removed rather than disabled.
`:running` running	string	Sets or retrieves the id of the job the application is running now. Its row says so and its button cannot be pressed twice. The application sets it on jobRun and clears it when the run comes back. From a jobRun until the application sets running, or for two seconds when it never does, the panel raises no other jobRun - so a held Enter or a double click runs a job once.
`:confirm` confirm	boolean true	Sets or retrieves whether running a job by hand asks first. The confirmation says what the job does. A job writes into a plant, and running the night setback in the middle of the afternoon is a thing to be sure about, so this is on by default. The confirmation runs exactly what it showed: the job's action is copied when it opens, so a jobs update while it is open cannot change what Run it sends. A job that has left the station by then is not run. Escape, Cancel and Run it give the focus back to the Run now button.

Events

The data of an event is in event.detail. jobRun and jobToggle are requests: the job panel raises them only while readOnly is false, asks for confirmation before jobRun while confirm is true, and keeps jobs and running as they are. The application sets running while a job runs and updates jobs with the result or the new enabled state.

Event Description and detail

Event	Description and detail
`@jobRun`	This event is triggered when the operator runs a job by hand, after the confirmation when one is asked for. The component does not run it: the application asks the station to, sets the running property while it does, and hands back the updated jobs. It cannot know who is pressing the button or how the run should be audited, so it does not pretend to. Raised once per press: a held key or a double click does not raise it again. `id` string The id of the job. `name` string The name of the job, as the operator saw it. `action` any What the job does, as it was given in jobs.
`@jobToggle`	This event is triggered when the operator switches a job on or off. The list is not changed; the application stores the change on the station and hands back the updated jobs. A second click on the same switch within a second is the same press and raises nothing. `id` string The id of the job. `name` string Its name. `enabled` boolean Whether the job is asked to be on: true to switch it on, false to switch it off.

@jobRun

This event is triggered when the operator runs a job by hand, after the confirmation when one is asked for. The component does not run it: the application asks the station to, sets the running property while it does, and hands back the updated jobs. It cannot know who is pressing the button or how the run should be audited, so it does not pretend to. Raised once per press: a held key or a double click does not raise it again.

id string The id of the job.
name string The name of the job, as the operator saw it.
action any What the job does, as it was given in jobs.

@jobToggle

This event is triggered when the operator switches a job on or off. The list is not changed; the application stores the change on the station and hands back the updated jobs. A second click on the same switch within a second is the same press and raises nothing.

id string The id of the job.
name string Its name.
enabled boolean Whether the job is asked to be on: true to switch it on, false to switch it off.

CSS variables

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

--smart-job-panel-failed-color --smart-job-panel-ok-color --smart-job-panel-mono