Job Panel

angular/app.component.html

<div class="angular-root" theme="industrial">
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.JobPanel shows what the station does on its own, in front of the people it does it to.</h2>
            <p>A job is something that happens because of the clock rather than because of a person &mdash; a night
               setback at ten, a pump exercised every Sunday, a report on the hour. An operator who does not know one
               exists will spend a shift wondering who moved the setpoint. Each row answers three questions: what it
               does, when it runs, and how it went last time.</p>
        </section>

        <section>
            <h2>A station&rsquo;s jobs</h2>
            <p>A job that failed says so where it is read, not only in a log. A switched-off job keeps its place and
               fades rather than disappearing: an absent job and a disabled one are different things, and the
               difference matters at three in the morning.</p>
            <div class="demo-row">
                <smart-job-panel id="line3" label="Line 3 jobs"></smart-job-panel>
            </div>
            <p class="hint" id="log">The panel raises <code>jobRun</code> and <code>jobToggle</code>; this page does the work.</p>
        </section>

        <section>
            <h2>It never runs anything itself</h2>
            <p><b>Run now</b> raises <code>jobRun</code> and the switch raises <code>jobToggle</code>; the host does the
               work through the station, which records who asked. When a job next runs is the station&rsquo;s to say
               &mdash; it fires on the schedule, so it is the only thing entitled to read one &mdash; and a host passes
               those words down as <code>when.text</code>. The <i>Shift report</i> row shows one.</p>
        </section>

        <section>
            <h2>What each person may do</h2>
            <p>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. <code>allowToggle</code> set to false keeps
               <b>Run now</b> and removes the switch.</p>
            <div class="demo-row">
                <smart-job-panel id="operator" label="Jobs (operator)"></smart-job-panel>
            </div>
            <p><code>readOnly</code> removes every control rather than disabling it. Somebody with view rights still
               sees every job and how it last went.</p>
            <div class="demo-row">
                <smart-job-panel id="viewer" label="Jobs (view only)" [readOnly]="true"></smart-job-panel>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

import { Component, AfterViewInit, OnDestroy } from '@angular/core';

import { JobPanelModule } from 'smart-industrial/angular/jobpanel';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - JobPanel in Angular.
 *
 * The template is the HTML demo's markup: the elements are the wrappers, so what is
 * written on them is checked against their inputs. demo.ts drives them the way the
 * plant's data would, once every element in the view has rendered.
 */
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [JobPanelModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, OnDestroy {
    private unmounted = false;

    ngAfterViewInit(): void {
        const root = document.querySelector('.angular-root') as HTMLElement,
            pending: Promise<void>[] = [];

        root.querySelectorAll('*').forEach((element: any) => {
            if (typeof element.whenRendered === 'function' && !element.isRendered) {
                pending.push(element.whenRendered());
            }
        });

        Promise.all(pending).then(() => {
            if (!this.unmounted) {
                runDemo();
            }
        });
    }

    ngOnDestroy(): void {
        this.unmounted = true;
    }
}

angular/demo.ts

// @ts-nocheck
/* The HTML demo's script, as it was written: page code that feeds the elements, not a typed
   API. The types are on the wrappers in app.component.ts. */

/* The job panel: the page holds the jobs and does the work, as a station would. */

export function runDemo(): void {
    const now = Date.now(),
        ago = (minutes) => new Date(now - minutes * 60000).toISOString();

    const JOBS = [
        { id: 'night-setback', name: 'Night setback', enabled: true,
            when: { daily: '22:00' }, action: { kind: 'recipe', recipe: 'standby' },
            lastRun: ago(60 * 14), lastResult: { ok: true }, runs: 31 },
        { id: 'exercise-pump', name: 'Exercise the pump', enabled: true,
            when: { weekly: { days: ['sun'], at: '03:00' } }, action: { kind: 'write', tag: 'plc.P-101B.START', value: true },
            lastRun: ago(60 * 24 * 3), lastResult: { ok: true }, runs: 12 },
        { id: 'shift-report', name: 'Shift report', enabled: true,
            /* the words the station's own cron reader made of the expression */
            when: { cron: '0 6,14,22 * * *', text: 'at 06:00, 14:00, 22:00, every day' },
            action: { kind: 'flow', flow: 'Shift report' },
            lastRun: ago(60 * 2), lastResult: { ok: false, error: 'no diagram called "Shift report" on this station' }, runs: 90 },
        { id: 'flush', name: 'Flush the sample line', enabled: true,
            when: { every: 900000 }, action: { kind: 'write', tag: 'plc.XV-310.OPEN', value: true },
            lastRun: ago(4), lastResult: { ok: true }, runs: 412 },
        { id: 'cip', name: 'Clean in place', enabled: false,
            when: { weekly: { days: ['sat'], at: '18:00' } }, action: { kind: 'recipe', recipe: 'cip' },
            lastRun: null, runs: 0 }
    ];

    const panel = document.getElementById('line3'),
        operator = document.getElementById('operator'),
        viewer = document.getElementById('viewer'),
        log = document.getElementById('log');

    /* runs, does not switch */
    operator.allowToggle = false;

    const show = () => {
        [panel, operator, viewer].forEach((one) => { one.jobs = JOBS.map((job) => Object.assign({}, job)); });
    };

    show();

    /* The host runs it. The panel asked; it did not act. */
    const run = function (event) {
        const asking = event.currentTarget,
            job = JOBS.find((one) => one.id === event.detail.id);

        asking.running = job.id;
        log.textContent = 'Running "' + job.name + '"...';
        setTimeout(function () {
            job.lastRun = new Date().toISOString();
            job.runs = (job.runs || 0) + 1;
            /* the shift report keeps failing, the way a job pointed at a diagram that moved does */
            job.lastResult = job.id === 'shift-report'
                ? { ok: false, error: 'no diagram called "Shift report" on this station' }
                : { ok: true };
            asking.running = '';
            show();
            log.textContent = '"' + job.name + '" ' + (job.lastResult.ok ? 'ran.' : 'failed: ' + job.lastResult.error);
        }, 800);
    };

    panel.addEventListener('jobRun', run);
    operator.addEventListener('jobRun', run);

    panel.addEventListener('jobToggle', function (event) {
        const job = JOBS.find((one) => one.id === event.detail.id);

        job.enabled = event.detail.enabled;
        show();
        log.textContent = (job.enabled ? 'Enabled' : 'Disabled') + ' "' + job.name + '".';
    });
}

angular/app.component.css

/* The panel is a real control on a screen, so it is given the room one would have. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-job-panel {
  width: 780px;
  max-width: 100%;
  height: auto;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

react/App.jsx

import 'smart-industrial/source/styles/smart.default.css';
import 'smart-industrial/source/styles/smart.industrial-elements.css';
import 'smart-industrial/source/styles/smart.industrial.css';
import 'smart-industrial/source/styles/smart.industrial-dark.css';
import './App.css';
import React from 'react';
import { JobPanel } from 'smart-industrial/react/jobpanel';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The job panel: the page holds the jobs and does the work, as a station would. */

const App = () => {
    const root = React.useRef(null);

    React.useEffect(() => {
        /* The elements render after React has mounted them, and the demo's logic - written
           for a page's load event - reads their parts, so it waits for every element in the
           tree to have rendered first. */
        const pending = Array.from(root.current.querySelectorAll('*'))
            .filter((element) => typeof element.whenRendered === 'function' && !element.isRendered)
            .map((element) => element.whenRendered());
        let unmounted = false;

        Promise.all(pending).then(() => {
            if (unmounted) {
                return;
            }

            const now = Date.now(),
                ago = (minutes) => new Date(now - minutes * 60000).toISOString();

            const JOBS = [
                { id: 'night-setback', name: 'Night setback', enabled: true,
                    when: { daily: '22:00' }, action: { kind: 'recipe', recipe: 'standby' },
                    lastRun: ago(60 * 14), lastResult: { ok: true }, runs: 31 },
                { id: 'exercise-pump', name: 'Exercise the pump', enabled: true,
                    when: { weekly: { days: ['sun'], at: '03:00' } }, action: { kind: 'write', tag: 'plc.P-101B.START', value: true },
                    lastRun: ago(60 * 24 * 3), lastResult: { ok: true }, runs: 12 },
                { id: 'shift-report', name: 'Shift report', enabled: true,
                    /* the words the station's own cron reader made of the expression */
                    when: { cron: '0 6,14,22 * * *', text: 'at 06:00, 14:00, 22:00, every day' },
                    action: { kind: 'flow', flow: 'Shift report' },
                    lastRun: ago(60 * 2), lastResult: { ok: false, error: 'no diagram called "Shift report" on this station' }, runs: 90 },
                { id: 'flush', name: 'Flush the sample line', enabled: true,
                    when: { every: 900000 }, action: { kind: 'write', tag: 'plc.XV-310.OPEN', value: true },
                    lastRun: ago(4), lastResult: { ok: true }, runs: 412 },
                { id: 'cip', name: 'Clean in place', enabled: false,
                    when: { weekly: { days: ['sat'], at: '18:00' } }, action: { kind: 'recipe', recipe: 'cip' },
                    lastRun: null, runs: 0 }
            ];

            const panel = document.getElementById('line3'),
                operator = document.getElementById('operator'),
                viewer = document.getElementById('viewer'),
                log = document.getElementById('log');

            /* runs, does not switch */
            operator.allowToggle = false;

            const show = () => {
                [panel, operator, viewer].forEach((one) => { one.jobs = JOBS.map((job) => Object.assign({}, job)); });
            };

            show();

            /* The host runs it. The panel asked; it did not act. */
            const run = function (event) {
                const asking = event.currentTarget,
                    job = JOBS.find((one) => one.id === event.detail.id);

                asking.running = job.id;
                log.textContent = 'Running "' + job.name + '"...';
                setTimeout(function () {
                    job.lastRun = new Date().toISOString();
                    job.runs = (job.runs || 0) + 1;
                    /* the shift report keeps failing, the way a job pointed at a diagram that moved does */
                    job.lastResult = job.id === 'shift-report'
                        ? { ok: false, error: 'no diagram called "Shift report" on this station' }
                        : { ok: true };
                    asking.running = '';
                    show();
                    log.textContent = '"' + job.name + '" ' + (job.lastResult.ok ? 'ran.' : 'failed: ' + job.lastResult.error);
                }, 800);
            };

            panel.addEventListener('jobRun', run);
            operator.addEventListener('jobRun', run);

            panel.addEventListener('jobToggle', function (event) {
                const job = JOBS.find((one) => one.id === event.detail.id);

                job.enabled = event.detail.enabled;
                show();
                log.textContent = (job.enabled ? 'Enabled' : 'Disabled') + ' "' + job.name + '".';
            });
        });

        return () => {
            unmounted = true;
        };
    }, []);

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.JobPanel shows what the station does on its own, in front of the people it does it to.</h2>
                    <p>A job is something that happens because of the clock rather than because of a person — a night setback at ten, a pump exercised every Sunday, a report on the hour. An operator who does not know one exists will spend a shift wondering who moved the setpoint. Each row answers three questions: what it does, when it runs, and how it went last time.</p>
                </section>
                <section>
                    <h2>A station’s jobs</h2>
                    <p>A job that failed says so where it is read, not only in a log. A switched-off job keeps its place and fades rather than disappearing: an absent job and a disabled one are different things, and the difference matters at three in the morning.</p>
                    <div className="demo-row">
                        <JobPanel id="line3" label="Line 3 jobs"></JobPanel>
                    </div>
                    <p className="hint" id="log">The panel raises <code>jobRun</code> and <code>jobToggle</code>; this page does the work.</p>
                </section>
                <section>
                    <h2>It never runs anything itself</h2>
                    <p><b>Run now</b> raises <code>jobRun</code> and the switch raises <code>jobToggle</code>; the host does the work through the station, which records who asked. When a job next runs is the station’s to say — it fires on the schedule, so it is the only thing entitled to read one — and a host passes those words down as <code>when.text</code>. The <i>Shift report</i> row shows one.</p>
                </section>
                <section>
                    <h2>What each person may do</h2>
                    <p>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. <code>allowToggle</code> set to false keeps <b>Run now</b> and removes the switch.</p>
                    <div className="demo-row">
                        <JobPanel id="operator" label="Jobs (operator)"></JobPanel>
                    </div>
                    <p><code>readOnly</code> removes every control rather than disabling it. Somebody with view rights still sees every job and how it last went.</p>
                    <div className="demo-row">
                        <JobPanel id="viewer" label="Jobs (view only)" readOnly></JobPanel>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

/* The panel is a real control on a screen, so it is given the room one would have. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-job-panel {
  width: 780px;
  max-width: 100%;
  height: auto;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}

vue/App.vue

<template>
  <div class="vue-root" theme="industrial" v-pre>
    <div class="smart-demo-container">

        <section id="overview">
            <h2>Smart.JobPanel shows what the station does on its own, in front of the people it does it to.</h2>
            <p>A job is something that happens because of the clock rather than because of a person &mdash; a night
               setback at ten, a pump exercised every Sunday, a report on the hour. An operator who does not know one
               exists will spend a shift wondering who moved the setpoint. Each row answers three questions: what it
               does, when it runs, and how it went last time.</p>
        </section>

        <section>
            <h2>A station&rsquo;s jobs</h2>
            <p>A job that failed says so where it is read, not only in a log. A switched-off job keeps its place and
               fades rather than disappearing: an absent job and a disabled one are different things, and the
               difference matters at three in the morning.</p>
            <div class="demo-row">
                <smart-job-panel id="line3" label="Line 3 jobs"></smart-job-panel>
            </div>
            <p class="hint" id="log">The panel raises <code>jobRun</code> and <code>jobToggle</code>; this page does the work.</p>
        </section>

        <section>
            <h2>It never runs anything itself</h2>
            <p><b>Run now</b> raises <code>jobRun</code> and the switch raises <code>jobToggle</code>; the host does the
               work through the station, which records who asked. When a job next runs is the station&rsquo;s to say
               &mdash; it fires on the schedule, so it is the only thing entitled to read one &mdash; and a host passes
               those words down as <code>when.text</code>. The <i>Shift report</i> row shows one.</p>
        </section>

        <section>
            <h2>What each person may do</h2>
            <p>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. <code>allowToggle</code> set to false keeps
               <b>Run now</b> and removes the switch.</p>
            <div class="demo-row">
                <smart-job-panel id="operator" label="Jobs (operator)"></smart-job-panel>
            </div>
            <p><code>readOnly</code> removes every control rather than disabling it. Somebody with view rights still
               sees every job and how it last went.</p>
            <div class="demo-row">
                <smart-job-panel id="viewer" label="Jobs (view only)" read-only></smart-job-panel>
            </div>
        </section>

    </div>
  </div>
</template>

<script>
import { onMounted } from "vue";
import "smart-industrial/source/styles/smart.default.css";
import "smart-industrial/source/styles/smart.industrial-elements.css";
import "smart-industrial/source/styles/smart.industrial.css";
import "smart-industrial/source/styles/smart.industrial-dark.css";
import "smart-industrial/source/modules/smart.jobpanel.js";


/* The job panel: the page holds the jobs and does the work, as a station would. */

export default {
  name: "app",
  setup() {
    onMounted(() => {
      /* The elements render after Vue has mounted them, and the demo's logic - written for
         a page's load event - reads their parts, so it waits for every element in the tree
         to have rendered first. */
      const pending = Array.from(document.querySelector(".vue-root").querySelectorAll("*"))
        .filter((element) => typeof element.whenRendered === "function" && !element.isRendered)
        .map((element) => element.whenRendered());

      Promise.all(pending).then(() => {
        const now = Date.now(),
            ago = (minutes) => new Date(now - minutes * 60000).toISOString();

        const JOBS = [
            { id: 'night-setback', name: 'Night setback', enabled: true,
                when: { daily: '22:00' }, action: { kind: 'recipe', recipe: 'standby' },
                lastRun: ago(60 * 14), lastResult: { ok: true }, runs: 31 },
            { id: 'exercise-pump', name: 'Exercise the pump', enabled: true,
                when: { weekly: { days: ['sun'], at: '03:00' } }, action: { kind: 'write', tag: 'plc.P-101B.START', value: true },
                lastRun: ago(60 * 24 * 3), lastResult: { ok: true }, runs: 12 },
            { id: 'shift-report', name: 'Shift report', enabled: true,
                /* the words the station's own cron reader made of the expression */
                when: { cron: '0 6,14,22 * * *', text: 'at 06:00, 14:00, 22:00, every day' },
                action: { kind: 'flow', flow: 'Shift report' },
                lastRun: ago(60 * 2), lastResult: { ok: false, error: 'no diagram called "Shift report" on this station' }, runs: 90 },
            { id: 'flush', name: 'Flush the sample line', enabled: true,
                when: { every: 900000 }, action: { kind: 'write', tag: 'plc.XV-310.OPEN', value: true },
                lastRun: ago(4), lastResult: { ok: true }, runs: 412 },
            { id: 'cip', name: 'Clean in place', enabled: false,
                when: { weekly: { days: ['sat'], at: '18:00' } }, action: { kind: 'recipe', recipe: 'cip' },
                lastRun: null, runs: 0 }
        ];

        const panel = document.getElementById('line3'),
            operator = document.getElementById('operator'),
            viewer = document.getElementById('viewer'),
            log = document.getElementById('log');

        /* runs, does not switch */
        operator.allowToggle = false;

        const show = () => {
            [panel, operator, viewer].forEach((one) => { one.jobs = JOBS.map((job) => Object.assign({}, job)); });
        };

        show();

        /* The host runs it. The panel asked; it did not act. */
        const run = function (event) {
            const asking = event.currentTarget,
                job = JOBS.find((one) => one.id === event.detail.id);

            asking.running = job.id;
            log.textContent = 'Running "' + job.name + '"...';
            setTimeout(function () {
                job.lastRun = new Date().toISOString();
                job.runs = (job.runs || 0) + 1;
                /* the shift report keeps failing, the way a job pointed at a diagram that moved does */
                job.lastResult = job.id === 'shift-report'
                    ? { ok: false, error: 'no diagram called "Shift report" on this station' }
                    : { ok: true };
                asking.running = '';
                show();
                log.textContent = '"' + job.name + '" ' + (job.lastResult.ok ? 'ran.' : 'failed: ' + job.lastResult.error);
            }, 800);
        };

        panel.addEventListener('jobRun', run);
        operator.addEventListener('jobRun', run);

        panel.addEventListener('jobToggle', function (event) {
            const job = JOBS.find((one) => one.id === event.detail.id);

            job.enabled = event.detail.enabled;
            show();
            log.textContent = (job.enabled ? 'Enabled' : 'Disabled') + ' "' + job.name + '".';
        });
      });
    });
  }
};
</script>

<style>
/* The panel is a real control on a screen, so it is given the room one would have. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

smart-job-panel {
  width: 780px;
  max-width: 100%;
  height: auto;
}

/* ── Demo chrome, shared by the Industrial demos ─────────────────────────
   Headings, prose, buttons and notes are the same on every demo page. This block
   is appended by scripts and comes last, so it wins over the rules above. */
.smart-demo-container {
    padding: 4px 0 32px;
}

.smart-demo-container section {
    margin-bottom: 36px;
}

.smart-demo-container section h2 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--smart-text-color);
}

.smart-demo-container #overview h2 {
    margin-bottom: 10px;
    font-size: 20px;
    max-width: 78ch;
}

.smart-demo-container section > p {
    margin: 0 0 14px;
    max-width: 84ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--smart-text-secondary-color);
}

.smart-demo-container code {
    padding: 1px 5px;
    border-radius: 2px;
    background: var(--smart-ui-state-hover);
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.smart-demo-container .demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 12px;
}

.smart-demo-container .demo-actions label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--smart-text-color);
}

.smart-demo-container .demo-actions button,
.smart-demo-container .demo-button {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-industrial-panel-background, var(--smart-surface));
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.smart-demo-container .demo-actions button:hover,
.smart-demo-container .demo-button:hover {
    border-color: var(--smart-ui-state-border-hover);
    background: var(--smart-ui-state-hover);
    color: var(--smart-ui-state-color-hover);
}

.smart-demo-container .demo-actions button.demo-button-primary,
.smart-demo-container .demo-button-primary {
    border-color: var(--smart-primary);
    background: var(--smart-primary);
    color: var(--smart-primary-color, #fff);
}

.smart-demo-container .demo-actions button[disabled],
.smart-demo-container .demo-button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.smart-demo-container .demo-actions select,
.smart-demo-container .demo-actions input[type="text"],
.smart-demo-container .demo-actions input[type="number"] {
    min-height: 30px;
    padding: 2px 6px;
    border: 1px solid var(--smart-border);
    border-radius: 3px;
    background: var(--smart-background);
    color: var(--smart-text-color);
    font: inherit;
    font-size: 13px;
}

.smart-demo-container .hint,
.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .demo-log,
.smart-demo-container .demo-counts {
    font-family: Consolas, "Courier New", monospace;
}

.smart-demo-container .log {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--smart-text-secondary-color);
    opacity: 1;
}

.smart-demo-container .log li {
    padding: 2px 0;
}
</style>