digitaleagenturnc/organizer/templates/organizer/passwords_content.html

{% load counter_tag %}

<div class="row">
<div class="content-section col-12">
	<div class="row"><div class="content-section col-9">
	{% if user|usergperm:"moduleorganizer" %} 
  		<!--<a class="btn btn-primary " href="{% url 'add-agpass' %}"><i class="fas fa-plus"></i>&nbsp;Passwort</a>-->
  	{% endif %}    
  	  
   </div></div>
   <!--<hr>-->
   <div class="table-responsive" style="min-height: 400px;">
    <table class="table hover" id="pstable">
          <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Link</th>
            <th scope="col">Benutzername</th>
            
            <th scope="col">Passwort</th>
            

            {% if user|usergperm:"moduleorganizer" %}      
            <th scope="col">&nbsp;</th>
            {% endif %}
          </tr>
        </thead>
        <tbody id="table_passwords">
        {% for ap in agpass %}


        {% setbool False %}

        {% for passgrous in ap.visibleby.all %}
          {% if user|has_group:passgrous.group.name %} 
            {% setbool True %}    
          {% endif %}
        {% endfor %}        

        {% if ap.visibleby.all|length == 0 %}
          {% setbool True %}          
        {% endif %}
        
        {% getbool as groupchecker %}
        
          {% if groupchecker %}
          <tr>
              <td>{{ap.name }}</td>
              <td><a href="{{ap.link }}" target="_blank">{{ap.link}}</a></td>
              <td>
                <span id="uname_cl_{{ap.pk}}">{{ap.agpass_username }}</span>
                <a href="#\" onclick="javascript:copyUsernameToCB({{ap.pk}})"><i class="far fa-copy"></i></a>
                <span id="uname_cl_cop_{{ap.pk}}" style="display: none;">Kopiert!</span>

              </td>
              <td><span id="pass_cl_{{ap.pk}}" style="display: none;">{{ap.compass}}</span><span id="pass_{{ap.pk}}">*********</span>
              
                <a href="#\" onclick="javascript:showAgPass({{ap.pk}})"><i class="far fa-eye"></i></a>&nbsp;&nbsp;&nbsp;
                <a href="#\" onclick="javascript:copyPassToCB({{ap.pk}})"><i class="far fa-copy"></i></a>
                <span id="pass_cl_cop_{{ap.pk}}" style="display: none;">Kopiert!</span>
              </td>
              {% if user|usergperm:"moduleorganizer" %} 
              <td>              
                <div class="dropdown no-arrow">
                  <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
                      <a class="dropdown-item" href="{% url 'aggpass-update' ap.pk %}">Bearbeiten</a>  
                      <a class="dropdown-item" href="javascript:showGroupChangeModal({{ap.pk}})">Zugriff einschränken</a>
                      <div class="dropdown-divider"></div>                  
                      <a class="dropdown-item text-danger" href="{% url 'pass-delete' ap.pk %}" >Löschen</a>
                    </div>
                  </div>                  
                </div>
              </td>
              {% endif %}
          </tr>
          {% else %}
          <tr><td id="pass_{{ap.pk}}" class="droppable_tr" data-toggle="popover" data-placement="top"  data-trigger="hover" title="Zugriffsbeschränkung" data-content="Zugriff beschränkt auf {% for passgroup in ap.visibleby.all %}{{passgroup.agencygroupname}}{% if forloop.counter < d.visibleby.all|length %}, {%endif%}{% endfor %}">
          <span class="text-secondary"><i class="fas fa-lock"></i>&nbsp;{{ap.name}}</span></td><td></td><td></td><td></td>{% if user|usergperm:"moduleorganizer" %} <td></td>{% endif %}
          </tr>
          {% endif %}
        {% endfor %}   
        </tbody>  
      </table>
    </div>
  	

</div>
</div>


<div class="modal fade" id="changeGroupOfPass" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Zugriff einschränken</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">        
        Welche Gruppen dürfen auf dieses Passwort zugreifen?
        <p><small>Ist keine Gruppe ausgewählt, darf jeder der Agentur diese Daten sehen!</small></p>
        <div class="row">
          <div class="col-6">
        {% for g in agencygroups %}
        {% if forloop.counter|divisibleby:6 %} 
        </div>  <div class="col-6">
        <div class="custom-control custom-checkbox mb-2">                        
          <input type="checkbox" class="custom-control-input groupclass" name="group_{{g.pk}}" id="group_{{g.pk}}" onchange="javascript:changeGroup({{g.pk}}, this.checked)">
        <label class="custom-control-label" for="group_{{g.pk}}" >{{g.agencygroupname}}</label>
        </div>
        {% else %}
        <div class="custom-control custom-checkbox mb-2">                        
          <input type="checkbox" class="custom-control-input groupclass" name="group_{{g.pk}}" id="group_{{g.pk}}" onchange="javascript:changeGroup({{g.pk}}, this.checked)">
        <label class="custom-control-label" for="group_{{g.pk}}" >{{g.agencygroupname}}</label>
        </div>
        {% endif %}
      {% endfor %}
    </div></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Fertig</button>
      </div>
    </div>
  </div>
</div>


<script>
var workingpass = "";
  //GROUPS
function showGroupChangeModal(tochangeid){
  console.log("HI!");
  $("#changeGroupOfPass").modal("toggle");
     $(".groupclass").attr("checked", false);
   workingpass = tochangeid;  
   $.ajax(
      {
        type: "GET",
        url: "{% url 'ql-ajaxloaddef' %}",
        data:{
          action : "loadpassg",          
          passid : workingpass          
        },
        success: function( data ) 
        { 
          for(i = 0; i < data["passgroups"].length; i++){            
            $("#group_" + data["passgroups"][i]['id']).attr("checked", true);
          }
        }
     });
}

$('#changeGroupOfPass').on('hidden.bs.modal', function (e) {
  window.location = window.location
})

function changeGroup(groupid, value){  
  $.ajax(
      {
        type: "GET",
        url: "{% url 'ql-ajaxloaddef' %}",
        data:{
          action : "changepassg",
          groupid : groupid,
          workingpass : workingpass,
          value : value
        },
        success: function( data ) 
        { 
        }
     });
   
}



	function showAgPass(id){    
    $("#pass_" + id).toggle();
    $("#pass_cl_" + id).toggle();
  }

  function copyPassToCB(id){
    var val = $("#pass_cl_" + id).html();    
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(val).select();
    document.execCommand("copy");
    $temp.remove();
    $("#pass_cl_cop_" + id).show();
  } 

  function copyUsernameToCB(id){
    var val = $("#uname_cl_" + id).html();    
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(val).select();
    document.execCommand("copy");
    $temp.remove();
    $("#uname_cl_cop_" + id).show();
  } 

  $(document).ready(function(){
  
    $('#pstable').DataTable({
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "buttons" : {
        "className" : "btn-danger"
      }
    });


      $('[data-toggle="popover"]').popover();  


  
});

</script>

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