1831 lines
213 KiB
Plaintext
1831 lines
213 KiB
Plaintext
[
|
|
{
|
|
"id": "cac3a4383120cb57",
|
|
"type": "tab",
|
|
"label": "Flow 1",
|
|
"disabled": false,
|
|
"info": "",
|
|
"env": []
|
|
},
|
|
{
|
|
"id": "16bb591480852f51",
|
|
"type": "group",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Start ",
|
|
"style": {
|
|
"stroke": "#92d04f",
|
|
"fill": "#addb7b",
|
|
"label": true
|
|
},
|
|
"nodes": [
|
|
"6ad64dedab2042b9",
|
|
"0f5ee343ed17976c",
|
|
"4e025693949ec4bd",
|
|
"b55c91c096a366db",
|
|
"33d1f41119e0e262",
|
|
"f98ae23b2430c206",
|
|
"0d023d87a13bf56f",
|
|
"dbc7a5ee041845ed",
|
|
"e15d6c1f78b644a2"
|
|
],
|
|
"x": 34,
|
|
"y": 339,
|
|
"w": 762,
|
|
"h": 162
|
|
},
|
|
{
|
|
"id": "bdaf9298cd8e306b",
|
|
"type": "group",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Cavity Settings ",
|
|
"style": {
|
|
"stroke": "#ff7f7f",
|
|
"fill": "#ffbfbf",
|
|
"label": true
|
|
},
|
|
"nodes": [
|
|
"e1f2a3b4c5d6e7f8",
|
|
"75dbe316f19fd44c"
|
|
],
|
|
"x": null,
|
|
"y": null,
|
|
"w": null,
|
|
"h": null
|
|
},
|
|
{
|
|
"id": "ec32d0a62eacfb22",
|
|
"type": "group",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "UI/UX",
|
|
"style": {
|
|
"fill": "#d1d1d1",
|
|
"label": true
|
|
},
|
|
"nodes": [
|
|
"1821c4842945ecd8",
|
|
"f2a3b4c5d6e7f8a9",
|
|
"f3a4b5c6d7e8f9a0",
|
|
"f4a5b6c7d8e9f0a1",
|
|
"f5a6b7c8d9e0f1a2",
|
|
"f1a2b3c4d5e6f7a8",
|
|
"a7d58e15929b3d8c",
|
|
"cc81a9dbfd443d62",
|
|
"06f9769e8b0d5355",
|
|
"0a5caf3e23c68e6e",
|
|
"010de5af3ced0ae3",
|
|
"6f9de736a538d0d1",
|
|
"16af50d6fce977a8",
|
|
"2f04a72fdeb67f3f",
|
|
"8f890f97aa9257c7",
|
|
"394cfca6b72f6444"
|
|
],
|
|
"x": 54,
|
|
"y": 39,
|
|
"w": 632,
|
|
"h": 282
|
|
},
|
|
{
|
|
"id": "b7ab5e0cc02b9508",
|
|
"type": "group",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Work Orders",
|
|
"style": {
|
|
"stroke": "#9363b7",
|
|
"fill": "#dbcbe7",
|
|
"label": true
|
|
},
|
|
"nodes": [
|
|
"9bbd4fade968036d",
|
|
"65ddb4cca6787bde",
|
|
"596b390d7aaf69fb",
|
|
"f6ad294bc02618c9",
|
|
"f2bab26e27e2023d",
|
|
"0779932734d8201c",
|
|
"3772c25d07b07407",
|
|
"c2b272494952cd98",
|
|
"87d85c86e4773aa5",
|
|
"15a6b7b6d8f39fe4",
|
|
"64661fe6aa2cb83d",
|
|
"578c92e75bf0f266",
|
|
"76ce53cf1ae40e9c",
|
|
"0d6ec01f421acdef",
|
|
"fd32602c52d896e9",
|
|
"d39000415ba85495",
|
|
"dc9b9a26af05dfa8",
|
|
"dc74dbc51dd757ba"
|
|
],
|
|
"x": 774,
|
|
"y": 259,
|
|
"w": 932,
|
|
"h": 322
|
|
},
|
|
{
|
|
"id": "75dbe316f19fd44c",
|
|
"type": "group",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "bdaf9298cd8e306b",
|
|
"name": "Cavities Settings",
|
|
"style": {
|
|
"stroke": "#ffff00",
|
|
"fill": "#ffffbf",
|
|
"label": true
|
|
},
|
|
"nodes": [
|
|
"e1f2a3b4c5d6e7f8",
|
|
"28c173789034639c"
|
|
],
|
|
"x": null,
|
|
"y": null,
|
|
"w": null,
|
|
"h": null
|
|
},
|
|
{
|
|
"id": "28c173789034639c",
|
|
"type": "group",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "75dbe316f19fd44c",
|
|
"name": "Settings",
|
|
"style": {
|
|
"stroke": "#92d04f",
|
|
"fill": "#ffffbf",
|
|
"label": true
|
|
},
|
|
"nodes": [
|
|
"eaebd8c719c3d135",
|
|
"a1b2c3d4e5f6a7b8",
|
|
"c9d8e7f6a5b4c3d2",
|
|
"b2c3d4e5f6a7b8c9",
|
|
"7311641fd09b4d3a",
|
|
"0b5740c4a2b298b7"
|
|
],
|
|
"x": 714,
|
|
"y": 59,
|
|
"w": 722,
|
|
"h": 162
|
|
},
|
|
{
|
|
"id": "c567195d86466cd5",
|
|
"type": "ui_tab",
|
|
"name": "Home",
|
|
"icon": "dashboard",
|
|
"order": 1,
|
|
"disabled": false,
|
|
"hidden": false
|
|
},
|
|
{
|
|
"id": "f4c299235c1b719d",
|
|
"type": "ui_base",
|
|
"theme": {
|
|
"name": "theme-custom",
|
|
"lightTheme": {
|
|
"default": "#0094CE",
|
|
"baseColor": "#0094CE",
|
|
"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
|
|
"edited": true,
|
|
"reset": false
|
|
},
|
|
"darkTheme": {
|
|
"default": "#097479",
|
|
"baseColor": "#000000",
|
|
"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
|
|
"edited": true,
|
|
"reset": false
|
|
},
|
|
"customTheme": {
|
|
"name": "Transparent",
|
|
"default": "#4B7930",
|
|
"baseColor": "#000000",
|
|
"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
|
|
"reset": false
|
|
},
|
|
"themeState": {
|
|
"base-color": {
|
|
"default": "#4B7930",
|
|
"value": "#000000",
|
|
"edited": true
|
|
},
|
|
"page-titlebar-backgroundColor": {
|
|
"value": "#000000",
|
|
"edited": false
|
|
},
|
|
"page-backgroundColor": {
|
|
"value": "#111111",
|
|
"edited": false
|
|
},
|
|
"page-sidebar-backgroundColor": {
|
|
"value": "#333333",
|
|
"edited": false
|
|
},
|
|
"group-textColor": {
|
|
"value": "#262626",
|
|
"edited": false
|
|
},
|
|
"group-borderColor": {
|
|
"value": "#000000",
|
|
"edited": true
|
|
},
|
|
"group-backgroundColor": {
|
|
"value": "#333333",
|
|
"edited": false
|
|
},
|
|
"widget-textColor": {
|
|
"value": "#eeeeee",
|
|
"edited": false
|
|
},
|
|
"widget-backgroundColor": {
|
|
"value": "#000000",
|
|
"edited": false
|
|
},
|
|
"widget-borderColor": {
|
|
"value": "#333333",
|
|
"edited": false
|
|
},
|
|
"base-font": {
|
|
"value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
|
|
}
|
|
},
|
|
"angularTheme": {
|
|
"primary": "indigo",
|
|
"accents": "blue",
|
|
"warn": "red",
|
|
"background": "grey",
|
|
"palette": "light"
|
|
}
|
|
},
|
|
"site": {
|
|
"name": "Node-RED Dashboard",
|
|
"hideToolbar": "true",
|
|
"allowSwipe": "false",
|
|
"lockMenu": "false",
|
|
"allowTempTheme": "true",
|
|
"dateFormat": "DD/MM/YYYY",
|
|
"sizes": {
|
|
"sx": 48,
|
|
"sy": 48,
|
|
"gx": 6,
|
|
"gy": 6,
|
|
"cx": 6,
|
|
"cy": 6,
|
|
"px": 0,
|
|
"py": 0
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "919b5b8d778e2b6c",
|
|
"type": "ui_group",
|
|
"name": "Default",
|
|
"tab": "c567195d86466cd5",
|
|
"order": 1,
|
|
"disp": false,
|
|
"width": "25",
|
|
"collapse": false,
|
|
"className": ""
|
|
},
|
|
{
|
|
"id": "d1a1e2f3a4b5c6d7",
|
|
"type": "ui_tab",
|
|
"name": "Work Orders",
|
|
"icon": "list",
|
|
"order": 2,
|
|
"disabled": false,
|
|
"hidden": false
|
|
},
|
|
{
|
|
"id": "a1b2c3d4e5f60718",
|
|
"type": "ui_tab",
|
|
"name": "Alerts",
|
|
"icon": "warning",
|
|
"order": 3,
|
|
"disabled": false,
|
|
"hidden": false
|
|
},
|
|
{
|
|
"id": "b2c3d4e5f6a70182",
|
|
"type": "ui_tab",
|
|
"name": "Graphs",
|
|
"icon": "show_chart",
|
|
"order": 4,
|
|
"disabled": false,
|
|
"hidden": false
|
|
},
|
|
{
|
|
"id": "c3d4e5f6a7b80192",
|
|
"type": "ui_tab",
|
|
"name": "Help",
|
|
"icon": "help",
|
|
"order": 5,
|
|
"disabled": false,
|
|
"hidden": false
|
|
},
|
|
{
|
|
"id": "d4e5f6a7b8c90123",
|
|
"type": "ui_tab",
|
|
"name": "Settings",
|
|
"icon": "settings",
|
|
"order": 6,
|
|
"disabled": false,
|
|
"hidden": false
|
|
},
|
|
{
|
|
"id": "e1f2a3b4c5d6e7f8",
|
|
"type": "ui_group",
|
|
"g": "75dbe316f19fd44c",
|
|
"name": "Work Orders Group",
|
|
"tab": "d1a1e2f3a4b5c6d7",
|
|
"order": 1,
|
|
"disp": false,
|
|
"width": 25,
|
|
"collapse": false,
|
|
"className": ""
|
|
},
|
|
{
|
|
"id": "e2f3a4b5c6d7e8f9",
|
|
"type": "ui_group",
|
|
"name": "Alerts Group",
|
|
"tab": "a1b2c3d4e5f60718",
|
|
"order": 1,
|
|
"disp": false,
|
|
"width": "25",
|
|
"collapse": false,
|
|
"className": ""
|
|
},
|
|
{
|
|
"id": "e3f4a5b6c7d8e9f0",
|
|
"type": "ui_group",
|
|
"name": "Graphs Group",
|
|
"tab": "b2c3d4e5f6a70182",
|
|
"order": 1,
|
|
"disp": false,
|
|
"width": "25",
|
|
"collapse": false,
|
|
"className": ""
|
|
},
|
|
{
|
|
"id": "e4f5a6b7c8d9e0f1",
|
|
"type": "ui_group",
|
|
"name": "Help Group",
|
|
"tab": "c3d4e5f6a7b80192",
|
|
"order": 1,
|
|
"disp": false,
|
|
"width": "25",
|
|
"collapse": false,
|
|
"className": ""
|
|
},
|
|
{
|
|
"id": "e5f6a7b8c9d0e1f2",
|
|
"type": "ui_group",
|
|
"name": "Settings Group",
|
|
"tab": "d4e5f6a7b8c90123",
|
|
"order": 1,
|
|
"disp": false,
|
|
"width": "25",
|
|
"collapse": false,
|
|
"className": ""
|
|
},
|
|
{
|
|
"id": "00d8ad2b0277f906",
|
|
"type": "MySQLdatabase",
|
|
"name": "machine_data",
|
|
"host": "10.147.20.244",
|
|
"port": "3306",
|
|
"db": "machine_data",
|
|
"tz": "",
|
|
"charset": "UTF8"
|
|
},
|
|
{
|
|
"id": "1821c4842945ecd8",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "919b5b8d778e2b6c",
|
|
"name": "Home Template",
|
|
"order": 0,
|
|
"width": "25",
|
|
"height": "25",
|
|
"format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n #oee md-content,\n #oee .nr-dashboard-template,\n #oee .nr-dashboard-template md-content,\n #oee .nr-dashboard-cardpanel,\n #oee .nr-dashboard-cardpanel md-card,\n #oee .nr-dashboard-cardpanel md-card-content {\n background: transparent !important;\n box-shadow: none !important;\n }\n font-size: 125%;\n --bg-0: #0c1117;\n --bg-1: #131a23;\n --panel: #151e2b;\n --panel-hi: #1a2433;\n --text: #ecf3ff;\n --muted: #96a5b7;\n --accent: #2ea3ff;\n --accent-2: #1f8cf3;\n --good: #24d06f;\n --warn: #ffd100;\n --bad: #ff4d4f;\n --radius: 0.75rem;\n --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n --sidebar-width: 3.75rem;\n --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n --content-max: 100rem;\n --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n --section-gap: clamp(0.75rem, 1vw, 1rem);\n --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n --card-pad-lg: clamp(1.1rem, 1.2vw, 1.35rem);\n --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n --fs-section-title: clamp(0.95rem, 0.9vw + 0.25rem, 1.25rem);\n --fs-label: clamp(0.85rem, 0.7vw + 0.3rem, 1.05rem);\n --fs-label-lg: clamp(0.95rem, 0.8vw + 0.32rem, 1.15rem);\n --fs-kpi: clamp(2.25rem, 2.5vw, 3.25rem);\n --fs-kpi-unit: clamp(1.25rem, 1.4vw, 1.5rem);\n --fs-body: clamp(0.8rem, 0.7vw + 0.28rem, 1rem);\n --progress-height: 0.875rem;\n --start-min-height: 9.375rem;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n width: 100vw;\n height: 100vh;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n background: var(--bg-0);\n color: var(--text);\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n}\n\nbody {\n overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n background: transparent !important;\n height: 100%;\n overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n position: fixed;\n inset: 0;\n display: flex;\n overflow: hidden;\n}\n\n.sidebar {\n width: var(--sidebar-width);\n background: #0b1119;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n display: flex;\n flex-direction: column;\n gap: var(--sidebar-gap);\n align-items: center;\n}\n\n.sb-btn {\n width: 2.75rem;\n height: 2.75rem;\n border-radius: 0.75rem;\n background: #0f1721;\n border: 1px solid #19222e;\n display: grid;\n place-items: center;\n color: #8fb3d9;\n cursor: pointer;\n transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n border-color: #2fd289;\n box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n color: #2fd289;\n}\n\n.sb-ico {\n font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n line-height: 1;\n}\n\n.sb-foot {\n font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n color: #6c7b8d;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.main {\n flex: 1;\n overflow: auto;\n padding: var(--content-pad);\n}\n\n.container {\n max-width: var(--content-max);\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: var(--section-gap);\n}\n\n.card {\n background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n}\n\n.label {\n color: var(--text);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n font-weight: 700;\n font-size: var(--fs-label);\n text-align: center;\n}\n\n.kpis {\n display: grid;\n grid-template-columns: repeat(4, minmax(11.25rem, 1fr));\n gap: var(--section-gap);\n}\n\n.kpi {\n height: 6.25rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 0.25rem;\n padding: var(--card-pad);\n}\n\n.kpi .label {\n font-size: var(--fs-label-lg);\n}\n\n.kval {\n display: flex;\n align-items: flex-end;\n gap: 0.3rem;\n color: var(--good);\n font-weight: 700;\n}\n\n.knum {\n font-size: var(--fs-kpi);\n line-height: 1;\n}\n\n.kunit {\n font-size: var(--fs-kpi-unit);\n line-height: 1;\n}\n\n.panel {\n padding: var(--card-pad-lg);\n display: flex;\n flex-direction: column;\n gap: clamp(0.75rem, 0.9vw, 0.95rem);\n}\n\n.panel-title {\n font-size: var(--fs-section-title);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n font-weight: 700;\n color: var(--text);\n margin: 0;\n padding: 0;\n background: transparent !important;\n border: none;\n box-shadow: none;\n}\n\n.panel-strip {\n background: transparent;\n border: none;\n padding: 0;\n margin: 0;\n}\n\n.row-3 {\n display: flex;\n gap: var(--section-gap);\n background: transparent;\n}\n\n.mini {\n flex: 1;\n min-height: 6.25rem;\n padding: var(--card-pad);\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n}\n\n.mini .val {\n font-size: var(--fs-body);\n color: var(--text);\n font-weight: 700;\n}\n\n.progress {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n}\n\n.track {\n flex: 1;\n height: var(--progress-height);\n background: #111a24;\n border-radius: 999px;\n overflow: hidden;\n box-shadow: inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n}\n\n.fill {\n height: 100%;\n width: 0;\n background: var(--good);\n transition: width 0.35s ease;\n}\n\n.pct {\n min-width: 3rem;\n text-align: right;\n color: var(--text);\n font-weight: 700;\n font-size: var(--fs-body);\n}\n\n.bottom {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--section-gap);\n}\n\n.gparts,\n.status,\n.start-wrap {\n min-height: clamp(9.375rem, 18vw, 11.25rem);\n padding: var(--card-pad-lg);\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n}\n\n.gnum {\n font-size: clamp(2.5rem, 3.2vw, 3.5rem);\n color: var(--good);\n font-weight: 700;\n}\n\n.gmeta {\n color: var(--muted);\n font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n}\n\n.status {\n justify-content: center;\n gap: clamp(0.75rem, 1vw, 1rem);\n}\n\n.st-row {\n background: #121c28;\n border-radius: 0.625rem;\n border: 1px solid #243244;\n padding: 0.9rem 1rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.st-name {\n color: var(--text);\n font-weight: 600;\n font-size: var(--fs-body);\n}\n\n.st-val {\n font-weight: 700;\n font-size: clamp(1.25rem, 1.4vw, 1.5rem);\n text-transform: uppercase;\n}\n\n.st-on {\n color: var(--good);\n}\n\n.st-off {\n color: var(--bad);\n}\n\n.start-wrap {\n align-items: center;\n justify-content: center;\n padding: 0;\n}\n\n.start {\n width: 100%;\n height: 100%;\n min-height: var(--start-min-height);\n border-radius: var(--radius);\n border: none;\n background: linear-gradient(180deg, #32ff7e 0%, #2fd289 100%);\n color: var(--text);\n font-weight: 700;\n font-size: clamp(1.4rem, 2vw, 2rem);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n box-shadow: 0 0 1.25rem rgba(36, 208, 111, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter;\n}\n\n.start:hover {\n transform: translateY(-0.05rem);\n filter: brightness(1.08);\n}\n.modal {\nposition: fixed;\ninset: 0;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nbackground: rgba(12, 17, 23, 0.82);\nbackdrop-filter: blur(4px);\nz-index: 999;\npadding: 2rem;\n}\n\n.modal.ng-hide {\ndisplay: none !important;\n}\n\n.modal-card {\nwidth: clamp(18rem, 32vw, 26rem);\nbackground: rgba(20, 30, 44, 0.94);\nborder-radius: 1rem;\nborder: 1px solid rgba(46, 163, 255, 0.35);\nbox-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.45);\npadding: 1.75rem;\ndisplay: flex;\nflex-direction: column;\ngap: 0.75rem;\ncolor: var(--text);\n}\n\n.prompt-actions,\n.prompt-entry {\ndisplay: flex;\ngap: 0.75rem;\njustify-content: center;\n}\n\n.prompt-no,\n.prompt-yes,\n.prompt-entry button {\nflex: 1;\npadding: 0.9rem 1rem;\nborder-radius: 0.75rem;\nborder: none;\nfont-weight: 700;\ntext-transform: uppercase;\ncursor: pointer;\ntransition: transform 0.16s ease, filter 0.16s ease;\n}\n\n.prompt-no {\nbackground: rgba(36, 208, 111, 0.85);\ncolor: var(--text);\n}\n\n.prompt-yes,\n.prompt-entry button {\nbackground: rgba(46, 163, 255, 0.85);\ncolor: var(--text);\n}\n\n.prompt-entry input {\nflex: 1;\npadding: 0.85rem 1rem;\nborder-radius: 0.75rem;\nborder: 1px solid rgba(46, 163, 255, 0.35);\nbackground: rgba(15, 22, 33, 0.9);\ncolor: var(--text);\nfont-size: 1rem;\n}\n\n.start:active {\n transform: none;\n filter: brightness(0.96);\n}\n\n@media (max-width: 68.75rem) {\n .kpis {\n grid-template-columns: repeat(2, minmax(11.25rem, 1fr));\n }\n .row-3 {\n flex-direction: column;\n }\n .bottom {\n grid-template-columns: 1fr;\n }\n}\n\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n background-color: transparent !important;\n}\n\n/* Scrap modal sizing - responsive */\n.modal-card-scrap {\n width: min(90vw, 28rem);\n max-height: 85vh;\n overflow-y: auto;\n}\n\n.wo-info {\n color: var(--accent);\n font-size: var(--fs-section-title);\n margin: 0.5rem 0;\n}\n\n.wo-summary {\n color: var(--muted);\n margin: 0.25rem 0 0.75rem;\n}\n\n.scrap-question {\n font-size: var(--fs-label-lg);\n text-align: center;\n margin-bottom: 0.75rem;\n color: var(--text);\n}\n\n/* Numpad styling */\n.numpad-container {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n}\n\n.numpad-display {\n background: #0f1721;\n border: 2px solid var(--accent);\n border-radius: var(--radius);\n padding: 0.5rem;\n font-size: clamp(1rem, 4vw, 1.5rem);\n font-weight: 700;\n text-align: right;\n color: var(--text);\n min-height: 2rem;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n word-break: break-all;\n overflow-wrap: anywhere;\n}\n\n.numpad-error {\n background: rgba(255, 77, 79, 0.2);\n border: 1px solid var(--bad);\n border-radius: var(--radius);\n padding: 0.5rem;\n color: var(--bad);\n text-align: center;\n font-size: var(--fs-body);\n margin-top: -0.3rem;\n}\n\n.numpad-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 0.4rem;\n}\n\n.numpad-btn {\n background: linear-gradient(160deg, #1a2433 0%, #151e2b 100%);\n border: 1px solid #243244;\n border-radius: var(--radius);\n color: var(--text);\n font-size: clamp(1rem, 3vw, 1.4rem);\n font-weight: 700;\n padding: 0.5rem;\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter;\n min-height: 2.5rem;\n}\n\n.numpad-btn:active {\n transform: scale(0.95);\n filter: brightness(1.2);\n}\n\n.numpad-clear,\n.numpad-back {\n background: linear-gradient(160deg, #2a1a1a 0%, #1f1515 100%);\n color: var(--warn);\n}\n\n.numpad-actions {\n display: flex;\n gap: 0.75rem;\n margin-top: 0.5rem;\n}\n\n.scrap-submit-btn {\n flex: 1;\n background: linear-gradient(180deg, #32ff7e 0%, #2fd289 100%);\n box-shadow: 0 0 1.25rem rgba(36, 208, 111, .5);\n border: none;\n border-radius: var(--radius);\n color: var(--text);\n padding: 0.5rem;\n font-weight: 700;\n font-size: clamp(0.85rem, 2vw, 1rem);\n text-transform: uppercase;\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter;\n}\n\n.scrap-submit-btn:active {\n transform: scale(0.98);\n filter: brightness(1.1);\n}\n\n/* Updated button styles */\n.prompt-continue {\n flex: 1;\n padding: 1.2rem;\n border-radius: var(--radius);\n border: none;\n font-weight: 700;\n font-size: var(--fs-label);\n text-transform: uppercase;\n cursor: pointer;\n background: linear-gradient(180deg, #2ea3ff 0%, #1f8cf3 100%);\n color: var(--text);\n transition: 0.16s transform, 0.16s filter;\n}\n\n.prompt-continue:active {\n transform: scale(0.98);\n filter: brightness(1.1);\n}\n\n.prompt-yes {\n flex: 1;\n padding: 1.2rem;\n border-radius: var(--radius);\n border: none;\n font-weight: 700;\n font-size: var(--fs-label);\n text-transform: uppercase;\n cursor: pointer;\n background: linear-gradient(180deg, #ffd100 0%, #e6bd00 100%);\n color: var(--bg-0);\n transition: 0.16s transform, 0.16s filter;\n}\n\n.prompt-yes:active {\n transform: scale(0.98);\n filter: brightness(1.1);\n}\n\n/* STOP button styling */\n.start.stop-btn {\n background: linear-gradient(180deg, #ff4d4f 0%, #e63946 100%);\n box-shadow: 0 0 1.25rem rgba(255, 77, 79, .5);\n}\n\n.start.stop-btn:hover {\n filter: brightness(1.15);\n}\n\n/* Disabled START button */\n.start:disabled {\n background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.start:disabled:hover {\n transform: none;\n filter: none;\n}\n\n</style>\n<div id=\"oee\">\n <aside class=\"sidebar\">\n <div class=\"side-top\">\n <button class=\"sb-btn active\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">\ud83c\udfe0</span></button>\n <button class=\"sb-btn\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">\ud83d\udccb</span></button>\n <button class=\"sb-btn\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">\u26a0\ufe0f</span></button>\n <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">\ud83d\udcca</span></button>\n <button class=\"sb-btn\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">\u2753</span></button>\n <button class=\"sb-btn\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">\u2699\ufe0f</span></button>\n </div>\n <div class=\"sb-foot\">OEE V1.0</div>\n </aside>\n\n <main class=\"main\">\n <div class=\"container\">\n <section class=\"kpis\">\n <article class=\"card kpi\">\n <div class=\"label\">OEE</div>\n <div class=\"kval\"><span id=\"kpi-oee-value\" class=\"knum\">0</span><span class=\"kunit\">%</span></div>\n </article>\n <article class=\"card kpi\">\n <div class=\"label\">Availability</div>\n <div class=\"kval\"><span id=\"kpi-availability-value\" class=\"knum\">0</span><span class=\"kunit\">%</span></div>\n </article>\n <article class=\"card kpi\">\n <div class=\"label\">Performance</div>\n <div class=\"kval\"><span id=\"kpi-performance-value\" class=\"knum\">0</span><span class=\"kunit\">%</span></div>\n </article>\n <article class=\"card kpi\">\n <div class=\"label\">Quality</div>\n <div class=\"kval\"><span id=\"kpi-quality-value\" class=\"knum\">0</span><span class=\"kunit\">%</span></div>\n </article>\n </section>\n\n <section class=\"card panel\">\n <div class=\"panel-strip\"><h2 class=\"panel-title\">Current Work Order</h2></div>\n <div class=\"row-3\">\n <div class=\"card mini\">\n <div class=\"label\">Work Order ID</div>\n <div id=\"workorder-id\" class=\"val\"> </div>\n </div>\n <div class=\"card mini\">\n <div class=\"label\">SKU</div>\n <div id=\"workorder-sku\" class=\"val\"> </div>\n </div>\n <div class=\"card mini\">\n <div class=\"label\">Cycle Time</div>\n <div id=\"workorder-cycle\" class=\"val\">0</div>\n </div>\n </div>\n <div class=\"progress\">\n <div class=\"track\"><div id=\"workorder-progress-fill\" class=\"fill\"></div></div>\n <div id=\"workorder-progress-percent\" class=\"pct\">0%</div>\n </div>\n </section>\n\n <section class=\"bottom\">\n <article class=\"card gparts\">\n <div class=\"label\">Good Parts</div>\n <div id=\"good-parts-value\" class=\"gnum\">0</div>\n <div id=\"good-parts-meta\" class=\"gmeta\">out of 0</div>\n </article>\n\n <article class=\"card status\">\n <div class=\"st-row\"><span class=\"st-name\">Machine</span><span id=\"machine-state\" class=\"st-val st-off\">OFFLINE</span></div>\n <div class=\"st-row\"><span class=\"st-name\">Production</span><span id=\"production-state\" class=\"st-val st-off\">STOPPED</span></div>\n </article>\n\n <article class=\"card start-wrap\">\n <button id=\"start-button\" type=\"button\" class=\"start\" ng-click=\"toggleStartStop()\" ng-class=\"{'stop-btn': isProductionRunning}\" ng-disabled=\"!hasActiveOrder && !isProductionRunning\">{{ isProductionRunning ? 'STOP' : 'START' }}</button>\n </article>\n </section>\n </div>\n </main>\n</div>\n\n<!-- Resume/Restart Prompt Modal -->\n<div id=\"resume-modal\" class=\"modal\" ng-show=\"resumePrompt.show\">\n <div class=\"modal-card\">\n <h2>Work Order Already In Progress</h2>\n <p class=\"wo-info\">{{ resumePrompt.id }}</p>\n <p class=\"wo-summary\">\n <strong>{{ resumePrompt.goodParts }}</strong> of <strong>{{ resumePrompt.targetQty }}</strong> parts completed\n ({{ resumePrompt.progressPercent }}%)\n </p>\n <p class=\"wo-summary\">Cycle Count: <strong>{{ resumePrompt.cycleCount }}</strong></p>\n\n <div style=\"margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem;\">\n <button class=\"prompt-continue\" ng-click=\"resumeWorkOrder()\">\n Resume from {{ resumePrompt.goodParts }} parts\n </button>\n <button class=\"prompt-yes\" ng-click=\"confirmRestart()\">\n Restart from 0 (Warning: Progress will be lost!)\n </button>\n </div>\n </div>\n</div>\n<div id=\"scrap-modal\" class=\"modal\" ng-show=\"scrapPrompt.show\">\n <div class=\"modal-card modal-card-scrap\">\n <h2>Work Order Complete</h2>\n <p class=\"wo-info\">{{ scrapPrompt.orderId }}</p>\n <p class=\"wo-summary\">Produced <strong>{{ scrapPrompt.produced }}</strong> of <strong>{{ scrapPrompt.target }}</strong> pieces</p>\n\n <div class=\"scrap-question\">Were there any scrap parts?</div>\n\n <!-- Numpad interface -->\n <div class=\"numpad-container\" ng-if=\"scrapPrompt.enterMode\">\n <div class=\"numpad-display\">{{ scrapPrompt.scrapCount || 0 }}</div>\n <div class=\"numpad-error\" ng-if=\"scrapPrompt.error\">{{ scrapPrompt.error }}</div>\n\n <div class=\"numpad-grid\">\n <button class=\"numpad-btn\" ng-click=\"addDigit(7)\">7</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(8)\">8</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(9)\">9</button>\n\n <button class=\"numpad-btn\" ng-click=\"addDigit(4)\">4</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(5)\">5</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(6)\">6</button>\n\n <button class=\"numpad-btn\" ng-click=\"addDigit(1)\">1</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(2)\">2</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(3)\">3</button>\n\n <button class=\"numpad-btn numpad-clear\" ng-click=\"clearScrap()\">C</button>\n <button class=\"numpad-btn\" ng-click=\"addDigit(0)\">0</button>\n <button class=\"numpad-btn numpad-back\" ng-click=\"backspace()\">\u232b</button>\n </div>\n\n <div class=\"numpad-actions\">\n <button class=\"scrap-submit-btn\" ng-click=\"submitScrapValidated(scrapPrompt.scrapCount)\">\n Submit Scrap\n </button>\n </div>\n </div>\n\n <!-- Initial choice buttons -->\n <div class=\"prompt-actions\" ng-if=\"!scrapPrompt.enterMode\">\n <!-- Don't ask again checkbox -->\n <div style=\"display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.75rem;\">\n <input type=\"checkbox\" id=\"remind-checkbox\" ng-model=\"scrapPrompt.remindAgain\" style=\"width: 1.2rem; height: 1.2rem; cursor: pointer;\">\n <label for=\"remind-checkbox\" style=\"cursor: pointer; margin: 0; font-size: var(--fs-body); color: var(--muted);\">\n Remind me again if we keep overproducing\n </label>\n </div>\n\n <button class=\"prompt-continue\" ng-click=\"skipScrap()\">\n No, Continue Production\n </button>\n <button class=\"prompt-yes\" ng-click=\"openScrapEntry()\">\n Yes, Enter Scrap\n </button>\n </div>\n </div>\n</div>\n\n<script>\n(function(scope) {\n scope.gotoTab = function(tabName) {\n scope.send({ ui_control: { tab: tabName } });\n };\n\n window.kpiOeePercent = window.kpiOeePercent || 0;\n window.kpiAvailabilityPercent = window.kpiAvailabilityPercent || 0;\n window.kpiPerformancePercent = window.kpiPerformancePercent || 0;\n window.kpiQualityPercent = window.kpiQualityPercent || 0;\n window.currentWorkOrderId = window.currentWorkOrderId || \"\";\n window.currentSku = window.currentSku || \"\";\n window.currentCycleTime = window.currentCycleTime || 0;\n window.currentProgressPercent = window.currentProgressPercent || 0;\n window.goodPartsCount = window.goodPartsCount || 0;\n window.goodPartsTarget = window.goodPartsTarget || 0;\n window.machineOnline = typeof window.machineOnline === \"boolean\" ? window.machineOnline : false;\n window.productionStarted = typeof window.productionStarted === \"boolean\" ? window.productionStarted : false;\n\n var elements = {\n kpiOee: document.getElementById(\"kpi-oee-value\"),\n kpiAvailability: document.getElementById(\"kpi-availability-value\"),\n kpiPerformance: document.getElementById(\"kpi-performance-value\"),\n kpiQuality: document.getElementById(\"kpi-quality-value\"),\n workOrderId: document.getElementById(\"workorder-id\"),\n workOrderSku: document.getElementById(\"workorder-sku\"),\n workOrderCycle: document.getElementById(\"workorder-cycle\"),\n progressFill: document.getElementById(\"workorder-progress-fill\"),\n progressPercent: document.getElementById(\"workorder-progress-percent\"),\n goodPartsValue: document.getElementById(\"good-parts-value\"),\n goodPartsMeta: document.getElementById(\"good-parts-meta\"),\n machineState: document.getElementById(\"machine-state\"),\n productionState: document.getElementById(\"production-state\"),\n startButton: document.getElementById(\"start-button\")\n };\n\n function setText(el, value) {\n if (el) {\n el.textContent = value;\n }\n }\n\n function setNumber(el, value) {\n setText(el, String(Math.max(0, Math.round(Number(value) || 0))));\n }\n\n function clampPercent(value) {\n var num = Number(value) || 0;\n return Math.max(0, Math.min(100, Math.round(num)));\n }\n\n function updateState(el, isActive, onLabel, offLabel) {\n if (!el) {\n return;\n }\n el.textContent = isActive ? onLabel : offLabel;\n el.classList.remove(\"st-on\", \"st-off\");\n el.classList.add(isActive ? \"st-on\" : \"st-off\");\n }\n\n function renderDashboard() {\n setNumber(elements.kpiOee, window.kpiOeePercent);\n setNumber(elements.kpiAvailability, window.kpiAvailabilityPercent);\n setNumber(elements.kpiPerformance, window.kpiPerformancePercent);\n setNumber(elements.kpiQuality, window.kpiQualityPercent);\n\n setText(elements.workOrderId, window.currentWorkOrderId || \"\");\n setText(elements.workOrderSku, window.currentSku || \"\");\n setText(elements.workOrderCycle, window.currentCycleTime ? String(window.currentCycleTime) : \"0\");\n\n var progress = clampPercent(window.currentProgressPercent);\n if (elements.progressFill) {\n elements.progressFill.style.width = progress + \"%\";\n }\n setText(elements.progressPercent, progress + \"%\");\n\n setText(elements.goodPartsValue, String(window.goodPartsCount || 0));\n setText(elements.goodPartsMeta, \"out of \" + String(window.goodPartsTarget || 0));\n\n updateState(elements.machineState, !!window.machineOnline, \"ONLINE\", \"OFFLINE\");\n updateState(elements.productionState, !!window.productionStarted, \"STARTED\", \"STOPPED\");\n }\n\n scope.renderDashboard = renderDashboard;\n\n scope.scrapPrompt = {\n show: false,\n enterMode: false,\n orderId: '',\n sku: '',\n target: 0,\n produced: 0,\n scrapCount: 0,\n remindAgain: false\n };\n \n scope.submitScrap = function(scrapCount) {\n scrapCount = Math.max(0, Number(scrapCount) || 0);\n scope.send({\n action: 'scrap-entry',\n payload: {\n id: scope.scrapPrompt.orderId,\n scrap: scrapCount\n }\n });\n scope.scrapPrompt.show = false;\n scope.scrapPrompt.enterMode = false;\n scope.scrapPrompt.remindAgain = false;\n };\n\n // Numpad digit entry\n scope.addDigit = function(digit) {\n scope.scrapPrompt.error = '';\n const current = String(scope.scrapPrompt.scrapCount || 0);\n const newValue = current === '0' ? String(digit) : current + String(digit);\n scope.scrapPrompt.scrapCount = Number(newValue);\n };\n\n // Clear scrap count\n scope.clearScrap = function() {\n scope.scrapPrompt.scrapCount = 0;\n scope.scrapPrompt.error = '';\n };\n\n // Backspace\n scope.backspace = function() {\n scope.scrapPrompt.error = '';\n const current = String(scope.scrapPrompt.scrapCount || 0);\n const newValue = current.length > 1 ? current.slice(0, -1) : '0';\n scope.scrapPrompt.scrapCount = Number(newValue);\n };\n\n // Open scrap entry (validate and show numpad)\n scope.openScrapEntry = function() {\n scope.scrapPrompt.enterMode = true;\n scope.scrapPrompt.scrapCount = 0;\n scope.scrapPrompt.error = '';\n };\n\n // Skip scrap (No, Continue)\n scope.skipScrap = function() {\n scope.send({\n action: 'scrap-skip',\n payload: {\n id: scope.scrapPrompt.orderId,\n remindAgain: !!scope.scrapPrompt.remindAgain\n }\n });\n scope.scrapPrompt.show = false;\n scope.scrapPrompt.enterMode = false;\n scope.scrapPrompt.remindAgain = false;\n scope.scrapPrompt.error = '';\n };\n\n // START/STOP toggle\n scope.isProductionRunning = false;\n scope.hasActiveOrder = false;\n\n scope.toggleStartStop = function() {\n if (scope.isProductionRunning) {\n // STOP production - pause tracking (work order stays active)\n scope.send({ action: \"stop\" });\n scope.isProductionRunning = false;\n // Keep hasActiveOrder=true so button stays enabled (resume pattern)\n } else {\n // START/RESUME production - send start action to backend\n scope.send({ action: \"start\" });\n scope.isProductionRunning = true;\n }\n };\n\n // Submit scrap with validation\n scope.submitScrapValidated = function(scrapCount) {\n scrapCount = Math.max(0, Number(scrapCount) || 0);\n\n // Validate: scrap can't exceed produced quantity\n if (scrapCount > scope.scrapPrompt.produced) {\n scope.scrapPrompt.error = 'Scrap cannot exceed produced quantity (' + scope.scrapPrompt.produced + ')';\n return;\n }\n\n scope.send({\n action: 'scrap-entry',\n payload: {\n id: scope.scrapPrompt.orderId,\n scrap: scrapCount\n }\n });\n scope.scrapPrompt.show = false;\n scope.scrapPrompt.enterMode = false;\n scope.scrapPrompt.remindAgain = false;\n scope.scrapPrompt.scrapCount = 0;\n scope.scrapPrompt.error = '';\n };\n\n\n renderDashboard();\n\n if (elements.startButton) {\n elements.startButton.addEventListener(\"click\", function() {\n scope.send({ action: \"start\" });\n });\n }\n})(scope);\n\n(function ensureNoMaterialTint(){\n const root = document.getElementById('oee');\n if (!root) return;\n\n const targets = root.querySelectorAll([\n '.md-toolbar',\n 'md-toolbar',\n '.md-subheader',\n 'md-subheader',\n '.md-toolbar-tools',\n '.md-card-title'\n ].join(','));\n\n targets.forEach(el => {\n if (el && el.style) {\n if (el.style.background) {\n el.style.background = 'transparent';\n }\n if (el.style.backgroundColor) {\n el.style.backgroundColor = 'transparent';\n }\n }\n if (el && el.classList) {\n el.classList.remove(\n 'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n 'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n );\n }\n });\n\n if (!document.getElementById('oee-theme-sentinel')) {\n const style = document.createElement('style');\n style.id = 'oee-theme-sentinel';\n style.textContent = `\n #oee .md-toolbar::before, #oee .md-toolbar::after,\n #oee .md-subheader::before, #oee .md-subheader::after,\n #oee md-toolbar::before, #oee md-toolbar::after,\n #oee md-subheader::before, #oee md-subheader::after {\n display: none !important;\n content: none !important;\n }\n `;\n document.head.appendChild(style);\n }\n})();\n\n\n// optional render trigger\nscope.$evalAsync(scope.renderDashboard);\n</script>\n<script>\n(function killMaterialTintsLive(){\nconst root = document.getElementById('oee');\nif (!root) return;\n\nconst zap = (el) => {\nif (!el) return;\nel.style.background = 'transparent';\nel.style.backgroundColor = 'transparent';\nel.style.boxShadow = 'none';\n};\n\nconst sel = [\n'.md-subheader','md-subheader','.md-toolbar','md-toolbar',\n'.md-card-title','.md-sticky-clone','._md-sticky-clone',\n'.nr-dashboard-template md-content','md-content'\n].join(',');\n\n// Clean anything present now\nroot.querySelectorAll(sel).forEach(zap);\n\n// Clean future clones dynamically\nconst mo = new MutationObserver((muts) => {\nfor (const m of muts) {\nm.addedNodes && m.addedNodes.forEach(n => {\nif (!(n instanceof HTMLElement)) return;\nif (n.matches && n.matches(sel)) zap(n);\nn.querySelectorAll && n.querySelectorAll(sel).forEach(zap);\n});\n}\n});\nmo.observe(document.body, { childList: true, subtree: true });\n})();\n\n\n\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if (!msg) {\n return;\n }\n \n // Handle resume prompt\n if (msg.topic === 'resumePrompt' && msg.payload) {\n scope.resumePrompt.show = true;\n scope.resumePrompt.id = msg.payload.id || '';\n scope.resumePrompt.sku = msg.payload.sku || '';\n scope.resumePrompt.cycleCount = msg.payload.cycleCount || 0;\n scope.resumePrompt.goodParts = msg.payload.goodParts || 0;\n scope.resumePrompt.targetQty = msg.payload.targetQty || 0;\n scope.resumePrompt.progressPercent = msg.payload.progressPercent || 0;\n scope.resumePrompt.order = msg.payload.order || null;\n return;\n }\n\n if (msg.topic === 'machineStatus') {\n \n // ===== UPDATE PRODUCTION STATE =====\n if (msg.payload.trackingEnabled !== undefined) {\n scope.isProductionRunning = msg.payload.trackingEnabled;\n }\n if (msg.payload.productionStarted !== undefined) {\n window.productionStarted = msg.payload.productionStarted;\n }\n if (msg.payload.machineOnline !== undefined) {\n window.machineOnline = msg.payload.machineOnline;\n }\n\n // ===== UPDATE KPI DISPLAYS =====\n if (msg.payload && msg.payload.kpis) {\n var kpis = msg.payload.kpis;\n\n // Update OEE\n if (window.kpiOeePercent !== kpis.oee) {\n window.kpiOeePercent = kpis.oee;\n var oeeEl = document.getElementById('kpi-oee-value');\n if (oeeEl) oeeEl.textContent = kpis.oee.toFixed(1) + '%';\n }\n\n // Update Availability\n if (window.kpiAvailabilityPercent !== kpis.availability) {\n window.kpiAvailabilityPercent = kpis.availability;\n var availEl = document.getElementById('kpi-availability-value');\n if (availEl) availEl.textContent = kpis.availability.toFixed(1) + '%';\n }\n\n // Update Performance\n if (window.kpiPerformancePercent !== kpis.performance) {\n window.kpiPerformancePercent = kpis.performance;\n var perfEl = document.getElementById('kpi-performance-value');\n if (perfEl) perfEl.textContent = kpis.performance.toFixed(1) + '%';\n }\n\n // Update Quality\n if (window.kpiQualityPercent !== kpis.quality) {\n window.kpiQualityPercent = kpis.quality;\n var qualEl = document.getElementById('kpi-quality-value');\n if (qualEl) qualEl.textContent = kpis.quality.toFixed(1) + '%';\n }\n }\n\n window.machineOnline = msg.payload.machineOnline;\n window.productionStarted = msg.payload.productionStarted;\n scope.renderDashboard();\n return;\n }\n if (msg.topic === 'activeWorkOrder') {\n const order = msg.payload || {};\n if (!order || !order.id) {\n window.currentWorkOrderId = \"\";\n window.currentSku = \"\";\n window.currentCycleTime = 0;\n window.currentProgressPercent = 0;\n window.goodPartsCount = 0;\n window.goodPartsTarget = 0;\n } else {\n window.currentWorkOrderId = order.id || \"\";\n window.currentSku = order.sku || \"\";\n window.currentCycleTime = Number(order.cycleTime) || 0;\n window.currentProgressPercent = Number(order.progressPercent) || 0;\n window.goodPartsCount = Number(order.good) || 0;\n window.goodPartsTarget = Number(order.target) || 0;\n }\n \n // ===== UPDATE KPI DISPLAYS =====\n if (order.kpis) {\n var kpis = order.kpis;\n \n // Update OEE\n window.kpiOeePercent = kpis.oee || 0;\n var oeeEl = document.getElementById('kpi-oee-value');\n if (oeeEl) oeeEl.textContent = (kpis.oee || 0).toFixed(1) + '%';\n \n // Update Availability\n window.kpiAvailabilityPercent = kpis.availability || 0;\n var availEl = document.getElementById('kpi-availability-value');\n if (availEl) availEl.textContent = (kpis.availability || 0).toFixed(1) + '%';\n \n // Update Performance\n window.kpiPerformancePercent = kpis.performance || 0;\n var perfEl = document.getElementById('kpi-performance-value');\n if (perfEl) perfEl.textContent = (kpis.performance || 0).toFixed(1) + '%';\n \n // Update Quality\n window.kpiQualityPercent = kpis.quality || 0;\n var qualEl = document.getElementById('kpi-quality-value');\n if (qualEl) qualEl.textContent = (kpis.quality || 0).toFixed(1) + '%';\n }\n \n // Update START button availability\n scope.hasActiveOrder = !!(order && order.id);\n if (!order.id) {\n scope.isProductionRunning = false;\n }\n scope.renderDashboard();\n }\n if (!scope.scrapPrompt) {\n scope.scrapPrompt = {\n show: false,\n enterMode: false,\n orderId: '',\n sku: '',\n target: 0,\n produced: 0,\n scrapCount: 0,\n remindAgain: false\n };\n }\n \n if (msg.topic === 'scrapPrompt') {\n var p = msg.payload || {};\n \n scope.scrapPrompt.show = true;\n scope.scrapPrompt.enterMode = false;\n scope.scrapPrompt.remindAgain = false;\n scope.scrapPrompt.orderId = p.id || '';\n scope.scrapPrompt.sku = p.sku || '';\n scope.scrapPrompt.target = Number(p.target) || 0;\n scope.scrapPrompt.produced = Number(p.produced) || 0;\n scope.scrapPrompt.scrapCount = 0;\n \n scope.gotoTab('Home'); // make sure we're on Home\n scope.$evalAsync(); // trigger Angular digest so ng-show updates\n return;\n }\n scope.submitScrap = function(scrapCount) {\n scrapCount = Math.max(0, Number(scrapCount) || 0);\n scope.send({\n action: 'scrap-entry',\n payload: {\n id: scope.scrapPrompt.orderId,\n scrap: scrapCount\n }\n });\n scope.scrapPrompt.show = false;\n scope.scrapPrompt.enterMode = false;\n scope.scrapPrompt.remindAgain = false;\n };\n });\n\n // Resume/Restart Prompt State\n scope.resumePrompt = {\n show: false,\n id: '',\n sku: '',\n cycleCount: 0,\n goodParts: 0,\n targetQty: 0,\n progressPercent: 0,\n order: null\n };\n\n scope.resumeWorkOrder = function() {\n if (!scope.resumePrompt.order) {\n console.error('No order data for resume');\n return;\n }\n\n scope.send({\n action: 'resume-work-order',\n payload: scope.resumePrompt.order\n });\n\n scope.resumePrompt.show = false;\n scope.hasActiveOrder = true;\n };\n\n scope.confirmRestart = function() {\n if (!confirm('Are you sure you want to restart? All progress (' + scope.resumePrompt.goodParts + ' parts) will be lost!')) {\n return;\n }\n\n if (!scope.resumePrompt.order) {\n console.error('No order data for restart');\n return;\n }\n\n scope.send({\n action: 'restart-work-order',\n payload: scope.resumePrompt.order\n });\n\n scope.resumePrompt.show = false;\n scope.hasActiveOrder = true;\n };\n\n })(scope);\n\n\n</script>\n",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "local",
|
|
"className": "",
|
|
"x": 200,
|
|
"y": 80,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c",
|
|
"010de5af3ced0ae3"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f2a3b4c5d6e7f8a9",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "e2f3a4b5c6d7e8f9",
|
|
"name": "Alerts Template",
|
|
"order": 0,
|
|
"width": "25",
|
|
"height": "25",
|
|
"format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n font-size: 125%;\n --bg-0: #0c1117;\n --bg-1: #131a23;\n --panel: #151e2b;\n --panel-hi: #1a2433;\n --text: #ecf3ff;\n --muted: #96a5b7;\n --accent: #2ea3ff;\n --accent-2: #1f8cf3;\n --good: #24d06f;\n --warn: #ffd100;\n --bad: #ff4d4f;\n --radius: 0.75rem;\n --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n --sidebar-width: 3.75rem;\n --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n --content-max: 80rem;\n --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n --section-gap: clamp(0.75rem, 1vw, 1rem);\n --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n --fs-section-title: clamp(0.95rem, 0.9vw + 0.25rem, 1.25rem);\n --fs-body: clamp(0.8rem, 0.7vw + 0.28rem, 1rem);\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n width: 100vw;\n height: 100vh;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n background: var(--bg-0);\n color: var(--text);\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n}\n\nbody {\n overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n background: transparent !important;\n height: 100%;\n overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n position: fixed;\n inset: 0;\n display: flex;\n overflow: hidden;\n}\n\n.sidebar {\n width: var(--sidebar-width);\n background: #0b1119;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n display: flex;\n flex-direction: column;\n gap: var(--sidebar-gap);\n align-items: center;\n}\n\n.sb-btn {\n width: 2.75rem;\n height: 2.75rem;\n border-radius: 0.75rem;\n background: #0f1721;\n border: 1px solid #19222e;\n display: grid;\n place-items: center;\n color: #8fb3d9;\n cursor: pointer;\n transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n border-color: #2fd289;\n box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n color: #2fd289;\n}\n\n.sb-ico {\n font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n line-height: 1;\n}\n\n.sb-foot {\n font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n color: #6c7b8d;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.main {\n flex: 1;\n overflow: auto;\n padding: var(--content-pad);\n}\n\n.container {\n max-width: var(--content-max);\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: var(--section-gap);\n}\n\n.card {\n background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n}\n\n/* HEADER: maintain title weight + spacing */\n.page-heading {\n display: flex;\n align-items: center;\n padding: 0 0.25rem;\n}\n\n.page-title {\n margin: 0;\n font-size: var(--fs-page-title);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n/* QUICK ALERTS: button row stays balanced on any width */\n.quick-alerts {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));\n gap: var(--section-gap);\n padding: var(--card-pad);\n}\n\n.quick-alert-btn {\n background: linear-gradient(180deg, #ff5252 0%, #ff4d4f 100%);\n box-shadow: 0 0 1.25rem rgba(255, 77, 79, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n border: none;\n border-radius: var(--radius);\n color: var(--text);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 700;\n padding: clamp(1.1rem, 1.8vw, 1.4rem);\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter;\n}\n\n.quick-alert-btn:hover {\n transform: translateY(-0.05rem);\n filter: brightness(1.08);\n}\n\n.quick-alert-btn:active {\n transform: none;\n filter: brightness(0.96);\n}\n\n/* FORM CARD: consistent padding + typography */\n.alert-card {\n padding: var(--card-pad);\n display: flex;\n flex-direction: column;\n gap: clamp(0.9rem, 1vw, 1.1rem);\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.form-group label {\n font-size: var(--fs-section-title);\n letter-spacing: 0.04em;\n text-transform: uppercase;\n}\n\n.form-group select,\n.form-group textarea {\n background: #121c28;\n border: 1px solid #243244;\n border-radius: var(--radius);\n color: var(--text);\n padding: 0.8rem 0.9rem;\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n font-size: var(--fs-body);\n}\n\ntextarea {\n resize: vertical;\n min-height: 7.5rem;\n}\n\n.alert-send {\n align-self: flex-end;\n background: linear-gradient(180deg, #ff5252 0%, #ff4d4f 100%);\n box-shadow: 0 0 1.25rem rgba(255, 77, 79, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n border: none;\n border-radius: var(--radius);\n color: var(--text);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 700;\n padding: 0.8rem 1.4rem;\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter;\n}\n\n.alert-send:hover {\n transform: translateY(-0.05rem);\n filter: brightness(1.08);\n}\n\n.alert-send:active {\n transform: none;\n filter: brightness(0.96);\n}\n\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n background-color: transparent !important;\n}\n\n/* Alert sent feedback animation */\n@keyframes alert-sent {\n 0% {\n transform: scale(1);\n filter: brightness(1);\n }\n 50% {\n transform: scale(0.98);\n background: linear-gradient(180deg, #24d06f 0%, #2fd289 100%);\n box-shadow: 0 0 1.5rem rgba(36, 208, 111, .7);\n filter: brightness(1.2);\n }\n 100% {\n transform: scale(1);\n filter: brightness(1);\n }\n}\n\n.alert-sent-animation {\n animation: alert-sent 0.4s ease-out;\n}\n\n</style>\n<div id=\"oee\">\n <aside class=\"sidebar\">\n <div class=\"side-top\">\n <button class=\"sb-btn\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">\ud83c\udfe0</span></button>\n <button class=\"sb-btn\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">\ud83d\udccb</span></button>\n <button class=\"sb-btn active\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">\u26a0\ufe0f</span></button>\n <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">\ud83d\udcca</span></button>\n <button class=\"sb-btn\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">\u2753</span></button>\n <button class=\"sb-btn\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">\u2699\ufe0f</span></button>\n </div>\n <div class=\"sb-foot\">OEE V1.0</div>\n </aside>\n\n <main class=\"main\">\n <div class=\"container\">\n <section class=\"page-heading\">\n <h1 class=\"page-title\">Incidents</h1>\n </section>\n\n <section class=\"card quick-alerts\">\n <button class=\"quick-alert-btn\" data-alert=\"Material Out\">Material Out</button>\n <button class=\"quick-alert-btn\" data-alert=\"Machine Stopped\">Machine Stopped</button>\n <button class=\"quick-alert-btn\" data-alert=\"Emergency Stop\">Emergency Stop</button>\n </section>\n\n <section class=\"card alert-card\">\n <div class=\"form-group\">\n <label for=\"alert-type\">Alert type</label>\n <select id=\"alert-type\">\n <option>Quality Defect Detected</option>\n <option>Tooling/Mold Issue</option>\n <option>Temperature Out of Range</option>\n <option>Pressure Issue</option>\n <option>Cycle Time Deviation</option>\n <option>Safety Interlock Triggered</option>\n <option>Hydraulic/Pneumatic Failure</option>\n <option>Electrical Fault</option>\n <option>Sensor Malfunction</option>\n <option>Other</option>\n </select>\n </div>\n <div class=\"form-group\">\n <label for=\"alert-description\">Description</label>\n <textarea id=\"alert-description\" rows=\"5\" placeholder=\"Add context or instructions (optional)\"></textarea>\n </div>\n <button id=\"alert-send\" class=\"alert-send\" type=\"button\">Send Alert</button>\n </section>\n </div>\n </main>\n</div>\n\n<script>\n(function(scope) {\n scope.gotoTab = function(tabName) {\n scope.send({ ui_control: { tab: tabName } });\n };\n\n // Quick alert buttons - with new features (timestamp, visual feedback, DB logging)\n var quickButtons = document.querySelectorAll('[data-alert]');\n quickButtons.forEach(function(btn) {\n btn.addEventListener('click', function() {\n var type = btn.getAttribute('data-alert');\n var timestamp = new Date().toISOString();\n\n // Visual feedback\n btn.classList.add('alert-sent-animation');\n setTimeout(function() {\n btn.classList.remove('alert-sent-animation');\n }, 400);\n\n // Send message with timestamp and description\n scope.send({\n payload: {\n action: 'alert',\n type: type,\n timestamp: timestamp,\n description: ''\n }\n });\n });\n });\n\n // Send alert button - with new features\n var sendButton = document.getElementById('alert-send');\n if (sendButton) {\n sendButton.addEventListener('click', function() {\n var type = document.getElementById('alert-type').value;\n var description = (document.getElementById('alert-description').value || '').trim();\n var timestamp = new Date().toISOString();\n\n // Visual feedback\n sendButton.classList.add('alert-sent-animation');\n setTimeout(function() {\n sendButton.classList.remove('alert-sent-animation');\n }, 400);\n\n // Clear form\n document.getElementById('alert-description').value = '';\n\n // Send message with timestamp\n scope.send({\n payload: {\n action: 'alert',\n type: type,\n timestamp: timestamp,\n description: description\n }\n });\n });\n }\n})(scope);\n\n(function ensureNoMaterialTint(){\n const root = document.getElementById('oee');\n if (!root) return;\n\n const targets = root.querySelectorAll([\n '.md-toolbar',\n 'md-toolbar',\n '.md-subheader',\n 'md-subheader',\n '.md-toolbar-tools',\n '.md-card-title'\n ].join(','));\n\n targets.forEach(el => {\n if (el && el.style) {\n if (el.style.background) {\n el.style.background = 'transparent';\n }\n if (el.style.backgroundColor) {\n el.style.backgroundColor = 'transparent';\n }\n }\n if (el && el.classList) {\n el.classList.remove(\n 'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n 'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n );\n }\n });\n\n if (!document.getElementById('oee-theme-sentinel')) {\n const style = document.createElement('style');\n style.id = 'oee-theme-sentinel';\n style.textContent = `\n #oee .md-toolbar::before, #oee .md-toolbar::after,\n #oee .md-subheader::before, #oee .md-subheader::after,\n #oee md-toolbar::before, #oee md-toolbar::after,\n #oee md-subheader::before, #oee md-subheader::after {\n display: none !important;\n content: none !important;\n }\n `;\n document.head.appendChild(style);\n }\n})();\n\n\n// optional render trigger\nscope.$evalAsync(function() {});\n</script>",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "local",
|
|
"className": "",
|
|
"x": 200,
|
|
"y": 160,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c",
|
|
"alert_process_function"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f3a4b5c6d7e8f9a0",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "e3f4a5b6c7d8e9f0",
|
|
"name": "Graphs Template",
|
|
"order": 0,
|
|
"width": "25",
|
|
"height": "25",
|
|
"format": "<style>\n @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n :root {\n font-size: 125%;\n --bg-0: #0c1117;\n --bg-1: #131a23;\n --panel: #151e2b;\n --panel-hi: #1a2433;\n --text: #ecf3ff;\n --muted: #96a5b7;\n --accent: #2ea3ff;\n --accent-2: #1f8cf3;\n --good: #24d06f;\n --warn: #ffd100;\n --bad: #ff4d4f;\n --radius: 0.75rem;\n --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35),\n inset 0.0625rem 0 rgba(255, 255, 255, .05);\n\n --sidebar-width: 3.75rem;\n --content-max: 100rem;\n --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n --section-gap: clamp(0.75rem, 1vw, 1rem);\n --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n }\n\n .graphs-wrapper {\n display: flex;\n width: 100%;\n min-height: calc(100vh - 1px);\n background: var(--bg-0);\n }\n\n .sidebar {\n width: var(--sidebar-width);\n background: #0b1119;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.75rem;\n padding: 1rem 0.5rem;\n flex-shrink: 0;\n }\n\n .sb-btn {\n width: 2.75rem;\n height: 2.75rem;\n border-radius: .75rem;\n background: #0f1721;\n border: 1px solid #19222e;\n display: grid;\n place-items: center;\n color: #8fb3d9;\n cursor: pointer;\n }\n\n .sb-btn.active {\n border-color: #2fd289;\n color: #2fd289;\n }\n\n .main {\n flex: 1;\n overflow-y: auto;\n padding: var(--content-pad);\n }\n\n .container {\n max-width: var(--content-max);\n margin: auto;\n display: flex;\n flex-direction: column;\n gap: var(--section-gap);\n }\n\n .chart-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: var(--section-gap);\n }\n\n .chart-card {\n background: linear-gradient(160deg, var(--panel), var(--panel-hi));\n border-radius: var(--radius);\n padding: var(--card-pad);\n box-shadow: var(--shadow);\n height: 370px;\n }\n\n .chart-placeholder canvas {\n width: 100% !important;\n height: 100% !important;\n }\n\n .filter-buttons {\n display: flex;\n gap: .5rem;\n flex-wrap: wrap;\n }\n\n .filter-btn {\n padding: 0.3rem 0.75rem;\n border-radius: 0.4rem;\n border: none;\n background: #0f1721;\n color: var(--text);\n cursor: pointer;\n font-size: .8rem;\n border: 1px solid #19222e;\n }\n\n .filter-btn.active {\n background: var(--accent-2);\n border-color: var(--accent-2);\n }\n</style>\n\n<div class=\"graphs-wrapper\">\n <aside class=\"sidebar\">\n <button class=\"sb-btn\" ng-click=\"gotoTab('Home')\">\ud83c\udfe0</button>\n <button class=\"sb-btn\" ng-click=\"gotoTab('Work Orders')\">\ud83d\udccb</button>\n <button class=\"sb-btn\" ng-click=\"gotoTab('Alerts')\">\u26a0\ufe0f</button>\n <button class=\"sb-btn active\" ng-click=\"gotoTab('Graphs')\">\ud83d\udcca</button>\n <button class=\"sb-btn\" ng-click=\"gotoTab('Help')\">\u2753</button>\n <button class=\"sb-btn\" ng-click=\"gotoTab('Settings')\">\u2699\ufe0f</button>\n <div style=\"margin-top:auto; color:#809ab8; font-size:.7rem;\">OEE V1.0</div>\n </aside>\n\n <main class=\"main\">\n <div class=\"container\">\n <h1 style=\"margin-bottom:0;\">Graphs</h1>\n\n <section class=\"filter-bar\">\n <div class=\"filter-buttons\">\n <button class=\"filter-btn active\" ng-click=\"selectRange('24h')\">24 Hours</button>\n <button class=\"filter-btn\" ng-click=\"selectRange('7d')\">7 Days</button>\n <button class=\"filter-btn\" ng-click=\"selectRange('30d')\">30 Days</button>\n <button class=\"filter-btn\" ng-click=\"selectRange('90d')\">90 Days</button>\n </div>\n </section>\n\n <section class=\"chart-grid\">\n <article class=\"chart-card\">\n <h2>Production</h2>\n <div class=\"chart-placeholder\"><canvas id=\"chart-production\"></canvas></div>\n </article>\n\n <article class=\"chart-card\">\n <h2>Scrap</h2>\n <div class=\"chart-placeholder\"><canvas id=\"chart-scrap\"></canvas></div>\n </article>\n\n <article class=\"chart-card\">\n <h2>Efficiency</h2>\n <div class=\"chart-placeholder\"><canvas id=\"chart-efficiency\"></canvas></div>\n </article>\n\n <article class=\"chart-card\">\n <h2>Quality</h2>\n <div class=\"chart-placeholder\"><canvas id=\"chart-quality\"></canvas></div>\n </article>\n </section>\n </div>\n </main>\n</div>\n\n<script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n\n<script>\n(function(scope) {\n scope.gotoTab = function(t) {\n scope.send({ui_control: {tab: t}});\n };\n\n scope.selectedRange = '24h';\n scope._charts = {};\n scope._debounceTimer = null;\n\n // Tab watcher with 300ms debounce\n scope.$watch('msg', function(msg) {\n if (!msg) return;\n\n if (msg.ui_control && msg.ui_control.tab === 'Graphs') {\n if (scope._debounceTimer) clearTimeout(scope._debounceTimer);\n scope._debounceTimer = setTimeout(function() {\n scope.send({\n topic: 'fetch-graph-data',\n payload: { range: scope.selectedRange }\n });\n }, 300);\n }\n\n if (msg.graphData) {\n createCharts(scope.selectedRange, msg.graphData);\n }\n });\n\n scope.selectRange = function(range) {\n scope.selectedRange = range;\n \n setTimeout(function() {\n document.querySelectorAll('.filter-btn').forEach(function(btn) {\n btn.classList.remove('active');\n var text = btn.textContent.toLowerCase();\n if ((range === '24h' && text.includes('24')) ||\n (range === '7d' && text.includes('7')) ||\n (range === '30d' && text.includes('30')) ||\n (range === '90d' && text.includes('90'))) {\n btn.classList.add('active');\n }\n });\n }, 10);\n\n scope.send({\n topic: 'fetch-graph-data',\n payload: { range: range }\n });\n };\n\n function createCharts(range, data) {\n // Destroy existing to prevent stacking\n if (scope._charts.production) scope._charts.production.destroy();\n if (scope._charts.scrap) scope._charts.scrap.destroy();\n if (scope._charts.efficiency) scope._charts.efficiency.destroy();\n if (scope._charts.quality) scope._charts.quality.destroy();\n\n var labels = data.labels || [];\n var datasets = data.datasets || [];\n\n var goodData = datasets.find(function(d) { return d.label === 'Good Parts'; }) || { data: [] };\n var scrapData = datasets.find(function(d) { return d.label === 'Scrap Parts'; }) || { data: [] };\n var effData = datasets.find(function(d) { return d.label === 'Efficiency %'; }) || { data: [] };\n var qualData = datasets.find(function(d) { return d.label === 'Quality %'; }) || { data: [] };\n\n var prodCtx = document.getElementById('chart-production');\n if (prodCtx) {\n scope._charts.production = new Chart(prodCtx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Good Parts',\n data: goodData.data,\n borderColor: '#24d06f',\n backgroundColor: 'rgba(36, 208, 111, 0.1)',\n borderWidth: 2,\n fill: true,\n tension: 0.35\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n animation: false\n }\n });\n }\n\n var scrapCtx = document.getElementById('chart-scrap');\n if (scrapCtx) {\n scope._charts.scrap = new Chart(scrapCtx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Scrap Parts',\n data: scrapData.data,\n borderColor: '#ff4d4f',\n backgroundColor: 'rgba(255, 77, 79, 0.1)',\n borderWidth: 2,\n fill: true,\n tension: 0.35\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n animation: false\n }\n });\n }\n\n var effCtx = document.getElementById('chart-efficiency');\n if (effCtx) {\n scope._charts.efficiency = new Chart(effCtx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Efficiency %',\n data: effData.data,\n borderColor: '#2196F3',\n backgroundColor: 'rgba(33, 150, 243, 0.1)',\n borderWidth: 2,\n fill: true,\n tension: 0.35\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n animation: false,\n scales: { y: { min: 0, max: 100 } }\n }\n });\n }\n\n var qualCtx = document.getElementById('chart-quality');\n if (qualCtx) {\n scope._charts.quality = new Chart(qualCtx, {\n type: 'line',\n data: {\n labels: labels,\n datasets: [{\n label: 'Quality %',\n data: qualData.data,\n borderColor: '#ffd100',\n backgroundColor: 'rgba(255, 209, 0, 0.1)',\n borderWidth: 2,\n fill: true,\n tension: 0.35\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n animation: false,\n scales: { y: { min: 0, max: 100 } }\n }\n });\n }\n }\n\n})(scope);\n</script>",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "local",
|
|
"className": "",
|
|
"x": 210,
|
|
"y": 200,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c",
|
|
"fetch_graph_data_node_id"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f4a5b6c7d8e9f0a1",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "e4f5a6b7c8d9e0f1",
|
|
"name": "Help Template",
|
|
"order": 0,
|
|
"width": "25",
|
|
"height": "25",
|
|
"format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n font-size: 125%;\n --bg-0: #0c1117;\n --bg-1: #131a23;\n --panel: #151e2b;\n --panel-hi: #1a2433;\n --text: #ecf3ff;\n --muted: #96a5b7;\n --accent: #2ea3ff;\n --accent-2: #1f8cf3;\n --good: #24d06f;\n --warn: #ffd100;\n --bad: #ff4d4f;\n --radius: 0.75rem;\n --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n --sidebar-width: 3.75rem;\n --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n --content-max: 70rem;\n --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n --section-gap: clamp(0.75rem, 1vw, 1rem);\n --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n --fs-section-title: clamp(1rem, 0.9vw + 0.3rem, 1.35rem);\n --fs-body: clamp(0.85rem, 0.7vw + 0.3rem, 1.05rem);\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n width: 100vw;\n height: 100vh;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n background: var(--bg-0);\n color: var(--text);\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n}\n\nbody {\n overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n background: transparent !important;\n height: 100%;\n overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n position: fixed;\n inset: 0;\n display: flex;\n overflow: hidden;\n}\n\n.sidebar {\n width: var(--sidebar-width);\n background: #0b1119;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n display: flex;\n flex-direction: column;\n gap: var(--sidebar-gap);\n align-items: center;\n}\n\n.sb-btn {\n width: 2.75rem;\n height: 2.75rem;\n border-radius: 0.75rem;\n background: #0f1721;\n border: 1px solid #19222e;\n display: grid;\n place-items: center;\n color: #8fb3d9;\n cursor: pointer;\n transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n border-color: #2fd289;\n box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n color: #2fd289;\n}\n\n.sb-ico {\n font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n line-height: 1;\n}\n\n.sb-foot {\n font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n color: #6c7b8d;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.main {\n flex: 1;\n overflow: auto;\n padding: var(--content-pad);\n}\n\n.container {\n max-width: var(--content-max);\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: var(--section-gap);\n}\n\n.card {\n background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n}\n\n/* HEADER: maintain title styling */\n.page-heading {\n display: flex;\n align-items: center;\n padding: 0 0.25rem;\n}\n\n.page-title {\n margin: 0;\n font-size: var(--fs-page-title);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n/* HELP CARDS: keep text hierarchy + spacing clean */\n.help-card {\n display: flex;\n flex-direction: column;\n gap: clamp(0.9rem, 1vw, 1.1rem);\n padding: var(--card-pad);\n}\n\n.help-title {\n margin: 0;\n font-size: var(--fs-section-title);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n.help-body {\n margin: 0;\n line-height: 1.65;\n color: var(--muted);\n font-size: var(--fs-body);\n font-weight: 500;\n}\n\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n background-color: transparent !important;\n}\n</style>\n<div id=\"oee\">\n <aside class=\"sidebar\">\n <div class=\"side-top\">\n <button class=\"sb-btn\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">\ud83c\udfe0</span></button>\n <button class=\"sb-btn\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">\ud83d\udccb</span></button>\n <button class=\"sb-btn\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">\u26a0\ufe0f</span></button>\n <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">\ud83d\udcca</span></button>\n <button class=\"sb-btn active\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">\u2753</span></button>\n <button class=\"sb-btn\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">\u2699\ufe0f</span></button>\n </div>\n <div class=\"sb-foot\">OEE V1.0</div>\n </aside>\n\n <main class=\"main\">\n <div class=\"container\">\n <section class=\"page-heading\">\n <h1 class=\"page-title\">Help</h1>\n </section>\n\n <section class=\"card help-card\">\n <h2 class=\"help-title\">About this Dashboard</h2>\n <p class=\"help-body\">This interface tracks Overall Equipment Effectiveness metrics, production progress, and incident logging for injection molding operations. Navigate between tabs using the sidebar to access work orders, real-time monitoring, performance graphs, incident reporting, and machine configuration.</p>\n </section>\n\n <section class=\"card help-card\">\n <h2 class=\"help-title\">Getting Started with a Work Order</h2>\n <p class=\"help-body\">Go to the Work Orders tab and upload an Excel file with your work orders, or select from existing orders in the table. Click Load to activate a work order, then navigate to the Home tab where you'll see the current work order details. Before starting production, configure your mold settings in the Settings tab by selecting a mold preset or entering cavity counts manually.</p>\n </section>\n\n <section class=\"card help-card\">\n <h2 class=\"help-title\">Running Production</h2>\n <p class=\"help-body\">On the Home tab, press the START button to begin production. The system tracks cycle counts, good parts, scrap, and progress toward your target quantity. Press STOP to pause production. Monitor real-time KPIs including OEE, Availability, Performance, and Quality metrics displayed on the dashboard.</p>\n </section>\n\n <section class=\"card help-card\">\n <h2 class=\"help-title\">Logging Incidents</h2>\n <p class=\"help-body\">Use the Alerts tab to record production incidents. Quick-log common issues with preset buttons like Material Out, Machine Stopped, or Emergency Stop. For detailed logging, select an alert type from the dropdown, add notes, and submit. All incidents are timestamped and contribute to availability and OEE calculations.</p>\n </section>\n\n <section class=\"card help-card\">\n <h2 class=\"help-title\">Configuring Molds</h2>\n <p class=\"help-body\">In the Settings tab, use the Mold Presets section to search for your mold by manufacturer and name. Select a preset to automatically load cavity counts, or manually adjust the Mold Configuration fields below. If your mold isn't available, use the Add Mold button in the Integrations section to create a new preset with manufacturer, name, and cavity details.</p>\n </section>\n\n <section class=\"card help-card\">\n <h2 class=\"help-title\">Viewing Performance Data</h2>\n <p class=\"help-body\">The Graphs tab displays historical OEE trends broken down by Availability, Performance, and Quality. Use these charts to identify patterns, track improvements, and diagnose recurring issues affecting your production efficiency.</p>\n </section>\n </div>\n </main>\n</div>\n\n<script>\n(function(scope) {\n scope.gotoTab = function(tabName) {\n scope.send({ ui_control: { tab: tabName } });\n };\n})(scope);\n\n(function ensureNoMaterialTint(){\n const root = document.getElementById('oee');\n if (!root) return;\n\n const targets = root.querySelectorAll([\n '.md-toolbar',\n 'md-toolbar',\n '.md-subheader',\n 'md-subheader',\n '.md-toolbar-tools',\n '.md-card-title'\n ].join(','));\n\n targets.forEach(el => {\n if (el && el.style) {\n if (el.style.background) {\n el.style.background = 'transparent';\n }\n if (el.style.backgroundColor) {\n el.style.backgroundColor = 'transparent';\n }\n }\n if (el && el.classList) {\n el.classList.remove(\n 'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n 'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n );\n }\n });\n\n if (!document.getElementById('oee-theme-sentinel')) {\n const style = document.createElement('style');\n style.id = 'oee-theme-sentinel';\n style.textContent = `\n #oee .md-toolbar::before, #oee .md-toolbar::after,\n #oee .md-subheader::before, #oee .md-subheader::after,\n #oee md-toolbar::before, #oee md-toolbar::after,\n #oee md-subheader::before, #oee md-subheader::after {\n display: none !important;\n content: none !important;\n }\n `;\n document.head.appendChild(style);\n }\n})();\n\n\n// optional render trigger\nscope.$evalAsync(function() {});\n</script>\n",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "local",
|
|
"className": "",
|
|
"x": 200,
|
|
"y": 240,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f5a6b7c8d9e0f1a2",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "e5f6a7b8c9d0e1f2",
|
|
"name": "Settings Template",
|
|
"order": 0,
|
|
"width": "25",
|
|
"height": "25",
|
|
"format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n font-size: 125%;\n --bg-0: #0c1117;\n --bg-1: #131a23;\n --panel: #151e2b;\n --panel-hi: #1a2433;\n --text: #ecf3ff;\n --muted: #96a5b7;\n --accent: #2ea3ff;\n --accent-2: #1f8cf3;\n --good: #24d06f;\n --warn: #ffd100;\n --bad: #ff4d4f;\n --radius: 0.75rem;\n --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n --sidebar-width: 3.75rem;\n --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n --content-max: 70rem;\n --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n --section-gap: clamp(0.75rem, 1vw, 1rem);\n --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n --fs-section-title: clamp(1rem, 0.9vw + 0.3rem, 1.35rem);\n --fs-body: clamp(0.8rem, 0.7vw + 0.28rem, 1rem);\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n width: 100vw;\n height: 100vh;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n background: var(--bg-0);\n color: var(--text);\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n}\n\nbody {\n overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n background: transparent !important;\n height: 100%;\n overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n position: fixed;\n inset: 0;\n display: flex;\n overflow: hidden;\n}\n\n.sidebar {\n width: var(--sidebar-width);\n background: #0b1119;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n display: flex;\n flex-direction: column;\n gap: var(--sidebar-gap);\n align-items: center;\n}\n\n.sb-btn {\n width: 2.75rem;\n height: 2.75rem;\n border-radius: 0.75rem;\n background: #0f1721;\n border: 1px solid #19222e;\n display: grid;\n place-items: center;\n color: #8fb3d9;\n cursor: pointer;\n transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n border-color: #2fd289;\n box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n color: #2fd289;\n}\n\n.sb-ico {\n font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n line-height: 1;\n}\n\n.sb-foot {\n font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n color: #6c7b8d;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.main {\n flex: 1;\n overflow: auto;\n padding: var(--content-pad);\n}\n\n.container {\n max-width: var(--content-max);\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: var(--section-gap);\n}\n\n.card {\n background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n}\n\n/* HEADER: maintain title styling */\n.page-heading {\n display: flex;\n align-items: center;\n padding: 0 0.25rem;\n}\n\n.page-title {\n margin: 0;\n font-size: var(--fs-page-title);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n.section-title {\n margin: 0;\n font-size: var(--fs-section-title);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n/* SETTINGS CARDS: clean grid + balanced inputs */\n.mold-card,\n.integrations-card {\n display: flex;\n flex-direction: column;\n gap: clamp(0.9rem, 1vw, 1.1rem);\n padding: var(--card-pad);\n}\n\n.form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr));\n gap: clamp(0.75rem, 1vw, 1rem);\n}\n\n.form-field {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.form-field label {\n font-size: var(--fs-body);\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n.form-field input,\n.form-field select {\n background: #121c28;\n border: 1px solid #243244;\n border-radius: var(--radius);\n color: var(--text);\n padding: 0.75rem 0.9rem;\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n font-size: var(--fs-body);\n}\n\n.integrations-split {\n display: flex;\n gap: clamp(1rem, 1.5vw, 2rem);\n align-items: flex-start;\n}\n\n.integrations-left {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.integrations-right {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n align-items: flex-start;\n}\n\n.add-mold-info {\n margin: 0;\n font-size: var(--fs-body);\n color: var(--muted);\n line-height: 1.5;\n}\n\n.integrations-button {\n width: fit-content;\n background: #121c28;\n border: 1px dashed rgba(150, 165, 183, .45);\n border-radius: var(--radius);\n color: rgba(150, 165, 183, .8);\n padding: 0.75rem 1.5rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n font-weight: 700;\n cursor: not-allowed;\n}\n.preset-add-form {\n margin-top: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.preset-add-actions {\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n}\n\n/* PRESET SEARCH STYLES */\n.preset-card {\n display: flex;\n flex-direction: column;\n gap: clamp(0.9rem, 1vw, 1.1rem);\n padding: var(--card-pad);\n}\n\n.preset-filters {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr;\n gap: clamp(0.75rem, 1vw, 1rem);\n}\n\n.preset-results {\n max-height: 20rem;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.preset-item {\n background: #121c28;\n border: 1px solid #243244;\n border-radius: var(--radius);\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 1rem;\n}\n\n.preset-info {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.preset-name {\n font-size: var(--fs-body);\n font-weight: 700;\n color: var(--text);\n}\n\n.preset-details {\n display: flex;\n gap: 1rem;\n font-size: clamp(0.75rem, 0.7vw + 0.25rem, 0.9rem);\n color: var(--muted);\n}\n\n.preset-badge {\n display: inline-block;\n background: rgba(46, 163, 255, 0.2);\n color: var(--accent);\n padding: 0.25rem 0.5rem;\n border-radius: 0.375rem;\n font-size: clamp(0.7rem, 0.6vw + 0.2rem, 0.85rem);\n font-weight: 600;\n}\n\n.preset-select-btn {\n background: linear-gradient(180deg, #32ff7e 0%, #2fd289 100%);\n box-shadow: 0 0 1.25rem rgba(36, 208, 111, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n border: none;\n border-radius: var(--radius);\n color: var(--text);\n padding: 0.6rem 1.2rem;\n font-weight: 700;\n font-size: var(--fs-body);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter;\n}\n\n.preset-select-btn:hover {\n transform: translateY(-0.05rem);\n filter: brightness(1.08);\n}\n\n.preset-select-btn:active {\n transform: none;\n filter: brightness(0.96);\n}\n\n.preset-empty {\n text-align: center;\n color: var(--muted);\n padding: 2rem;\n font-size: var(--fs-body);\n}\n\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n background-color: transparent !important;\n}\n</style>\n<div id=\"oee\">\n <aside class=\"sidebar\">\n <div class=\"side-top\">\n <button class=\"sb-btn\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">\ud83c\udfe0</span></button>\n <button class=\"sb-btn\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">\ud83d\udccb</span></button>\n <button class=\"sb-btn\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">\u26a0\ufe0f</span></button>\n <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">\ud83d\udcca</span></button>\n <button class=\"sb-btn\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">\u2753</span></button>\n <button class=\"sb-btn active\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">\u2699\ufe0f</span></button>\n </div>\n <div class=\"sb-foot\">OEE V1.0</div>\n </aside>\n\n <main class=\"main\">\n <div class=\"container\">\n <section class=\"page-heading\">\n <h1 class=\"page-title\">Settings</h1>\n </section>\n\n <section class=\"card preset-card\">\n <h2 class=\"section-title\">Mold Presets</h2>\n <div class=\"preset-filters\">\n <div class=\"form-field\">\n <label for=\"preset-manufacturer\">Manufacturer</label>\n <select id=\"preset-manufacturer\"\n ng-model=\"selectedManufacturer\"\n ng-change=\"onManufacturerChange()\">\n <option value=\"\">Select manufacturer...</option>\n <option ng-repeat=\"mfg in manufacturers\" value=\"{{mfg}}\">{{mfg}}</option>\n </select>\n </div>\n <div class=\"form-field\">\n <label for=\"preset-mold\">Mold</label>\n <select id=\"preset-mold\"\n ng-model=\"selectedMold\"\n ng-options=\"preset as preset.mold_name for preset in moldsForManufacturer | orderBy:'mold_name'\"\n ng-change=\"onMoldChange()\">\n <option value=\"\">Select mold...</option>\n </select>\n </div>\n </div>\n \n <div class=\"preset-results\" id=\"preset-results\">\n <!-- Default state: simplified -->\n <div class=\"preset-empty\" ng-if=\"!showAddMoldForm\">\n <p>Select a manufacturer and mold from the dropdowns above.</p>\n </div>\n\n <!-- Add Mold form -->\n <div class=\"preset-add-form\" ng-if=\"showAddMoldForm\">\n <div class=\"form-grid\">\n <div class=\"form-field\">\n <label for=\"new-mold-manufacturer\">Manufacturer</label>\n <input id=\"new-mold-manufacturer\"\n type=\"text\"\n ng-model=\"newMold.manufacturer\"\n placeholder=\"Type manufacturer...\" />\n </div>\n <div class=\"form-field\">\n <label for=\"new-mold-name\">Mold Name</label>\n <input id=\"new-mold-name\"\n type=\"text\"\n ng-model=\"newMold.mold_name\"\n placeholder=\"Type mold name...\" />\n </div>\n <div class=\"form-field\">\n <label for=\"new-mold-cavities\">Mold Cavities</label>\n <input id=\"new-mold-cavities\"\n type=\"text\"\n ng-model=\"newMold.cavities\"\n placeholder=\"Type Theoretical Cavities...\" />\n </div>\n <div class=\"form-field\">\n <label for=\"new-mold-active\">Active Cavities</label>\n <input id=\"new-mold-active\"\n type=\"text\"\n ng-model=\"newMold.active\"\n placeholder=\"Type Active Cavities...\" />\n </div>\n </div>\n <div class=\"preset-add-actions\">\n <button class=\"preset-select-btn\"\n type=\"button\"\n ng-click=\"saveNewMold()\"\n ng-disabled=\"isSavingMold\">\n {{ isSavingMold ? 'Saving...' : 'Save' }}\n </button>\n <button class=\"preset-select-btn\"\n type=\"button\"\n ng-click=\"cancelAddMold()\"\n ng-disabled=\"isSavingMold\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"card mold-card\">\n <h2 class=\"form-field\">Mold Configuration</h2>\n <div class=\"form-grid\">\n <div class=\"form-field\">\n <label for=\"mold-active\">Mold Cavities</label>\n <input id=\"mold-total\" type=\"number\" ng-model=\"moldTotal\" ng-change=\"updateMoldSettings()\" />\n </div>\n <div class=\"form-field\">\n <label for=\"mold-active\">Active Cavities</label>\n <input id=\"mold-active\" type=\"number\" ng-model=\"moldActive\" ng-change=\"updateMoldSettings()\" />\n </div>\n </div>\n </section>\n\n <section class=\"card integrations-card\">\n <h2 class=\"section-title\">Integrations</h2>\n <div class=\"integrations-split\">\n <div class=\"integrations-left\">\n <button class=\"integrations-button\" type=\"button\" disabled>Connect to ERP</button>\n </div>\n <div class=\"integrations-right\">\n <p class=\"add-mold-info\">Can't find the mold you're looking for?</p>\n <button class=\"preset-select-btn\" type=\"button\" ng-click=\"openAddMold()\">Add Mold</button>\n </div>\n </div>\n </section>\n </div>\n </main>\n</div>\n\n<script>\n (function(scope) {\n // Initialize state\n scope.moldTotal = 0;\n scope.moldActive = 0;\n scope.selectedManufacturer = '';\n scope.moldsForManufacturer = [];\n scope.selectedMold = null;\n scope.manufacturers = [];\n scope.showAddMoldForm = false;\n scope.newMold = { manufacturer: '', mold_name: '', cavities: '', active: '' };\n scope.isSavingMold = false;\n \n // Debounce timers\n scope._moldSettingsDebounceTimer = null;\n scope._saveMoldTimeout = null;\n \n // Track processed messages by topic + timestamp to prevent loops\n scope._processedMessages = {};\n \n // Clean old processed messages every 10 seconds\n setInterval(function() {\n const now = Date.now();\n Object.keys(scope._processedMessages).forEach(function(key) {\n if (now - scope._processedMessages[key] > 10000) {\n delete scope._processedMessages[key];\n }\n });\n }, 10000);\n \n // Navigation\n scope.gotoTab = function(tabName) {\n scope.isSavingMold = false;\n scope.send({ ui_control: { tab: tabName } });\n };\n \n // Load manufacturers on init\n scope.loadManufacturers = function() {\n console.log('Loading manufacturers...');\n scope.send({ topic: 'getManufacturers' });\n };\n \n // When manufacturer changes\n scope.onManufacturerChange = function() {\n scope.selectedMold = null;\n scope.moldsForManufacturer = [];\n \n const manufacturer = scope.selectedManufacturer || '';\n if (!manufacturer) {\n return;\n }\n \n console.log('Loading molds for:', manufacturer);\n scope.send({\n topic: 'getMoldsByManufacturer',\n payload: { manufacturer: manufacturer }\n });\n };\n \n // When mold changes\n scope.onMoldChange = function() {\n if (!scope.selectedMold) return;\n scope.selectPreset(scope.selectedMold);\n };\n \n // Select a preset\n scope.selectPreset = function(preset) {\n scope.send({\n topic: 'selectMoldPreset',\n payload: preset\n });\n \n scope.moldTotal = preset.theoretical_cavities;\n scope.moldActive = preset.functional_cavities;\n };\n \n // Update mold settings with debounce\n scope.updateMoldSettings = function() {\n if (scope._moldSettingsDebounceTimer) {\n clearTimeout(scope._moldSettingsDebounceTimer);\n }\n \n scope._moldSettingsDebounceTimer = setTimeout(function() {\n const total = Number(scope.moldTotal || 0);\n const active = Number(scope.moldActive || 0);\n \n if (total === (scope._lastMoldTotal || 0) && active === (scope._lastMoldActive || 0)) {\n return;\n }\n \n scope._lastMoldTotal = total;\n scope._lastMoldActive = active;\n \n scope.send({\n topic: 'moldSettings',\n payload: { total, active }\n });\n }, 500);\n };\n \n // Add mold form\n scope.openAddMold = function() {\n scope.showAddMoldForm = true;\n scope.newMold = {\n manufacturer: scope.selectedManufacturer || '',\n mold_name: '',\n cavities: '',\n active: ''\n };\n };\n \n scope.cancelAddMold = function() {\n scope.showAddMoldForm = false;\n scope.isSavingMold = false;\n scope.newMold = { manufacturer: '', mold_name: '', cavities: '', active: '' };\n };\n \n // Save new mold with proper debouncing\n scope.saveNewMold = function() {\n if (scope.isSavingMold) {\n console.log('Already saving, ignoring click');\n return;\n }\n \n const manufacturer = (scope.newMold.manufacturer || '').trim();\n const moldName = (scope.newMold.mold_name || '').trim();\n const theoretical = (scope.newMold.cavities || '').trim();\n const active = (scope.newMold.active || '').trim();\n \n if (!manufacturer || !moldName || !theoretical || !active) {\n alert('Please enter all values.');\n return;\n }\n \n scope.isSavingMold = true;\n \n // Clear any pending timeout\n if (scope._saveMoldTimeout) {\n clearTimeout(scope._saveMoldTimeout);\n }\n \n // Send after 100ms to consolidate rapid clicks\n scope._saveMoldTimeout = setTimeout(function() {\n console.log('Sending addMoldPreset request');\n scope.send({\n topic: 'addMoldPreset',\n payload: {\n manufacturer: manufacturer,\n mold_name: moldName,\n theoretical: theoretical,\n active: active\n }\n });\n scope._saveMoldTimeout = null;\n }, 100);\n };\n \n // Watch for incoming messages - FIXED\n scope.$watch('msg', function(newMsg, oldMsg) {\n if (!newMsg || !newMsg.topic) return;\n \n // Create unique key for this message\n const msgKey = newMsg.topic + '_' + (newMsg.payload ? JSON.stringify(newMsg.payload).substring(0, 100) : '');\n const now = Date.now();\n \n // Check if we've processed this message recently (within 1 second)\n if (scope._processedMessages[msgKey] && (now - scope._processedMessages[msgKey]) < 1000) {\n console.log('Duplicate message ignored:', newMsg.topic);\n return;\n }\n \n // Mark as processed\n scope._processedMessages[msgKey] = now;\n \n console.log('Processing message:', newMsg.topic, newMsg.payload);\n \n // Handle different message types\n if (newMsg.topic === 'manufacturersList') {\n scope.manufacturers = Array.isArray(newMsg.payload) ? newMsg.payload : [];\n console.log('Manufacturers loaded:', scope.manufacturers.length);\n return;\n }\n \n if (newMsg.topic === 'moldPresetsList') {\n scope.moldsForManufacturer = Array.isArray(newMsg.payload) ? newMsg.payload : [];\n console.log('Molds loaded:', scope.moldsForManufacturer.length);\n return;\n }\n \n if (newMsg.topic === 'moldPresetSelected') {\n const data = newMsg.payload || {};\n scope.moldTotal = data.total || 0;\n scope.moldActive = data.active || 0;\n console.log('Preset selected:', data);\n return;\n }\n \n if (newMsg.topic === 'addMoldResult') {\n console.log('Mold added successfully');\n scope.isSavingMold = false;\n scope.showAddMoldForm = false;\n scope.newMold = { manufacturer: '', mold_name: '', cavities: '', active: '' };\n \n // Refresh the molds list if manufacturer is selected\n if (scope.selectedManufacturer) {\n setTimeout(function() {\n scope.onManufacturerChange();\n }, 500);\n }\n return;\n }\n });\n \n // Initialize by loading manufacturers\n console.log('Initializing Settings page...');\n scope.loadManufacturers();\n \n})(scope);\n\n// Material theme cleanup\n(function ensureNoMaterialTint(){\n const root = document.getElementById('oee');\n if (!root) return;\n\n const targets = root.querySelectorAll([\n '.md-toolbar',\n 'md-toolbar',\n '.md-subheader',\n 'md-subheader',\n '.md-toolbar-tools',\n '.md-card-title'\n ].join(','));\n\n targets.forEach(el => {\n if (el && el.style) {\n if (el.style.background) {\n el.style.background = 'transparent';\n }\n if (el.style.backgroundColor) {\n el.style.backgroundColor = 'transparent';\n }\n }\n if (el && el.classList) {\n el.classList.remove(\n 'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n 'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n );\n }\n });\n\n if (!document.getElementById('oee-theme-sentinel')) {\n const style = document.createElement('style');\n style.id = 'oee-theme-sentinel';\n style.textContent = `\n #oee .md-toolbar::before, #oee .md-toolbar::after,\n #oee .md-subheader::before, #oee .md-subheader::after,\n #oee md-toolbar::before, #oee md-toolbar::after,\n #oee md-subheader::before, #oee md-subheader::after {\n display: none !important;\n content: none !important;\n }\n `;\n document.head.appendChild(style);\n }\n})();\n</script>\n\n\n",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "local",
|
|
"className": "",
|
|
"x": 210,
|
|
"y": 280,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c",
|
|
"0a5caf3e23c68e6e"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f1a2b3c4d5e6f7a8",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "e1f2a3b4c5d6e7f8",
|
|
"name": "WO Template",
|
|
"order": 1,
|
|
"width": "25",
|
|
"height": "25",
|
|
"format": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');\n\n/* SCALE: align 100% zoom with prior 125% appearance */\n:root {\n font-size: 125%;\n --bg-0: #0c1117;\n --bg-1: #131a23;\n --panel: #151e2b;\n --panel-hi: #1a2433;\n --text: #ecf3ff;\n --muted: #96a5b7;\n --accent: #2ea3ff;\n --accent-2: #1f8cf3;\n --good: #24d06f;\n --warn: #ffd100;\n --bad: #ff4d4f;\n --radius: 0.75rem;\n --shadow: 0 0.5rem 1rem rgba(0, 0, 0, .35), inset 0 0.0625rem 0 rgba(255, 255, 255, .05);\n --sidebar-width: 3.75rem;\n --sidebar-gap: clamp(0.75rem, 1.2vh, 1rem);\n --content-max: 100rem;\n --content-pad: clamp(1rem, 1.2vw, 1.4rem);\n --section-gap: clamp(0.75rem, 1vw, 1rem);\n --card-pad: clamp(1rem, 1.1vw, 1.25rem);\n --card-pad-lg: clamp(1.1rem, 1.2vw, 1.35rem);\n --fs-page-title: clamp(1.2rem, 1vw + 0.35rem, 1.7rem);\n --fs-section-title: clamp(0.95rem, 0.9vw + 0.25rem, 1.25rem);\n --fs-label: clamp(0.85rem, 0.7vw + 0.3rem, 1.05rem);\n --fs-body: clamp(0.8rem, 0.7vw + 0.28rem, 1rem);\n --progress-height: 0.875rem;\n}\n\n* {\n box-sizing: border-box;\n}\n\nhtml,\nbody,\n#oee {\n width: 100vw;\n height: 100vh;\n}\n\nhtml,\nbody {\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n background: var(--bg-0);\n color: var(--text);\n font-family: 'Poppins', system-ui, 'Segoe UI', 'Roboto', sans-serif;\n font-weight: 600;\n}\n\nbody {\n overflow: hidden;\n}\n\nbody > md-content,\nbody > md-content > md-content,\n.nr-dashboard-template,\n.nr-dashboard-template md-content,\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-content {\n background: transparent !important;\n height: 100%;\n overflow: hidden;\n}\n\n.nr-dashboard-cardpanel,\n.nr-dashboard-cardpanel md-card,\n.nr-dashboard-cardpanel md-card-content {\n background: transparent !important;\n box-shadow: none !important;\n padding: 0 !important;\n}\n\n/* LAYOUT: lock sidebar + content grid across tabs */\n#oee {\n position: fixed;\n inset: 0;\n display: flex;\n overflow: hidden;\n}\n\n.sidebar {\n width: var(--sidebar-width);\n background: #0b1119;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: clamp(0.625rem, 1.4vh, 0.9rem) clamp(0.5rem, 0.8vw, 0.75rem);\n}\n\n.side-top {\n display: flex;\n flex-direction: column;\n gap: var(--sidebar-gap);\n align-items: center;\n}\n\n.sb-btn {\n width: 2.75rem;\n height: 2.75rem;\n border-radius: 0.75rem;\n background: #0f1721;\n border: 1px solid #19222e;\n display: grid;\n place-items: center;\n color: #8fb3d9;\n cursor: pointer;\n transition: 0.16s box-shadow, 0.16s transform, 0.16s border-color;\n}\n\n.sb-btn.active {\n border-color: #2fd289;\n box-shadow: 0 0 0 0.125rem rgba(36, 208, 111, .25), 0 0.625rem 1.125rem rgba(36, 208, 111, .28);\n color: #2fd289;\n}\n\n.sb-ico {\n font-size: clamp(1.1rem, 1.2vw, 1.25rem);\n line-height: 1;\n}\n\n.sb-foot {\n font-size: clamp(0.6rem, 0.6vw, 0.7rem);\n color: #6c7b8d;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.main {\n flex: 1;\n overflow: auto;\n padding: var(--content-pad);\n}\n\n.container {\n max-width: var(--content-max);\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: var(--section-gap);\n}\n\n.card {\n background: linear-gradient(160deg, var(--panel) 0%, var(--panel-hi) 100%);\n border-radius: var(--radius);\n box-shadow: var(--shadow);\n}\n\n/* HEADER: keep title and CTA row on one line */\n.page-heading {\n display: flex;\n align-items: center;\n gap: var(--section-gap);\n padding: 0 0.25rem;\n flex-wrap: wrap;\n}\n\n.page-title {\n margin: 0;\n font-size: var(--fs-page-title);\n letter-spacing: 0.05em;\n text-transform: uppercase;\n color: var(--text);\n}\n\n.page-actions {\n margin-left: auto;\n display: flex;\n gap: clamp(0.65rem, 1vw, 0.9rem);\n flex-wrap: wrap;\n align-items: center;\n}\n\n.action-btn {\n background: linear-gradient(180deg, #32ff7e 0%, #2fd289 100%);\n box-shadow: 0 0 1.25rem rgba(36, 208, 111, .5), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n border: none;\n border-radius: var(--radius);\n color: var(--text);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 700;\n padding: clamp(0.75rem, 1vw, 0.9rem) clamp(1rem, 1.4vw, 1.25rem);\n cursor: pointer;\n transition: 0.16s transform, 0.16s filter, 0.16s opacity;\n min-width: clamp(8.75rem, 12vw, 10rem);\n}\n\n.action-btn:hover:not(:disabled) {\n transform: translateY(-0.05rem);\n filter: brightness(1.08);\n}\n\n.action-btn:active:not(:disabled) {\n transform: none;\n filter: brightness(0.96);\n}\n\n.action-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n filter: grayscale(0.6);\n}\n\n.exit-multi-select {\n background: linear-gradient(180deg, #ff6b6b 0%, #ff5252 100%);\n box-shadow: 0 0 1.25rem rgba(255, 75, 75, .4), inset 0 0.0625rem 0 rgba(255, 255, 255, .1);\n}\n\n.multi-select-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);\n color: var(--text);\n padding: 0.5rem 1rem;\n border-radius: 999px;\n font-size: clamp(0.8rem, 0.9vw, 0.95rem);\n font-weight: 700;\n letter-spacing: 0.05em;\n box-shadow: 0 0.25rem 0.75rem rgba(46, 163, 255, 0.4);\n animation: badge-appear 0.3s ease;\n}\n\n@keyframes badge-appear {\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* TABLE: keep density + typography aligned with Home */\n.table-card {\npadding: var(--card-pad-lg);\ndisplay: flex;\nflex-direction: column;\ngap: clamp(0.75rem, 0.9vw, 0.95rem);\n}\n\n.table-scroll {\noverflow: auto;\nborder-radius: 0.625rem;\nborder: 1px solid rgba(31, 44, 60, 0.55);\nbackground: rgba(13, 19, 27, 0.6);\n}\n\n.workorders-table {\nwidth: 100%;\ntable-layout: fixed;\nborder-collapse: separate;\nborder-spacing: 0;\nmin-width: 52rem;\nfont-variant-numeric: tabular-nums;\n}\n\n.workorders-table thead th {\nposition: sticky;\ntop: 0;\nz-index: 2;\ncolor: var(--text);\ntext-transform: uppercase;\nletter-spacing: 0.04em;\nfont-size: clamp(0.75rem, 0.9vw, 0.85rem);\npadding: clamp(0.65rem, 0.9vw, 0.9rem);\nbackground: rgba(21, 30, 43, 0.9);\ntext-align: left;\nborder-bottom: 1px solid rgba(47, 67, 95, 0.55);\n}\n\n.workorders-table tbody td {\npadding: clamp(0.65rem, 0.95vw, 0.95rem);\ncolor: var(--text);\nfont-size: var(--fs-body);\nbackground: rgba(17, 24, 34, 0.7);\nborder-bottom: 1px solid rgba(31, 44, 60, 0.45);\n}\n\n.workorders-table thead th:not(:last-child),\n.workorders-table tbody td:not(:last-child) {\nborder-right: 1px solid rgba(31, 44, 60, 0.35);\n}\n\n.workorders-table tbody tr:nth-child(odd) td {\nbackground: rgba(17, 27, 39, 0.82);\n}\n\n.workorders-table tbody tr:hover td {\nbackground: rgba(36, 56, 80, 0.55);\n}\n\n.workorders-table thead th:nth-child(4),\n.workorders-table thead th:nth-child(5),\n.workorders-table thead th:nth-child(6),\n.workorders-table thead th:nth-child(9),\n.workorders-table tbody td:nth-child(4),\n.workorders-table tbody td:nth-child(5),\n.workorders-table tbody td:nth-child(6),\n.workorders-table tbody td:nth-child(9) {\ntext-align: right;\n}\n\n.progress-cell {\nmin-width: 9.5rem;\n}\n\n.progress-bar {\nheight: var(--progress-height);\nborder-radius: 999px;\nbackground: #111a24;\nborder: 1px solid #243244;\noverflow: hidden;\n}\n\n.progress-bar__fill {\nheight: 100%;\nwidth: 0;\ntransition: width 0.4s ease;\n}\n\n.workorders-table tbody tr {\ncursor: pointer;\ntransition: background 0.18s ease, border-color 0.18s ease;\nuser-select: none;\n}\n\n.workorders-table tbody tr.row-selected td {\nbackground: rgba(46, 163, 255, 0.18);\nborder-bottom-color: rgba(46, 163, 255, 0.45);\nbox-shadow: inset 0 0 0 1px rgba(46, 163, 255, 0.28);\n}\n\n.checkbox-cell {\nwidth: 3rem;\npadding-left: clamp(0.75rem, 1vw, 1rem) !important;\nopacity: 0;\npointer-events: none;\ntransition: opacity 0.2s ease;\n}\n\n.multi-select-mode .checkbox-cell {\nopacity: 1;\npointer-events: auto;\n}\n\n.checkbox-cell input[type=\"checkbox\"] {\nwidth: 1.125rem;\nheight: 1.125rem;\ncursor: pointer;\naccent-color: var(--accent);\n}\n\n.progress-bar__fill--pending {\n background: linear-gradient(90deg, rgba(150, 165, 183, .5), rgba(150, 165, 183, .8));\n}\n\n.progress-bar__fill--running {\n background: linear-gradient(90deg, rgba(46, 163, 255, .6), rgba(46, 163, 255, .85));\n}\n\n.progress-bar__fill--done {\n background: linear-gradient(90deg, rgba(36, 208, 111, .75), rgba(36, 208, 111, .95));\n}\n\n.status-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0.375rem 0.875rem;\n border-radius: 999px;\n font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n letter-spacing: 0.2em;\n text-transform: uppercase;\n font-weight: 700;\n}\n\n.status-badge--pending {\n color: var(--muted);\n background: rgba(20, 28, 40, .65);\n border: 1px solid rgba(150, 165, 183, .35);\n}\n\n.status-badge--running {\n color: var(--text);\n background: rgba(30, 52, 73, .7);\n border: 1px solid rgba(46, 163, 255, .45);\n}\n\n.status-badge--done {\n color: var(--good);\n background: rgba(20, 56, 44, .7);\n border: 1px solid rgba(36, 208, 111, .45);\n}\n\n.table-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: clamp(0.75rem, 0.9vw, 0.85rem);\n color: var(--muted);\n}\n\n.table-footer-hint {\n font-size: clamp(0.7rem, 0.8vw, 0.8rem);\n color: rgba(150, 165, 183, 0.6);\n font-style: italic;\n}\n\n@media (max-width: 68.75rem) {\n .page-actions {\n width: 100%;\n justify-content: flex-start;\n }\n}\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n background-color: transparent !important;\n}\n</style>\n<div id=\"oee\">\n <aside class=\"sidebar\">\n <div class=\"side-top\">\n <button class=\"sb-btn\" data-label=\"Home\" ng-click=\"gotoTab('Home')\"><span class=\"sb-ico\">\ud83c\udfe0</span></button>\n <button class=\"sb-btn active\" data-label=\"Work Orders\" ng-click=\"gotoTab('Work Orders')\"><span class=\"sb-ico\">\ud83d\udccb</span></button>\n <button class=\"sb-btn\" data-label=\"Alerts\" ng-click=\"gotoTab('Alerts')\"><span class=\"sb-ico\">\u26a0\ufe0f</span></button>\n <button class=\"sb-btn\" data-label=\"Graphs\" ng-click=\"gotoTab('Graphs')\"><span class=\"sb-ico\">\ud83d\udcca</span></button>\n <button class=\"sb-btn\" data-label=\"Help\" ng-click=\"gotoTab('Help')\"><span class=\"sb-ico\">\u2753</span></button>\n <button class=\"sb-btn\" data-label=\"Settings\" ng-click=\"gotoTab('Settings')\"><span class=\"sb-ico\">\u2699\ufe0f</span></button>\n </div>\n <div class=\"sb-foot\">OEE V1.0</div>\n </aside>\n\n <main class=\"main\">\n <div class=\"container\">\n <section class=\"page-heading\">\n <h1 class=\"page-title\">Work Orders</h1>\n <div class=\"page-actions\">\n <span id=\"multi-select-badge\" class=\"multi-select-badge\" style=\"display:none;\">\n <span id=\"selected-count\">0</span> selected\n </span>\n <button class=\"action-btn\" data-action=\"upload-excel\">Upload Excel</button>\n <button class=\"action-btn\" data-action=\"start-work-order\" id=\"load-btn\">Load</button>\n <button class=\"action-btn\" data-action=\"complete-work-order\" id=\"done-btn\">Done</button>\n <button class=\"action-btn\" data-action=\"refresh-work-orders\">Refresh</button>\n <button class=\"action-btn exit-multi-select\" id=\"exit-multi-select-btn\" style=\"display:none;\">Exit Multi-Select</button>\n <input type=\"file\" id=\"wo-file\" accept=\".xlsx\" style=\"display:none\" />\n </div>\n </section>\n\n <section class=\"card table-card\">\n <div class=\"table-scroll\">\n <table class=\"workorders-table\" id=\"workorders-table\">\n <thead>\n <tr>\n <th class=\"checkbox-cell\"></th>\n <th>ID</th>\n <th>SKU</th>\n <th>TARGET</th>\n <th>GOOD</th>\n <th>SCRAP</th>\n <th>PROGRESS</th>\n <th>STATUS</th>\n <th>LAST UPDATE</th>\n </tr>\n </thead>\n <tbody id=\"workorders-body\"></tbody>\n </table>\n </div>\n <div class=\"table-footer\">\n <span id=\"workorders-count\">0 items</span>\n <span class=\"table-footer-hint\">Tip: Long-press or right-click to multi-select</span>\n </div>\n </section>\n </div>\n </main>\n</div>\n\n<script>\n(function(scope) {\n // Multi-select state\n scope.multiSelectMode = false;\n scope.selectedOrders = [];\n scope.longPressTimer = null;\n scope.longPressDuration = 500; // ms\n\n scope.gotoTab = function(tabName) {\n scope.send({ ui_control: { tab: tabName } });\n };\n\n window.workOrders = window.workOrders || [\n { id:\"WO-101\", sku:\"ST-003\", target:250, good:0, scrap:0, progressPercent:0, status:\"PENDING\", lastUpdateIso:\"\" }\n ];\n\n var elements = {\n tbody: document.getElementById('workorders-body'),\n count: document.getElementById('workorders-count'),\n buttons: document.querySelectorAll('[data-action]'),\n table: document.getElementById('workorders-table'),\n loadBtn: document.getElementById('load-btn'),\n doneBtn: document.getElementById('done-btn'),\n exitMultiSelectBtn: document.getElementById('exit-multi-select-btn'),\n multiSelectBadge: document.getElementById('multi-select-badge'),\n selectedCount: document.getElementById('selected-count')\n };\n\n function formatNumber(value) {\n var num = Number(value);\n return Number.isFinite(num) ? num.toLocaleString() : '0';\n }\n\n function formatDate(isoString) {\n if (!isoString) {\n return '\u2014';\n }\n var date = new Date(isoString);\n if (Number.isNaN(date.valueOf())) {\n return isoString;\n }\n return date.toLocaleString();\n }\n\n function progressFillClass(status) {\n switch ((status || '').toUpperCase()) {\n case 'DONE': return 'progress-bar__fill--done';\n case 'RUNNING': return 'progress-bar__fill--running';\n default: return 'progress-bar__fill--pending';\n }\n }\n\n function statusBadgeClass(status) {\n switch ((status || '').toUpperCase()) {\n case 'DONE': return 'status-badge status-badge--done';\n case 'RUNNING': return 'status-badge status-badge--running';\n default: return 'status-badge status-badge--pending';\n }\n }\n\n function enterMultiSelectMode() {\n scope.multiSelectMode = true;\n elements.table.classList.add('multi-select-mode');\n elements.exitMultiSelectBtn.style.display = 'inline-block';\n updateButtonStates();\n scope.$applyAsync();\n }\n\n function exitMultiSelectMode() {\n scope.multiSelectMode = false;\n scope.selectedOrders = [];\n elements.table.classList.remove('multi-select-mode');\n elements.exitMultiSelectBtn.style.display = 'none';\n elements.multiSelectBadge.style.display = 'none';\n\n // Uncheck all checkboxes\n var checkboxes = elements.tbody.querySelectorAll('input[type=\"checkbox\"]');\n checkboxes.forEach(function(cb) {\n cb.checked = false;\n });\n\n // Remove all row selections\n var rows = elements.tbody.querySelectorAll('tr');\n rows.forEach(function(row) {\n row.classList.remove('row-selected');\n });\n\n updateButtonStates();\n scope.$applyAsync();\n }\n\n function updateButtonStates() {\n var selectedCount = scope.selectedOrders.length;\n\n if (scope.multiSelectMode && selectedCount > 0) {\n elements.multiSelectBadge.style.display = 'inline-flex';\n elements.selectedCount.textContent = selectedCount;\n\n // Disable Load button if multiple selected\n if (selectedCount > 1) {\n elements.loadBtn.disabled = true;\n } else {\n elements.loadBtn.disabled = false;\n }\n\n elements.doneBtn.disabled = false;\n } else if (scope.multiSelectMode) {\n elements.multiSelectBadge.style.display = 'none';\n elements.loadBtn.disabled = true;\n elements.doneBtn.disabled = true;\n } else {\n elements.loadBtn.disabled = false;\n elements.doneBtn.disabled = false;\n }\n }\n\n function toggleOrderSelection(order, checkbox, row) {\n var index = scope.selectedOrders.findIndex(function(o) {\n return o.id === order.id;\n });\n\n if (index === -1) {\n // Add to selection\n scope.selectedOrders.push(order);\n checkbox.checked = true;\n row.classList.add('row-selected');\n } else {\n // Remove from selection\n scope.selectedOrders.splice(index, 1);\n checkbox.checked = false;\n row.classList.remove('row-selected');\n }\n\n updateButtonStates();\n }\n\n function renderWorkOrders() {\n var orders = Array.isArray(window.workOrders) ? window.workOrders : [];\n orders = orders.filter(function(order) {\n return (order.status || '').toUpperCase() !== 'DONE';\n });\n\n if (elements.tbody) {\n elements.tbody.textContent = '';\n\n orders.forEach(function(order) {\n var tr = document.createElement('tr');\n tr.dataset.orderId = order.id || '';\n\n function appendCell(content, alignRight, className) {\n var td = document.createElement('td');\n if (className) td.className = className;\n if (alignRight) td.style.textAlign = 'right';\n if (content instanceof Node) {\n td.appendChild(content);\n } else {\n td.textContent = content;\n }\n tr.appendChild(td);\n }\n\n // Checkbox cell\n var checkboxTd = document.createElement('td');\n checkboxTd.className = 'checkbox-cell';\n var checkbox = document.createElement('input');\n checkbox.type = 'checkbox';\n checkbox.addEventListener('click', function(e) {\n e.stopPropagation();\n if (scope.multiSelectMode) {\n toggleOrderSelection(order, checkbox, tr);\n }\n });\n checkboxTd.appendChild(checkbox);\n tr.appendChild(checkboxTd);\n\n appendCell(order.id || '\u2014');\n appendCell(order.sku || '\u2014');\n appendCell(formatNumber(order.target), true);\n appendCell(formatNumber(order.good), true);\n appendCell(formatNumber(order.scrap), true);\n\n var progressCell = document.createElement('td');\n progressCell.className = 'progress-cell';\n var bar = document.createElement('div');\n bar.className = 'progress-bar';\n var fill = document.createElement('div');\n fill.className = 'progress-bar__fill ' + progressFillClass(order.status);\n var percent = Math.max(0, Math.min(100, Math.round(Number(order.progressPercent) || 0)));\n fill.style.width = percent + '%';\n bar.appendChild(fill);\n progressCell.appendChild(bar);\n tr.appendChild(progressCell);\n\n var statusCell = document.createElement('td');\n var badge = document.createElement('span');\n badge.className = statusBadgeClass(order.status);\n badge.textContent = (order.status || 'PENDING').toUpperCase();\n statusCell.appendChild(badge);\n tr.appendChild(statusCell);\n\n appendCell(formatDate(order.lastUpdateIso));\n\n // Long-press functionality for entering multi-select mode\n tr.addEventListener('mousedown', function(e) {\n if (scope.multiSelectMode) return;\n\n scope.longPressTimer = setTimeout(function() {\n enterMultiSelectMode();\n toggleOrderSelection(order, checkbox, tr);\n }, scope.longPressDuration);\n });\n\n tr.addEventListener('mouseup', function() {\n if (scope.longPressTimer) {\n clearTimeout(scope.longPressTimer);\n scope.longPressTimer = null;\n }\n });\n\n tr.addEventListener('mouseleave', function() {\n if (scope.longPressTimer) {\n clearTimeout(scope.longPressTimer);\n scope.longPressTimer = null;\n }\n });\n\n // Right-click to enter multi-select mode\n tr.addEventListener('contextmenu', function(e) {\n e.preventDefault();\n if (!scope.multiSelectMode) {\n enterMultiSelectMode();\n }\n toggleOrderSelection(order, checkbox, tr);\n });\n\n // Regular click behavior\n tr.addEventListener('click', function(e) {\n if (scope.multiSelectMode) {\n toggleOrderSelection(order, checkbox, tr);\n } else {\n // Single-select mode (original behavior)\n if (scope.selectedRow && scope.selectedRow !== tr) {\n scope.selectedRow.classList.remove('row-selected');\n }\n scope.selectedRow = tr;\n scope.selectedOrder = order;\n tr.classList.add('row-selected');\n scope.$applyAsync();\n }\n });\n\n elements.tbody.appendChild(tr);\n });\n }\n\n if (elements.count) {\n var countText = orders.length + (orders.length === 1 ? ' item' : ' items');\n elements.count.textContent = countText;\n }\n }\n\n scope.renderWorkOrders = renderWorkOrders;\n renderWorkOrders();\n\n // Exit multi-select button\n elements.exitMultiSelectBtn.addEventListener('click', function() {\n exitMultiSelectMode();\n });\n\n if (elements.buttons) {\n elements.buttons.forEach(function(btn) {\n btn.addEventListener('click', function() {\n const action = btn.getAttribute(\"data-action\");\n switch (action) {\n case \"upload-excel\": handleUploadExcel(); break;\n case \"refresh-work-orders\": handleRefresh(); break;\n case \"start-work-order\": handleStart(); break;\n case \"complete-work-order\": handleComplete(); break;\n default: scope.send({ action }); break;\n }\n });\n });\n }\n\n function handleUploadExcel() {\n const input = document.getElementById(\"wo-file\");\n input.value = \"\";\n input.onchange = function (event) {\n const file = event.target.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = function (e) {\n const base64 = e.target.result.split(\",\")[1];\n scope.send({\n action: \"upload-excel\",\n filename: file.name,\n payload: base64\n });\n };\n reader.readAsDataURL(file);\n };\n input.click();\n }\n\n function handleRefresh() {\n scope.send({ action: \"refresh-work-orders\" });\n }\n\n function handleStart() {\n if (scope.multiSelectMode) {\n if (scope.selectedOrders.length === 0) {\n return alert(\"Please select a work order first.\");\n }\n if (scope.selectedOrders.length > 1) {\n return alert(\"Cannot load multiple work orders at once.\");\n }\n scope.send({ action: \"start-work-order\", payload: scope.selectedOrders[0] });\n exitMultiSelectMode();\n } else {\n if (!scope.selectedOrder) return alert(\"Please select a work order first.\");\n scope.send({ action: \"start-work-order\", payload: scope.selectedOrder });\n }\n handleRefresh();\n }\n\n function handleComplete() {\n if (scope.multiSelectMode) {\n if (scope.selectedOrders.length === 0) {\n return alert(\"No work orders selected.\");\n }\n\n // Confirm multi-complete\n var confirmMsg = \"Mark \" + scope.selectedOrders.length + \" work order(s) as done?\";\n if (!confirm(confirmMsg)) return;\n\n // Send all selected orders for completion\n scope.selectedOrders.forEach(function(order) {\n scope.send({ action: \"complete-work-order\", payload: order });\n });\n\n exitMultiSelectMode();\n } else {\n if (!scope.selectedOrder) return alert(\"No active work order selected.\");\n scope.send({ action: \"complete-work-order\", payload: scope.selectedOrder });\n }\n handleRefresh();\n }\n\n scope.$watch(\"msg\", function(msg) {\n if (!msg) return;\n\n if (msg.topic === \"workOrderCycle\") {\n var update = msg.payload || {};\n var orders = Array.isArray(window.workOrders) ? window.workOrders.slice() : [];\n var found = false;\n\n orders = orders.map(function(order) {\n if ((order.id || \"\") === (update.id || \"\")) {\n found = true;\n return Object.assign({}, order, {\n good: Number(update.good) || 0,\n scrap: Number(update.scrap) || 0,\n target: Number(update.target) || 0,\n progressPercent: Number(update.progressPercent) || 0,\n status: update.status ? update.status.toUpperCase() : (order.status || \"PENDING\"),\n lastUpdateIso: update.lastUpdateIso || order.lastUpdateIso\n });\n }\n return order;\n });\n\n if (!found && update.id) {\n orders.push(update);\n }\n\n window.workOrders = orders;\n scope.renderWorkOrders();\n return;\n }\n\n if (msg.topic === \"workOrdersList\") {\n window.workOrders = msg.payload || [];\n scope.renderWorkOrders();\n }\n\n if (msg.topic === \"uploadStatus\") {\n alert(msg.payload.message || \"Upload complete\");\n handleRefresh();\n }\n });\n\n})(scope);\n\n(function ensureNoMaterialTint(){\n const root = document.getElementById('oee');\n if (!root) return;\n\n const targets = root.querySelectorAll([\n '.md-toolbar',\n 'md-toolbar',\n '.md-subheader',\n 'md-subheader',\n '.md-toolbar-tools',\n '.md-card-title'\n ].join(','));\n\n targets.forEach(el => {\n if (el && el.style) {\n if (el.style.background) {\n el.style.background = 'transparent';\n }\n if (el.style.backgroundColor) {\n el.style.backgroundColor = 'transparent';\n }\n }\n if (el && el.classList) {\n el.classList.remove(\n 'md-whiteframe-1dp','md-whiteframe-2dp','md-whiteframe-3dp',\n 'md-whiteframe-z1','md-whiteframe-z2','md-whiteframe-z3'\n );\n }\n });\n\n if (!document.getElementById('oee-theme-sentinel')) {\n const style = document.createElement('style');\n style.id = 'oee-theme-sentinel';\n style.textContent = `\n #oee .md-toolbar::before, #oee .md-toolbar::after,\n #oee .md-subheader::before, #oee .md-subheader::after,\n #oee md-toolbar::before, #oee md-toolbar::after,\n #oee md-subheader::before, #oee md-subheader::after {\n display: none !important;\n content: none !important;\n }\n `;\n document.head.appendChild(style);\n }\n})();\n\nscope.$evalAsync(scope.renderWorkOrders);\n</script>\n",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "local",
|
|
"className": "",
|
|
"x": 200,
|
|
"y": 120,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c",
|
|
"010de5af3ced0ae3"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "a7d58e15929b3d8c",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "Tab navigation",
|
|
"func": "if (msg.ui_control && msg.ui_control.tab) {\n msg.payload = { tab: msg.ui_control.tab };\n delete msg.ui_control;\n return msg;\n}\nreturn null;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 440,
|
|
"y": 180,
|
|
"wires": [
|
|
[
|
|
"cc81a9dbfd443d62"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "cc81a9dbfd443d62",
|
|
"type": "ui_ui_control",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "",
|
|
"events": "all",
|
|
"x": 600,
|
|
"y": 180,
|
|
"wires": [
|
|
[]
|
|
]
|
|
},
|
|
{
|
|
"id": "06f9769e8b0d5355",
|
|
"type": "ui_template",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"group": "",
|
|
"name": "General Style",
|
|
"order": 0,
|
|
"width": 0,
|
|
"height": 0,
|
|
"format": "<style>\n ::selection {\n background-color: blue; /* Or a specific blue hex code like #0000FF */\n color: white; /* Text color when selected */\n }\n /* Removes shadows and background tints from UI groups/cards */\n .nr-dashboard-theme ui-card-panel,\n body.nr-dashboard-theme md-content md-card {\n box-shadow: none !important;\n background-color: transparent !important;\n /* or set your desired background color */\n border-radius: 0px !important;\n /* Removes rounded corners if present */\n text-shadow: none !important;\n }\n\n /* Removes tints/shadows from specific widgets like buttons */\n .nr-dashboard-theme .nr-dashboard-button .md-button {\n box-shadow: none !important;\n background-color: transparent !important;\n }\n\n /* Adjust the main background of the page if needed */\n .masonry-container {\n background: none !important;\n /* Removes any linear gradients or colors */\n }\n\n /* ... your existing CSS rules ... */\n \n /* Change the background color when text is highlighted by the user */\n ::selection {\n background-color: transparent !important; /* Makes the background clear */\n color: inherit !important; /* Keeps the original text color */\n }\n \n /* For older browsers (Firefox specific) */\n ::-moz-selection {\n background-color: transparent !important;\n color: inherit !important;\n }\n\n /* ... your previous CSS rules ... */\n \n /* ... your previous CSS rules ... */\n \n /* Override the background color for the 'How to Start / Stop Production' title */\n .help-title {\n background-color: transparent !important;\n }\n .card help-card {\n background-color: transparent !important;\n }\n .panel-title {\n background-color: transparent !important;\n }\n\n/* Override Node-RED Dashboard's gray backgrounds on text elements */\n.nr-dashboard-template p,\n.nr-dashboard-template h1,\n.nr-dashboard-template h2,\n.nr-dashboard-template h3,\n.nr-dashboard-template h4,\n.nr-dashboard-template label {\n background-color: transparent !important;\n}\n</style>",
|
|
"storeOutMessages": true,
|
|
"fwdInMessages": true,
|
|
"resendOnRefresh": true,
|
|
"templateScope": "global",
|
|
"className": "",
|
|
"x": 560,
|
|
"y": 140,
|
|
"wires": [
|
|
[]
|
|
]
|
|
},
|
|
{
|
|
"id": "6ad64dedab2042b9",
|
|
"type": "inject",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "Simula Inyectora",
|
|
"props": [
|
|
{
|
|
"p": "payload"
|
|
}
|
|
],
|
|
"repeat": "1",
|
|
"crontab": "",
|
|
"once": true,
|
|
"onceDelay": 0.1,
|
|
"topic": "",
|
|
"payload": "1",
|
|
"payloadType": "num",
|
|
"x": 170,
|
|
"y": 380,
|
|
"wires": [
|
|
[
|
|
"0f5ee343ed17976c"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "0f5ee343ed17976c",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "1,0",
|
|
"func": "// Get current global value (default to 0 if not set)\nlet estado = global.get('Estado_maquina') || 0;\nlet stop = flow.get('stop') || false;\n\nif (stop) {\n // Manual stop active \u2192 force 0, don't reschedule\n global.set('Estado_maquina', 0);\n msg.payload = 0;\n node.send(msg);\n return;\n}\n\n// Toggle between 1 and 0\nestado = estado === 1 ? 0 : 1;\n\n// Update the global variable\nglobal.set('Estado_maquina', estado);\n\n// Send it out\nmsg.payload = estado;\nreturn msg;\n",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 490,
|
|
"y": 400,
|
|
"wires": [
|
|
[
|
|
"0d023d87a13bf56f"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "4e025693949ec4bd",
|
|
"type": "inject",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "Manual Stop",
|
|
"props": [
|
|
{
|
|
"p": "payload"
|
|
},
|
|
{
|
|
"p": "topic",
|
|
"vt": "str"
|
|
}
|
|
],
|
|
"repeat": "",
|
|
"crontab": "",
|
|
"once": false,
|
|
"onceDelay": 0.1,
|
|
"topic": "",
|
|
"payload": "",
|
|
"payloadType": "date",
|
|
"x": 150,
|
|
"y": 420,
|
|
"wires": [
|
|
[
|
|
"b55c91c096a366db"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "b55c91c096a366db",
|
|
"type": "change",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "",
|
|
"rules": [
|
|
{
|
|
"t": "set",
|
|
"p": "stop",
|
|
"pt": "flow",
|
|
"to": "true",
|
|
"tot": "bool"
|
|
}
|
|
],
|
|
"action": "",
|
|
"property": "",
|
|
"from": "",
|
|
"to": "",
|
|
"reg": false,
|
|
"x": 330,
|
|
"y": 420,
|
|
"wires": [
|
|
[
|
|
"0f5ee343ed17976c"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "33d1f41119e0e262",
|
|
"type": "inject",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "Manual Start",
|
|
"props": [
|
|
{
|
|
"p": "payload"
|
|
},
|
|
{
|
|
"p": "topic",
|
|
"vt": "str"
|
|
}
|
|
],
|
|
"repeat": "",
|
|
"crontab": "",
|
|
"once": false,
|
|
"onceDelay": 0.1,
|
|
"topic": "",
|
|
"payload": "",
|
|
"payloadType": "date",
|
|
"x": 150,
|
|
"y": 460,
|
|
"wires": [
|
|
[
|
|
"f98ae23b2430c206"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f98ae23b2430c206",
|
|
"type": "change",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "set flow.start",
|
|
"rules": [
|
|
{
|
|
"t": "set",
|
|
"p": "stop",
|
|
"pt": "flow",
|
|
"to": "false",
|
|
"tot": "bool"
|
|
}
|
|
],
|
|
"action": "",
|
|
"property": "",
|
|
"from": "",
|
|
"to": "",
|
|
"reg": false,
|
|
"x": 320,
|
|
"y": 460,
|
|
"wires": [
|
|
[
|
|
"0f5ee343ed17976c"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "eaebd8c719c3d135",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "28c173789034639c",
|
|
"name": "Cavities Settings",
|
|
"func": "if (msg.topic === \"moldSettings\" && msg.payload) {\n const total = Number(msg.payload.total || 0);\n const active = Number(msg.payload.active || 0);\n\n // Store globally\n global.set(\"moldTotal\", total);\n global.set(\"moldActive\", active);\n\n node.status({ fill: \"green\", shape: \"dot\", text: `Saved: ${active}/${total}` });\n\n msg.payload = { saved: true, total, active };\n return msg;\n}\n\n// Handle preset selection\nif (msg.topic === \"selectMoldPreset\" && msg.payload) {\n const preset = msg.payload;\n const total = Number(preset.theoretical_cavities || 0);\n const active = Number(preset.functional_cavities || 0);\n\n // Store globally\n global.set(\"moldTotal\", total);\n global.set(\"moldActive\", active);\n\n node.status({ fill: \"blue\", shape: \"dot\", text: `Preset: ${preset.mold_name}` });\n\n // Send to UI to update fields\n msg.topic = \"moldPresetSelected\";\n msg.payload = { total, active, presetName: preset.mold_name };\n return msg;\n}\n\nnode.status({ fill: \"red\", shape: \"ring\", text: \"Invalid payload\" });\nreturn null;\n",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 910,
|
|
"y": 120,
|
|
"wires": [
|
|
[
|
|
"b2c3d4e5f6a7b8c9"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "a1b2c3d4e5f6a7b8",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "28c173789034639c",
|
|
"name": "Mold Presets Handler",
|
|
"func": "const topic = msg.topic || '';\nconst payload = msg.payload || {};\n\n// ===== IGNORE NON-MOLD TOPICS SILENTLY =====\n// These are KPI/dashboard messages not meant for this handler\nconst ignoredTopics = [\n 'machineStatus',\n 'kpis',\n 'chartsData',\n 'activeWorkOrder',\n 'workOrderCycle',\n 'workOrdersList',\n 'scrapPrompt',\n 'uploadStatus'\n];\n\nif (ignoredTopics.includes(topic) || topic === '') {\n return null; // Silent ignore\n}\n\n// Log only mold-related requests\nnode.warn(`Received: ${topic}`);\n\n// CRITICAL: Use a processing lock to prevent simultaneous requests\nlet dedupeKey = topic;\nif (topic === 'addMoldPreset') {\n dedupeKey = `add_${payload.manufacturer}_${payload.mold_name}`;\n} else if (topic === 'getMoldsByManufacturer') {\n dedupeKey = `getmolds_${payload.manufacturer}`;\n}\n\nconst lockKey = `lock_${dedupeKey}`;\nconst lastRequestKey = `last_request_${dedupeKey}`;\n\n// Check if currently processing this request\nif (flow.get(lockKey) === true) {\n node.warn(`${topic} already processing - duplicate blocked`);\n return null;\n}\n\n// Check timing\nconst now = Date.now();\nconst lastRequestTime = flow.get(lastRequestKey) || 0;\nif (now - lastRequestTime < 2000) {\n node.warn(`Duplicate ${topic} request ignored (within 2s)`);\n return null;\n}\n\n// Set lock IMMEDIATELY before any async operations\nflow.set(lockKey, true);\nflow.set(lastRequestKey, now);\n\n// Release lock after 3 seconds (safety timeout)\nsetTimeout(() => {\n flow.set(lockKey, false);\n}, 3000);\n\n// Load all presets (legacy)\nif (topic === 'loadMoldPresets') {\n msg._originalTopic = 'loadMoldPresets';\n msg.topic = 'SELECT * FROM mold_presets ORDER BY manufacturer, mold_name;';\n node.warn('Querying all presets');\n return msg;\n}\n\n// Search/filter presets (legacy)\nif (topic === 'searchMoldPresets') {\n const filters = msg.payload || {};\n const searchTerm = (filters.searchTerm || '').trim().replace(/['\\\"\\\\\\\\]/g, '');\n const manufacturer = (filters.manufacturer || '').replace(/['\\\"\\\\\\\\]/g, '');\n const theoreticalCavities = filters.theoreticalCavities || '';\n\n let query = 'SELECT * FROM mold_presets WHERE 1=1';\n\n if (searchTerm) {\n const searchPattern = `%${searchTerm}%`;\n query += ` AND (mold_name LIKE '${searchPattern.replace(/'/g, \"''\")}' OR manufacturer LIKE '${searchPattern.replace(/'/g, \"''\")}')`;\n }\n\n if (manufacturer && manufacturer !== 'All') {\n query += ` AND manufacturer = '${manufacturer.replace(/'/g, \"''\")}'`;\n }\n\n if (theoreticalCavities && theoreticalCavities !== '') {\n const cavities = Number(theoreticalCavities);\n if (!isNaN(cavities)) {\n query += ` AND theoretical_cavities = ${cavities}`;\n }\n }\n\n query += ' ORDER BY manufacturer, mold_name;';\n\n msg._originalTopic = 'searchMoldPresets';\n msg.topic = query;\n return msg;\n}\n\n// Get unique manufacturers for dropdown\nif (topic === 'getManufacturers') {\n msg._originalTopic = 'getManufacturers';\n msg.topic = 'SELECT DISTINCT manufacturer FROM mold_presets ORDER BY manufacturer;';\n node.warn('Querying manufacturers');\n return msg;\n}\n\n// Get molds for a specific manufacturer\nif (topic === 'getMoldsByManufacturer') {\n const data = msg.payload || {};\n const manufacturerRaw = (data.manufacturer || '').trim();\n if (!manufacturerRaw) {\n node.warn('No manufacturer provided');\n return null;\n }\n\n const manufacturerSafe = manufacturerRaw.replace(/['\\\"\\\\\\\\]/g, '').replace(/'/g, \"''\");\n\n msg._originalTopic = 'getMoldsByManufacturer';\n msg.topic = `SELECT * FROM mold_presets WHERE manufacturer = '${manufacturerSafe}' ORDER BY mold_name;`;\n node.warn(`Querying molds for: ${manufacturerSafe}`);\n return msg;\n}\n\n// Add a new mold preset - CRITICAL: Strong deduplication\nif (topic === 'addMoldPreset') {\n const data = msg.payload || {};\n const manufacturerRaw = (data.manufacturer || '').trim();\n const moldNameRaw = (data.mold_name || '').trim();\n const theoreticalRaw = (data.theoretical || '').trim();\n const activeRaw = (data.active || '').trim();\n\n if (!manufacturerRaw || !moldNameRaw || !theoreticalRaw || !activeRaw) {\n node.status({ fill: 'red', shape: 'ring', text: 'Missing value' });\n node.warn('Missing required fields');\n return null;\n }\n\n // Additional safety check for already-processed flag\n if (msg._addMoldProcessed) {\n node.warn('addMoldPreset already processed flag detected, ignoring');\n return null;\n }\n msg._addMoldProcessed = true;\n\n const manufacturerSafe = manufacturerRaw.replace(/['\\\"\\\\\\\\]/g, '').replace(/'/g, \"''\");\n const moldNameSafe = moldNameRaw.replace(/['\\\"\\\\\\\\]/g, '').replace(/'/g, \"''\");\n const theoreticalSafe = theoreticalRaw.replace(/['\\\"\\\\\\\\]/g, '').replace(/'/g, \"''\");\n const activeSafe = activeRaw.replace(/['\\\"\\\\\\\\]/g, '').replace(/'/g, \"''\");\n\n msg._originalTopic = 'addMoldPreset';\n msg.topic =\n \"INSERT INTO mold_presets (manufacturer, mold_name, theoretical_cavities, functional_cavities) \" +\n \"VALUES ('\" + manufacturerSafe + \"', '\" + moldNameSafe + \"', \" + theoreticalSafe + \", \" + activeSafe + \");\";\n\n node.status({ fill: 'blue', shape: 'dot', text: 'Inserting mold...' });\n node.warn(`Inserting: ${manufacturerSafe} - ${moldNameSafe}`);\n return msg;\n}\n\nnode.warn(`Unknown topic: ${topic}`);\nreturn null;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 840,
|
|
"y": 180,
|
|
"wires": [
|
|
[
|
|
"c9d8e7f6a5b4c3d2"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "c9d8e7f6a5b4c3d2",
|
|
"type": "mysql",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "28c173789034639c",
|
|
"mydb": "00d8ad2b0277f906",
|
|
"name": "Mold Presets DB",
|
|
"x": 1050,
|
|
"y": 180,
|
|
"wires": [
|
|
[
|
|
"b2c3d4e5f6a7b8c9"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "b2c3d4e5f6a7b8c9",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "28c173789034639c",
|
|
"name": "Process DB Results",
|
|
"func": "// Replace function in \"Process DB Results\" node\n\nconst originalTopic = msg._originalTopic || '';\nconst dbResults = Array.isArray(msg.payload) ? msg.payload : [];\n\nif (!originalTopic) {\n return null;\n}\n\n// IMPORTANT: Clear socketid to prevent loops back to sender\ndelete msg._socketid;\ndelete msg.socketid;\n\n// Manufacturers query \u2192 list for first dropdown\nif (originalTopic === 'getManufacturers') {\n const manufacturers = dbResults\n .map(row => row.manufacturer)\n .filter((mfg, index, arr) => mfg && arr.indexOf(mfg) === index)\n .sort();\n\n msg.topic = 'manufacturersList';\n msg.payload = manufacturers;\n\n node.status({ fill: 'green', shape: 'dot', text: `${manufacturers.length} manufacturers` });\n return msg;\n}\n\n// Preset lists (legacy load/search)\nif (originalTopic === 'loadMoldPresets' || originalTopic === 'searchMoldPresets') {\n const presets = dbResults.map(row => ({\n mold_name: row.mold_name || '',\n manufacturer: row.manufacturer || '',\n theoretical_cavities: Number(row.theoretical_cavities) || 0,\n functional_cavities: Number(row.functional_cavities) || 0\n }));\n\n msg.topic = 'moldPresetsList';\n msg.payload = presets;\n\n node.status({ fill: 'green', shape: 'dot', text: `${presets.length} presets found` });\n return msg;\n}\n\n// Molds for selected manufacturer\nif (originalTopic === 'getMoldsByManufacturer') {\n const presets = dbResults.map(row => ({\n mold_name: row.mold_name || '',\n manufacturer: row.manufacturer || '',\n theoretical_cavities: Number(row.theoretical_cavities) || 0,\n functional_cavities: Number(row.functional_cavities) || 0\n }));\n\n msg.topic = 'moldPresetsList';\n msg.payload = presets;\n\n node.status({ fill: 'blue', shape: 'dot', text: `${presets.length} molds for manufacturer` });\n return msg;\n}\n\n// Result of inserting a new mold\nif (originalTopic === 'addMoldPreset') {\n msg.topic = 'addMoldResult';\n msg.payload = {\n success: true,\n result: msg.payload\n };\n\n node.status({ fill: 'green', shape: 'dot', text: 'Mold added' });\n return msg;\n}\n\nnode.status({ fill: 'yellow', shape: 'ring', text: 'Unknown topic: ' + originalTopic });\nreturn null;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1200,
|
|
"y": 100,
|
|
"wires": [
|
|
[
|
|
"0b5740c4a2b298b7"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "0a5caf3e23c68e6e",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link out 1",
|
|
"mode": "link",
|
|
"links": [
|
|
"7311641fd09b4d3a"
|
|
],
|
|
"x": 325,
|
|
"y": 280,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "7311641fd09b4d3a",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "28c173789034639c",
|
|
"name": "link in 1",
|
|
"links": [
|
|
"0a5caf3e23c68e6e"
|
|
],
|
|
"x": 755,
|
|
"y": 120,
|
|
"wires": [
|
|
[
|
|
"eaebd8c719c3d135",
|
|
"a1b2c3d4e5f6a7b8"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "9bbd4fade968036d",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Work Order buttons",
|
|
"func": "switch (msg.action) {\n case \"upload-excel\":\n msg._mode = \"upload\";\n return [msg, null, null, null];\n case \"refresh-work-orders\":\n msg._mode = \"select\";\n msg.topic = \"SELECT * FROM work_orders ORDER BY created_at DESC;\";\n return [null, msg, null, null];\n case \"start-work-order\": {\n msg._mode = \"start-check-progress\";\n const order = msg.payload || {};\n if (!order.id) {\n node.error(\"No work order id supplied for start\", msg);\n return [null, null, null, null];\n }\n\n // Store order data temporarily for after DB query\n flow.set(\"pendingWorkOrder\", order);\n\n // Query database to check for existing progress\n msg.topic = \"SELECT cycle_count, good_parts, scrap_parts, progress_percent, target_qty FROM work_orders WHERE work_order_id = ? LIMIT 1\";\n msg.payload = [order.id];\n\n node.warn(`[START-WO] Checking progress for WO ${order.id}`);\n return [null, msg, null, null];\n }\n case \"resume-work-order\": {\n msg._mode = \"resume\";\n const order = msg.payload || {};\n if (!order.id) {\n node.error(\"No work order id supplied for resume\", msg);\n return [null, null, null, null];\n }\n\n node.warn(`[RESUME-WO] Resuming WO ${order.id} with existing progress`);\n\n // Set status to RUNNING without resetting progress\n msg.topic = \"UPDATE work_orders SET status = CASE WHEN work_order_id = ? THEN 'RUNNING' ELSE 'PENDING' END, updated_at = CASE WHEN work_order_id = ? THEN NOW() ELSE updated_at END WHERE status <> 'DONE'\";\n msg.payload = [order.id, order.id];\n msg.startOrder = order;\n\n // Load existing values into global state\n // IMPORTANT: Also set scrap so good_parts calculation is correct\n order.scrap = Number(order.scrap) || 0;\n order.good = Number(order.good_parts) || 0;\n\n global.set(\"activeWorkOrder\", order);\n global.set(\"cycleCount\", Number(order.cycle_count) || 0);\n flow.set(\"lastMachineState\", 0);\n global.set(\"scrapPromptIssuedFor\", null);\n\n node.warn(`[RESUME-WO] Set cycleCount=${order.cycle_count}, scrap=${order.scrap}, good=${order.good}`);\n return [null, null, msg, null];\n }\n case \"restart-work-order\": {\n msg._mode = \"restart\";\n const order = msg.payload || {};\n if (!order.id) {\n node.error(\"No work order id supplied for restart\", msg);\n return [null, null, null, null];\n }\n\n node.warn(`[RESTART-WO] Restarting WO ${order.id} - resetting progress to 0`);\n\n // Reset progress in database AND set status to RUNNING\n msg.topic = \"UPDATE work_orders SET status = CASE WHEN work_order_id = ? THEN 'RUNNING' ELSE 'PENDING' END, cycle_count = 0, good_parts = 0, scrap_parts = 0, progress_percent = 0, updated_at = NOW() WHERE work_order_id = ? OR status = 'RUNNING'\";\n msg.payload = [order.id, order.id];\n msg.startOrder = order;\n\n // Initialize global state to 0\n order.scrap = 0;\n order.good = 0;\n\n global.set(\"activeWorkOrder\", order);\n global.set(\"cycleCount\", 0);\n flow.set(\"lastMachineState\", 0);\n global.set(\"scrapPromptIssuedFor\", null);\n\n node.warn(`[RESTART-WO] Reset cycleCount=0, scrap=0, good=0`);\n return [null, null, msg, null];\n }\n case \"complete-work-order\": {\n msg._mode = \"complete\";\n const order = msg.payload || {};\n if (!order.id) {\n node.error(\"No work order id supplied for complete\", msg);\n return [null, null, null, null];\n }\n\n // Get final values from global state before clearing\n const activeOrder = global.get(\"activeWorkOrder\") || {};\n const finalCycleCount = Number(global.get(\"cycleCount\") || 0);\n const finalGoodParts = Number(activeOrder.good) || 0;\n const finalScrapParts = Number(activeOrder.scrap) || 0;\n\n node.warn(`[COMPLETE] Persisting final values: cycles=${finalCycleCount}, good=${finalGoodParts}, scrap=${finalScrapParts}`);\n\n msg.completeOrder = order;\n\n // SQL: Persist final counts AND set status to DONE\n msg.topic = \"UPDATE work_orders SET status = 'DONE', cycle_count = ?, good_parts = ?, scrap_parts = ?, progress_percent = 100, updated_at = NOW() WHERE work_order_id = ?\";\n msg.payload = [finalCycleCount, finalGoodParts, finalScrapParts, order.id];\n\n // Clear ALL state on completion\n global.set(\"activeWorkOrder\", null);\n global.set(\"trackingEnabled\", false);\n global.set(\"productionStarted\", false);\n global.set(\"kpiStartupMode\", false);\n global.set(\"operatingTime\", 0);\n global.set(\"lastCycleTime\", null);\n global.set(\"cycleCount\", 0);\n flow.set(\"lastMachineState\", 0);\n global.set(\"scrapPromptIssuedFor\", null);\n\n node.warn('[COMPLETE] Cleared all state flags');\n return [null, null, null, msg];\n }\n case \"get-current-state\": {\n // Return current state for UI sync on tab switch\n const activeOrder = global.get(\"activeWorkOrder\") || null;\n const trackingEnabled = global.get(\"trackingEnabled\") || false;\n const productionStarted = global.get(\"productionStarted\") || false;\n const kpis = global.get(\"currentKPIs\") || { oee: 0, availability: 0, performance: 0, quality: 0 };\n\n msg._mode = \"current-state\";\n msg.payload = {\n activeWorkOrder: activeOrder,\n trackingEnabled: trackingEnabled,\n productionStarted: productionStarted,\n kpis: kpis\n };\n\n return [null, msg, null, null];\n }\n case \"restore-session\": {\n // Query DB for any RUNNING work order on startup\n msg._mode = \"restore-query\";\n msg.topic = \"SELECT * FROM work_orders WHERE status = 'RUNNING' LIMIT 1\";\n msg.payload = [];\n node.warn('[RESTORE] Checking for running work order on startup');\n return [null, msg, null, null];\n }\n case \"scrap-entry\": {\n const { id, scrap } = msg.payload || {};\n const scrapNum = Number(scrap) || 0;\n\n if (!id) {\n node.error(\"No work order id supplied for scrap entry\", msg);\n return [null, null, null, null];\n }\n\n const activeOrder = global.get(\"activeWorkOrder\");\n if (activeOrder && activeOrder.id === id) {\n activeOrder.scrap = (Number(activeOrder.scrap) || 0) + scrapNum;\n global.set(\"activeWorkOrder\", activeOrder);\n }\n\n global.set(\"scrapPromptIssuedFor\", null);\n\n msg._mode = \"scrap-update\";\n msg.scrapEntry = { id, scrap: scrapNum };\n // SQL with bound parameters for safety\n msg.topic = \"UPDATE work_orders SET scrap_parts = scrap_parts + ?, updated_at = NOW() WHERE work_order_id = ?\";\n msg.payload = [scrapNum, id];\n\n return [null, null, msg, null];\n }\n case \"scrap-skip\": {\n const { id, remindAgain } = msg.payload || {};\n\n if (!id) {\n node.error(\"No work order id supplied for scrap skip\", msg);\n return [null, null, null, null];\n }\n\n if (remindAgain) {\n global.set(\"scrapPromptIssuedFor\", null);\n }\n\n msg._mode = \"scrap-skipped\";\n return [null, null, null, null];\n }\n case \"start\": {\n // START with KPI timestamp init - FIXED\n const now = Date.now();\n\n global.set(\"trackingEnabled\", true);\n global.set(\"productionStarted\", true);\n global.set(\"kpiStartupMode\", true);\n global.set(\"kpiBuffer\", []);\n global.set(\"lastKPIRecordTime\", now - 60000);\n global.set(\"productionStartTime\", now);\n global.set(\"lastMachineCycleTime\", now);\n global.set(\"lastCycleTime\", now);\n global.set(\"operatingTime\", 0);\n\n node.warn('[START] Initialized: trackingEnabled=true, productionStarted=true, kpiStartupMode=true, operatingTime=0');\n\n const activeOrder = global.get(\"activeWorkOrder\") || {};\n msg._mode = \"production-state\";\n\n msg.payload = msg.payload || {};\n\n msg.trackingEnabled = true;\n msg.productionStarted = true;\n msg.machineOnline = true;\n\n msg.payload.trackingEnabled = true;\n msg.payload.productionStarted = true;\n msg.payload.machineOnline = true;\n\n return [null, msg, null, null];\n }\n case \"stop\": {\n global.set(\"trackingEnabled\", false);\n global.set(\"productionStarted\", false);\n node.warn('[STOP] Set trackingEnabled=false, productionStarted=false');\n\n // Send UI update so button state reflects change\n msg._mode = \"production-state\";\n msg.payload = msg.payload || {};\n msg.trackingEnabled = false;\n msg.productionStarted = false;\n msg.machineOnline = true;\n msg.payload.trackingEnabled = false;\n msg.payload.productionStarted = false;\n msg.payload.machineOnline = true;\n\n return [null, msg, null, null];\n }\n case \"start-tracking\": {\n const activeOrder = global.get('activeOrder') || {};\n\n if (!activeOrder.id) {\n node.warn('[START] Cannot start tracking: No active order loaded.');\n return [null, { topic: \"alert\", payload: \"Error: No active work order loaded.\" }, null, null];\n }\n\n const now = Date.now();\n global.set(\"trackingEnabled\", true);\n global.set(\"kpiBuffer\", []);\n global.set(\"lastKPIRecordTime\", now - 60000);\n global.set(\"lastMachineCycleTime\", now);\n global.set(\"lastCycleTime\", now);\n global.set(\"operatingTime\", 0.001);\n node.warn('[START] Cleared kpiBuffer for fresh production run');\n\n // FIX: Use work_order_id consistently\n const dbMsg = {\n topic: `UPDATE work_orders SET production_start_time = ${now}, is_tracking = 1 WHERE work_order_id = '${activeOrder.id}'`,\n payload: []\n };\n\n const stateMsg = {\n topic: \"machineStatus\",\n payload: msg.payload || {}\n };\n\n stateMsg.payload.trackingEnabled = true;\n stateMsg.payload.productionStarted = true;\n stateMsg.payload.machineOnline = true;\n\n return [dbMsg, stateMsg, null, null];\n }\n}",
|
|
"outputs": 4,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 930,
|
|
"y": 360,
|
|
"wires": [
|
|
[
|
|
"15a6b7b6d8f39fe4",
|
|
"942807fcbd15f50c"
|
|
],
|
|
[
|
|
"f6ad294bc02618c9",
|
|
"00b6132848964bd9",
|
|
"e394d0275e78950c"
|
|
],
|
|
[
|
|
"f6ad294bc02618c9",
|
|
"00b6132848964bd9",
|
|
"f8f4ca6de445c0c2"
|
|
],
|
|
[
|
|
"f6ad294bc02618c9",
|
|
"0ab6a68c1ad50a91"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "010de5af3ced0ae3",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link out 2",
|
|
"mode": "link",
|
|
"links": [
|
|
"65ddb4cca6787bde"
|
|
],
|
|
"x": 325,
|
|
"y": 120,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "65ddb4cca6787bde",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link in 2",
|
|
"links": [
|
|
"010de5af3ced0ae3"
|
|
],
|
|
"x": 815,
|
|
"y": 420,
|
|
"wires": [
|
|
[
|
|
"9bbd4fade968036d"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "596b390d7aaf69fb",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Build Insert SQL",
|
|
"func": "const rows = Array.isArray(msg.payload) ? msg.payload : [];\nconst vals = rows.map(r => `(\n'${r[\"Work Order ID\"]}',\n'${r[\"SKU\"]}',\n${Number(r[\"Target Quantity\"]) || 0},\n${Number(r[\"Theoretical Cycle Time (Seconds)\"]) || 0},\n'PENDING')`).join(',\\n');\n\nmsg.topic = `\nINSERT INTO work_orders (work_order_id, sku, target_qty, cycle_time, status)\nVALUES\n${vals}\nON DUPLICATE KEY UPDATE\n sku=VALUES(sku),\n target_qty=VALUES(target_qty),\n cycle_time=VALUES(cycle_time);\n`;\nreturn msg;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1240,
|
|
"y": 340,
|
|
"wires": [
|
|
[
|
|
"f6ad294bc02618c9"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f6ad294bc02618c9",
|
|
"type": "mysql",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"mydb": "00d8ad2b0277f906",
|
|
"name": "mariaDB",
|
|
"x": 1220,
|
|
"y": 380,
|
|
"wires": [
|
|
[
|
|
"progress_check_handler_node"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "graph_mariadb_node",
|
|
"type": "mysql",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"mydb": "00d8ad2b0277f906",
|
|
"name": "mariaDB (Graph Data)",
|
|
"x": 860,
|
|
"y": 560,
|
|
"wires": [
|
|
[
|
|
"format_graph_data_node_id"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f2bab26e27e2023d",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Back to UI",
|
|
"func": "const mode = msg._mode || '';\nconst started = msg.startOrder || null;\nconst completed = msg.completeOrder || null;\n\ndelete msg._mode;\ndelete msg.startOrder;\ndelete msg.completeOrder;\ndelete msg.action;\ndelete msg.filename;\n\n// ========================================================\n// MODE: UPLOAD\n// ========================================================\nif (mode === \"upload\") {\n msg.topic = \"uploadStatus\";\n msg.payload = { message: \"\u2705 Work orders uploaded successfully.\" };\n return [msg, null, null, null];\n}\n\n// ========================================================\n// MODE: SELECT (Load Work Orders)\n// ========================================================\nif (mode === \"select\") {\n const rawRows = Array.isArray(msg.payload) ? msg.payload : [];\n msg.topic = \"workOrdersList\";\n msg.payload = rawRows.map(row => ({\n id: row.work_order_id ?? row.id ?? \"\",\n sku: row.sku ?? \"\",\n target: Number(row.target_qty ?? row.target ?? 0),\n good: Number(row.good_parts ?? row.good ?? 0),\n scrap: Number(row.scrap_count ?? row.scrap ?? 0),\n progressPercent: Number(row.progress_percent ?? row.progress ?? 0),\n status: (row.status ?? \"PENDING\").toUpperCase(),\n lastUpdateIso: row.updated_at ?? row.last_update ?? null,\n cycleTime: Number(row.cycle_time ?? row.theoretical_cycle_time ?? 0)\n }));\n return [msg, null, null, null];\n}\n\n// ========================================================\n// MODE: START WORK ORDER\n// ========================================================\nif (mode === \"start\") {\n const order = started || {};\n const kpis = msg.kpis || global.get(\"currentKPIs\") || {\n oee: 0, availability: 0, performance: 0, quality: 0\n };\n\n const homeMsg = {\n topic: \"activeWorkOrder\",\n payload: {\n id: order.id || \"\",\n sku: order.sku || \"\",\n target: Number(order.target) || 0,\n good: Number(order.good) || 0,\n scrap: Number(order.scrap) || 0,\n cycleTime: Number(order.cycleTime || order.theoreticalCycleTime || 0),\n progressPercent: Number(order.progressPercent) || 0,\n lastUpdateIso: order.lastUpdateIso || null,\n kpis: kpis\n }\n };\n\n return [dbMsg, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: COMPLETE WORK ORDER\n// ========================================================\nif (mode === \"complete\") {\n const homeMsg = { topic: \"activeWorkOrder\", payload: null };\n return [null, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: CYCLE UPDATE DURING PRODUCTION\n// ========================================================\nif (mode === \"cycle\") {\n const cycle = msg.cycle || {};\n\n const workOrderMsg = {\n topic: \"workOrderCycle\",\n payload: {\n id: cycle.id || \"\",\n sku: cycle.sku || \"\",\n target: Number(cycle.target) || 0,\n good: Number(cycle.good) || 0,\n scrap: Number(cycle.scrap) || 0,\n progressPercent: Number(cycle.progressPercent) || 0,\n lastUpdateIso: cycle.lastUpdateIso || new Date().toISOString(),\n status: cycle.progressPercent >= 100 ? \"DONE\" : \"RUNNING\"\n }\n };\n\n const kpis = msg.kpis || global.get(\"currentKPIs\") || {\n oee: 0, availability: 0, performance: 0, quality: 0\n };\n\n const homeMsg = {\n topic: \"activeWorkOrder\",\n payload: {\n id: cycle.id || \"\",\n sku: cycle.sku || \"\",\n target: Number(cycle.target) || 0,\n good: Number(cycle.good) || 0,\n scrap: Number(cycle.scrap) || 0,\n cycleTime: Number(cycle.cycleTime) || 0,\n progressPercent: Number(cycle.progressPercent) || 0,\n lastUpdateIso: cycle.lastUpdateIso || new Date().toISOString(),\n kpis: kpis\n }\n };\n\n return [workOrderMsg, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: MACHINE PRODUCTION STATE\n// ========================================================\nif (mode === \"production-state\") {\n const homeMsg = {\n topic: \"machineStatus\",\n payload: {\n machineOnline: msg.machineOnline ?? true,\n productionStarted: !!msg.productionStarted,\n trackingEnabled: msg.payload?.trackingEnabled ?? msg.trackingEnabled ?? false\n }\n };\n return [null, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: CURRENT STATE (for tab switch sync)\n// ========================================================\nif (mode === \"current-state\") {\n const state = msg.payload || {};\n const homeMsg = {\n topic: \"currentState\",\n payload: {\n activeWorkOrder: state.activeWorkOrder,\n trackingEnabled: state.trackingEnabled,\n productionStarted: state.productionStarted,\n kpis: state.kpis\n }\n };\n return [null, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: RESTORE QUERY (startup state recovery)\n// ========================================================\nif (mode === \"restore-query\") {\n const rows = Array.isArray(msg.payload) ? msg.payload : [];\n \n if (rows.length > 0) {\n const row = rows[0];\n const restoredOrder = {\n id: row.work_order_id || row.id || \"\",\n sku: row.sku || \"\",\n target: Number(row.target_qty || row.target || 0),\n good: Number(row.good_parts || row.good || 0),\n scrap: Number(row.scrap_parts || row.scrap || 0),\n progressPercent: Number(row.progress_percent || 0),\n cycleTime: Number(row.cycle_time || 0),\n lastUpdateIso: row.updated_at || null\n };\n \n // Restore global state\n global.set(\"activeWorkOrder\", restoredOrder);\n global.set(\"cycleCount\", Number(row.cycle_count) || 0);\n // Don't auto-start tracking - user must click START\n global.set(\"trackingEnabled\", false);\n global.set(\"productionStarted\", false);\n \n node.warn('[RESTORE] Restored work order: ' + restoredOrder.id + ' with ' + global.get(\"cycleCount\") + ' cycles');\n \n const homeMsg = {\n topic: \"activeWorkOrder\",\n payload: restoredOrder\n };\n\n // Set status back to RUNNING in database (if not already DONE)\n // This prevents user from having to \"Load\" the work order again\n const dbMsg = {\n topic: \"UPDATE work_orders SET status = 'RUNNING', updated_at = NOW() WHERE work_order_id = ? AND status != 'DONE'\",\n payload: [restoredOrder.id]\n };\n\n \n return [dbMsg, homeMsg, null, null];\n } else {\n node.warn('[RESTORE] No running work order found');\n }\n return [null, null, null, null];\n}\n\n// ========================================================\n// MODE: SCRAP PROMPT\n// ========================================================\nif (mode === \"scrap-prompt\") {\n const prompt = msg.scrapPrompt || {};\n\n const homeMsg = { topic: \"scrapPrompt\", payload: prompt };\n const tabMsg = { ui_control: { tab: \"Home\" } };\n\n // output1: nothing\n // output2: home template\n // output3: tab navigation\n // output4: graphs template (unused here)\n return [null, homeMsg, tabMsg, null];\n}\n\n// ========================================================\n// MODE: SCRAP UPDATE\n// ========================================================\nif (mode === \"scrap-update\") {\n const activeOrder = global.get(\"activeWorkOrder\") || {};\n const kpis = msg.kpis || global.get(\"currentKPIs\") || {\n oee: 0, availability: 0, performance: 0, quality: 0\n };\n\n const homeMsg = {\n topic: \"activeWorkOrder\",\n payload: {\n id: activeOrder.id || \"\",\n sku: activeOrder.sku || \"\",\n target: Number(activeOrder.target) || 0,\n good: Number(activeOrder.good) || 0,\n scrap: Number(activeOrder.scrap) || 0,\n cycleTime: Number(activeOrder.cycleTime) || 0,\n progressPercent: Number(activeOrder.progressPercent) || 0,\n lastUpdateIso: activeOrder.lastUpdateIso || new Date().toISOString(),\n kpis: kpis\n }\n };\n\n return [null, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: SCRAP COMPLETE\n// ========================================================\nif (mode === \"scrap-complete\") {\n const homeMsg = { topic: \"activeWorkOrder\", payload: null };\n return [null, homeMsg, null, null];\n}\n\n// ========================================================\n// MODE: CHARTS \u2192 SEND REAL DATA TO GRAPH TEMPLATE\n// ========================================================\n//if (mode === \"charts\") {\n\n// const realOEE = msg.realOEE || global.get(\"realOEE\") || [];\n// const realAvailability = msg.realAvailability || global.get(\"realAvailability\") || [];\n// const realPerformance = msg.realPerformance || global.get(\"realPerformance\") || [];\n// const realQuality = msg.realQuality || global.get(\"realQuality\") || [];\n\n// const chartsMsg = {\n// topic: \"chartsData\",\n// payload: {\n// oee: realOEE,\n// availability: realAvailability,\n// performance: realPerformance,\n// quality: realQuality\n// }\n// };\n\n // Send ONLY to output #4\n// return [null, null, null, chartsMsg];\n//}\n\n\n// ========================================================\n// MODE: RESUME-PROMPT\n// ========================================================\nif (mode === \"resume-prompt\") {\n // Forward the resume prompt to Home UI\n // Also set activeWorkOrder so Start button becomes enabled\n const order = msg.payload.order || null;\n\n if (order) {\n // Set activeWorkOrder in global so Start button is enabled\n global.set(\"activeWorkOrder\", order);\n node.warn(`[RESUME-PROMPT] Set activeWorkOrder to ${order.id} - Start button should now be enabled`);\n }\n\n // Send prompt message to Home template\n const homeMsg = {\n topic: msg.topic || \"resumePrompt\",\n payload: msg.payload\n };\n\n return [null, homeMsg, null, null];\n}\n\n// ========================================================\n// DEFAULT\n// ========================================================\nreturn [null, null, null, null];\n",
|
|
"outputs": 4,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1550,
|
|
"y": 380,
|
|
"wires": [
|
|
[
|
|
"0779932734d8201c"
|
|
],
|
|
[
|
|
"64661fe6aa2cb83d"
|
|
],
|
|
[
|
|
"fd32602c52d896e9"
|
|
],
|
|
[]
|
|
]
|
|
},
|
|
{
|
|
"id": "0779932734d8201c",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link out 3",
|
|
"mode": "link",
|
|
"links": [
|
|
"6f9de736a538d0d1"
|
|
],
|
|
"x": 1665,
|
|
"y": 340,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "6f9de736a538d0d1",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link in 3",
|
|
"links": [
|
|
"0779932734d8201c"
|
|
],
|
|
"x": 95,
|
|
"y": 120,
|
|
"wires": [
|
|
[
|
|
"f1a2b3c4d5e6f7a8"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "3772c25d07b07407",
|
|
"type": "book",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "",
|
|
"raw": false,
|
|
"x": 1350,
|
|
"y": 300,
|
|
"wires": [
|
|
[
|
|
"c2b272494952cd98"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "c2b272494952cd98",
|
|
"type": "sheet",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "",
|
|
"sheetName": "Sheet1",
|
|
"x": 1470,
|
|
"y": 300,
|
|
"wires": [
|
|
[
|
|
"87d85c86e4773aa5"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "87d85c86e4773aa5",
|
|
"type": "sheet-to-json",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "",
|
|
"raw": "false",
|
|
"range": "",
|
|
"header": "default",
|
|
"blankrows": false,
|
|
"x": 1610,
|
|
"y": 300,
|
|
"wires": [
|
|
[
|
|
"596b390d7aaf69fb"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "15a6b7b6d8f39fe4",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Base64",
|
|
"func": "const filename =\n msg.filename ||\n (msg.meta && msg.meta.filename) ||\n (msg.payload && msg.payload.filename) ||\n msg.name ||\n 'upload.xlsx';\n\nconst candidates = [];\nif (typeof msg.payload === 'string') candidates.push(msg.payload);\nif (msg.payload && typeof msg.payload.payload === 'string') candidates.push(msg.payload.payload);\nif (msg.payload && typeof msg.payload.file === 'string') candidates.push(msg.payload.file);\nif (msg.payload && typeof msg.payload.base64 === 'string') candidates.push(msg.payload.base64);\nif (typeof msg.file === 'string') candidates.push(msg.file);\nif (typeof msg.data === 'string') candidates.push(msg.data);\n\nfunction stripDataUrl(s) {\n return (s && s.startsWith('data:')) ? s.split(',')[1] : s;\n}\n\nlet b64 = candidates.map(stripDataUrl).find(s => typeof s === 'string' && s.length > 0);\nif (!b64 && Buffer.isBuffer(msg.payload)) { msg.filename = filename; return msg; }\nif (!b64) { node.error('No base64 data found on msg', msg); return null; }\n\nmsg.payload = Buffer.from(b64, 'base64');\nmsg.filename = filename;\nreturn msg;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1220,
|
|
"y": 300,
|
|
"wires": [
|
|
[
|
|
"3772c25d07b07407"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "64661fe6aa2cb83d",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link out 4",
|
|
"mode": "link",
|
|
"links": [
|
|
"16af50d6fce977a8"
|
|
],
|
|
"x": 1665,
|
|
"y": 380,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "16af50d6fce977a8",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link in 4",
|
|
"links": [
|
|
"64661fe6aa2cb83d"
|
|
],
|
|
"x": 95,
|
|
"y": 80,
|
|
"wires": [
|
|
[
|
|
"1821c4842945ecd8"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "578c92e75bf0f266",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Refresh Trigger",
|
|
"func": "if (msg._mode === \"start\" || msg._mode === \"complete\" || msg._mode === \"resume\" || msg._mode === \"restart\") {\n // Preserve original message for Back to UI (output 2)\n const originalMsg = {...msg};\n // Create select message for refreshing WO table (output 1)\n msg._mode = \"select\";\n msg.topic = \"SELECT * FROM work_orders ORDER BY updated_at DESC;\";\n return [msg, originalMsg];\n}\nif (msg._mode === \"cycle\" || msg._mode === \"production-state\") {\n return [null, msg];\n}\nif (msg._mode === \"scrap-prompt\") {\n return [null, msg];\n}\nif (msg._mode === \"restore-query\") {\n // Pass restore query results to Back to UI\n return [null, msg];\n}\nif (msg._mode === \"current-state\") {\n // Pass current state to Back to UI\n return [null, msg];\n}\nif (msg._mode === \"scrap-complete\") {\n // Preserve original message for Back to UI (output 2)\n const originalMsg = {...msg};\n // Create select message for refreshing WO table (output 1)\n msg._mode = \"select\";\n msg.topic = \"SELECT * FROM work_orders ORDER BY updated_at DESC;\";\n return [msg, originalMsg];\n}\nreturn [null, msg];",
|
|
"outputs": 2,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1380,
|
|
"y": 380,
|
|
"wires": [
|
|
[
|
|
"f6ad294bc02618c9"
|
|
],
|
|
[
|
|
"f2bab26e27e2023d"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "0d023d87a13bf56f",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "Machine cycles",
|
|
"func": "const current = Number(msg.payload) || 0;\n\nlet zeroStreak = flow.get(\"zeroStreak\") || 0;\nzeroStreak = current === 0 ? zeroStreak + 1 : 0;\nflow.set(\"zeroStreak\", zeroStreak);\n\nconst prev = flow.get(\"lastMachineState\") ?? 0;\nflow.set(\"lastMachineState\", current);\n\nglobal.set(\"machineOnline\", true);\n\nlet productionRunning = !!global.get(\"productionStarted\");\nlet stateChanged = false;\n\nif (current === 1 && !productionRunning) {\n productionRunning = true;\n stateChanged = true;\n} else if (current === 0 && zeroStreak >= 2 && productionRunning) {\n productionRunning = false;\n stateChanged = true;\n}\n\nglobal.set(\"productionStarted\", productionRunning);\n\nconst stateMsg = stateChanged\n ? {\n _mode: \"production-state\",\n machineOnline: true,\n productionStarted: productionRunning\n }\n : null;\n\nconst activeOrder = global.get(\"activeWorkOrder\");\n// FIX: moldActive is object, extract cavities property\nconst cavities = Number(global.get(\"moldActive\")) || 1;\nif (!activeOrder || !activeOrder.id || cavities <= 0) {\n return [null, stateMsg, { _triggerKPI: true }, null];\n}\n\nvar trackingEnabled = !!global.get(\"trackingEnabled\");\nif (!trackingEnabled) {\n return [null, stateMsg, { _triggerKPI: true }, null];\n}\n\nif (prev === 1 || current !== 1) {\n return [null, stateMsg, { _triggerKPI: true }, null];\n}\n\nlet cycles = Number(global.get(\"cycleCount\") || 0) + 1;\nglobal.set(\"cycleCount\", cycles);\n\n// Clear startup mode after first real cycle\nif (global.get(\"kpiStartupMode\")) {\n global.set(\"kpiStartupMode\", false);\n node.warn('[MACHINE CYCLE] First cycle - cleared kpiStartupMode');\n}\n\nconst now = Date.now();\nconst lastCycleTime = global.get(\"lastCycleTime\") || now;\nconst timeSinceLastCycle = now - lastCycleTime;\n\nlet operatingTime = global.get(\"operatingTime\") || 0;\noperatingTime += (timeSinceLastCycle / 1000);\n\nglobal.set(\"operatingTime\", operatingTime);\nnode.warn(`[MACHINE CYCLE] operatingTime updated to ${operatingTime}`);\nglobal.set(\"lastCycleTime\", now);\n\nconst scrapTotal = Number(activeOrder.scrap) || 0;\nconst totalProduced = cycles * cavities;\n// FIX: Guard negative produced\nconst produced = Math.max(0, totalProduced - scrapTotal);\nconst target = Number(activeOrder.target) || 0;\nconst progress = target > 0 ? Math.min(100, Math.round((produced / target) * 100)) : 0;\n\nactiveOrder.good = produced;\nactiveOrder.progressPercent = progress;\nactiveOrder.lastUpdateIso = new Date().toISOString();\nglobal.set(\"activeWorkOrder\", activeOrder);\n\nconst promptIssued = global.get(\"scrapPromptIssuedFor\") || null;\nif (!promptIssued && target > 0 && produced >= target) {\n global.set(\"scrapPromptIssuedFor\", activeOrder.id);\n msg._mode = \"scrap-prompt\";\n msg.scrapPrompt = {\n id: activeOrder.id,\n sku: activeOrder.sku || \"\",\n target,\n produced\n };\n return [null, msg, null, null];\n}\n\nconst dbMsg = {\n _mode: \"cycle\",\n cycle: {\n id: activeOrder.id,\n sku: activeOrder.sku || \"\",\n target,\n good: produced,\n scrap: Number(activeOrder.scrap) || 0,\n cycleTime: Number(activeOrder.cycleTime || activeOrder.theoreticalCycleTime || 0),\n progressPercent: progress,\n lastUpdateIso: activeOrder.lastUpdateIso,\n machineOnline: true,\n productionStarted: productionRunning\n },\n // SQL with bound parameters for safety\n topic: \"UPDATE work_orders SET good_parts = ?, progress_percent = ?, updated_at = NOW() WHERE work_order_id = ?\",\n payload: [produced, progress, activeOrder.id]\n};\n\nconst kpiTrigger = { _triggerKPI: true };\n\nif (trackingEnabled && dbMsg) {\n global.set(\"lastMachineCycleTime\", Date.now());\n}\n\n// 4th output: THROTTLED persist to work_orders table (every 5 seconds)\n// This prevents excessive DB writes while ensuring progress is saved regularly\nconst lastWorkOrderSync = global.get(\"lastWorkOrderSync\") || 0;\nconst timeSinceLastSync = now - lastWorkOrderSync;\nlet persistWorkOrder = null;\n\nif (timeSinceLastSync >= 5000) {\n global.set(\"lastWorkOrderSync\", now);\n persistWorkOrder = {\n topic: \"UPDATE work_orders SET cycle_count = ?, good_parts = ?, progress_percent = ?, updated_at = NOW() WHERE work_order_id = ?\",\n payload: [cycles, produced, progress, activeOrder.id]\n };\n node.warn(`[WORK ORDER SYNC] Persisting to DB: cycles=${cycles}, good=${produced}, progress=${progress}%`);\n}\n\nreturn [dbMsg, stateMsg, kpiTrigger, persistWorkOrder];",
|
|
"outputs": 4,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 640,
|
|
"y": 400,
|
|
"wires": [
|
|
[
|
|
"dbc7a5ee041845ed",
|
|
"68747d170d530562"
|
|
],
|
|
[
|
|
"00b6132848964bd9",
|
|
"4b0281e42c6cd4d1"
|
|
],
|
|
[
|
|
"00b6132848964bd9",
|
|
"b03da2270d8def93"
|
|
],
|
|
[
|
|
"db_guard_db_guard_cycles",
|
|
"4fabedfe0668e215"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "dbc7a5ee041845ed",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "link out 5",
|
|
"mode": "link",
|
|
"links": [
|
|
"76ce53cf1ae40e9c"
|
|
],
|
|
"x": 755,
|
|
"y": 380,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "76ce53cf1ae40e9c",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link in 5",
|
|
"links": [
|
|
"dbc7a5ee041845ed"
|
|
],
|
|
"x": 1105,
|
|
"y": 340,
|
|
"wires": [
|
|
[
|
|
"f6ad294bc02618c9"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "e15d6c1f78b644a2",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "link out 6",
|
|
"mode": "link",
|
|
"links": [
|
|
"0d6ec01f421acdef"
|
|
],
|
|
"x": 745,
|
|
"y": 460,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "0d6ec01f421acdef",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link in 6",
|
|
"links": [
|
|
"e15d6c1f78b644a2"
|
|
],
|
|
"x": 1295,
|
|
"y": 420,
|
|
"wires": [
|
|
[
|
|
"578c92e75bf0f266"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "fd32602c52d896e9",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link out 7",
|
|
"mode": "link",
|
|
"links": [
|
|
"2f04a72fdeb67f3f"
|
|
],
|
|
"x": 1665,
|
|
"y": 420,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "2f04a72fdeb67f3f",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link in 7",
|
|
"links": [
|
|
"fd32602c52d896e9"
|
|
],
|
|
"x": 355,
|
|
"y": 220,
|
|
"wires": [
|
|
[
|
|
"a7d58e15929b3d8c"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "0b5740c4a2b298b7",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "28c173789034639c",
|
|
"name": "link out 8",
|
|
"mode": "link",
|
|
"links": [
|
|
"8f890f97aa9257c7"
|
|
],
|
|
"x": 1395,
|
|
"y": 180,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "8f890f97aa9257c7",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link in 8",
|
|
"links": [
|
|
"0b5740c4a2b298b7"
|
|
],
|
|
"x": 95,
|
|
"y": 280,
|
|
"wires": [
|
|
[
|
|
"f5a6b7c8d9e0f1a2"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "00b6132848964bd9",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "16bb591480852f51",
|
|
"name": "Calculate KPIs",
|
|
"func": "// ========================================\n// OEE KPI ENGINE \u2013 FIXED: No duplicates, proper startup mode\n// ========================================\n\n// Pull system state - SINGLE declarations only\nconst trackingEnabled = global.get(\"trackingEnabled\") || false;\nconst activeOrder = global.get(\"activeWorkOrder\") || {};\nconst cycleCount = global.get(\"cycleCount\") || 0;\n// FIX: moldActive is a number, not an object\nconst cavities = Number(global.get(\"moldActive\")) || 1;\nconst kpiStartupMode = global.get(\"kpiStartupMode\") || false;\n\n// Guard against missing critical data\nif (!trackingEnabled || !activeOrder.id) {\n return null;\n}\n\nconst prev = global.get(\"currentKPIs\") || {\n availability: 100,\n performance: 100,\n quality: 100,\n oee: 100\n};\n\nmsg.kpis = {\n quality: prev.quality,\n performance: prev.performance,\n availability: prev.availability,\n oee: prev.oee\n};\n\n// ========================================\n// STARTUP MODE: Show optimistic 100% until first cycle\n// ========================================\nif (kpiStartupMode) {\n msg.kpis = { oee: 100, availability: 100, performance: 100, quality: 100 };\n global.set(\"currentKPIs\", msg.kpis);\n node.warn('[KPI] Startup mode - showing 100% until first cycle');\n return msg;\n}\n\n// ========================================\n// 1) QUALITY\n// ----------------------------------------\nconst good = Number(activeOrder.good) || 0;\nconst scrap = Number(activeOrder.scrap) || 0;\nconst total = good + scrap;\n\nif (total > 0) {\n msg.kpis.quality = (good / total) * 100;\n} else {\n msg.kpis.quality = prev.quality ?? 100;\n}\nmsg.kpis.quality = Math.min(100, msg.kpis.quality);\n\n// ========================================\n// 2) PERFORMANCE\n// ----------------------------------------\nconst idealCycle = Number(activeOrder.cycleTime) || 0;\nconst operatingTime = global.get(\"operatingTime\") || 0;\n\nif (cycleCount > 0 && idealCycle > 0 && operatingTime > 0) {\n const targetCount = operatingTime / idealCycle;\n msg.kpis.performance = (cycleCount / targetCount) * 100;\n msg.kpis.performance = Math.min(100, msg.kpis.performance);\n} else {\n msg.kpis.performance = prev.performance ?? 100;\n}\n\n// ========================================\n// 3) AVAILABILITY\n// ----------------------------------------\nconst now = Date.now();\nconst lastCycleTime = global.get(\"lastMachineCycleTime\") || now;\nconst timeSinceLastCycle = now - lastCycleTime;\nconst BRIEF_PAUSE_THRESHOLD = 5 * 60 * 1000;\nconst productionStartTime = global.get(\"productionStartTime\");\n\nif (!trackingEnabled || timeSinceLastCycle > BRIEF_PAUSE_THRESHOLD) {\n msg.kpis.availability = 0;\n global.set(\"lastKPIValues\", null);\n} else if (trackingEnabled && productionStartTime && operatingTime > 0) {\n const elapsedSec = (now - productionStartTime) / 1000;\n if (elapsedSec > 0) {\n msg.kpis.availability = (operatingTime / elapsedSec) * 100;\n msg.kpis.availability = Math.min(100, msg.kpis.availability);\n }\n global.set(\"lastKPIValues\", msg.kpis);\n} else if (trackingEnabled && productionStartTime) {\n msg.kpis.availability = 100;\n} else {\n const prevKPIs = global.get(\"lastKPIValues\") || {};\n msg.kpis.availability = prevKPIs.availability || 0;\n}\n\n// ========================================\n// 4) OEE\n// ----------------------------------------\nmsg.kpis.oee =\n (msg.kpis.availability *\n msg.kpis.performance *\n msg.kpis.quality) / 10000;\n\n// Round nicely\nfor (let k of [\"quality\",\"performance\",\"availability\",\"oee\"]) {\n msg.kpis[k] = Math.round(msg.kpis[k] * 10) / 10;\n}\n\nglobal.set(\"currentKPIs\", msg.kpis);\nreturn msg;\n",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 980,
|
|
"y": 540,
|
|
"wires": [
|
|
[
|
|
"578c92e75bf0f266",
|
|
"dc9b9a26af05dfa8",
|
|
"ab31039047323f42",
|
|
"02fdc53901e0b70e"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "alert_process_function",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Process Alert for DB",
|
|
"func": "// Process incoming alert\nif (msg.payload && msg.payload.action === 'alert') {\n const alert = msg.payload;\n\n // Format timestamp for MySQL DATETIME\n const timestamp = alert.timestamp ?\n new Date(alert.timestamp).toISOString().slice(0, 19).replace('T', ' ') :\n new Date().toISOString().slice(0, 19).replace('T', ' ');\n\n // Prepare INSERT query\n const alertType = (alert.type || 'Unknown').replace(/'/g, \"''\"); // Escape quotes\n const description = (alert.description || '').replace(/'/g, \"''\"); // Escape quotes\n\n msg.topic = `\n INSERT INTO alerts_log (timestamp, alert_type, description)\n VALUES ('${timestamp}', '${alertType}', '${description}')\n `;\n\n node.status({\n fill: 'green',\n shape: 'dot',\n text: `Logging: ${alertType}`\n });\n\n // Store original message for passthrough\n msg._originalAlert = alert;\n\n return msg;\n}\n\nreturn null;",
|
|
"outputs": 1,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 280,
|
|
"y": 780,
|
|
"wires": [
|
|
[
|
|
"alert_insert_mysql"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "alert_insert_mysql",
|
|
"type": "mysql",
|
|
"z": "cac3a4383120cb57",
|
|
"mydb": "00d8ad2b0277f906",
|
|
"name": "Log Alert to DB",
|
|
"x": 530,
|
|
"y": 780,
|
|
"wires": [
|
|
[
|
|
"alert_insert_debug"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "alert_insert_debug",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Alert Logged",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 730,
|
|
"y": 780,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "alert_flow_comment",
|
|
"type": "comment",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Alert Logging: Template \u2192 Process \u2192 MySQL Insert \u2192 Debug",
|
|
"info": "Alerts from the UI are logged to the alerts_log table.\nTable structure:\n- id (auto-increment)\n- timestamp (when alert occurred)\n- alert_type (category)\n- description (optional notes)\n- created_at (when logged)",
|
|
"x": 400,
|
|
"y": 740,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "394cfca6b72f6444",
|
|
"type": "link in",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "ec32d0a62eacfb22",
|
|
"name": "link in 9",
|
|
"links": [
|
|
"d39000415ba85495",
|
|
"8e589c36104b3f0d"
|
|
],
|
|
"x": 95,
|
|
"y": 200,
|
|
"wires": [
|
|
[
|
|
"f3a4b5c6d7e8f9a0"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "d39000415ba85495",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "link out 9",
|
|
"mode": "link",
|
|
"links": [
|
|
"394cfca6b72f6444"
|
|
],
|
|
"x": 1445,
|
|
"y": 480,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "dc9b9a26af05dfa8",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Record KPI History",
|
|
"func": "// Complete Record KPI History function with robust initialization and averaging\n\n// ========== INITIALIZATION ==========\n// Initialize buffer\nlet buffer = global.get(\"kpiBuffer\");\nif (!buffer || !Array.isArray(buffer)) {\n buffer = [];\n global.set(\"kpiBuffer\", buffer);\n node.warn('[KPI History] Initialized kpiBuffer');\n}\n\n// Initialize last record time\nlet lastRecordTime = global.get(\"lastKPIRecordTime\");\nif (!lastRecordTime || typeof lastRecordTime !== 'number') {\n // Set to 1 minute ago to ensure immediate recording on startup\n lastRecordTime = Date.now() - 60000;\n global.set(\"lastKPIRecordTime\", lastRecordTime);\n node.warn('[KPI History] Initialized lastKPIRecordTime');\n}\n\n// ========== ACCUMULATE ==========\nconst kpis = msg.payload?.kpis || msg.kpis;\nif (!kpis) {\n node.warn('[KPI History] No KPIs in message, skipping');\n return null;\n}\n\nbuffer.push({\n timestamp: Date.now(),\n oee: kpis.oee || 0,\n availability: kpis.availability || 0,\n performance: kpis.performance || 0,\n quality: kpis.quality || 0\n});\n\n// Prevent buffer from growing too large (safety limit)\nif (buffer.length > 100) {\n buffer = buffer.slice(-60); // Keep last 60 entries\n node.warn('[KPI History] Buffer exceeded 100 entries, trimmed to 60');\n}\n\nglobal.set(\"kpiBuffer\", buffer);\n\n// ========== CHECK IF TIME TO RECORD ==========\nconst now = Date.now();\nconst timeSinceLastRecord = now - lastRecordTime;\nconst ONE_MINUTE = 60 * 1000;\n\nif (timeSinceLastRecord < ONE_MINUTE) {\n // Not time to record yet\n return null; // Don't send to charts yet\n}\n\n// ========== CALCULATE AVERAGES ==========\nif (buffer.length === 0) {\n node.warn('[KPI History] Buffer empty at recording time, skipping');\n return null;\n}\n\nconst avg = {\n oee: buffer.reduce((sum, d) => sum + d.oee, 0) / buffer.length,\n availability: buffer.reduce((sum, d) => sum + d.availability, 0) / buffer.length,\n performance: buffer.reduce((sum, d) => sum + d.performance, 0) / buffer.length,\n quality: buffer.reduce((sum, d) => sum + d.quality, 0) / buffer.length\n};\n\nnode.warn(`[KPI History] Recording averaged KPIs from ${buffer.length} samples: OEE=${avg.oee.toFixed(1)}%`);\n\n// ========== RECORD TO HISTORY ==========\n// Load history arrays\nlet oeeHist = global.get(\"realOEE\") || [];\nlet availHist = global.get(\"realAvailability\") || [];\nlet perfHist = global.get(\"realPerformance\") || [];\nlet qualHist = global.get(\"realQuality\") || [];\n\n// Append averaged values\noeeHist.push({ timestamp: now, value: Math.round(avg.oee * 10) / 10 });\navailHist.push({ timestamp: now, value: Math.round(avg.availability * 10) / 10 });\nperfHist.push({ timestamp: now, value: Math.round(avg.performance * 10) / 10 });\nqualHist.push({ timestamp: now, value: Math.round(avg.quality * 10) / 10 });\n\n// Trim arrays (avoid memory explosion)\noeeHist = oeeHist.slice(-300);\navailHist = availHist.slice(-300);\nperfHist = perfHist.slice(-300);\nqualHist = qualHist.slice(-300);\n\n// Save\nglobal.set(\"realOEE\", oeeHist);\nglobal.set(\"realAvailability\", availHist);\nglobal.set(\"realPerformance\", perfHist);\nglobal.set(\"realQuality\", qualHist);\n\n// Update global state\nglobal.set(\"lastKPIRecordTime\", now);\nglobal.set(\"kpiBuffer\", []); // Clear buffer\n\n// Send to graphs\nreturn {\n topic: \"chartsData\",\n payload: {\n oee: oeeHist,\n availability: availHist,\n performance: perfHist,\n quality: qualHist\n }\n};",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1190,
|
|
"y": 480,
|
|
"wires": [
|
|
[
|
|
"d39000415ba85495"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "dc74dbc51dd757ba",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Send to template",
|
|
"func": "const realOEE = global.get(\"realOEE\");\nconst realAvailability = global.get(\"realAvailability\");\nconst realPerformance = global.get(\"realPerformance\");\nconst realQuality = global.get(\"realQuality\");\n\nconst chartsMsg = {\n topic: \"chartsData\",\n payload: {\n oee: realOEE,\n availability: realAvailability,\n performance: realPerformance,\n quality: realQuality\n }\n};\nreturn [chartsMsg];\n",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1450,
|
|
"y": 540,
|
|
"wires": [
|
|
[]
|
|
]
|
|
},
|
|
{
|
|
"id": "fcee023b62d44e58",
|
|
"type": "inject",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Init on Deploy",
|
|
"props": [
|
|
{
|
|
"p": "payload"
|
|
}
|
|
],
|
|
"repeat": "",
|
|
"crontab": "",
|
|
"once": true,
|
|
"onceDelay": 0.1,
|
|
"topic": "",
|
|
"payload": "",
|
|
"payloadType": "date",
|
|
"x": 160,
|
|
"y": 20,
|
|
"wires": [
|
|
[
|
|
"952cd0a9a4504f2b"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "952cd0a9a4504f2b",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Initialize Global Variables",
|
|
"func": "// Initialize Global Variables - Run on Deploy\nnode.warn('[INIT] Initializing global variables');\n\n// KPI Buffer for averaging\nif (!global.get(\"kpiBuffer\")) {\n global.set(\"kpiBuffer\", []);\n node.warn('[INIT] Set kpiBuffer to []');\n}\n\n// Last KPI record time - set to 1 min ago for immediate first record\nif (!global.get(\"lastKPIRecordTime\")) {\n global.set(\"lastKPIRecordTime\", Date.now() - 60000);\n node.warn('[INIT] Set lastKPIRecordTime');\n}\n\n// Last machine cycle time - set to now to prevent immediate 0% availability\nif (!global.get(\"lastMachineCycleTime\")) {\n global.set(\"lastMachineCycleTime\", Date.now());\n node.warn('[INIT] Set lastMachineCycleTime to prevent 0% availability on startup');\n}\n\n// Last KPI values\nif (!global.get(\"lastKPIValues\")) {\n global.set(\"lastKPIValues\", {});\n node.warn('[INIT] Set lastKPIValues to {}');\n}\n\n// KPI Startup Mode - ensure clean state on deploy\nglobal.set(\"kpiStartupMode\", false);\nnode.warn('[INIT] Set kpiStartupMode to false');\n\n// Tracking flags - ensure clean state\nif (global.get(\"trackingEnabled\") === undefined) {\n global.set(\"trackingEnabled\", false);\n}\nif (global.get(\"productionStarted\") === undefined) {\n global.set(\"productionStarted\", false);\n}\n\nnode.warn('[INIT] Global variable initialization complete');\n\n// Trigger restore-session to check for running work orders\nconst restoreMsg = { action: \"restore-session\" };\nreturn [null, restoreMsg];",
|
|
"outputs": 2,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 380,
|
|
"y": 80,
|
|
"wires": [
|
|
[],
|
|
[
|
|
"65ddb4cca6787bde"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "f8f4ca6de445c0c2",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Output 3 WO",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1330,
|
|
"y": 720,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "ab31039047323f42",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Calculate KPIS",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1140,
|
|
"y": 800,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "e394d0275e78950c",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Output 2 WO",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1330,
|
|
"y": 680,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "0ab6a68c1ad50a91",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Output 4 WO",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1330,
|
|
"y": 760,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "942807fcbd15f50c",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Output 1 WO",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1330,
|
|
"y": 640,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "fetch_graph_data_node_id",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Fetch Graph Data",
|
|
"func": "if (msg.topic !== 'fetch-graph-data') {\n return null;\n}\n\nconst range = msg.payload.range || '24h';\n\nlet interval;\nswitch(range) {\n case '24h':\n interval = 'INTERVAL 24 HOUR';\n break;\n case '7d':\n interval = 'INTERVAL 7 DAY';\n break;\n case '30d':\n interval = 'INTERVAL 30 DAY';\n break;\n case '90d':\n interval = 'INTERVAL 90 DAY';\n break;\n default:\n interval = 'INTERVAL 24 HOUR';\n}\n\n// Use correct column names: target_quantity, cycle_time\nmsg.topic = `\n SELECT\n work_order_id,\n status,\n good_parts,\n scrap_parts,\n progress_percent,\n target_qty as target_quantity,\n updated_at,\n cycle_count\n FROM work_orders\n WHERE updated_at >= NOW() - ${interval}\n ORDER BY updated_at ASC\n`;\n\nmsg.payload = [];\n\nreturn msg;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 410,
|
|
"y": 560,
|
|
"wires": [
|
|
[
|
|
"db_guard_db_guard_graphs"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "format_graph_data_node_id",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Format Graph Data",
|
|
"func": "const rows = msg.payload || [];\n\nif (!Array.isArray(rows) || rows.length === 0) {\n msg.graphData = {\n labels: [],\n datasets: [\n { label: 'Good Parts', data: [] },\n { label: 'Scrap Parts', data: [] },\n { label: 'Efficiency %', data: [] },\n { label: 'Quality %', data: [] }\n ]\n };\n // Clean before returning to UI\n delete msg.topic;\n delete msg.payload;\n return msg;\n}\n\nconst labels = [];\nconst goodData = [];\nconst scrapData = [];\nconst efficiencyData = [];\nconst qualityData = [];\n\nrows.forEach(row => {\n const timestamp = new Date(row.updated_at);\n labels.push(timestamp.toLocaleString());\n\n const good = Number(row.good_parts) || 0;\n const scrap = Number(row.scrap_parts) || 0;\n const target = Number(row.target_quantity) || 0;\n\n goodData.push(good);\n scrapData.push(scrap);\n\n // Use progress_percent if available, else calculate\n let eff = (row.progress_percent != null)\n ? Number(row.progress_percent)\n : (target > 0 ? (good / target) * 100 : 0);\n efficiencyData.push(Math.min(eff, 100));\n\n const total = good + scrap;\n const quality = total > 0 ? (good / total) * 100 : 100;\n qualityData.push(quality);\n});\n\nmsg.graphData = {\n labels: labels,\n datasets: [\n { label: 'Good Parts', data: goodData },\n { label: 'Scrap Parts', data: scrapData },\n { label: 'Efficiency %', data: efficiencyData },\n { label: 'Quality %', data: qualityData }\n ]\n};\n\n// Clean before returning to UI template\ndelete msg.topic;\ndelete msg.payload;\n\nreturn msg;",
|
|
"outputs": 1,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 950,
|
|
"y": 700,
|
|
"wires": [
|
|
[
|
|
"8e589c36104b3f0d"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "db_guard_db_guard_graphs",
|
|
"type": "switch",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "DB Guard (Graphs)",
|
|
"property": "topic",
|
|
"propertyType": "msg",
|
|
"rules": [
|
|
{
|
|
"t": "istype",
|
|
"v": "string",
|
|
"vt": "string"
|
|
}
|
|
],
|
|
"checkall": "true",
|
|
"repair": false,
|
|
"outputs": 1,
|
|
"x": 630,
|
|
"y": 560,
|
|
"wires": [
|
|
[
|
|
"graph_mariadb_node"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "db_guard_db_guard_cycles",
|
|
"type": "switch",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "DB Guard (Cycles)",
|
|
"property": "topic",
|
|
"propertyType": "msg",
|
|
"rules": [
|
|
{
|
|
"t": "istype",
|
|
"v": "string",
|
|
"vt": "string"
|
|
}
|
|
],
|
|
"checkall": "true",
|
|
"repair": false,
|
|
"outputs": 1,
|
|
"x": 690,
|
|
"y": 600,
|
|
"wires": [
|
|
[
|
|
"f6ad294bc02618c9"
|
|
]
|
|
]
|
|
},
|
|
{
|
|
"id": "8e589c36104b3f0d",
|
|
"type": "link out",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "link out 10",
|
|
"mode": "link",
|
|
"links": [
|
|
"394cfca6b72f6444"
|
|
],
|
|
"x": 945,
|
|
"y": 760,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "4fabedfe0668e215",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "machine cycles output 4",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1100,
|
|
"y": 1020,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "68747d170d530562",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Machine cycles output 1",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1090,
|
|
"y": 900,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "4b0281e42c6cd4d1",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "machine cycles output 2",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1090,
|
|
"y": 940,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "02fdc53901e0b70e",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "calculate kpis debug",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1500,
|
|
"y": 980,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "b03da2270d8def93",
|
|
"type": "debug",
|
|
"z": "cac3a4383120cb57",
|
|
"name": "Machine cycles output 3",
|
|
"active": true,
|
|
"tosidebar": true,
|
|
"console": false,
|
|
"tostatus": false,
|
|
"complete": "true",
|
|
"targetType": "full",
|
|
"statusVal": "",
|
|
"statusType": "auto",
|
|
"x": 1090,
|
|
"y": 980,
|
|
"wires": []
|
|
},
|
|
{
|
|
"id": "progress_check_handler_node",
|
|
"type": "function",
|
|
"z": "cac3a4383120cb57",
|
|
"g": "b7ab5e0cc02b9508",
|
|
"name": "Progress Check Handler",
|
|
"func": "// Handle DB result from start-work-order progress check\nif (msg._mode === \"start-check-progress\") {\n const order = flow.get(\"pendingWorkOrder\");\n\n if (!order || !order.id) {\n node.error(\"No pending work order found\", msg);\n return [null, null];\n }\n\n // Get progress from DB query result\n const dbRow = (Array.isArray(msg.payload) && msg.payload.length > 0) ? msg.payload[0] : null;\n const cycleCount = dbRow ? (Number(dbRow.cycle_count) || 0) : 0;\n const goodParts = dbRow ? (Number(dbRow.good_parts) || 0) : 0;\n const scrapParts = dbRow ? (Number(dbRow.scrap_parts) || 0) : 0;\n const targetQty = dbRow ? (Number(dbRow.target_qty) || 0) : (Number(order.target) || 0);\n\n node.warn(`[PROGRESS-CHECK] WO ${order.id}: cycles=${cycleCount}, good=${goodParts}, target=${targetQty}`);\n\n // Check if work order has existing progress\n if (cycleCount > 0 || goodParts > 0) {\n // Work order has progress - send prompt to UI\n node.warn(`[PROGRESS-CHECK] Work order has existing progress - sending prompt to UI`);\n\n const promptMsg = {\n _mode: \"resume-prompt\",\n topic: \"resumePrompt\",\n payload: {\n id: order.id,\n sku: order.sku || \"\",\n cycleCount: cycleCount,\n goodParts: goodParts,\n targetQty: targetQty,\n progressPercent: targetQty > 0 ? Math.round((goodParts / targetQty) * 100) : 0,\n // Include full order object for resume/restart actions\n order: {...order, cycle_count: cycleCount, good_parts: goodParts, scrap: scrapParts}\n }\n };\n\n return [null, promptMsg];\n } else {\n // No existing progress - proceed with normal start\n node.warn(`[PROGRESS-CHECK] No existing progress - proceeding with normal start`);\n\n // Simulate the original start-work-order behavior\n const startMsg = {\n _mode: \"start\",\n startOrder: order,\n topic: \"UPDATE work_orders SET status = CASE WHEN work_order_id = ? THEN 'RUNNING' ELSE 'PENDING' END, updated_at = CASE WHEN work_order_id = ? THEN NOW() ELSE updated_at END WHERE status <> 'DONE'\",\n payload: [order.id, order.id]\n };\n\n global.set(\"activeWorkOrder\", order);\n global.set(\"cycleCount\", 0);\n flow.set(\"lastMachineState\", 0);\n global.set(\"scrapPromptIssuedFor\", null);\n\n return [startMsg, null];\n }\n}\n\n// Pass through all other messages\nreturn [msg, null];",
|
|
"outputs": 2,
|
|
"timeout": 0,
|
|
"noerr": 0,
|
|
"initialize": "",
|
|
"finalize": "",
|
|
"libs": [],
|
|
"x": 1090,
|
|
"y": 340,
|
|
"wires": [
|
|
[
|
|
"578c92e75bf0f266"
|
|
],
|
|
[
|
|
"f2bab26e27e2023d"
|
|
]
|
|
]
|
|
}
|
|
] |