{"javascript":"$(document).ready(function() {\n\n    /////Init api and connect to selected port, in development mode does nothing\n    Api.Init(0)\n\n    /////Hide development elements\n    $(\"#InitializationTabHeader\").hide()\n\n    /////Lists which accumulates messages\n    let ListOfDatabaseMessages = []\n    let ListOfEmbeddedMessages = []\n\n     /////Api event handler\n     Api.SetEventHandler(function(EventType, EventData){\n      \n      /////Need to show login form\n      if(EventType == \"login\")\n      {\n        UIkit.tab($(\"#InitializationTabHeader\")[0]).show(1);\n       \n        /////Fill default username and password\n        if(EventData[\"username\"])\n          $(\"#Username\").val(EventData[\"username\"])\n        if(EventData[\"password\"])\n          $(\"#Password\").val(EventData[\"password\"])\n      }\n\n      /////On message received\n      if(EventType == \"message\")\n      {\n        $(\"#Message\").html(EventData[\"text\"])\n        UIkit.tab($(\"#InitializationTabHeader\")[0]).show(2);\n      }\n      \n      /////Show database connection dialog\n      if(EventType == \"show_database_connection\")\n      {\n        UIkit.tab($(\"#InitializationTabHeader\")[0]).show(3);\n      }\n\n      /////Display message about database connection process\n      if(EventType == \"show_database_log\")\n      {\n        if(EventData[\"is_final\"])\n          $(\"#DatabaseMessageLog\").html(EventData[\"text\"])\n        /////Save log to list\n        ListOfDatabaseMessages.push(EventData[\"text\"])\n      }\n\n      /////Show embedded connection dialog\n      if(EventType == \"show_embedded_connection\")\n      {\n        UIkit.tab($(\"#InitializationTabHeader\")[0]).show(4);\n      }\n\n      /////Display message about embedded language install process\n      if(EventType == \"show_embedded_log\")\n      {\n        if(EventData[\"is_final\"])\n          $(\"#EmbeddedLanguageLog\").html(EventData[\"text\"])\n        /////Save log to list\n        ListOfEmbeddedMessages.push(EventData[\"text\"])\n      }\n\n      /////Change title of embedded language install dialog\n      if(EventType == \"show_embedded_title\")\n      {\n        $(\"#EmbeddedLanguageTitle\").html(EventData[\"text\"])\n      }\n\n      /////Finished install embedded languages\n      if(EventType == \"finished_embedded\")\n      {\n        ListOfEmbeddedMessages = []\n        UIkit.tab($(\"#InitializationTabHeader\")[0]).show(0);\n      }\n\n      /////Finished start database\n      if(EventType == \"finished_database\")\n      {\n        ListOfDatabaseMessages = []\n        UIkit.tab($(\"#InitializationTabHeader\")[0]).show(0);\n      }\n\n     })\n\n     /////On login button clicked\n     $(\"#Login\").click(function(){\n      localStorage.setItem('Username', $(\"#Username\").val())\n      localStorage.setItem('Password', $(\"#Password\").val())\n      /////Show progress bar and wait for next message\n      UIkit.tab($(\"#InitializationTabHeader\")[0]).show(0);\n      Api.Login($(\"#Username\").val(), $(\"#Password\").val())\n     })\n\n     /////On message accepted\n     $(\"#MessageOk\").click(function(){\n      /////Show progress bar and wait for next message\n      UIkit.tab($(\"#InitializationTabHeader\")[0]).show(0);\n      Api.MessageAccepted()\n     })\n\n     /////On run without database\n     $(\"#RunWithoutDatabase\").click(function(){\n      /////Show progress bar and wait for next message\n      UIkit.tab($(\"#InitializationTabHeader\")[0]).show(0);\n      Api.RunWithoutDatabase()\n     })\n\n     /////On run without database\n     $(\"#RunWithoutEmbeddedLog\").click(function(){\n      /////Show progress bar and wait for next message\n      UIkit.tab($(\"#InitializationTabHeader\")[0]).show(0);\n      Api.RunWithoutEmbeddedLanguage()\n     })\n\n     $(\"#DownloadEmbeddedLog\").click(function(){\n      /////Format log of embedded language install and send it to download\n      var blob = new Blob([ListOfEmbeddedMessages.join(\"\\n\")], {type: \"text/plain;charset=utf-8\"});\n      saveAs(blob, \"EmbeddedInstallLog.txt\");\n     })\n\n     $(\"#DownloadDatabaseLog\").click(function(){\n      /////Format log of database start and send it to download\n      var blob = new Blob([ListOfDatabaseMessages.join(\"\\n\")], {type: \"text/plain;charset=utf-8\"});\n      saveAs(blob, \"DatabaseStartLog.txt\");\n     })\n\n     /////Submit login after enter pressed\n     $('#Username, #Password').keypress(function (e) {\n       var key = e.which;\n       if(key == 13)\n        {\n          $('#Login').click();\n          return false;  \n        }\n      });\n\n     /////Clear Initial messages\n     $(\"#DatabaseMessageLog\").html(\"\")\n     $(\"#EmbeddedLanguageLog\").html(\"\")\n\n     /////After everything is initialized may show body\n     $(\"body\").fadeIn()\n\n    /////Events\n});","cssFiles":["https://bablosoft.com/buildinterface/uikit/css/uikit.css"],"jsFiles":["https://bablosoft.com/buildinterface/jquery/jquery.min.js?v=2","https://bablosoft.com/buildinterface/uikit/js/uikit.js?v=2","https://bablosoft.com/buildinterface/uikit/js/uikit-icons.js?v=2","https://bablosoft.com/buildinterface/charts/utils.js?v=2","https://bablosoft.com/buildinterface/charts/charts.js?v=2","https://bablosoft.com/buildinterface/filesaver/FileSaver.min.js?v=2","https://bablosoft.com/buildinterface/interface-extensions/extensions.js?v=2","https://bablosoft.com/buildinterface/bas-api/bas-api.js?v=2"],"css":"#Message {\n    text-align: center;\n    font-size: small;\n}\n\n.table-row {\n    display: flex;\n    justify-content: flex-start;\n    align-items: stretch;\n    flex-wrap: nowrap;\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n}\n\n.table-cell {\n    min-height: 25px;\n    flex-grow: 1;\n    flex-basis: 100%;\n}\n\n#InitializationTabHeader {\n    display: flex;\n    margin-bottom: 0px;\n}\n\n#CenterScreen {\n    width: 100%;\n    height: 100vh;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n    justify-content: center;\n}\n\n#InitializationTab {\n    margin-left: 0px;\n}\n\n#im3ii {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n    height: 40px;\n    line-height: 20px;\n    font-size:small;\n}\n\n.row {\n    display: flex;\n    justify-content: flex-start;\n    align-items: stretch;\n    flex-wrap: nowrap;\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n}\n\n.cell {\n    min-height: 25px;\n    flex-grow: 1;\n    flex-basis: 100%;\n}\n\n#i849rf {\n    flex-basis: 30px;\n    flex-grow: 0;\n    flex-shrink: 0;\n}\n\n#ia45qb {\n    flex-basis: 50%;\n    flex-grow: 1;\n    flex-shrink: 1;\n}\n\n#ic7n4b {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    height: auto;\n    line-height: 20px;\n    padding-left: 0px;\n}\n\n#Username {\n    margin-top: 0px;\n    margin-right: 0px;\n    margin-bottom: 20px;\n    margin-left: 0px;\n    min-width: 300px;\n}\n\n#ifuhla {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    height: auto;\n    line-height: 20px;\n    padding-left: 0px;\n}\n\n.uk-alert {\n    font-size: small;\n}\n\n#Password {\n    margin-top: 0px;\n    margin-right: 0px;\n    margin-bottom: 20px;\n    margin-left: 0px;\n    min-width: 300px;\n}\n\n#Login {\n    max-width: 300px;\n}\n\n#isdxgs {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n}\n\n#LoginTitle {\n    text-align: center;\n    margin-top: 0px;\n    margin-right: 0px;\n    margin-bottom: 20px;\n    margin-left: 0px;\n}\n\n#igvfb9 {\n    border-top-left-radius: 2px;\n    border-top-right-radius: 2px;\n    border-bottom-right-radius: 2px;\n    border-bottom-left-radius: 2px;\n}\n\n#igldzm {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-around;\n}\n\n#MessageOk {\n    max-width: 300px;\n    min-width: 100px;\n}\n\n#ispdrb {\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n    padding-top: 10px;\n}\n\n#ibr968 {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n#RunWithoutEmbeddedLog {\n    margin-top: 0px;\n    margin-right: 0px;\n    margin-bottom: 0px;\n    margin-left: 7px;\n}\n\n#ia8vmt {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n    line-height: 20px;\n    text-align: center;\n    font-size: small;\n}\n\n#DatabaseMessageLog {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n    line-height: 20px;\n    text-align: center;\n    font-size: small;\n}\n\n#EmbeddedLanguageLog {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n    line-height: 20px;\n    text-align: center;\n    font-size: small;\n}\n\n#EmbeddedLanguageTitle {\n    padding-top: 10px;\n    padding-right: 10px;\n    padding-bottom: 10px;\n    padding-left: 10px;\n    line-height: 20px;\n    text-align: center;\n    font-size: small;\n}\n\n#itvmzx {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    justify-content: center;\n}\n\n#RunWithoutDatabase {\n    margin-top: 0px;\n    margin-right: 0px;\n    margin-bottom: 0px;\n    margin-left: 7px;\n}\n\n@media (max-width: 768px) {\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n    .row {\n        flex-wrap: wrap;\n    }\n}","html":"<div id=\"CenterScreen\">\n  <div id=\"InitializationTab\" class=\"ui-tabs ui-tabs-horizontal\">\n    <ul uk-tab=\"\" id=\"InitializationTabHeader\" class=\"ui-internal uk-tab\">\n      <li class=\"ui-internal\">\n        <a href=\"#\" class=\"ui-internal\">Progress</a>\n      </li>\n      <li class=\"ui-internal\">\n        <a href=\"#\" class=\"ui-internal\">Login</a>\n      </li>\n      <li class=\"ui-internal\">\n        <a href=\"#\" class=\"ui-internal\">Message</a>\n      </li>\n      <li class=\"ui-internal\">\n        <a href=\"#\" class=\"ui-internal\">Database loading</a>\n      </li>\n      <li class=\"ui-internal\">\n        <a href=\"#\" class=\"ui-internal\">Node.js loading</a>\n      </li>\n    </ul>\n    <ul class=\"uk-switcher ui-tab-content\">\n      <li class=\"ui-tab\">\n        <div class=\"table-row\">\n          <div class=\"table-cell\">\n            <div class=\"row\">\n              <div id=\"i849rf\" class=\"cell\">\n                <div uk-spinner=\"ratio: 1.4\"></div>\n              </div>\n              <div id=\"ia45qb\" class=\"cell\">\n                <div id=\"im3ii\">Starting application...</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </li>\n      <li class=\"ui-tab\">\n        <div class=\"table-row\">\n          <div class=\"table-cell\">\n            <div id=\"LoginTitle\">\n              <span uk-icon=\"icon: user; ratio: 1\"></span>\n              <span>Log in</span>\n            </div>\n            <div class=\"row\">\n              <div id=\"igvfb9\" class=\"cell uk-alert\">\n                <div id=\"ic7n4b\">\n                  Username/email :\n                  <br data-highlightable=\"1\" id=\"ir9a3e\">\n                </div>\n                <input placeholder=\"Username/email\" id=\"Username\" class=\"uk-input\" type=\"text\" autofocus>\n                <div id=\"ifuhla\">\n                  Password :\n                  <br>\n                </div>\n                <input placeholder=\"Password\" id=\"Password\" class=\"uk-input\" type=\"password\">\n                <div class=\"row\">\n                  <div id=\"isdxgs\" class=\"cell\">\n                    <button id=\"Login\" class=\"uk-button uk-button-primary uk-button-small\">Login</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </li>\n      <li class=\"ui-tab\">\n        <div class=\"table-row\">\n          <div class=\"table-cell\">\n            <div id=\"Message\">Message text</div>\n          </div>\n        </div>\n        <div id=\"ispdrb\" class=\"row\">\n          <div id=\"igldzm\" class=\"cell\">\n            <button id=\"MessageOk\" class=\"uk-button uk-button-small uk-button-default\">Ok</button>\n          </div>\n        </div>\n      </li>\n      <li class=\"ui-tab\">\n        <div class=\"table-row\">\n          <div class=\"table-cell\">\n            <div id=\"ia8vmt\">\n              Database connection ...\n              <br>\n            </div>\n            <div id=\"DatabaseMessageLog\">\n              Message log\n              <br>\n            </div>\n            <div class=\"row\">\n              <div id=\"itvmzx\" class=\"cell\">\n                <button id=\"DownloadDatabaseLog\" class=\"uk-button uk-button-default uk-button-small\">Download log</button>\n                <button id=\"RunWithoutDatabase\" class=\"uk-button uk-button-default uk-button-small\">Run without database</button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </li>\n      <li class=\"ui-tab\">\n        <div class=\"table-row\">\n          <div class=\"table-cell\">\n            <div id=\"EmbeddedLanguageTitle\">\n              Embedded language connection ...\n              <br>\n            </div>\n            <div id=\"EmbeddedLanguageLog\">\n              Message log\n              <br>\n            </div>\n            <div class=\"row\">\n              <div id=\"ibr968\" class=\"cell\">\n                <button id=\"DownloadEmbeddedLog\" class=\"uk-button uk-button-default uk-button-small\">Download log</button>\n                <button id=\"RunWithoutEmbeddedLog\" class=\"uk-button uk-button-default uk-button-small\">Run without embedded languages</button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n"}