digitaleagenturnc/timemanagement/templates/timemanagement/tm_ab_management.html

{% extends "users/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% load counter_tag %}
{% load mathfilters %}
{% if request.user.profile.agency.module_timemanagement %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
<div class="content-section col-12">
  <h3>Abwesenheiten{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Bearbeiten Sie hier Ihre Abwesenheiten." class="far fa-question-circle"></i></small>{% endif %}   
  <small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
    <button class="btn btn-primary btn-sm" {% if user|usergperm:"absencemanager" %} onclick="javascript:showNewAbsenceByUser()" {% else %} onclick="javascript:loadNewAbsenceByUser({{request.user.pk}})" {% endif %} style="float: right;"><i class="fas fa-plus"></i>&nbsp;Abwesenheit</button> 
  </h3>  
  <hr>  
  <div >    
  <ul class="nav nav-tabs " id="absencetabs" role="tablist" >
  <li class="nav-item">
    <a class="nav-link active" id="team-tab" data-toggle="tab" href="#team" role="tab" aria-controls="team" aria-selected="false">Teamübersicht</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="userown-tab" data-toggle="tab" href="#userown" role="tab" aria-controls="userown" aria-selected="false">Meine Abwesenheiten</a>
  </li>
  {% if user|usergperm:"absencemanager" %}
  <li class="nav-item ">
    <a class="nav-link" id="absencemanagercontent-tab"  data-toggle="tab" href="#absencemanagercontent" role="tab" aria-controls="absencemanagercontent" aria-selected="false">    
    Ausstehende Anträge
    {% if needtoconfirm|length > 0 %} 
    <span class="badge badge-primary badge-counter" style="float: right !important; margin-right: -20px; margin-top: -10px;">{{needtoconfirm|length}}</span>
    {%endif%}
    </a>
  </li>
  <li class="nav-item ">
    <a class="nav-link" id="absencemanagercontent_all-tab"  data-toggle="tab" href="#absencemanagercontent_all" role="tab" aria-controls="absencemanagercontent_all" aria-selected="false">    
    Alle Abwesenheiten
    </a>
  </li>
  {% endif %}
</ul>
</div>
<div class="tab-content" id="absencetabsContent">

<div class="tab-pane fade" id="team" role="tabpanel" aria-labelledby="team-tab">
  <div>
    <div id="rendered_table">
      Lade Kalenderdaten...
    </div>    
  </div>
</div>

<div class="tab-pane fade" id="userown" role="tabpanel" aria-labelledby="team-tab">
  {% block ab_userown %}
       {% include "timemanagement/tm_ab_userown.html" %}
    {% endblock %}
</div>

{% if user|usergperm:"absencemanager" %}
<div class="tab-pane fade" id="absencemanagercontent" role="tabpanel" aria-labelledby="team-tab">
  {% block ab_toconfirm %}
       {% include "timemanagement/tm_ab_toconfirm.html" %}
    {% endblock %}
</div>

<div class="tab-pane fade" id="absencemanagercontent_all" role="tabpanel" aria-labelledby="team-tab">
  {% block ab_all %}
       {% include "timemanagement/tm_ab_all.html" %}
    {% endblock %}
</div>
{% endif %}


</div>
</div>
<!-- LOADER OVERLAY -->
<div id="overlay" style="display: none;">
  <div class="loader"></div>
</div>
<!-- MODAL -->
 <div class="modal fade" tabindex="-1" role="dialog" id="startAbsenceProgress" data-backdrop="static">
  <div class="modal-dialog" role="document" style="min-width: 43% !important;">    <div class="modal-content">
      <div class="modal-header">
        <h5>Abwesenheit für <b><span id="username_abscence"></span></b> beantragen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="restholidays_container">
          <!-- ONE YEAR -->
          <h5>
            <b style="color: red">
              <span id="detail_tocontract"></span>&nbsp;Tage&nbsp;/&nbsp;<span id="restholidays"></span>&nbsp;verbleibend im Jahr&nbsp;<span id="holidayyear"></span>
            </b>
            <button class="btn btn-secondary btn-sm" style="float: right;" onclick="javascript:$('#holiday_detail_div').toggle()"><i class="fas fa-eye" id="show_detailview"></i></button>
          </h5> 
          <!-- TWO YEARS -->    
          <div id="two_years" style="display: none;">          
          <h5><b style="color: red"><span id="detail_tocontract_next"></span>&nbsp;Tage&nbsp;/&nbsp;<span id="restholidays_next"></span>&nbsp;verbleibend im Jahr&nbsp;<span id="holidayyear_next"></span></b>          
          </h5>  
          </div>          
          <div id="holiday_detail_div" style="display: none"> 
            <hr>
            <div class="col-6" style="margin-left: -10px">
            <h6>Detailansicht</h6>           
              <table class="table table-sm">
              <tbody>
                <tr>                  
                  <td>Gewünschte Tage</td>
                  <td><span id="detail_tocontract_overall"></span></td>
                </tr>
                <tr>
                  <td>Resturlaub</td>
                  <td><span id="detail_rest"></span></td>
                </tr>
                <tr>
                  <td>Urlaub nächstes Jahr</td>
                  <td><span id="detail_next"></span> + Rest (<span id="detail_next_rest"></span>)</td>
                </tr>
                <tr>
                  <td><b>Summe Urlaubstage</b></td>
                  <td><b><span id="detail_sum"></span></b></td>                  
                </tr>                
              </tbody>
            </table>
            </div>               
          </div>                
        </div>
        <div id="noholidays_container" style="display: none;">
          <h6>Abwesenheitsgrund ohne Urlaubsanspruch</h6>        
        </div>
        <hr>
        <form method="POST" class="">
          <input type="hidden" name="form_type" value="absenceform">
          {% csrf_token %}
          {{abscenceform.media}}
          <div>
            <div class="row">
              <div class="col-6">                
                {{abscenceform.start |as_crispy_field }}
                {{abscenceform.startday_info |as_crispy_field }}
                
              </div>
              <div class="col-6">
                {{abscenceform.end |as_crispy_field }}
                {{abscenceform.endday_info |as_crispy_field }}                
              </div>              
            </div>
            <hr>
            <div class="row" >
              <div class="col-6">       
                {{abscenceform.reason|as_crispy_field}}
              </div>
              <div class="col-6">       
                {{abscenceform.representator|as_crispy_field}}
              </div>
            </div>
            <div class="row">
              <div class="col-12">       
                {{abscenceform.info|as_crispy_field}}                
              </div>
            </div>
          </div>
          <div id="otherholidays" style="display: none;">
            <hr>
          In diesem Zeitraum haben bereits folgende Mitarbeiter Abwesenheiten:            
          <br />
            <div id="otherholidays_users"></div>
          </div>
          <div id="ownholidays" style="display: none;">
            <hr>
          In diesem Zeitraum haben Sie bereits folgende Abwesenheiten:            
          <br />
            <div id="ownholidays_users"></div>
          </div>
          <!-- Fields for rest-logic -->
          <div style="display: none;">
            {{abscenceform.nextmonth}}               
            {{abscenceform.prevmonth}}               
            {{abscenceform.nextyear}}               
            {{abscenceform.prevyear}}               
            {{abscenceform.activemonth}}               
            {{abscenceform.activeyear}}     
            {{abscenceform.userid}}                      
          </div>          
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary" id="start_absence_contract">Abwesenheit beantragen</button>
        <button type="button" class="btn btn" data-dismiss="modal">Abbrechen</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- MODAL -->
 <div class="modal fade" tabindex="-1" id="updateAbsenceToConfirm" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Abwesenheitsantrag</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="confirmcontent"></div>          
      </div>
      <div class="modal-footer">          
        <button type="button" class="btn" data-dismiss="modal" onclick="javascript:closeOnly()">Schließen</button>
      </div>        
    </div>
  </div>
</div>

 <div class="modal fade" tabindex="-1" id="updateAbsenceToConfirmSecond" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Abwesenheitsantrag</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="confirmcontentsecond"></div> 
      </div>
      <div class="modal-footer">          
        <button type="button" class="btn btn-primary" onclick="javascript:confirmAbscenceFinal()">Bestätigung</button>
        <button type="button" class="btn btn" data-dismiss="modal">Abbrechen</button>
      </div>        
    </div>
  </div>
</div>
  <style>
  .tm-ab-tdhover:hover{
    background-color: #858796 !important;
  } 
#timetable_team .ui-selecting {
  background: #858796;
}
#timetable_team .ui-selected {
  background: #858796;
  color: white;
}
#timetable_team {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#timetable_team  {
  margin: 0px;
  padding: 0.4em;
  font-size: 1em;
  height: 10px;
}
  </style>
  <style type="text/css">
      .commentimg {
        border-radius: 50%;
        width: 18%;
      }
    </style>
<style>



  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>

<style>
.loader {
  position: relative;
  border: 7px solid #d3d3d3;
  border-radius: 50%;
  border-top: 7px solid red;
  width: 70px;
  height: 70px;
  left:50%;
  top:35%;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}
#overlay{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background: black;
    opacity: .4;
}
.container{
    position:relative;
    height: 300px;
    width: 200px;
    border:1px solid red;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<script>

var absencetowork = "";
var absencestring_confirm = "";
var absencestring_noconfirm = "";
var newconfstat = "";
var closeonly = false;

function closeOnly(){
  closeonly = true;
}

/*
$("#show_detailview").hover(
  function() {
    $("#holiday_detail_div").show();
  }, function() {
    $("#holiday_detail_div").hide();
  }
);
*/

function confirmAbscenceFinal(){
  $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "confirmornotabscence",     
      absencetowork : absencetowork,
      newconfstat : newconfstat,
      info : $("#id_confirm_info").val(),
      activemonth : $("#id_activemonth").val(),
      activeyear : $("#id_activeyear").val(),      
    },
    success : function(data){
      location.href = "/tm/abs/" + data["activemonth"] +"/" + data["activeyear"]
    }
  });
}

function openModalABChangeTable(idtopen){ 
  closeonly = false;
  absencetowork = idtopen;
   $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrenderedform",     
      abscenceid : idtopen
    },
    beforeSend: function(request) {
      request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    success : function(data){
      $("#confirmcontent").html(data);
      $("#updateAbsenceToConfirm").modal("show");  
    }
  });
}

function noconfirmAbsence(id){
  newconfstat = 2;
  $("#updateAbsenceToConfirm").modal("toggle");  
    $('#updateAbsenceToConfirm').on('hidden.bs.modal', function () {
      if(closeonly == false){
        $("#updateAbsenceToConfirmSecond").modal("toggle");
        $("#confirmcontentsecond").html(absencestring_noconfirm);
      }      
    });
  
}

function confirmAbsence(id){
  newconfstat = 0;
  $("#updateAbsenceToConfirm").modal("toggle");
  $('#updateAbsenceToConfirm').on('hidden.bs.modal', function () {
    if(closeonly == false){
      $("#updateAbsenceToConfirmSecond").modal("toggle");
      $("#confirmcontentsecond").html(absencestring_confirm);
    }    
  });
}

//Initial Load
function loaddjango(){

  $("#id_activemonth").val("{{activemonth}}")
  $("#id_activeyear").val("{{activeyear}}")
  $("#id_prevmonth").val("{{prevmonth}}")
  $("#id_nextmonth").val("{{nextmonth}}")
  $("#id_prevyear").val("{{prevyear}}")
  $("#id_nextyear").val("{{nextyear}}")

  $.ajax({
    type: "GET",
    url: "{% url 'tm-ajax' %}",
    data:{
      action : "getrenderedtable",     
      activeyear : {{activeyear}},
      activemonth : {{activemonth}} 
    },
    beforeSend: function(request) {
      request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    },
    success : function(data){
      $("#rendered_table").html(data)
    }
  });
}



$(document).ready(function(){
  loaddjango();  

   var activeTab = localStorage.getItem('activeTabAbsence');
       
    if(activeTab){       

     if($('#' + activeTab).find().prevObject.length != 0){
        $('#' + activeTab).tab('show');         
        $(".nav-link").removeClass("active");
        
        $("#" + activeTab + "-tab").addClass("active");
        
      }
      else{

         $("#team-tab").addClass("active");
        $('#team').tab('show');
       }
    }
    else{
      
      $("#team-tab").addClass("active");
        $('#team').tab('show');
    }


});

$('#absencetabs a').on('click', function (e) {
    e.preventDefault();
    lastview_name = $(this)[0]['hash'].substring(1);
    localStorage.setItem('activeTabAbsence', lastview_name);          
  });

</script>



{% else %}
<h3>Das Modul Abwesenheits- und Zeiterfassung wurde in ihrer Agentur deaktiviert.</h3>
{% endif %}



{% if missinguserdata|length > 0 %}
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" id="missingdatainfo">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Fehlende Mitarbeiterinformationen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Zur Berechnung der Abwesenheiten und Urlaub müssen alle Mitarbeiter ein Einstellungsdatum haben. Dies fehlt bei folgenden Mitarbeitern:</p>
        {% for m in missinguserdata %}
          {{m.first_name}} {{m.last_name}}<br />
        {% endfor %}
        <br />
        Bitte ergänzen Sie das Datum, da sonst keine Urlaubstage berechnet werden können.
      </div>
      <div class="modal-footer">        
        <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
    $("#missingdatainfo").modal("toggle");

    $('#missingdatainfo').on('hidden.bs.modal', function (e) {
      location.href = "{% url 'dasettings' %}";
    })

  })
</script>
{% endif %}

{% endblock content %}