{{ define "progressbar" }}
<link href="/static/css/pages/progressbar.css" rel="stylesheet">

<div class="modal" id="ProgressBarModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-max-content-size">
    <div class="modal-content modal-progress">
      <div class="modal-header info-header">
        <span class="modal-title"><i class="icon-alarm-info-header"></i><span id="progressBarTitle">Gets changed when calling showProgressBar();</span></span>
      </div>
      <div class="modal-body-info">
        <table class="container-data" style="width: calc(100% - 20px);">
          <tr class="row-data progressDebugInfo">
            <td class="col-data-label-progressbar">Start Time</td>
            <td class="col-data-label-progressbar" id="progressDebugStartTime">Gets changed when calling showProgressBar();</td>
          </tr>
          <tr class="row-data">
            <td class="col-data-label-progressbar" id="progressCurrentMessage" colspan="2">This is the current update message</td>
          </tr>
          <tr class="row-data">
            <td class="col-data-label-progressbar" colspan="2">
              <div class="progress">
                <div id="progressBarFill" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
              </div>
            </td>
          </tr>
          <tr class="row-data">
            <td class="col-data-label-bold" colspan="2">Estimated Time Remaining: <span  style="font-weight: 400;" id="progressEstimatedTime">1:30</span></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" charset="utf-8">
  document.addEventListener('DOMContentLoaded', function () {
    sessionStorage.removeItem("currentProgressBar");  // Ensures we are starting with a blank slate
  });

  function getProgressBarURLParameter (guid) {
    return "guid=" + guid;
  }

  function displayProgressBar(dialogTitle, firstMessage, callback, initialProgressValue = 0, displayDebugInfo = false) {
    function getCurrentProgressBar() {
      return sessionStorage.getItem(progressBarIds.SESSION_VAR);
    }

    function removeCurrentProgressBar() {
      sessionStorage.removeItem(progressBarIds.SESSION_VAR);
    }

    function saveCurrentProgressBar(guid) {
      sessionStorage.setItem(progressBarIds.SESSION_VAR, guid)
    }

    const progressBarIds = {
      MESSAGE: "#progressCurrentMessage",
      BAR_FILL: "#progressBarFill",
      TIME_REMAINING: "#progressEstimatedTime",
      START_TIME: "#progressDebugStartTime",
      DIALOG_TITLE: "#progressBarTitle",
      MODAL: "ProgressBarModal",   // Not including the '#' prefix on purpose
      SESSION_VAR: "currentProgressBar", // Used for session storage
      BAR_FILL_EVENTS:  "webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done"
    };

    /**
     * Returns a version 4 UUID
     *    More information on what exactly a version 4 UUID is can be found here: https://en.wikipedia.org/wiki/Universally_unique_identifier#Version_4_(random)
     *
     * @returns {string} a unique identifier with the format: xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx
     */
    function uuidv4() {
      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
        (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
      );
    }

    function closeProgressBar() {
      const delays = {
        AFTER_DONE: 300,
        BACKUP_KILL: 2000
      };

      // Sometimes the "kill message" arrives after the websocket has been closed, so we don't get that final message of 100% completed, so when it closes,
      // we ensure that the progress bar is set to 100% complete.
      updateProgressBar("Finishing operation", 100);

      // Wait for the animation to finish, then actually close the dialog because it makes the experience nicer seeing that the progress bar completed
      $(progressBarIds.BAR_FILL).bind(progressBarIds.BAR_FILL_EVENTS, function() {
        setTimeout(function (){
          hideDialog(progressBarIds.MODAL);
        }, delays.AFTER_DONE);
        $(this).off('.done');
      });

      // As a backup in case a client does not use a modern browser, close the window if it is still open after 2 seconds
      setTimeout(function () {
        if ($("#" + progressBarIds.MODAL).css("display") != "none") {
          hideDialog(progressBarIds.MODAL);
        }
      }, delays.BACKUP_KILL);
      removeCurrentProgressBar();
    }

    const currentProgressBarGUID = getCurrentProgressBar();
    const thisClientGUID = currentProgressBarGUID || uuidv4();

    function updateProgressBar(newMessage, percentage) {

      function convertToTimeFormat (milliseconds) {
        if (milliseconds < 1000) {
          return "less than a second";
        }
        const zeroPad = (num, places) => String(num).padStart(places, '0')
        const seconds = milliseconds / 1000;
        const minutes = parseInt(seconds / 60);
        const remainingSeconds = parseInt(seconds % 60);
        return minutes + ":" + zeroPad(remainingSeconds, 2);
      }

      const simpleProgress = parseInt(percentage).toString();
      $(progressBarIds.MESSAGE).text(newMessage);
      $(progressBarIds.BAR_FILL).attr("aria-valuenow", simpleProgress);
      $(progressBarIds.BAR_FILL).css("width", percentage + "%");
      $(progressBarIds.BAR_FILL).text(simpleProgress + "%");
      if (simpleProgress > 0) {
        const timeNow = Date.now();
        const timeStart = parseInt($(progressBarIds.START_TIME).text());
        const deltaTime = timeNow - timeStart;
        const timePerPercent = deltaTime / percentage;
        const estimatedTimeLeft = ((timePerPercent * 100) + timeStart) - timeNow // in milliseconds
        $(progressBarIds.TIME_REMAINING).text(convertToTimeFormat(estimatedTimeLeft));
      } else {
        $(progressBarIds.TIME_REMAINING).text("Calculating...");
      }
    }

    $(progressBarIds.BAR_FILL).unbind(progressBarIds.BAR_FILL_EVENTS);
    $(progressBarIds.DIALOG_TITLE).text(dialogTitle);
    $(".progressDebugInfo").css("display", (displayDebugInfo) ? "table-row" : "none");

    if (!currentProgressBarGUID) {
      $(progressBarIds.START_TIME).text(Date.now());
      updateProgressBar(firstMessage, 0);
      saveCurrentProgressBar(thisClientGUID);
      // GUID is used to connect the request IP and this particular progress bar that has just been created, so
      // if there are multiple progress bars at the same time, you only update your progress bar
      const urlParameters = [
        "guid=" + thisClientGUID,
        "initialProgress=" + initialProgressValue
      ];
      let socket = new WebSocket("ws://" + window.location.hostname + ":8080/progressBar?" + urlParameters.join("&"));
      socket.onopen = function () {
        displayDialog(progressBarIds.MODAL);
      };

      socket.onmessage = function (event) {
        const msg = JSON.parse(event.data);
        // The websocket will get all websocket messages coming to this IP address; we only want to
        // update the instance of the progress bar that matches the GUID we sent down to rippaview in a
        // '/progressBar?' request
        if (msg.guid == thisClientGUID) {
          updateProgressBar(msg.displayMessage, msg.progress);
          if (msg.firstMessage) {
            callback(thisClientGUID);
          }
        }
      };

      socket.onerror = function(event) {
        // When there is an error with the websocket, we want to hide the progress bar
        // so the user can continue to work with the page/system
        closeProgressBar();
      };

      socket.onclose = function (event) {
        // When we set the kill message in rippaview, the web socket will close, which then triggers
        // the progress bar to get hidden because the operation has completed
        closeProgressBar();
      };
    } else {
      callback(thisClientGUID);
    }
  }
</script>

{{ end }}