digitaleagenturnc/timemanagement/templates/timemanagement/tm_ab_management.html

{% extends "users/base.html" %}
{% block content %}
{% load crispy_forms_tags %}
{% load counter_tag %}
{% if request.user.profile.agency.module_timemanagement %}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<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 %}</h3>  
  <hr>

  <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">
     {% if needtoconfirm|length > 0 %} 
      <span class="badge badge-primary badge-counter" style="float: right; margin-left: 5px; margin-top: 0px">{{needtoconfirm|length}} </span>&nbsp;
    {%endif%}
    Ausstehende Anträge
    </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 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">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Abwesenheit 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">
        <h5>Abwesenheit für <b><span id="username_abscence"></span></b> beantragen</h5>
        <hr>
        <form method="POST">
          <input type="hidden" name="form_type" value="absenceform">
          {% csrf_token %}
          {{abscenceform.media}}
          {{abscenceform|crispy}}
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Abwesenheit beantragen</button>
        <button type="button" class="btn btn-secondary" 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 btn-secondary" 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-secondary" 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;
}

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 %}
{% endblock content %}