cityssm/attendance-tracking

<%- include('_header'); -%>

<% let activeTab = '' %>

<div class="columns">
  <div class="column is-3">
    <aside class="menu" id="menu--attendance" style="position:sticky;top:60px">
      <% if ((configFunctions.getConfigProperty('features.attendance.absences') && permissionFunctions.hasPermission(user, 'attendance.absences.canView')) || (configFunctions.getConfigProperty('features.attendance.returnsToWork') && permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canView'))) { %>
        <h2 class="menu-label">
          Incoming Calls
        </h2>
        <ul class="menu-list">
          <% if (configFunctions.getConfigProperty('features.attendance.absences') && permissionFunctions.hasPermission(user, 'attendance.absences.canView')) { %>
            <% activeTab = 'absences' %>
            <li>
              <a class="is-block is-active" href="#tab--absences">
                <div class="columns is-gapless is-mobile">
                  <div class="column is-narrow">
                    <span class="icon">
                      <i class="fas fa-fw fa-sign-out-alt" aria-hidden="true"></i>
                    </span>
                  </div>
                  <div class="column">
                    Absence Requests
                  </div>
                  <div class="column is-narrow">
                    <span class="tag has-tooltip-left" data-tooltip="Past 24 Hours">0</span>
                  </div>
                </div>
              </a>
            </li>
          <% } %>
          <% if (configFunctions.getConfigProperty('features.attendance.returnsToWork') && permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canView')) { %>
            <% activeTab = activeTab === '' ? 'returnsToWork' : activeTab %>
            <li>
              <a class="is-block <%= activeTab === 'returnsToWork' ? 'is-active' : '' %>" href="#tab--returnsToWork">
                <div class="columns is-gapless is-mobile">
                  <div class="column is-narrow">
                    <span class="icon">
                      <i class="fas fa-fw fa-sign-in-alt" aria-hidden="true"></i>
                    </span>
                  </div>
                  <div class="column">
                    Returns to Work
                  </div>
                  <div class="column is-narrow">
                    <span class="tag has-tooltip-left" data-tooltip="Past 24 Hours">0</span>
                  </div>
                </div>
              </a>
            </li>
          <% } %>
        </ul>
      <% } %>
      <% if (configFunctions.getConfigProperty('features.attendance.callOuts') && permissionFunctions.hasPermission(user, 'attendance.callOuts.canView')) { %>
        <h2 class="menu-label">
          Outgoing Calls
        </h2>
        <ul class="menu-list">
          <% activeTab = activeTab === '' ? 'callOuts' : activeTab %>
          <li>
            <a class="<%= activeTab === 'callOuts' ? 'is-active' : '' %>" href="#tab--callOuts">
              <span class="icon">
                <i class="fas fa-fw fa-phone" aria-hidden="true"></i>
              </span>
              <span>Call Out Lists</span>
            </a>
          </li>
        </ul>
      <% } %>
      <% if (configFunctions.getConfigProperty('features.attendance.afterHours') && permissionFunctions.hasPermission(user, 'attendance.afterHours.canView')) { %>
        <h2 class="menu-label">
          After Hours
        </h2>
        <ul class="menu-list">
          <% activeTab = activeTab === '' ? 'afterHours' : activeTab %>
          <li>
            <a class="is-block <%= activeTab === 'afterHours' ? 'is-active' : '' %>" href="#tab--afterHours">
              <div class="columns is-gapless is-mobile">
                <div class="column is-narrow">
                  <span class="icon">
                    <i class="fas fa-fw fa-clock" aria-hidden="true"></i>
                  </span>
                </div>
                <div class="column">
                  After Hours
                </div>
                <div class="column is-narrow">
                  <span class="tag has-tooltip-left" data-tooltip="Past 24 Hours">0</span>
                </div>
              </div>
            </a>
          </li>
        </ul>
      <% } %>
      <h2 class="menu-label">
        Reporting
      </h2>
      <ul class="menu-list">
        <% activeTab = activeTab === '' ? 'employees' : activeTab %>
        <li>
          <a class="<%= activeTab === 'employees' ? 'is-active' : '' %>" href="#tab--employees">
            <span class="icon">
              <i class="fas fa-fw fa-hard-hat" aria-hidden="true"></i>
            </span>
            <span>Employees</span>
          </a>
        </li>
        <% if (configFunctions.getConfigProperty('features.help')) { %>
          <li class="is-hidden-mobile">
            <a href="https://cityssm.github.io/attendance-tracking/docs/employeeAttendance.html" target="_blank" rel="noopener noreferrer">
              <span class="icon">
                <i class="fas fa-fw fa-question-circle" aria-hidden="true"></i>
              </span>
              <span>Help</span>
            </a>
          </li>
        <% } %>
      </ul>
    </aside>
  </div>
  <div class="column">
    <div class="tabs-container" id="tabs-container--attendance">
      <% if (configFunctions.getConfigProperty('features.attendance.absences') && permissionFunctions.hasPermission(user, 'attendance.absences.canView')) { %>
        <article class="<%= activeTab === 'absences' ? '' : 'is-hidden' %>" id="tab--absences">
          <%- include('_attendance.absences.ejs'); -%>
        </article>
      <% } %>
      <% if (configFunctions.getConfigProperty('features.attendance.returnsToWork') && permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canView')) { %>
        <article class="<%= activeTab === 'returnsToWork' ? '' : 'is-hidden' %>" id="tab--returnsToWork">
          <%- include('_attendance.returnsToWork.ejs'); -%>
        </article>
      <% } %>
      <% if (configFunctions.getConfigProperty('features.attendance.callOuts') && permissionFunctions.hasPermission(user, 'attendance.callOuts.canView')) { %>
        <article class="<%= activeTab === 'callOuts' ? '' : 'is-hidden' %>" id="tab--callOuts">
          <%- include('_attendance.callOuts.ejs'); -%>
        </article>
      <% } %>
      <% if (configFunctions.getConfigProperty('features.attendance.afterHours') && permissionFunctions.hasPermission(user, 'attendance.afterHours.canView')) { %>
        <article class="<%= activeTab === 'afterHours' ? '' : 'is-hidden' %>" id="tab--afterHours">
          <%- include('_attendance.afterHours.ejs'); -%>
        </article>
      <% } %>
      <article class="<%= activeTab === 'employees' ? '' : 'is-hidden' %>" id="tab--employees">
        <%- include('_attendance.employees.ejs'); -%>
      </article>
    </div>
  </div>
</div>

<datalist id="datalist--employeePropertyNames">
  <% for (const propertyName of employeePropertyNames) { %>
  <option value="<%= propertyName %>" />
  <% } %>
</datalist>

<datalist id="datalist--returnShifts">
  <% for (const returnShift of returnShifts) { %>
  <option value="<%= returnShift %>" />
  <% } %>
</datalist>

<%- include('_footerA'); -%>

<script src="<%= urlPrefix %>/javascripts/attendance.min.js"></script>

<script>
  exports.employees = <%- JSON.stringify(employees) %>;
  
  <% if (configFunctions.getConfigProperty('settings.employeeNumberRegularExpression')) { %>
    exports.employeeNumberRegularExpression = <%- configFunctions.getConfigProperty('settings.employeeNumberRegularExpression').toString() %>;
  <% } %>

  exports.recentDays = <%- configFunctions.getConfigProperty('settings.recentDays') %>;
  exports.updateDays = <%- configFunctions.getConfigProperty('settings.updateDays') %>;
</script>

<% 
  if (
    (configFunctions.getConfigProperty('features.attendance.absences') && permissionFunctions.hasPermission(user, 'attendance.absences.canView'))
    || (configFunctions.getConfigProperty('features.attendance.returnsToWork') && permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canView'))) { %>
  <script>
    exports.absenceRecords = <%- JSON.stringify(absenceRecords) %>;
    exports.absenceTypes = <%- JSON.stringify(absenceTypes) %>;

    exports.returnToWorkRecords = <%- JSON.stringify(returnToWorkRecords) %>;

    exports.absencesCanUpdate = <%= permissionFunctions.hasPermission(user, 'attendance.absences.canUpdate') ? 'true' : 'false' %>;
    exports.absencesCanManage = <%= permissionFunctions.hasPermission(user, 'attendance.absences.canManage') ? 'true' : 'false' %>;
    exports.returnsToWorkCanUpdate = <%= permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canUpdate') ? 'true' : 'false' %>;
    exports.returnsToWorkCanManage = <%= permissionFunctions.hasPermission(user, 'attendance.returnsToWork.canManage') ? 'true' : 'false' %>;
  </script>
  <script src="<%= urlPrefix %>/javascripts/attendance.callIns.min.js"></script>
<% } %>

<% if (configFunctions.getConfigProperty('features.attendance.callOuts') && permissionFunctions.hasPermission(user, 'attendance.callOuts.canView')) { %>
  <script>
    exports.callOutLists = <%- JSON.stringify(callOutLists) %>;
    exports.callOutResponseTypes = <%- JSON.stringify(callOutResponseTypes) %>;
    exports.employeeEligibilityFunctionNames = <%- JSON.stringify(employeeEligibilityFunctionNames) %>;
    exports.employeeSortKeyFunctionNames = <%- JSON.stringify(employeeSortKeyFunctionNames) %>;
 </script>
  <script src="<%= urlPrefix %>/javascripts/main.callOuts.min.js"></script>
  <script src="<%= urlPrefix %>/javascripts/attendance.callOuts.min.js"></script>
<% } %>

<% if (configFunctions.getConfigProperty('features.attendance.afterHours') && permissionFunctions.hasPermission(user, 'attendance.afterHours.canView')) { %>
  <script>
    exports.afterHoursRecords = <%- JSON.stringify(afterHoursRecords) %>;
    exports.afterHoursReasons = <%- JSON.stringify(afterHoursReasons) %>;

    exports.afterHoursCanUpdate = <%= permissionFunctions.hasPermission(user, 'attendance.afterHours.canUpdate') ? 'true' : 'false' %>;
  </script>
  <script src="<%= urlPrefix %>/javascripts/attendance.afterHours.min.js"></script>
<% } %>

<script src="<%= urlPrefix %>/javascripts/attendance.employees.min.js"></script>

<%- include('_footerB'); -%>