<!DOCTYPE html>
<html>

<head>
  <title>Dashboard - NDA</title>
  <link rel="icon" type="image/icon" href="../images?name=nda_logo.png" />
  <script type="text/javascript" language="JavaScript">
    var refreshInterval;
    var protocol = '<%=PROTOCOL%>';

    function checkError(errorCodeConstants) {
      let urlParams = window.location.toString().split('?')[1];
      if (urlParams && urlParams.indexOf('err_code=') > -1) {
        let errorIndex = urlParams.split('err_code=')[1];
        let errorCode = errorIndex.split('&')[0];
        if (errorCodeConstants && errorCodeConstants[errorCode]) {
          alert(errorCodeConstants[errorCode]);
          window.location = '/';
        }
      }
    }
    function getErrorCodes() {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', `${protocol}://localhost:${PORT}/error-codes`, true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        let status = xhr.status;
        if (status === 200) {
          checkError(xhr.response);
        }
      };
      xhr.send();
    }
    getErrorCodes();
    function getLogs(UID) {
      var textarea = document.getElementById('logs-content');
      let xhr = new XMLHttpRequest();
      xhr.open('GET', `${protocol}://localhost:${PORT}/logs/content?recent=true&count=0&UID=` + UID, true);
      xhr.responseType = 'json';
      xhr.onload = function () {
        let status = xhr.status;
        if (status === 200 && xhr && xhr.response && xhr.response.content && xhr.response.content.length > 0) {
          textarea.innerHTML = xhr.response.content;
          textarea.scrollTop = textarea.scrollHeight;
        }
      };
      xhr.send();
    }
    function displayLogs(UID) {
      clearInterval(refreshInterval);
      getLogs(UID);
      var interval = setInterval(function () {
        getLogs(UID);
      }, 3000);
    }
    function gotoPage(path, showLogs, UID) {
      clearInterval(refreshInterval);
      document.getElementById('dashboard-page').classList.add('dashboard-loading');
      document.getElementById('loader-div').classList.add('loader');
      if (showLogs && UID) {
        displayLogs(UID);
      }

      setTimeout(() => {
        window.location = path;
      }, 100);

    }
    function confirmSelection(path, message) {
      let confirmation = confirm(message);
      if (confirmation) {
        gotoPage(path);
      }
    }
    function refreshData() {
      refreshInterval = setInterval(function () {
        var textarea = document.getElementById('logs-content');
        let xhr = new XMLHttpRequest();
        xhr.open('GET', `${protocol}://localhost:${PORT}/update-fields`, true);
        xhr.responseType = 'json';
        xhr.onload = function () {
          let status = xhr.status;
          if (status === 200 && xhr && xhr.response && xhr.response.projects && xhr.response.projects.length > 0) {
            var projects = xhr.response.projects;
            var runningProjects = xhr.response.runningProjects && xhr.response.runningProjects ? parseInt(xhr.response.runningProjects) : 0;
            var stopAllButton = document.getElementById('stop-all-image');
            var crashedProjectMessage = 'The following projects are crashed. Please check their logs for more info\n';
            var crashedProjectCount = 0;

            if (stopAllButton && stopAllButton.className) {
              document.getElementById('stop-all-image').className = runningProjects > 1 ? 'tooltip stop-all-project view-element' : 'tooltip stop-all-project';
            }

            for (var i = 0; i < projects.length; i++) {
              var cpuUsage = document.getElementById('cpu-' + projects[i].UID).innerHTML;
              var pidNum = document.getElementById('pid-' + projects[i].UID).innerHTML;
              var activeData = document.getElementById('td-active-' + projects[i].UID);
              var inActiveData = document.getElementById('td-inactive-' + projects[i].UID);
              if (cpuUsage.toString().trim() !== projects[i].cpu.toString().trim()) {
                let cpuValue = parseFloat(projects[i].cpu) >= 100 ? '100.00' : projects[i].cpu;
                if (parseInt(cpuValue) >= 0) {
                  cpuValue += '%';
                }
                document.getElementById('cpu-' + projects[i].UID).innerHTML = cpuValue;
                if (parseFloat(projects[i].cpu) > 89) {
                  document.getElementById('cpu-' + projects[i].UID).className = 'danger-text';
                } else {
                  document.getElementById('cpu-' + projects[i].UID).className = '';
                }
              }
              if (!projects[i].ignoreCrash && pidNum.toString().trim() !== projects[i].pid.toString().trim()) {
                document.getElementById('pid-' + projects[i].UID).innerHTML = projects[i].pid;
                if (projects[i].pid.toString().trim() === 'N/A') {
                  crashedProjectCount++;
                  crashedProjectMessage += '\n' + crashedProjectCount + '. ' + projects[i].name;
                }
              }
              if (projects[i].pid && parseInt(projects[i].pid) > 0) {
                document.getElementById('td-active-' + projects[i].UID).className = 'view-element';
                document.getElementById('td-inactive-' + projects[i].UID).className = 'hide-element';
              } else {
                document.getElementById('td-active-' + projects[i].UID).className = 'hide-element';
                document.getElementById('td-inactive-' + projects[i].UID).className = 'view-element';
              }
            }

            if (crashedProjectCount > 0) {
              setTimeout(function () {
                alert(crashedProjectMessage);
              }, 200);
            }
          }
        };
        xhr.send();
      }, 10000);
    }
    refreshData();
  </script>

  <style>
    body {
      /* background-color: antiquewhite; */
      font-family: sans-serif;
    }

    .card {
      background-color: #fff;
      border-radius: 10px;
      max-width: 100%;
      margin: 20px;
      border: 2px solid #d4d4d4;
      padding: 10px 20px;
    }

    textarea {
      border: none;
      outline: none;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    li {
      background-color: #ff0808;
      border: 0;
      border-radius: 5px;
      color: #313131;
      font-size: 12px;
      font-weight: bold;
      padding: 8px 18px;
      letter-spacing: 1px;
      margin-bottom: 5px;
      width: fit-content;
      float: left;
    }

    li:not(:last-child) {
      margin-right: 5px;
    }

    .flex-row {
      display: flex;
    }

    .flex-items--title {
      width: 25%;
    }

    .flex-items--content {
      width: 75%;
    }

    .styled-table {
      border-collapse: collapse;
      margin: 25px 0;
      font-size: 0.9em;
      font-family: sans-serif;
      min-width: 400px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
      margin-left: auto;
      margin-right: auto;
    }

    .styled-table thead tr {
      background-color: #009879;
      color: #ffffff;
      text-align: left;
    }

    .styled-table th,
    .styled-table td {
      padding-left: 5em !important;
      padding: 12px 15px;
    }

    .styled-table tbody tr {
      border-bottom: 1px solid #dddddd;
    }

    /* .styled-table tbody tr:nth-of-type(even) {
      background-color: #f3f3f3;
    } */

    .styled-table tbody tr:last-of-type {
      border-bottom: 2px solid #009879;
    }

    .styled-table tbody tr.active-row {
      font-weight: bold;
      color: #009879;
    }

    .nda-header {
      font-size: 25px;
      text-align: center;
      color: black;
    }

    .first-letter {
      font-weight: bolder;
      color: #93d14f;
    }

    .nda-logo {
      align-content: center;
      padding-left: 46%;
      height: 60px;
    }

    .button-green {
      background-color: #04AA6D;
      color: white;
      padding: 12 px 20 px;
      border: none;
      border-radius: 4 px;
      cursor: pointer;
      font-size: 20px;
    }

    .button-green:hover {
      background-color: #45a049;
    }

    .button-sm-green {
      background-color: #04AA6D;
      color: white;
      padding: 12 px 20 px;
      border: none;
      border-radius: 4 px;
      cursor: pointer;
    }

    .button-sm-green:hover {
      background-color: #45a049;
    }

    .button-sm-red {
      background-color: #f12c12;
      color: white;
      padding: 12 px 20 px;
      border: none;
      border-radius: 4 px;
      cursor: pointer;
    }

    .button-sm-red:hover {
      background-color: #c44130;
    }

    .action-button {
      width: 25px;
      height: 26px;
    }

    .action-button-stop {
      width: 25px;
      height: 25px;
    }

    .action-button-config {
      width: 32px;
      height: 25px;
    }

    .tooltip {
      position: relative;
      display: inline-block;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 50px;
      background-color: #45a049;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;

      /* Position the tooltip */
      position: absolute;
      z-index: 1;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

    .loader {
      width: 100%;
      height: 100vh;
      text-align: center;
      position: fixed;
      display: block !important;
    }

    .loader-image {
      width: 20vh;
      height: 20vh;
    }

    .dashboard-loading {
      visibility: hidden;
    }

    .add-project {
      float: left;
    }

    .stop-all-project {
      float: left;
      display: none !important;
    }

    .add-project-tooltip {
      width: 160px !important;
    }

    .red-tooltip {
      background-color: red !important;
    }

    .stop-all-tooltip {
      width: 120px !important;
    }

    .config-tooltip {
      width: 210px !important;
    }

    .view-element {
      display: block !important;
    }

    .hide-element {
      display: none !important;
    }

    .logs-text {
      height: 75%;
      width: 95vw;
      background: transparent;
      border: none !important;
      position: fixed;
      overflow: hidden;
    }

    .index-logs {
      text-align: left !important;
    }

    .danger-text {
      color: red;
    }
  </style>
</head>

<body>
  <div id="loader-div" style="display: none;" class="">
    <div id="logs-page" class="">
      <div class="container index-logs">
        <textarea id="logs-content" readonly class="logs-text"></textarea>
      </div>
    </div>
    <br /><br /><br /><br /><br />
    <image class="loader-image" src="../images?name=loading.gif" />
  </div>
  <div id="dashboard-page" class="">
    <div class="table-heading">
      <image class="nda-logo" src="../images?name=nda_logo.png" />
      <h3 class="nda-header">
        <span class="first-letter">N</span>ode <span class="first-letter">D</span>eployment <span
          class="first-letter">A</span>ssistant
      </h3>
    </div>
    <div>
      <span class="tooltip add-project">
        <input type="image" class="action-button-config" src="../images?name=settings.png"
          onclick="gotoPage('nda-config?view=true')" alt="Modify NDA configurations">
        <span class="tooltiptext add-project-tooltip config-tooltip">Modify NDA's configurations</span>
      </span>
    </div>
    <div>
      <span class="tooltip add-project">
        <input type="image" class="action-button" src="../images?name=add-project.png" onclick="gotoPage('process/add')"
          alt=" Add a new project">
        <span class="tooltiptext add-project-tooltip">Add a Nodejs Project</span>
      </span>
    </div>
    <div>
      <span id="stop-all-image" class="tooltip stop-all-project">
        &nbsp;<input type="image" class="action-button-stop" src="../images?name=stop-project.png"
          onclick="confirmSelection('process/stop-all','This will stop all the running projects. Do you want to proceed ?')"
          alt=" Stop this project">
        <span class="tooltiptext add-project-tooltip red-tooltip stop-all-tooltip">Stop all
          projects</span>
      </span>
    </div>
    <br />

    <%if (process.length < 1) { %>
      <br />
      <h3>Add a project by clicking the above button to start using the NDA features</h3>
      <% } %>

        <%if (process.length> 0) { %>
          <table class="styled-table">
            <thead>
              <tr>
                <th style="width: 3vw;">S.No</th>
                <th style="width: 9vw;">PID</th>
                <th style="width: 15vw;">Name</th>
                <th style="width: 10vw;">CPU</th>
                <th style="width: 5vw;">PORT</th>
                <th style="width: 18vw;">Created At</th>
                <th style="width: 18vw;">Last Run</th>
                <th style="width: 22vw;">Actions</th>
              </tr>
            </thead>
            <tbody>
              <% process.forEach(function(item,index){ %>
                <tr>
                  <td>
                    <%= index + 1 %>
                  </td>
                  <td id="pid-<%= item.UID %>">
                    <%= item.pid %>
                  </td>
                  <td style="word-wrap:break-word !important;">
                    <%= item.name %>
                  </td>
                  <%if (item.cpu!=='N/A' && parseFloat(item.cpu)> 89) { %>
                    <td id="cpu-<%= item.UID %>" class="danger-text">
                      <%= item.cpu %>%
                    </td>
                    <% } %>
                      <%if (item.cpu==='N/A' ) { %>
                        <td id="cpu-<%= item.UID %>">
                          N/A
                        </td>
                        <% } %>
                          <%if (item.cpu!=='N/A' && parseFloat(item.cpu) < 89 ) { %>
                            <td id="cpu-<%= item.UID %>">
                              <%= item.cpu %>%
                            </td>
                            <% } %>
                              <td>
                                <%= item.port %>
                              </td>
                              <td>
                                <%= item.createdAt %>
                              </td>
                              <%if (item.lastRunAt) { %>
                                <td>
                                  <%= item.lastRunAt %>
                                </td>
                                <% } %>
                                  <%if (!item.lastRunAt) { %>
                                    <td>
                                      N/A
                                    </td>
                                    <% } %>
                                      <td id="td-inactive-<%= item.UID %>">
                                        <span class="tooltip">
                                          <input type="image" src="../images?name=run-project.png"
                                            onclick="gotoPage('process/start?UID=<%= item.UID %>',true,'<%= item.UID %>')"
                                            alt="Start this project" class="action-button">
                                          <span class="tooltiptext">Start</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" src="../images?name=edit-project.png"
                                            onclick="gotoPage('process/add?edit=true&UID=<%= item.UID %>')"
                                            alt="Edit this project" class="action-button">
                                          <span class="tooltiptext">Edit</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" src="../images?name=delete-project.png"
                                            onclick="confirmSelection('process/delete?UID=<%= item.UID %>','Are you sure to delete the project - <%= item.name %> ?' )"
                                            alt="Delete this project" class="action-button">
                                          <span class="tooltiptext red-tooltip">Delete</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" src="../images?name=clone-project.png"
                                            onclick="confirmSelection('process/clone?UID=<%= item.UID %>','This will add a copy of the project `<%= item.name %>` to the project list. Do you wish to continue ?' )"
                                            alt="Clone this project" class="action-button">
                                          <span class="tooltiptext">Clone</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" class="action-button"
                                            src="../images?name=project-logs.png"
                                            onclick="gotoPage('logs/list?UID=<%= item.UID %>')" alt="Logs">
                                          <span class="tooltiptext">Logs</span>
                                        </span>
                                      </td>
                                      <td id="td-active-<%= item.UID %>">
                                        <span class="tooltip">
                                          <input type="image" class="action-button"
                                            src="../images?name=stop-project.png"
                                            onclick="gotoPage('process/stop?pid=<%= item.pid %>&UID=<%= item.UID %>',true,'<%= item.UID %>')"
                                            alt=" Stop this project">
                                          <span class="tooltiptext red-tooltip">Stop</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" class="action-button"
                                            src="../images?name=restart-project.png"
                                            onclick="gotoPage('process/restart?pid=<%= item.pid %>&UID=<%= item.UID %>',true,'<%= item.UID %>')"
                                            alt=" Restart this project">
                                          <span class="tooltiptext">Restart</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" src="../images?name=clone-project.png"
                                            onclick="confirmSelection('process/clone?UID=<%= item.UID %>','This will add a copy of the project `<%= item.name %>` to the project list. Do you wish to continue ?' )"
                                            alt="Clone this project" class="action-button">
                                          <span class="tooltiptext">Clone</span>
                                        </span>
                                        <span class="tooltip">
                                          <input type="image" class="action-button"
                                            src="../images?name=project-logs.png"
                                            onclick="gotoPage('logs/list?UID=<%= item.UID %>')" alt="Logs">
                                          <span class="tooltiptext">Logs</span>
                                        </span>
                                      </td>
                </tr>
                <% }) %>
            </tbody>
          </table>
          <% } %>
            <br />
            <br />
            <br />
  </div>
</body>

</html>