Downtime Log

angular/app.component.html

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

        <section id="overview">
            <h2>Smart.DowntimeLog lists every stop of a line and asks the person who was there why it stopped.</h2>
            <p>OEE is the first number a plant manager asks for, and its losses are only as good as the reasons behind
               the stops. The station knows <i>when</i> a machine stopped - its running signal went false - and only
               the operator standing next to it knows <i>why</i>. The reasons come from a list the plant chose, so
               "Changeover" on Monday and "change over" on Tuesday do not become two causes.</p>
        </section>

        <section>
            <h2>Stops waiting for a reason</h2>
            <p>The log opens on the stops that have no reason yet, and the header says how many: an unexplained stop is
               lost time nobody can act on. <b>Give a reason</b> opens the plant's reasons as large tiles, grouped as
               planned and unplanned. The capper is still stopped; its time counts up.</p>
            <div class="demo-row">
                <smart-downtime-log id="log" label="Line 3 downtime"></smart-downtime-log>
            </div>
            <div class="demo-actions">
                <button type="button" id="stop">Stop the labeller now</button>
                <button type="button" id="start">Start it again</button>
            </div>
            <p class="hint" id="note">The log raises <code>stopClassify</code>; this page plays the station that records it.</p>
        </section>

        <section>
            <h2>Short stops</h2>
            <p>A stop shorter than its machine's threshold is still lost time, but asking a reason for every ten-second
               hiccup teaches operators to pick <i>Other</i>. They are counted apart and listed only with
               <b>Show short stops</b>.</p>
        </section>

        <section>
            <h2>Read-only</h2>
            <p><code>readOnly</code> and <code>view="all"</code>: the supervisor's view of the same shift, with who gave
               each reason.</p>
            <div class="demo-row">
                <smart-downtime-log id="viewer" label="Line 3 downtime (view only)" view="all" [readOnly]="true"></smart-downtime-log>
            </div>
        </section>

    </div>
</div>

angular/app.component.ts

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

import { DowntimeLogModule } from 'smart-industrial/angular/downtimelog';

import { runDemo } from './demo';

/**
 * Smart.UI Industrial - DowntimeLog 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: [DowntimeLogModule],
    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 downtime log: the page plays the station, which opens a stop when a machine's running
   signal goes false, closes it when it comes back, and records the reason with the name of
   whoever gave it. */

export function runDemo(): void {
    const log = document.getElementById('log'),
        viewer = document.getElementById('viewer'),
        note = document.getElementById('note'),
        ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString(),
        REASONS = [
            { code: 'changeover', label: 'Changeover', group: 'Planned' },
            { code: 'cleaning', label: 'Cleaning', group: 'Planned' },
            { code: 'break', label: 'Break', group: 'Planned' },
            { code: 'maintenance', label: 'Planned maintenance', group: 'Planned' },
            { code: 'breakdown', label: 'Breakdown', group: 'Unplanned' },
            { code: 'jam', label: 'Jam', group: 'Unplanned' },
            { code: 'starved', label: 'Starved (no material)', group: 'Unplanned' },
            { code: 'blocked', label: 'Blocked (downstream full)', group: 'Unplanned' },
            { code: 'quality', label: 'Quality hold', group: 'Unplanned' },
            { code: 'other', label: 'Other', group: 'Unplanned' }
        ],
        STOPS = [
            { id: 's9', machine: 'capper', machineName: 'Capper', from: ago(4), to: null, reason: '' },
            { id: 's8', machine: 'filler', machineName: 'Filler', from: ago(38), to: ago(31), seconds: 420, reason: '' },
            { id: 's7', machine: 'labeller', machineName: 'Labeller', from: ago(52), to: ago(51.8), seconds: 12, short: true, reason: '' },
            { id: 's6', machine: 'filler', machineName: 'Filler', from: ago(95), to: ago(83), seconds: 720, reason: 'jam', comment: 'Bottle down at the star wheel', classifiedBy: 'A. Brandt' },
            { id: 's5', machine: 'palletiser', machineName: 'Palletiser', from: ago(130), to: ago(122), seconds: 480, reason: '' },
            { id: 's4', machine: 'labeller', machineName: 'Labeller', from: ago(170), to: ago(169.7), seconds: 18, short: true, reason: '' },
            { id: 's3', machine: 'filler', machineName: 'Filler', from: ago(215), to: ago(190), seconds: 1500, reason: 'changeover', comment: 'Product A to B', classifiedBy: 'A. Brandt' },
            { id: 's2', machine: 'capper', machineName: 'Capper', from: ago(260), to: ago(255), seconds: 300, reason: 'starved', classifiedBy: 'A. Brandt' }
        ];
    let next = 10;

    const show = () => {
        [log, viewer].forEach((one) => {
            one.reasons = REASONS;
            one.stops = STOPS.map((stop) => Object.assign({}, stop));
        });
    };

    show();

    /* The station records the reason, with the name of whoever is signed in, and hands the log
       back. The element wrote nothing. */
    log.addEventListener('stopClassify', function (event) {
        const detail = event.detail,
            stop = STOPS.find((one) => one.id === detail.id);

        log.busy = detail.id;
        note.textContent = 'Recording the reason...';
        setTimeout(function () {
            log.busy = '';
            Object.assign(stop, { reason: detail.reason, comment: detail.comment, classifiedBy: 'A. Brandt' });
            show();
            note.textContent = stop.machineName + ': ' + REASONS.find((r) => r.code === detail.reason).label + (detail.comment ? ' - "' + detail.comment + '"' : '') + ', recorded by A. Brandt.';
        }, 500);
    });

    document.getElementById('stop').addEventListener('click', function () {
        if (STOPS.some((stop) => stop.machine === 'labeller' && !stop.to)) {
            return;
        }
        STOPS.unshift({ id: 's' + next++, machine: 'labeller', machineName: 'Labeller', from: new Date().toISOString(), to: null, reason: '' });
        show();
        note.textContent = 'The labeller\'s running signal went false: a stop is open.';
    });

    document.getElementById('start').addEventListener('click', function () {
        const stop = STOPS.find((one) => one.machine === 'labeller' && !one.to);

        if (!stop) {
            return;
        }
        stop.to = new Date().toISOString();
        stop.seconds = Math.round((Date.parse(stop.to) - Date.parse(stop.from)) / 1000);
        stop.short = stop.seconds < 30;
        show();
        note.textContent = 'The labeller runs again: the stop lasted ' + stop.seconds + ' s' + (stop.short ? ', under the 30 s threshold - a short stop.' : '.');
    });
}

angular/app.component.css

/* The log is a real panel 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-downtime-log {
  width: 820px;
  max-width: 100%;
  height: 480px;
}

#viewer {
  height: 380px;
}

/* ── 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 { DowntimeLog } from 'smart-industrial/react/downtimelog';


/* The demo logic is the HTML demo's: it feeds the elements the way a plant's data would. */
/* The downtime log: the page plays the station, which opens a stop when a machine's running
   signal goes false, closes it when it comes back, and records the reason with the name of
   whoever gave it. */

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 log = document.getElementById('log'),
                viewer = document.getElementById('viewer'),
                note = document.getElementById('note'),
                ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString(),
                REASONS = [
                    { code: 'changeover', label: 'Changeover', group: 'Planned' },
                    { code: 'cleaning', label: 'Cleaning', group: 'Planned' },
                    { code: 'break', label: 'Break', group: 'Planned' },
                    { code: 'maintenance', label: 'Planned maintenance', group: 'Planned' },
                    { code: 'breakdown', label: 'Breakdown', group: 'Unplanned' },
                    { code: 'jam', label: 'Jam', group: 'Unplanned' },
                    { code: 'starved', label: 'Starved (no material)', group: 'Unplanned' },
                    { code: 'blocked', label: 'Blocked (downstream full)', group: 'Unplanned' },
                    { code: 'quality', label: 'Quality hold', group: 'Unplanned' },
                    { code: 'other', label: 'Other', group: 'Unplanned' }
                ],
                STOPS = [
                    { id: 's9', machine: 'capper', machineName: 'Capper', from: ago(4), to: null, reason: '' },
                    { id: 's8', machine: 'filler', machineName: 'Filler', from: ago(38), to: ago(31), seconds: 420, reason: '' },
                    { id: 's7', machine: 'labeller', machineName: 'Labeller', from: ago(52), to: ago(51.8), seconds: 12, short: true, reason: '' },
                    { id: 's6', machine: 'filler', machineName: 'Filler', from: ago(95), to: ago(83), seconds: 720, reason: 'jam', comment: 'Bottle down at the star wheel', classifiedBy: 'A. Brandt' },
                    { id: 's5', machine: 'palletiser', machineName: 'Palletiser', from: ago(130), to: ago(122), seconds: 480, reason: '' },
                    { id: 's4', machine: 'labeller', machineName: 'Labeller', from: ago(170), to: ago(169.7), seconds: 18, short: true, reason: '' },
                    { id: 's3', machine: 'filler', machineName: 'Filler', from: ago(215), to: ago(190), seconds: 1500, reason: 'changeover', comment: 'Product A to B', classifiedBy: 'A. Brandt' },
                    { id: 's2', machine: 'capper', machineName: 'Capper', from: ago(260), to: ago(255), seconds: 300, reason: 'starved', classifiedBy: 'A. Brandt' }
                ];
            let next = 10;

            const show = () => {
                [log, viewer].forEach((one) => {
                    one.reasons = REASONS;
                    one.stops = STOPS.map((stop) => Object.assign({}, stop));
                });
            };

            show();

            /* The station records the reason, with the name of whoever is signed in, and hands the log
               back. The element wrote nothing. */
            log.addEventListener('stopClassify', function (event) {
                const detail = event.detail,
                    stop = STOPS.find((one) => one.id === detail.id);

                log.busy = detail.id;
                note.textContent = 'Recording the reason...';
                setTimeout(function () {
                    log.busy = '';
                    Object.assign(stop, { reason: detail.reason, comment: detail.comment, classifiedBy: 'A. Brandt' });
                    show();
                    note.textContent = stop.machineName + ': ' + REASONS.find((r) => r.code === detail.reason).label + (detail.comment ? ' - "' + detail.comment + '"' : '') + ', recorded by A. Brandt.';
                }, 500);
            });

            document.getElementById('stop').addEventListener('click', function () {
                if (STOPS.some((stop) => stop.machine === 'labeller' && !stop.to)) {
                    return;
                }
                STOPS.unshift({ id: 's' + next++, machine: 'labeller', machineName: 'Labeller', from: new Date().toISOString(), to: null, reason: '' });
                show();
                note.textContent = 'The labeller\'s running signal went false: a stop is open.';
            });

            document.getElementById('start').addEventListener('click', function () {
                const stop = STOPS.find((one) => one.machine === 'labeller' && !one.to);

                if (!stop) {
                    return;
                }
                stop.to = new Date().toISOString();
                stop.seconds = Math.round((Date.parse(stop.to) - Date.parse(stop.from)) / 1000);
                stop.short = stop.seconds < 30;
                show();
                note.textContent = 'The labeller runs again: the stop lasted ' + stop.seconds + ' s' + (stop.short ? ', under the 30 s threshold - a short stop.' : '.');
            });
        });

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

    return (
        <div className="react-root" ref={root} theme="industrial">
            <div className="smart-demo-container">
                <section id="overview">
                    <h2>Smart.DowntimeLog lists every stop of a line and asks the person who was there why it stopped.</h2>
                    <p>OEE is the first number a plant manager asks for, and its losses are only as good as the reasons behind the stops. The station knows <i>when</i> a machine stopped - its running signal went false - and only the operator standing next to it knows <i>why</i>. The reasons come from a list the plant chose, so "Changeover" on Monday and "change over" on Tuesday do not become two causes.</p>
                </section>
                <section>
                    <h2>Stops waiting for a reason</h2>
                    <p>The log opens on the stops that have no reason yet, and the header says how many: an unexplained stop is lost time nobody can act on. <b>Give a reason</b> opens the plant's reasons as large tiles, grouped as planned and unplanned. The capper is still stopped; its time counts up.</p>
                    <div className="demo-row">
                        <DowntimeLog id="log" label="Line 3 downtime"></DowntimeLog>
                    </div>
                    <div className="demo-actions">
                        <button type="button" id="stop">Stop the labeller now</button>
                        <button type="button" id="start">Start it again</button>
                    </div>
                    <p className="hint" id="note">The log raises <code>stopClassify</code>; this page plays the station that records it.</p>
                </section>
                <section>
                    <h2>Short stops</h2>
                    <p>A stop shorter than its machine's threshold is still lost time, but asking a reason for every ten-second hiccup teaches operators to pick <i>Other</i>. They are counted apart and listed only with <b>Show short stops</b>.</p>
                </section>
                <section>
                    <h2>Read-only</h2>
                    <p><code>readOnly</code> and <code>view="all"</code>: the supervisor's view of the same shift, with who gave each reason.</p>
                    <div className="demo-row">
                        <DowntimeLog id="viewer" label="Line 3 downtime (view only)" view="all" readOnly></DowntimeLog>
                    </div>
                </section>
            </div>
        </div>
    );
};

export default App;

react/App.css

/* The log is a real panel 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-downtime-log {
  width: 820px;
  max-width: 100%;
  height: 480px;
}

#viewer {
  height: 380px;
}

/* ── 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.DowntimeLog lists every stop of a line and asks the person who was there why it stopped.</h2>
            <p>OEE is the first number a plant manager asks for, and its losses are only as good as the reasons behind
               the stops. The station knows <i>when</i> a machine stopped - its running signal went false - and only
               the operator standing next to it knows <i>why</i>. The reasons come from a list the plant chose, so
               "Changeover" on Monday and "change over" on Tuesday do not become two causes.</p>
        </section>

        <section>
            <h2>Stops waiting for a reason</h2>
            <p>The log opens on the stops that have no reason yet, and the header says how many: an unexplained stop is
               lost time nobody can act on. <b>Give a reason</b> opens the plant's reasons as large tiles, grouped as
               planned and unplanned. The capper is still stopped; its time counts up.</p>
            <div class="demo-row">
                <smart-downtime-log id="log" label="Line 3 downtime"></smart-downtime-log>
            </div>
            <div class="demo-actions">
                <button type="button" id="stop">Stop the labeller now</button>
                <button type="button" id="start">Start it again</button>
            </div>
            <p class="hint" id="note">The log raises <code>stopClassify</code>; this page plays the station that records it.</p>
        </section>

        <section>
            <h2>Short stops</h2>
            <p>A stop shorter than its machine's threshold is still lost time, but asking a reason for every ten-second
               hiccup teaches operators to pick <i>Other</i>. They are counted apart and listed only with
               <b>Show short stops</b>.</p>
        </section>

        <section>
            <h2>Read-only</h2>
            <p><code>readOnly</code> and <code>view="all"</code>: the supervisor's view of the same shift, with who gave
               each reason.</p>
            <div class="demo-row">
                <smart-downtime-log id="viewer" label="Line 3 downtime (view only)" view="all" read-only></smart-downtime-log>
            </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.downtimelog.js";


/* The downtime log: the page plays the station, which opens a stop when a machine's running
   signal goes false, closes it when it comes back, and records the reason with the name of
   whoever gave it. */

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 log = document.getElementById('log'),
            viewer = document.getElementById('viewer'),
            note = document.getElementById('note'),
            ago = (minutes) => new Date(Date.now() - minutes * 60000).toISOString(),
            REASONS = [
                { code: 'changeover', label: 'Changeover', group: 'Planned' },
                { code: 'cleaning', label: 'Cleaning', group: 'Planned' },
                { code: 'break', label: 'Break', group: 'Planned' },
                { code: 'maintenance', label: 'Planned maintenance', group: 'Planned' },
                { code: 'breakdown', label: 'Breakdown', group: 'Unplanned' },
                { code: 'jam', label: 'Jam', group: 'Unplanned' },
                { code: 'starved', label: 'Starved (no material)', group: 'Unplanned' },
                { code: 'blocked', label: 'Blocked (downstream full)', group: 'Unplanned' },
                { code: 'quality', label: 'Quality hold', group: 'Unplanned' },
                { code: 'other', label: 'Other', group: 'Unplanned' }
            ],
            STOPS = [
                { id: 's9', machine: 'capper', machineName: 'Capper', from: ago(4), to: null, reason: '' },
                { id: 's8', machine: 'filler', machineName: 'Filler', from: ago(38), to: ago(31), seconds: 420, reason: '' },
                { id: 's7', machine: 'labeller', machineName: 'Labeller', from: ago(52), to: ago(51.8), seconds: 12, short: true, reason: '' },
                { id: 's6', machine: 'filler', machineName: 'Filler', from: ago(95), to: ago(83), seconds: 720, reason: 'jam', comment: 'Bottle down at the star wheel', classifiedBy: 'A. Brandt' },
                { id: 's5', machine: 'palletiser', machineName: 'Palletiser', from: ago(130), to: ago(122), seconds: 480, reason: '' },
                { id: 's4', machine: 'labeller', machineName: 'Labeller', from: ago(170), to: ago(169.7), seconds: 18, short: true, reason: '' },
                { id: 's3', machine: 'filler', machineName: 'Filler', from: ago(215), to: ago(190), seconds: 1500, reason: 'changeover', comment: 'Product A to B', classifiedBy: 'A. Brandt' },
                { id: 's2', machine: 'capper', machineName: 'Capper', from: ago(260), to: ago(255), seconds: 300, reason: 'starved', classifiedBy: 'A. Brandt' }
            ];
        let next = 10;

        const show = () => {
            [log, viewer].forEach((one) => {
                one.reasons = REASONS;
                one.stops = STOPS.map((stop) => Object.assign({}, stop));
            });
        };

        show();

        /* The station records the reason, with the name of whoever is signed in, and hands the log
           back. The element wrote nothing. */
        log.addEventListener('stopClassify', function (event) {
            const detail = event.detail,
                stop = STOPS.find((one) => one.id === detail.id);

            log.busy = detail.id;
            note.textContent = 'Recording the reason...';
            setTimeout(function () {
                log.busy = '';
                Object.assign(stop, { reason: detail.reason, comment: detail.comment, classifiedBy: 'A. Brandt' });
                show();
                note.textContent = stop.machineName + ': ' + REASONS.find((r) => r.code === detail.reason).label + (detail.comment ? ' - "' + detail.comment + '"' : '') + ', recorded by A. Brandt.';
            }, 500);
        });

        document.getElementById('stop').addEventListener('click', function () {
            if (STOPS.some((stop) => stop.machine === 'labeller' && !stop.to)) {
                return;
            }
            STOPS.unshift({ id: 's' + next++, machine: 'labeller', machineName: 'Labeller', from: new Date().toISOString(), to: null, reason: '' });
            show();
            note.textContent = 'The labeller\'s running signal went false: a stop is open.';
        });

        document.getElementById('start').addEventListener('click', function () {
            const stop = STOPS.find((one) => one.machine === 'labeller' && !one.to);

            if (!stop) {
                return;
            }
            stop.to = new Date().toISOString();
            stop.seconds = Math.round((Date.parse(stop.to) - Date.parse(stop.from)) / 1000);
            stop.short = stop.seconds < 30;
            show();
            note.textContent = 'The labeller runs again: the stop lasted ' + stop.seconds + ' s' + (stop.short ? ', under the 30 s threshold - a short stop.' : '.');
        });
      });
    });
  }
};
</script>

<style>
/* The log is a real panel 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-downtime-log {
  width: 820px;
  max-width: 100%;
  height: 480px;
}

#viewer {
  height: 380px;
}

/* ── 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>