digitaleagenturnc/standards/templates/standards/standards_add.html

{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load counter_tag %}
{% block content %}
<div class="content-section col-12">  

  {% if update == True %}
  <h3>Standard Bearbeiten{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Bearbeiten Sie hier einen bestehenden Standard." class="far fa-question-circle"></i></small>{% endif %}</h3>
  {% else %}
  <h3>Neuen Standard anlegen{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Legen Sie hier einen neuen Standard an." class="far fa-question-circle"></i></small>{% endif %}</h3>
  {% endif %}
  <hr>  
  <form method="POST" id="addstandardform">
	  	{% csrf_token %}	  	
      <div class="row"><div class="col-8">
      {% for field in normalForm %}
      {% if field.is_hidden == False %}
        {% if forloop.counter|divisibleby:6 %}
        </div><div class="col-3">
          {% if field.name != 'freefield_content' and field.name != 'freefield_title'  and field.name != 'public' %}
            {{field|as_crispy_field }}    
          {% endif %}      
        {% else %}
          {% if field.name != 'freefield_content' and field.name != 'freefield_title' and field.name != 'public' %}
            {{field|as_crispy_field }}
          {% endif %}
        {% endif %}
      {% endif %}
      {% endfor %}

      {% for field in normalForm %}
        {% if field.is_hidden %}
          {{field}}
        {% endif %}
      {% endfor %}  
      
      <!-- COLLAPSE AREA FOR GROUPS FILES AND LINKED STANDARDS -->
      <div class="accordion"  id="additionalStandardInfos">

        <div class="card">
        <div class="card-header" id="st_freefield">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#freefield_content" aria-expanded="false" aria-controls="freefield_content">
              <i class="fas fa-file-alt"></i>&nbsp;Freitextfeld{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Vergeben Sie für ein freies Textfeld einen Titel und einen entsprechenden Inhalt." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>        
        <div id="freefield_content" class="collapse" aria-labelledby="st_freefield" data-parent="#additionalStandardInfos">
          <div class="card-body">
            {{ normalForm.freefield_title|as_crispy_field }}
            {{ normalForm.freefield_content|as_crispy_field }}
          </div>
        </div>
      </div>

            <div class="card">
        <div class="card-header" id="st_useraut">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#useraut_content" aria-expanded="false" aria-controls="useraut_content">
              <i class="fas fa-user"></i>&nbsp;Mitarbeiterzuweisung{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Weisen Sie dem Standard verantwortliche, ausführende und vertretende Mitarbeiter zu." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>        
        <div id="useraut_content" class="collapse" aria-labelledby="st_useraut" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <button type="button" class="btn btn-primary mb-2" onclick="javascript:changeAddedUsers()">Mitarbeiter zuweisen</button>
          </div>
        </div>
      </div>

       <div class="card">
        <div class="card-header" id="st_linked">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#st_linked_content" aria-expanded="false" aria-controls="st_linked_content">
              <i class="fas fa-fw fa-lightbulb"></i>&nbsp;Standards{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verlinken Sie hier andere Standards, die etwas mit diesem Standard zutun haben." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>
        <div id="st_linked_content" class="collapse" aria-labelledby="st_linked" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <div class="input-group mb-3">
            <input class="form-control" list="poss_standards" id="searchfield_standards" type="text" onkeyup="javascript:updateLinkedElements('standards')" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchField('standards')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>          
              <datalist id="poss_standards">
              {% if update == True %}                
                {% for s in standard_possible %}                         
                  <option id="standards_{{s.pk}}" value="{{s.name|truncatechars:30}}">{{s.name|truncatechars:30}}</option>
                {% endfor %}
              {% else %}
                {% for s in standards %}                         
                  <option id="standards_{{s.pk}}" value="{{s.name|truncatechars:30}}">{{s.name|truncatechars:30}}</option>
                {% endfor %}
              {% endif %}
              </datalist>        
          </div>
          Verlinkte Standards:
          <table id="linked_standards" class="table table-hover table-sm">           
            {% if update == True %}     
              {% for s in standard.linked_standards.all %}
                <tr id="added_standards_{{s.pk}}"><td>{{s.name}}</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle('standards',{{s.pk}}, '{{s.name}}')"><i class="fas fa-trash-alt"></i></button></td></tr>
              {% endfor %}
            {% endif %}
          </table>
          </div>
        </div>
      </div>


     <div class="card">
        <div class="card-header" id="organizer_linked">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#organizer_linked_content" aria-expanded="false" aria-controls="organizer_linked_content">
              <i class="fas fa-fw fa-address-book"></i>&nbsp;Organizer{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Verlinken Sie hier Quicklinks, Kontakte und Passwörter." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>
        <div id="organizer_linked_content" class="collapse" aria-labelledby="organizer_linked" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <button type="button" class="btn btn-primary mb-2" onclick="javascript:$('#addModalQuicklinks').modal('toggle');">Quicklinks</button><br />            
            <button type="button" class="btn btn-primary mb-2" onclick="javascript:$('#addModalContacts').modal('toggle');">Kontakte</button><br />
            <button type="button" class="btn btn-primary mb-2" onclick="javascript:$('#addModalPasswords').modal('toggle');">Passwörter</button><br />             
          </div>          
          </div>
        </div>
      </div>
 
      {% if request.user.profile.agency.module_files %}
      <div class="card">
        <div class="card-header" id="st_files">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#st_files_content" aria-expanded="false" aria-controls="st_files_content">
              <i class="fas fa-file"></i>&nbsp;Dateien{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Fügen Sie ihren Standards Dateien zu. Diese liegen entweder bereits unter Dateien oder können iher direkt hochgeladen werden. Neu hochgeladene Dateien werden im Uploadordner für Standards gespeichert." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>
        <div id="st_files_content" class="collapse" aria-labelledby="st_files" data-parent="#additionalStandardInfos">
          <div class="card-body">
            <div class="input-group mb-3">
            <input class="form-control searchuserfieldstask" list="poss_files" id="searchfield_files" type="text" onkeyup="javascript:updateLinkedElements('files')" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchField('files')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>
              <datalist id="poss_files">
                {% for f in files %}            
                <option id="files_{{f.pk}}" value="{{f.name}}">{{f.name}}</option>            
                {% endfor %}
              </datalist>        
            </div>
          Verlinkte Dateien:
          <table id="linked_files" class="table table-hover table-sm">
            {% if update == True %}              
              {% for f in standard.addedfiles.all %}       
                <tr id="added_files_{{f.pk}}"><td>{{f.name}}</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle('files',{{f.pk}}, '{{f.name}}')"><i class="fas fa-trash-alt"></i></button></td></tr>
              {% endfor %}
            {% endif %}
          </table>                
          
          <input type="file" id="uploadedfile" name="uploadedfile" style="display:none">
           {% if user|usergperm:"filesmanager" %} 
          <div class="alert alert-secondary text-center mt-5" id="directdiv" role="alert" style="line-height: 17px; text-align: center;">
          <button type="button" class="btn btn-primary btn-sm" id="uploadButton" onclick="javascript:uploadButtonPush()"><i class="fas fa-plus"></i></button>&nbsp;&nbsp;<small>klicken/hineinziehen<p class="mt-2">Dateien werden im <b>Uploadordner für Standards</b> gespeichert.
          </small></p>
          </div>
          {% endif %}        
          </div>
        </div>
      </div>      
      {% endif %}

     <hr>

      <!-- ZUGRIFF -->
      <div class="card">
        <div class="card-header" id="st_groups">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#stgroups_content" aria-expanded="false" aria-controls="stgroups_content">
              <i class="fas fa-lock"></i>&nbsp;Zugriffsbeschränkung{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Legen Sie fest, welche Gruppe diesen Standard sehen kann. Ist keine ausgewählt, ist der Standard für alle sichtbar." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>

        <div id="stgroups_content" class="collapse" aria-labelledby="st_groups" data-parent="#additionalStandardInfos">
          <div class="card-body">          
              {% for g in agencygroups %}            
              <div class="custom-control custom-checkbox mb-2">      
                <input type="checkbox" class="custom-control-input groupclass" onclick="javascript:groupsChange({{g.pk}}, this.checked)"  name="group_{{g.pk}}" id="group_{{g.pk}}" {% if g in standard.visibleby.all %} checked {% endif %}>
              <label class="custom-control-label" for="group_{{g.pk}}" >{{g.agencygroupname}}</label>
              </div>            
              {% endfor %}            
          </div>
        </div>
      </div>


          <div class="card">
        <div class="card-header" id="st_agencynetwork">
          <h5 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#agnetwork_content" aria-expanded="false" aria-controls="agnetwork_content">
              <i class="fas fa-users"></i>&nbsp;Agenturverbund{% if request.user.profile.showtooltips %}&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Wählen Sie hier aus, in welchen Agenturverbund dieser Standard geteilt werden soll." class="far fa-question-circle"></i></small>{% endif %}
            </button>
          </h5>
        </div>        
        <div id="agnetwork_content" class="collapse" aria-labelledby="st_agencynetwork" data-parent="#additionalStandardInfos">
          <div class="card-body">
          {% if update == True %}
          
            {% if not standard.public %}
              Nur veröffentlichte Standards können geteilt werden.
            {% else %}
              {% for agn in agencynetworks %}                            
                  {% ifaginadminagn agn.pk request.user.profile.agency.pk as is_admin %}
                  {% ifsharemember agn.pk request.user.profile.agency.pk as is_sharemember %}
                  {% ifstandardinagn agn.pk standard.pk as standard_in_agn %}
                  
                  {% if is_admin or is_sharemember %}
                  <div class="custom-control custom-checkbox mb-2">
                  <input type="checkbox" class="custom-control-input groupclass" onclick="javascript:standardAgn({{agn.pk}}, this.checked)"  name="agn_{{agn.pk}}" id="agn_{{agn.pk}}" {% if standard_in_agn %} checked {% endif %}  >
                  <label class="custom-control-label" for="agn_{{agn.pk}}"  >{{agn.name}}</label>
                  </div> 
                  {% else %}
                  <i class="fas fa-lock" data-toggle="tooltip" data-placement="top" title="In diesen Verbund dürfen Sie nichts teilen."></i>&nbsp;{{agn.name}}
                  {% endif %}
              {% endfor %}
            {% endif %}  

          {% else %}
          Das Zuweisen zu einem Agenturverbund ist erst nach dem Anlegen eines neuen Standards möglich.
          {% endif %}
          </div>
        </div>
      </div>

    </div></div>
	  	<p>Wenn ein Standard erstellt/bearbeitet wurde, kann er nur von einer Person mit dem Recht <i>Standards bearbeiten und freischalten</i> veröffentlicht werden.</p>

      {% if perms.users.standardmanager %}
      {{ normalForm.public }} Veröffentlichen
      {% endif %}

	  <hr>	  	
	  	<button type="submit" class="btn btn-success">        
        Standard{% if update == True %} aktualisieren{% else %} anlegen{% endif %}        
      </button>&nbsp;
	  	<a class="btn" href="{% url 'standards' %} ">Abbrechen</a>
    </form>
</div>

<!-- FILE FORBIDDEN DELETE FILE -->
<div class="modal fade" id="forbiddenFileType" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Datei nicht erlaubt</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">        
        Diesen Dateitypen dürfen Sie nicht hochladen.
      </div>
      <div class="modal-footer">        
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- FILE FORBIDDEN DELETE FILE -->
<div class="modal fade" id="forbiddenFileType" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Datei nicht erlaubt</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">        
        Diesen Dateitypen dürfen Sie nicht hochladen.
      </div>
      <div class="modal-footer">        
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>


<!-- Add Users to Standard -->
<div class="modal fade" id="addUsersToStandard" tabindex="-1" 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">Mitarbeiter zuweisen</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">     
        
      <!-- 
        Verantwortlicher
        Ausführender
        Vertreter
      -->  
      <h6>Verantwortlicher:</h6>
      <div class="input-group mb-3">
          <input class="form-control searchuserfieldstask" list="possusers_verant" id="searchuser_verant" type="text" onkeyup="javascript:checkUserVerant()" >
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearUserSearchFields('verant')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="possusers_verant">
              {% if update == True %}
                {% for us in poss_verant %}
                  <option id="{{us.pk}}_verant" value="{{us.first_name}} {{us.last_name}}"></option>
                {% endfor %}
              {% else %}
                {% for us in usersofagency %}
                  <option id="{{us.pk}}_verant" value="{{us.first_name}} {{us.last_name}}"></option>
                {% endfor %} 
              {% endif %}
            </datalist>        
        </div>
       
       <!--<h6>Verantwortliche Mitarbeiter:</h6>-->
      <div id="added_users_verant_buttons"></div>
      {% if update == True %}

        {% for auth in standard.authority.all %}

          <span id="span_btn_verant_{{auth.pk}}" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromVeran({{auth.pk}}, '{{auth.first_name}} {{auth.last_name}}')">{{auth.first_name}} {{auth.last_name}}&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>

        {% endfor %}

      {% endif %}
      <hr>
      <!--         
        Ausführender
        Vertreter
      -->  
      <h6>Ausführender:</h6>
      <div class="input-group mb-3">
          <input class="form-control searchuserfieldstask" list="possusers_ex" id="searchuser_ex" type="text" onkeyup="javascript:checkUserEx()" >
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearUserSearchFields('ex')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="possusers_ex">
              {% if update == True %}
                {% for us in poss_ex %}
                  <option id="{{us.pk}}_ex" value="{{us.first_name}} {{us.last_name}}"></option>
                {% endfor %}
              {% else %}
                {% for us in usersofagency %}
                  <option id="{{us.pk}}_ex" value="{{us.first_name}} {{us.last_name}}"></option>
                {% endfor %} 
              {% endif %}
            </datalist>        
        </div>
       
       <!--<h6>Ausführende Mitarbeiter:</h6>-->
      <div id="added_users_ex_buttons"></div>
      {% if update == True %}
        {% for auth in standard.executor.all %}
          <span id="span_btn_ex_{{auth.pk}}" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromEx({{auth.pk}}, '{{auth.first_name}} {{auth.last_name}}')">{{auth.first_name}} {{auth.last_name}}&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>
        {% endfor %}
      {% endif %}
      <hr>
      <!--         
        Vertreter
      -->  
      <h6>Vertreter:</h6>
      <div class="input-group mb-3">
          <input class="form-control searchuserfieldstask" list="possusers_ver" id="searchuser_ver" type="text" onkeyup="javascript:checkUserVer()" >
          <div class="input-group-append">            
            <button type="button" onclick="javascript:clearUserSearchFields('ver')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
          </div>
            <datalist id="possusers_ver">
               {% if update == True %}
                {% for us in poss_ver %}
                  <option id="{{us.pk}}_ver" value="{{us.first_name}} {{us.last_name}}"></option>
                {% endfor %}              
              {% else %}
                {% for us in usersofagency %}
                  <option id="{{us.pk}}_ver" value="{{us.first_name}} {{us.last_name}}"></option>
                {% endfor %} 
              {% endif %}
            </datalist>        
        </div>
       
       <!--<h6>Vertretende Mitarbeiter:</h6>-->
      <div id="added_users_ver_buttons"></div>
      {% if update == True %}
        {% for auth in standard.representative.all %}
          <span id="span_btn_ver_{{auth.pk}}" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromVer({{auth.pk}}, '{{auth.first_name}} {{auth.last_name}}')">{{auth.first_name}} {{auth.last_name}}&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>
        {% endfor %}
      {% endif %}
       </div>
      <div class="modal-footer">       
        <button type="button" class="btn btn-success" data-dismiss="modal">Fertig</button>
      </div>
    </div>
  </div>
</div>

<!-- UPLOADING PROCESS -->
<div class="modal fade" id="uploadModalProgress" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Hochladen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <i class="fas fa-spinner fa-spin"></i> Datei wird hochgeladen...  
        <div class="progress">
          <div class="progress-bar" id="uploadprocessbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>      
    </div>
  </div>
</div>

<!-- CONFIRMA DOUBLE FILE -->
<div class="modal fade" id="doubleFileChoiceModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Datei bereits vorhanden</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">        
        Die Datei <b><span id="doublefile_name"></span></b> ist bereits vorhanden. Soll die Datei ersetzt oder beide behalten werden?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:replaceFileDirectChoice(filetodo_ex, 1)">Alte Datei ersetzen</button>&nbsp;&nbsp;
        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:replaceFileDirectChoice(filetodo_ex, 0)">Beide behalten</button>
      </div>
    </div>
  </div>
</div>


<!-- ORGANIZER Quicklinks -->
<div class="modal fade" id="addModalQuicklinks" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Quicklinks hinzufügen</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">        
        <div class="input-group mb-3">
            <input class="form-control searchuserfieldstask" list="poss_quicklinks" id="searchfield_quicklinks" type="text" onkeyup="javascript:updateLinkedElements('quicklinks')" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchField('quicklinks')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>
              <datalist id="poss_quicklinks">
              {% if update == True %}
                {% for q in possible_quicklinks %}            
                <option id="quicklinks_{{q.pk}}" value="{{q.name}}">{{q.name}}</option>            
                {% endfor %}
              {% else %}
                {% for q in quicklinks %}            
                <option id="quicklinks_{{q.pk}}" value="{{q.name}}">{{q.name}}</option>            
                {% endfor %}
              {% endif %}
              </datalist>        
            </div>
          Verlinkte Quicklinks:
          <table id="linked_quicklinks" class="table table-hover table-sm">
            {% if update == True %}
              {% for q in standard.addedquicklinks.all %}
              <tr id="added_quicklinks_{{q.pk}}"><td>{{q.name}}</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle('quicklinks',{{q.pk}}, '{{q.name}}')"><i class="fas fa-trash-alt"></i></button></td></tr>
              {% endfor %}
            {% endif %}
          </table> 
      </div>
      <div class="modal-footer">       
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- ORGANIZER Contacts -->
<div class="modal fade" id="addModalContacts" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Kontakte hinzufügen</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">        
        <div class="input-group mb-3">
            <input class="form-control searchuserfieldstask" list="poss_contacts" id="searchfield_contacts" type="text" onkeyup="javascript:updateLinkedElements('contacts')" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchField('contacts')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>
              <datalist id="poss_contacts">
              {% if update == True %}
                {% for q in possible_contacts %}            
                  <option id="contacts_{{q.pk}}" value="{{q.company}}">{{q.company}}</option>            
                {% endfor %}
              {% else %}
                {% for q in contacts %}            
                <option id="contacts_{{q.pk}}" value="{{q.company}}">{{q.company}}</option>            
                {% endfor %}
              {% endif %}
              </datalist>        
            </div>
          Verlinkte Kontakte:
          <table id="linked_contacts" class="table table-hover table-sm">
            {% if update == True %}
              {% for q in standard.addedcontacts.all %}
              <tr id="added_contacts_{{q.pk}}"><td>{{q.company}}</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle('contacts',{{q.pk}}, '{{q.company}}')"><i class="fas fa-trash-alt"></i></button></td></tr>
              {% endfor %}
            {% endif %}
          </table> 
      </div>
      <div class="modal-footer">       
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

<!-- ORGANIZER Passwords -->
<div class="modal fade" id="addModalPasswords" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="groupDelFunction" aria-hidden="true">
  <div class="modal-dialog " role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Passwords hinzufügen</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">        
          <div class="input-group mb-3">
           <input class="form-control searchuserfieldstask" list="poss_passwords" id="searchfield_passwords" type="text" onkeyup="javascript:updateLinkedElements('passwords')" >
            <div class="input-group-append">            
              <button type="button" onclick="javascript:clearSearchField('passwords')" class="btn btn-secondary" ><i class="fas fa-times"></i></button>
            </div>
              <datalist id="poss_passwords">
              {% if update == True %}
                {% for q in possible_passwords %}            
                  <option id="passwords_{{q.pk}}" value="{{q.name}}">{{q.name}}</option>            
                {% endfor %}
              {% else %}
                {% for q in passwords %}            
                <option id="passwords_{{q.pk}}" value="{{q.name}}">{{q.name}}</option>            
                {% endfor %}
              {% endif %}
              </datalist>        
            </div>
          Verlinkte Passwörter:
          <table id="linked_passwords" class="table table-hover table-sm">
            {% if update == True %}
              {% for q in standard.addedpasswords.all %}
              <tr id="added_passwords_{{q.pk}}"><td>{{q.name}}</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle('passwords',{{q.pk}}, '{{q.name}}')"><i class="fas fa-trash-alt"></i></button></td></tr>
              {% endfor %}
            {% endif %}
          </table> 

      </div>
      <div class="modal-footer">       
        <button type="button" class="btn btn-success" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
var ua = window.navigator.userAgent;
var isIE = /MSIE|Trident/.test(ua);
if ( isIE ) {
  //IE specific code goes here
    setInterval(function()
  {
    alluserfields = $(".searchuserfieldstask").each(function(key, value){
      specific_userfield_id = value['id'].split("_")[1];
      updateLinkedElements("standards");
      updateLinkedElements("files");      
      updateLinkedElements("quicklinks");
      updateLinkedElements("passwords");
      updateLinkedElements("contacts");
      checkUserVerant();
      checkUserEx();
      checkUserVer();
    });     
  },400);
}

//USERSTOSTANDARDS
//Verantwortlicher
act_verant = [];
{% if update == True %}
  act_verant = [
  {% for auth in standard.authority.all %}
    '{{auth.pk}}',
  {% endfor %}
  ];
  $("#id_us_verant").val(act_verant);  
{% endif %}
function checkUserVerant(){
  var g = $('#searchuser_verant').val();
  var id = $('#possusers_verant').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
      tempid = id.split("_")[0];
      clearUserSearchFields("verant");                          
      $("#added_users_verant_buttons").append('<span id="span_btn_verant_'+tempid+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromVeran('+tempid+', \''+g+'\')">'+g+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
      $("#" + tempid + "_verant").remove();  
      act_verant.push(tempid);    
      $("#id_us_verant").val(act_verant);  
  }
}

function removeUserFromVeran(id, name){
  index_to_rem = act_verant.indexOf(id.toString());
  act_verant.splice(index_to_rem,1);
  $('#possusers_verant').append('<option id="'+id+'_verant" value="'+ name +'">'+ name +'</option>');  
  $("#id_us_verant").val(act_verant);
  $("#span_btn_verant_" + id).remove();  
}


//Ausführender
act_ex = [];
{% if update == True %}
  act_ex = [
  {% for ex in standard.executor.all %}
    '{{ex.pk}}',
  {% endfor %}
  ];
  $("#id_us_ex").val(act_ex);  
{% endif %}
function checkUserEx(){
  var g = $('#searchuser_ex').val();
  var id = $('#possusers_ex').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
      tempid = id.split("_")[0];      
      clearUserSearchFields("ex");    
      $("#added_users_ex_buttons").append('<span id="span_btn_ex_'+tempid+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromEx('+tempid+', \''+g+'\')">'+g+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
      $("#" + tempid + "_ex").remove();    
      act_ex.push(tempid);   
      $("#id_us_ex").val(act_ex);
  }  
}

function removeUserFromEx(id, name){
  index_to_rem = act_ex.indexOf(id.toString());
  act_ex.splice(index_to_rem,1);
  console.log(name)
  $('#possusers_ex').append('<option id="'+id+'_ex" value="'+ name +'">'+ name +'</option>');  
  $("#id_us_ex").val(act_ex);
  $("#span_btn_ex_" + id).remove();  
}

//Vertreter
act_ver = [];
{% if update == True %}
  act_ver = [
  {% for rep in standard.representative.all %}
    '{{rep.pk}}',

  {% endfor %}
  ];
  $("#id_us_ver").val(act_ver);  
{% endif %}
function checkUserVer(){
  var g = $('#searchuser_ver').val();
  var id = $('#possusers_ver').find('option[value="' + g + '"]').attr('id');
  if(id != undefined && id.length > 0){  
      tempid = id.split("_")[0];      
      clearUserSearchFields("ver");    
      $("#added_users_ver_buttons").append('<span id="span_btn_ver_'+tempid+'" class="badge badge-pill badge-primary mr-2  mt-2"><a  class="btn btn-primary" onclick="javascript:removeUserFromVer('+tempid+', \''+g+'\')">'+g+'&nbsp;&nbsp;<i class="fas fa-times"></i></a ></span>');
       $("#" + tempid + "_ver").remove();     
       act_ver.push(tempid);  
       $("#id_us_ver").val(act_ver); 
  }  
}

function removeUserFromVer(id, name){
  index_to_rem = act_ver.indexOf(id.toString());
  act_ver.splice(index_to_rem,1);
  $('#possusers_ver').append('<option id="'+id+'_ver" value="'+ name +'">'+ name +'</option>');  
  $("#id_us_ver").val(act_ver);
  $("#span_btn_ver_" + id).remove();  
}


//Clear user search fields
function clearUserSearchFields(opt){
  $("#searchuser_" + opt).val("");
}

function changeAddedUsers(){
  $("#addUsersToStandard").modal("toggle");
}

/*

  Functions to control the dynamic element fields:
  - standards
  - quicklinks
  - contacts
  - passwords
  - files

*/

//Temp Fields

//Helpfer function to check actual field content
function showAllFields(){
  console.log($("#id_added_standards").val());
  console.log($("#id_added_files").val());
  console.log($("#id_added_quicklinks").val());
  console.log($("#id_added_contacts").val());
  console.log($("#id_added_passwords").val());
  console.log($("#id_us_verant").val());
  console.log($("#id_us_ver").val());
  console.log($("#id_us_ex").val());
}

//STANDARDS
actualStandards = [];
{% if update == True %}
  actualStandards = [
  {% for s in standard.linked_standards.all %}
    '{{s.pk}}',
  {% endfor %}
  ];
  $("#id_added_standards").val(actualStandards);  
{% endif %}

actualFiles = [];
{% if update == True %}
  actualFiles = [
  {% for f in standard.addedfiles.all %}
    '{{f.pk}}',
  {% endfor %}
  ];
  $("#id_added_files").val(actualFiles);  
{% endif %}

actualQuicklinks = [];
{% if update == True %}
  actualQuicklinks = [
  {% for f in standard.addedquicklinks.all %}
    '{{f.pk}}',
  {% endfor %}
  ];
  $("#id_added_quicklinks").val(actualQuicklinks);  
{% endif %}

actualContacts = [];
{% if update == True %}
  actualContacts = [
  {% for f in standard.addedcontacts.all %}
    '{{f.pk}}',
  {% endfor %}
  ];
  $("#id_added_contacts").val(actualContacts);  
{% endif %}

actualPasswords = [];
{% if update == True %}
  actualPasswords = [
  {% for f in standard.addedpasswords.all %}
    '{{f.pk}}',
  {% endfor %}
  ];
  $("#id_added_passwords").val(actualPasswords);  
{% endif %}



//Clear the Searchfield with the given type
function clearSearchField(type){
  $("#searchfield_" + type).val("");      
}


//Add new Elements by given Type
function updateLinkedElements(type){
  var g = $('#searchfield_' + type).val();
  var id = $('#poss_' + type).find('option[value="' + g + '"]').attr('id');

  if(id != undefined && id.length > 0){  
    clearSearchField(type);  
    tempid = id.split("_")[1];

    if(type == 'standards'){
      actualStandards.push(tempid); 
      $("#id_added_" + type).val(actualStandards);  
    }
    else if(type == 'files'){
      actualFiles.push(tempid);
      $("#id_added_" + type).val(actualFiles);  
    }
    else if(type == 'quicklinks'){
      actualQuicklinks.push(tempid);
      $("#id_added_" + type).val(actualQuicklinks);  
    }
    else if(type == 'contacts'){
      actualContacts.push(tempid);
      $("#id_added_" + type).val(actualContacts);  
    }
    else if(type == 'passwords'){
      actualPasswords.push(tempid);
      $("#id_added_" + type).val(actualPasswords);  
    }
    
    $("#" + id).remove();     
    $("#linked_" + type).append('<tr id="added_'+ type +'_' + tempid+'"><td>' + g + '</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle(\''+type+'\','+tempid+', \''+g+'\')"><i class="fas fa-trash-alt"></i></button></td></tr>');
  }
  
  showAllFields();
}

//Remove an added Element from View and placeholder-arrays and hidden fields
function remEle(type, id, name){
  
  index_to_rem = 0;
  if(type == 'standards'){
      index_to_rem = actualStandards.indexOf(id);      
      actualStandards.splice(index_to_rem,1);
      $("#id_added_standards").val(actualStandards);
    }
  else if(type == 'files'){
     index_to_rem = actualFiles.indexOf(id);
     actualFiles.splice(index_to_rem,1);
     $("#id_added_" + type).val(actualFiles);
  }
  else if(type == 'quicklinks'){
      index_to_rem = actualQuicklinks.indexOf(id);
      actualQuicklinks.splice(index_to_rem,1);
      $("#id_added_" + type).val(actualQuicklinks);
    }
  else if(type == 'contacts'){
      index_to_rem = actualContacts.indexOf(id);
      actualContacts.splice(index_to_rem,1);
      $("#id_added_"  +type).val(actualContacts);
    }
   else if(type == 'passwords'){
      index_to_rem = actualPasswords.indexOf(id);
      actualPasswords.splice(index_to_rem,1);
      $("#id_added_"  +type).val(actualPasswords);
    }
                  
  $('#poss_' + type).prepend('<option id="'+type+'_'+id+'" value="'+ name +'">'+ name +'</option>');
  $("#added_" + type + '_' + id).remove();

  showAllFields();

}


//FILES
// preventing page from redirecting
 $("html").on("dragover", function(e) {
    e.preventDefault();
    e.stopPropagation();
 });
  $("html").on("drop", function(e) { e.preventDefault(); e.stopPropagation(); });

   $( "#directdiv" ).on('dragenter', function (e) {
        e.stopPropagation();
        e.preventDefault();
        currentid = e["currentTarget"]['id'];
        $("#directdiv").addClass('bg-secondary');         
    });


$('#directdiv').on('drop', function (e) {
        e.stopPropagation();
        e.preventDefault();
        $("#directdiv").removeClass('bg-secondary');                   
        uploadAction(e.originalEvent.dataTransfer.files[0], e["currentTarget"]['id'].split("_")[0]);        
    });

$('#directdiv').on('dragleave', function (e) {
        e.stopPropagation();
        e.preventDefault();        
        currentid = e["currentTarget"]['id'];                
        $("#directdiv").removeClass('bg-secondary');         
    });    

allowedtypes = ['doc','docx','odt','ods','xls','xlsx','xlsm','ppt','pptx','mov','avi','svg','png','jpg','jpeg','mp3', 'wav', 'zip', 'rar', 'mp4', 'mwv', 'flv', 'eps', 'txt', 'pdf']


function uploadButtonPush(){
  $("#uploadedfile").click();
}

$('#uploadedfile').on('change', function() {  
    uploadAction($("#uploadedfile")[0]['files'][0], {{parentid}}); 
});

function hideUpload(){
  $("#uploadModalProgress").modal("hide");
}

function replaceFileDirectChoice(filetodo, choice){

  $("#doubleFileChoiceModal").modal("toggle");
  doUploadAction(filetodo_ex, choice);
}

function uploadAction(filetodo){

  filetodo_ex = filetodo;  

   $.ajax(
      {
        type: "GET",
        url: "{% url 'cloud-adddir' parentid %}",
        data:{
          action : "check_doublefile",
          name : filetodo.name
        },
        success: function( data ) 
        {    

            if(data["data"]["found"]){
              $("#doubleFileChoiceModal").modal("toggle");
              $("#doublefile_name").html(filetodo.name);
            }
            else{
              doUploadAction(filetodo, 0);
            }
        }
     });
  
}

function getFileExtension1(filename) {
  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined;
}

function doUploadAction(filetodo, replacestat){
  var formData = new FormData();
  formData.append("uploadedfile", filetodo); 
  formData.append("uploadsource", "standards"); 
  formData.append("replace", replacestat);

    var c = false; 
  for (i = 0; i < allowedtypes.length; i++) {
    if (allowedtypes[i].localeCompare(getFileExtension1(filetodo.name)) == 0)
    { 
      c = true;
    }
  } 

  if(c && filetodo.type.length > 0){
    $.ajax({
        url: "{% url 'cloud-adddir' parentid %}",
        headers: {
                      "X-CSRFTOKEN": "{{ csrf_token }}"
              },
        data: formData,
        type: 'POST',
        cache: false,
        processData: false,
        contentType: false,
        beforeSend: function(){          
            $("#uploadModalProgress").modal("toggle");          
          },
           xhr: function() {
              var xhr = new window.XMLHttpRequest();
              xhr.upload.addEventListener("progress", function(evt) {
                  if (evt.lengthComputable) {
                      var percentComplete = (evt.loaded / evt.total) * 100;
                      $("#uploadprocessbar").css("width", percentComplete + "%");                      
                  }
             }, false);
             return xhr;
          },
        success: function(data) {
          if(data["success"] == true){
            setTimeout(function(){
              hideUpload();   
              actualFiles.push(String(data["data"]["savedobj_id"]));  
              $("#id_added_files").val(actualFiles);
              type = "files";
              $("#linked_files").append('<tr id="added_files_'+data["data"]["savedobj_id"]+'"><td>' + data["data"]["savedobj_name"] + '</td><td><button type="button" class="btn btn-danger btn-sm" onclick="javascript:remEle(\''+type+'\','+data["data"]["savedobj_id"]+', \''+data["data"]["savedobj_name"]+'\')"><i class="fas fa-trash-alt"></i></button></td></tr>');
            }, 1000);      
          }          
          else{
            $("#forbiddenFileType").modal("toggle")                 
          }          
        }
     });  
  }
  else{
    $("#forbiddenFileType").modal("toggle")
  }
}

//GROUPS
actualGroups = [];
{% if update == True %}
  actualGroups = [
  {% for f in standard.visibleby.all %}
    '{{f.pk}}',
  {% endfor %}
  ];
  $("#id_checked_groups").val(actualGroups);  
{% endif %}

function groupsChange(groupid, value){
  if(value){
      actualGroups.push(groupid);  
  }      
  else {
      index_to_rem = actualGroups.indexOf(groupid)
      actualGroups.splice(index_to_rem,1);
  }  
  $("#id_checked_groups").val(actualGroups);  
}



{% if update == True %}

actualNetworks = [];
  actualNetworks = [
  {% for agn in agencynetworks %}
    {% if standard in agn.standards.all %}
    '{{agn.pk}}',
    {% endif %}
  {% endfor %}
  ];
  $("#id_checked_networks").val(actualNetworks);  


//AGENCYNETWORK
function standardAgn(id, newstat){
  if(newstat){
      actualNetworks.push(id);  
  }      
  else {
      index_to_rem = actualNetworks.indexOf(id)
      actualNetworks.splice(index_to_rem,1);
  }  
  $("#id_checked_networks").val(actualNetworks);  
}


{% endif %}

  /* 
    Ajax-Request zum nachladen der Aufgaben nach Auswahl der Bereiche
  */
$("#id_area").change(function () {
      var areaid = $(this).val(); 
      $.ajax({                      
        url: "/standards/ajax/loadtasks/",                    
        data: {
          'areaid': areaid      
        },
        success: function (data) {   
          $("#id_task").html(data);  
        }
      });
    });

$(document).ready(function() {
 
  $('#id_content').summernote({
      height: 400,
      lang: "de-DE",
      disableDragAndDrop: true
    });
});

</script>

{% if not perms.users.standardmanager %}

<script type="text/javascript">
  $("#div_id_public").hide();
</script>

{% endif %}

{% endblock content %}