digitaleagenturnc/orga/templates/orga/orga_single.html

{% extends "users/base.html" %}
{% load counter_tag %}
{% block content %}
<div class="content-section">
  <h3>Bereiche und Aufgaben von {{user_first_name}} {{user_last_name}}<span style="float: right">
    {% if user|usergperm:"usermanager" %} 
    <button type="button" id="activatechangingorder" style="float: right" class="btn btn-secondary btn-sm" onclick="javascript:activateChangeTaskOrder()" data-toggle="tooltip" data-placement="top" title="Reihenfolge der Tätigkeiten anpassen"><small><i class="fas fa-pen"></i></small></button>
    <button type="button" id="changingorder" style="float: right; display: none" class="btn  btn-primary btn-sm" onclick="javascript:activateChangeTaskOrder()" data-toggle="tooltip" data-placement="top" title="Reihenfolge der Tätigkeiten anpassen"><small><i class="fas fa-check"></i></small></button>     
    {% endif %}
  </span></h3>
  <hr>
  <div class="media">
  <img class="img-profile" width="12%"  src="{{ imageurl }}" >
    <div class="media-body">              
        <div class="row  ml-2">
            <div class="col-3">
                <h6><b>Name</b></h6>
                <p>
                    {{ user_first_name }} {{ user_last_name }}
                </p>
                <h6><b>Agenturfunktion</b></h6>
                <p>
                    {{ userfunc }}
                </p>
                 <h6><b>E-Mail</b></h6>
                <p>
                    <a href="mailto:{{ mail }}">{{ mail }}</a>
                </p>
            </div>  
            <div class="col-md-3">
                <h6><b>Tätigkeit</b></h6>
                <p>
                    {{ compfunc }}
                </p>
                <h6><b>Festnetz</b></h6>
                <p>
                    {{ phoneland }}
                </p>
                <h6><b>Mobil</b></h6>
                <p>
                    {{ phonemobile }}
                </p>                            
            </div> 
            </div>               
       </div>
    </div>
    <hr>
    <table class="table" id="orgasingle">
    <thead>
    <tr >  
        {% for area in areas %}            
          <td class="text-center" style="width: 20%; background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 0.3);"><h5 style="color: rgba(0,0,0, 1);"><b ><a style=" color: #000000;"href="{% url 'standard-area' area.pk %}">{{area.name}}</a></b></h5></td>
        {% endfor %}            
    </tr>
  </thead>
  <tbody>  
    <tr>
        {% for area in areas %}  
          <td class="text-center"  style="background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 0.3)">
           <div class="areaCollapseContent" id="sortarea_{{area.pk}}">
           {%for prio in prios %}                                    
              {% if prio.task.area.pk == area.pk and prio.task.visible %}
              <div style="background-color: rgba({{area.color.0}},{{area.color.1}},{{area.color.2}}, 1)" class="mb-2 pt-3 pb-1 " id="ele_{{prio.task.pk}}">
               <span ><h6 ><a style=" color: #FFFFFF;"href="{% url 'standard-task' prio.task.pk %}"><span class="arrows_area_{{area.pk}} ml-4" style="display:none; float: left;"><i class="fas fa-sort"></i></span>{{prio.task.name}}</a></h6></span>
              </div>
              {% endif %}
            {% endfor %}
          </div>
          </td>
        {% endfor %}      
    </tr>
  </tbody>
</table>
<style>
#orgasingle {
  border-collapse: separate;
  border-spacing: 25px 0px;
}
</style>
</div>

<script type="text/javascript">
var sortstatus = false;
var sortablearea_ids = [{% for area in areas %} {{area.pk}},{% endfor %}];  
{% if user|usergperm:"usermanager" %} 

  {% for area in areas %}
      //Initial function for draggable areas
      $( function() {
          $( "#sortarea_{{area.pk}}" ).sortable
          ({
            axis:"y",
            update: function( event, ui ) 
            {
              datatoserver = [];
              var rows = $( "#sortarea_{{area.pk}}" ).sortable( "widget" )[0]['children'];
              for(i = 0; i < rows.length; i++){
                tempid = rows[i]['id'].split("_")[1];
                datatoserver.push({"id" : tempid, "neworder" : i});
              }
              $.ajax(
              {
                  type: "GET",
                  url: "/areas/updateorder",
                  data:{
                    action: "newtaskorder",
                    finalod : JSON.stringify(datatoserver),
                    userid : {{user_id}}
                  },
                  success: function( data ){}
               });        
               
          }
        });
      });

  {% endfor %}
  function activateChangeTaskOrder(){
    //Initial function for draggable areas
    if(sortstatus == false){
      sortstatus = true;
      for(i = 0; i < sortablearea_ids.length; i++){
        $("#changingorder").show();
        $("#activatechangingorder").hide();
        $(".arrows_area_" + sortablearea_ids[i]).show();
        $( "#sortarea_" + sortablearea_ids[i] ).sortable("enable");        
      }
    }
    else{      
      sortstatus = false;      
      for(i = 0; i < sortablearea_ids.length; i++){
        $("#changingorder").hide();
        $("#activatechangingorder").show();
        $(".arrows_area_" + sortablearea_ids[i]).hide();
        $( "#sortarea_" +  sortablearea_ids[i]).sortable("disable");
      }
    }

  }

{% endif %}

$( document ).ready(function() {
    for(i = 0; i < sortablearea_ids.length; i++){      
        $(".arrows_area_" + sortablearea_ids[i]).hide();
        $( "#sortarea_" +  sortablearea_ids[i]).sortable("disable");
      }
});


</script>

{% endblock content %}