{
  "custom": {},
  "params": {
    "params": {},
    "size": "medium"
  },
  "propConfig": {
    "params.params": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.size": {
      "paramDirection": "input"
    }
  },
  "props": {
    "defaultSize": {
      "height": 59,
      "width": 1838
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "custom": {
              "unsavedChanges": false
            },
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\t\n\tif self.custom.unsavedChanges:\n\t\tsystem.perspective.openPopup(\n\t\t\t\u0027Error\u0027,\n\t\t\t\u0027Popup/Error\u0027,\n\t\t\tparams \u003d {\n\t\t\t\t\u0027message\u0027:\u0027Cancel or Save Screen changes to continue\u0027\n\t\t\t},\n\t\t\tmodal \u003d True\n\t\t)\n\t \t\n\telse:\n\t\tsystem.perspective.toggleDock(\"menu\")\n\t"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "Menu Dock button"
            },
            "position": {
              "basis": "24px",
              "shrink": 0
            },
            "propConfig": {
              "position.display": {
                "binding": {
                  "config": {
                    "expression": "{view.params.size} !\u003d \"large\""
                  },
                  "enabled": false,
                  "type": "expr"
                }
              }
            },
            "props": {
              "path": "material/menu",
              "style": {
                "classes": "Header/Icon",
                "color": "#FFFFFF",
                "marginLeft": "16px",
                "marginRight": "10px"
              }
            },
            "scripts": {
              "customMethods": [],
              "extensionFunctions": null,
              "messageHandlers": [
                {
                  "messageType": "unsavedChanges",
                  "pageScope": true,
                  "script": "\tself.custom.unsavedChanges\u003dpayload\n\tif payload:\n\t\tsystem.perspective.closeDock(\"menu\")",
                  "sessionScope": false,
                  "viewScope": false
                }
              ]
            },
            "type": "ia.display.icon"
          },
          {
            "meta": {
              "name": "Sepasoft image"
            },
            "position": {
              "basis": "170px"
            },
            "props": {
              "altText": "logo",
              "fit": {
                "mode": "contain"
              },
              "source": "https://assets.inductiveautomation.com/static/images/Sepasoft_Logo.bfd1d6b0c158.png",
              "style": {
                "marginBottom": 4,
                "marginTop": 4
              }
            },
            "type": "ia.display.image"
          },
          {
            "meta": {
              "name": "ToggleSwitch"
            },
            "position": {
              "basis": "130px"
            },
            "propConfig": {
              "props.label.text": {
                "binding": {
                  "config": {
                    "path": "this.props.selected"
                  },
                  "transforms": [
                    {
                      "code": "\tif value:\n\t\treturn \u0027Light Mode\u0027\n\telse:\n\t\treturn \u0027Dark Mode\u0027",
                      "type": "script"
                    }
                  ],
                  "type": "property"
                }
              },
              "props.selected": {
                "onChange": {
                  "enabled": null,
                  "script": "\tif currentValue.value:\n\t\tself.session.props.theme \u003d \u0027light\u0027\n\telse:\n\t\tself.session.props.theme \u003d \u0027dark\u0027"
                }
              }
            },
            "props": {
              "color": {
                "selected": "#004A98"
              },
              "label": {
                "style": {
                  "color": "#F4F4F4",
                  "fontSize": 12
                }
              },
              "selected": true
            },
            "type": "ia.input.toggle-switch"
          }
        ],
        "meta": {
          "name": "Left"
        },
        "position": {
          "basis": "500px"
        },
        "type": "ia.container.flex"
      },
      {
        "meta": {
          "hasDelegate": true,
          "name": "Filler"
        },
        "position": {
          "grow": 1
        },
        "propConfig": {
          "props.style.fontSize": {
            "binding": {
              "config": {
                "path": "page.props.dimensions.viewport.width"
              },
              "transforms": [
                {
                  "code": "\tif(value \u003e\u003d600 and value\u003c800):\n\t\treturn 14\n\telif (value \u003e\u003d800 and value\u003c1300):\n\t\treturn 16.5\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn 19\n\telif(value \u003e 1580):\n\t\treturn 24\n\telse:\n\t\treturn 12",
                  "type": "script"
                }
              ],
              "type": "property"
            }
          },
          "props.text": {
            "binding": {
              "config": {
                "expression": "{page.props.path}"
              },
              "transforms": [
                {
                  "code": "#First load OEE\n\tif(value \u003d\u003d \"/\"):\n\t\treturn \"Home\"\n\tvalue \u003d value.split(\"/\")\n\tvalue.remove(\u0027\u0027)\n#Scheduling\n\tif value[0] \u003d\u003d \u0027Scheduling\u0027:\n\t\treturn  value [1] + \u0027 Scheduling\u0027\n#Analysis,Users,Screen Designer,Materials,API,and Shifts\n\tif len(value) \u003d\u003d 1:\n\t\treturn value[0]\n\tvalue.remove(\"screen\")\n\t\n#Home screen after loading\n\tif(\"system\" in value):\n\t\treturn value[1]\n\torigin \u003d value[0].split(\"\u003e\")\n\tscreenName \u003d value[1]\n#Embedded custom screens or line screens\n\tif(screenName\u003d\u003d \u0027Line Summary\u0027 or screenName \u003d\u003d \u0027Run Control\u0027):\n\t\treturn \"/\".join(origin) + \": \" + screenName  \n\telif len(origin) \u003c\u003d2:\n\t\treturn \"/\".join(origin) + \": \" + screenName \n\t\t#return screenName + \": \"+  \"/\".join(origin)\n\telse:\n\t\treturn  \"/.../\" +  origin[len(origin)-2] + \"/\" + origin[len(origin)-1] + \": \" + screenName ",
                  "type": "script"
                }
              ],
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {
            "color": "#FFFFFF",
            "fontFamily": "Roboto",
            "textAlign": "center"
          }
        },
        "type": "ia.display.label"
      },
      {
        "children": [
          {
            "meta": {
              "hasDelegate": true,
              "name": "dateTime"
            },
            "position": {
              "shrink": 0
            },
            "propConfig": {
              "position.display": {
                "binding": {
                  "config": {
                    "expression": "{view.params.size} !\u003d \"small\""
                  },
                  "type": "expr"
                }
              },
              "props.style.fontSize": {
                "binding": {
                  "config": {
                    "path": "page.props.dimensions.viewport.width"
                  },
                  "transforms": [
                    {
                      "code": "\tif(value \u003e\u003d600 and value\u003c800):\n\t\treturn 14\n\telif (value \u003e\u003d800 and value\u003c1300):\n\t\treturn 16.5\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn 19\n\telif(value \u003e 1580):\n\t\treturn 24\n\telse:\n\t\treturn 12",
                      "type": "script"
                    }
                  ],
                  "type": "property"
                }
              },
              "props.text": {
                "binding": {
                  "config": {
                    "expression": "now(60000)"
                  },
                  "transforms": [
                    {
                      "formatType": "datetime",
                      "formatValue": {
                        "date": "short",
                        "time": "medium"
                      },
                      "type": "format"
                    },
                    {
                      "code": " \t#format returns a string, convert string back to datetime\n\tdate \u003d system.date.parse(str(value), \u0027MM/dd/yy, hh:mm:ss a\u0027)\n \t#now apply time format we want\n\treturn system.date.format(date, \u0027yyyy-MM-dd HH:mm\u0027)",
                      "type": "script"
                    }
                  ],
                  "type": "expr"
                }
              }
            },
            "props": {
              "style": {
                "color": "#FFFFFF",
                "fontFamily": "Roboto",
                "marginLeft": "6px",
                "marginRight": "25px"
              }
            },
            "type": "ia.display.label"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "page": "/Screen Designer"
                  },
                  "scope": "C",
                  "type": "nav"
                }
              }
            },
            "meta": {
              "name": "Icon",
              "tooltip": {
                "enabled": true,
                "text": "Screen Designer"
              }
            },
            "position": {
              "basis": "30px"
            },
            "props": {
              "color": "#FCFCFC",
              "path": "material/design_services",
              "style": {
                "cursor": "pointer",
                "marginRight": 5
              }
            },
            "type": "ia.display.icon"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tif self.session.props.auth.authenticated:\n\t\tsystem.perspective.logout()\n\telse:\n\t\tsystem.perspective.login()"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "name": "User"
            },
            "propConfig": {
              "position.basis": {
                "binding": {
                  "config": {
                    "path": "page.props.dimensions.screen.width"
                  },
                  "transforms": [
                    {
                      "code": "\tif(value \u003e\u003d600 and value\u003c800):\n\t\treturn \"16px\"\n\telif (value \u003e\u003d800 and value\u003c1300):\n\t\treturn \"19px\"\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn \"25px\"\n\telif(value \u003e 1580):\n\t\treturn \"32px\"\n\telse:\n\t\treturn \"14px\"",
                      "type": "script"
                    }
                  ],
                  "type": "property"
                }
              }
            },
            "props": {
              "color": "#FFFFFF",
              "path": "material/person",
              "style": {
                "classes": "Header/Icon"
              }
            },
            "type": "ia.display.icon"
          },
          {
            "events": {
              "dom": {
                "onClick": {
                  "config": {
                    "script": "\tif self.session.props.auth.authenticated:\n\t\tsystem.perspective.navigate(\u0027/\u0027)\n\t\tsystem.perspective.logout()\n\telse:\n\t\tsystem.perspective.login()"
                  },
                  "scope": "G",
                  "type": "script"
                }
              }
            },
            "meta": {
              "hasDelegate": true,
              "name": "Sign In"
            },
            "position": {
              "shrink": 0
            },
            "propConfig": {
              "position.display": {
                "binding": {
                  "config": {
                    "expression": "{view.params.size} !\u003d \"small\""
                  },
                  "type": "expr"
                }
              },
              "props.style.fontSize": {
                "binding": {
                  "config": {
                    "path": "page.props.dimensions.viewport.width"
                  },
                  "transforms": [
                    {
                      "code": "\tif(value \u003e\u003d600 and value\u003c800):\n\t\treturn 14\n\telif (value \u003e\u003d800 and value\u003c1300):\n\t\treturn 16.5\n\telif (value \u003e\u003d1300 and value\u003c\u003d1580):\n\t\treturn 19\n\telif(value \u003e 1580):\n\t\treturn 24\n\telse:\n\t\treturn 12",
                      "type": "script"
                    }
                  ],
                  "type": "property"
                }
              },
              "props.text": {
                "binding": {
                  "config": {
                    "path": "session.props.auth.user.userName"
                  },
                  "transforms": [
                    {
                      "expression": "if({value} \u003d null || len({value}) \u003d 0, \"Sign In\", {value})",
                      "type": "expression"
                    }
                  ],
                  "type": "property"
                }
              }
            },
            "props": {
              "style": {
                "color": "#FFFFFF",
                "cursor": "pointer",
                "fontFamily": "Roboto",
                "marginLeft": "4px",
                "marginRight": "26px"
              }
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "Right"
        },
        "position": {
          "basis": "500px"
        },
        "props": {
          "justify": "flex-end"
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "style": {
        "backgroundColor": "#969696"
      }
    },
    "type": "ia.container.flex"
  }
}