ihrm/base/templates/shift_request/shift_request_view.html

{% extends "index.html" %}
{% block content %}
{% load i18n %}
{% load basefilters %}
{% load attendancefilters %}
{% include 'shift_request/shift_request_nav.html' %}

<div class="oh-checkpoint-badge mb-2" id="selectedShifts" data-ids="[]" data-clicked="" style="display:none;" >
  {% trans "Selected Shifts" %}
</div>
<div  class="oh-wrapper">

  <!-- start of Quick filters  -->
    <div class="d-flex flex-row-reverse" style="height:3px;">
      <span
        class="m-3 review_ongoing"
        onclick="$('[name=canceled]').val('true');$('[name=approved]').val('unknown');$('[name=canceled]').first().change();$('.filterButton').click()"
        style="cursor: pointer"
      >
        <span
          class="oh-dot oh-dot--small me-1"
          style="background-color: red"
        ></span>
        {% trans "Rejected" %}
      </span>
      <span
        class="m-3 paid"
        onclick="$('[name=approved]').val('true');$('[name=canceled]').val('unknown');$('[name=approved]').first().change();$('.filterButton').click()"
        style="cursor: pointer"
      >
        <span
          class="oh-dot oh-dot--small me-1"
          style="background-color: yellowgreen"
        ></span>
        {% trans "Approved" %}
      </span>
    </div>
  <!-- end of quick filters  -->

  <div
    class="oh-checkpoint-badge text-success mb-2"
    id="selectAllShifts"
    style="cursor: pointer"
    >
      {% trans "Select All Shifts" %}
    </div>
    <div
    class="oh-checkpoint-badge text-secondary mb-2"
    id="unselectAllShifts"
    style="cursor: pointer"
    >
      {% trans "Unselect All Shifts" %}
    </div>
    <div
    class="oh-checkpoint-badge text-info mb-2"
    id="exportShifts"
    style="cursor: pointer;"
    >
      {% trans "Export Shifts" %}
    </div>
    <div class="oh-checkpoint-badge text-danger mb-2" id="selectedShowShifts" style="display: none"></div>


    <div class="oh-tabs">
      <ul class="oh-tabs__tablist">
        <li class="oh-tabs__tab oh-tabs__tab--active" data-target="#shift_request">
          {% trans "Shift Requests" %}
        </li>
        <li class="oh-tabs__tab" data-target="#allocated_shift">
          {% trans "Allocated Shift Requests" %}
        </li>
      </ul>  
      <div id="view-container">
        {% include 'shift_request/htmx/requests.html' %}
      </div>
</div>


<div
  class="oh-modal"
  id="shiftRequestModalUpdate"
  role="dialog"
  aria-labelledby="shiftRequestModalUpdate"
  aria-hidden="true"
>
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h5 class="oh-modal__dialog-title" id="shiftRequestModalUpdateLabel"
        >{% trans "Update Request" %}</span
      >
      <button class="oh-modal__close--custom" aria-label="Close" onclick="$(this).parents().closest('.oh-modal--show').toggleClass('oh-modal--show')">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    
    <div class="oh-modal__dialog-body" id='shiftRequestModalUpdateBody'>
    </div>
  </div>
</div>

<div
  class="oh-modal" style="z-index: 60;"
  id="shiftRequestDetailModal"
  role="dialog"
  aria-labelledby="shiftRequestDetailModal"
  aria-hidden="true"
>
  <div class="oh-modal__dialog">
    <div class="oh-modal__dialog-header">
      <h2
        class="oh-modal__dialog-title"
        id=""
      >
        {% trans "Details" %}
      </h2>
      <button class="oh-modal__close" aria-label="Close">
        <ion-icon name="close-outline"></ion-icon>
      </button>
    </div>
    <div
      class="oh-modal__dialog-body oh-modal__dialog-relative"
      id="shiftRequestDetailTarget"
    ></div>
  </div>
</div>

<div class="oh-activity-sidebar" id="activitySidebar">
  <div class="oh-activity-sidebar__header">
    <a
    style="cursor: pointer;"
    onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
      <ion-icon
      name="chevron-back-outline"
      class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
      data-target="#activitySidebar"
      ></ion-icon>
    </a>
    <span class="oh-activity-sidebar__title"> {% trans "Comments" %} </span>
  </div>
  <div class="oh-activity-sidebar__body" id="commentContainer">
  </div>
</div>


<script>
  // This lines is used to set default selected stage for exits lines

  function enlargeImage(src,$element) {
      $(".enlargeImageContainer").empty()
      var enlargeImageContainer = $element.parents().closest("li").find(".enlargeImageContainer")
      enlargeImageContainer.empty()
      style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
      var enlargedImage = $('<iframe>').attr({ src: src, style: style })
      var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
      enlargeImageContainer.append(enlargedImage)
      enlargeImageContainer.append(name)
      setTimeout(function () {
          enlargeImageContainer.show()

          const iframe = document.querySelector('iframe').contentWindow
          var iframe_document = iframe.document
          iframe_image = iframe_document.getElementsByTagName('img')[0]
          $(iframe_image).attr('style', 'width:100%; height:100%;')
      }, 100)
  }

  function hideEnlargeImage() {
      var enlargeImageContainer = $('.enlargeImageContainer')
      enlargeImageContainer.empty()
  }

  $(document).on('click', function (event) {
      if (!$(event.target).closest('#enlargeImageContainer').length) {
          hideEnlargeImage()
      }
  })  
  function submitForm(elem) {
    $(elem).siblings(".add_more_submit").click();
}
</script>



{% endblock content %}