digitaleagenturnc/cloud/templates/cloud/cloud_main.html

741 lines
25 KiB
HTML

{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load counter_tag %}
{% load static %}
{% block content %}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="{% static 'users/js/jsLists.js' %}"></script>
<link href="{% static 'users/css/jsLists.css' %}" rel="stylesheet">
<style>
.icon-hover:hover{
color: gray;
}
a.disabled {
pointer-events: none;
cursor: default;
}
</style>
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px; max-width: 250px; position: fixed; margin-top: -3%; margin-left: 70.5%; z-index: 10">
<!-- Then put toasts within -->
<div id="fileerr" class="toast alert-danger" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto">Daten gefunden</strong>
</div>
<div class="toast-body">
<div id="toast_errcontent">Achtung! In Unterverzeichnissen befinden sich Dateien. Es können nur Ordner ohne Unterordner gelöscht werden!</div>
</div>
</div>
</div>
<div class="content-section col-12">
<h3>Dateien&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Hier können Sie Dateien und Ordner für ihre Agentur verwalten." class="far fa-question-circle"></i></small></h3>
<hr>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item" aria-current="page"><a href="{% url 'cloud-main' 'first' %}"><i class="fas fa-home"></i></a></li>
{% for cr in breadcrump %}
{% if forloop.last %}
<li class="breadcrumb-item" active>{{cr}}</li>
{% else %}
<li class="breadcrumb-item"><a href="{% url 'cloud-main' cr.pk %}">{{cr.name}}</a></li>
{% endif %}
{% endfor %}
{% if user|usergperm:"filedirmanager" %}
<li class="breadcrumb-item" active><i onclick="javascript:addDirModal()" class="fas fa-folder-plus icon-hover"></i></li>
{% endif %}
</ol>
</nav>
{% if user|usergperm:"filesviewer" %}
<table class="table table-hover" id="dirfilestable">
<thead>
<tr>
<th scope="col"><small><i data-toggle="tooltip" data-placement="top" title="Ziehen Sie Dateien direkt auf die Ordner, um sie in die Ordner hochzuladen oder in den unteren Bereich, um Dateien in diesen Ordner hochzuladen." class="far fa-question-circle"></i></small></th>
<th scope="col">Name</th>
<th scope="col">Eigentümer</th>
<th scope="col">Erstellt</th>
<th scope="col">Geändert</th>
<th></th>
</tr>
</thead>
<tbody>
{% for d in dirs %}
{% setbool False %}
{% for dirgroup in d.visibleby.all %}
{% if user|has_group:dirgroup.group.name %}
{% setbool True %}
{% endif %}
{% endfor %}
{% if d.visibleby.all|length == 0 %}
{% setbool True %}
{% endif %}
{% getbool as groupchecker %}
<tr id="dir_{{d.pk}}" class="droppable_tr">
<td id="dir_{{d.pk}}_icon"><i class="fas fa-folder" ></i>
</td>
<td>
{% if groupchecker %}
<a href="{% url 'cloud-main' d.pk %}">{{d.name}}</a>
{% else %}
<span class="text-secondary"><i class="fas fa-lock"></i>&nbsp;{{d.name}}</span>
{% endif %}
</td>
<td>{{d.owner.first_name}} {{d.owner.last_name}}</td>
<td>{{d.date_created|date:"d.m.Y G:i"}}</td>
<td>{{d.date_last_modified|date:"d.m.Y G:i"}}</td>
<td>
{% if user|usergperm:"filedirmanager" and groupchecker%}
<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">
<div class="dropdown-header">Ordneroptionen</div>
<a class="dropdown-item" href="javascript:changeDirName({{d.pk}})">Umbenennen</a>
<a class="dropdown-item" href="javascript:showGroupChangeModal({{d.pk}})">Zugriff einschränken</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="javascript:delDataDirObje({{d.pk}})" >Löschen</a>
</div>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
{% for file in files %}
<tr>
<td>
<i class="fas fa-file" ></i>
</td>
<td><a href="{{file.file.url}}" download>{{file.name}}</a></td>
<td>{{file.owner.first_name}} {{file.owner.last_name}}</td>
<td>{{file.date_created|date:"d.m.Y G:i"}}</td>
<td>{{file.date_last_modified|date:"d.m.Y G:i"}}</td>
<td>
{% if user|usergperm:"filesmanager" %}
<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">
<div class="dropdown-header">Dateioptionen</div>
<a class="dropdown-item" href="javascript:moveFile({{file.pk}})">Verschieben</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item text-danger" href="javascript:delDataFileObje({{file.pk}})" >Löschen</a>
</div>
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% if user|usergperm:"filesmanager" %}
<form method="POST" id="uploadFileForm" enctype="multipart/form-data">
<input type="file" id="uploadedfile" name="uploadedfile" style="display:none">
</form>
<div class="alert alert-secondary droppable_div text-center mt-5" id="{{parentid}}_div" role="alert" style="line-height: 45px; 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;&nbsp;zum Hochladen klicken oder neue Dateien hier hineinziehen.<p><small>Dateien werden im aktuellen Ordner
<b>{% if breadcrump|length == 0 %}
Heimverzeichnis
{% else %}
{{breadcrump.0}}
{% endif %}</b>
gespeichert.
</small></p>
</div>
{% endif %}
<!-- MODAL CHANGE DIRNAME -->
<div class="modal fade" id="changeName" 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="mainmodalArea_title">
<span id="actualName"></span>&nbsp;Umbenennen
</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="form-group">
<label for="exampleInputPassword1">Name:</label>
<input class="form-control" id="changename" type="text" value="" placeholder="Ordnername" onkeyup="javascript:validateNewName(this.value)">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Abrechen</button>&nbsp;
<button id="doUpdateName" type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:updateName()" disabled="false">Speichern</button>
</div>
</div>
</div>
</div>
<!-- CONFIRMA DELETE DIR -->
<div class="modal fade" id="delDataObj" 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">Ordner löschen</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">
Mit löschen fortfahren? Alle Dateien in diesem Verzeichnis werden ebenfalls gelöscht!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:doDelDataDir()">Löschen</button>&nbsp;&nbsp;
<button type="button" class="btn btn-success" data-dismiss="modal">Abbrechen</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>
<!-- CONFIRMA DELETE FILE -->
<div class="modal fade" id="delDataFile" 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 löschen</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">
Datei <b><span id="filenametodel"></span></b> wirklich löschen?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="javascript:doDelDataFile()">Löschen</button>&nbsp;&nbsp;
<button type="button" class="btn btn-success" data-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
<!-- CONFIRMA MOVE/DIR -->
<div class="modal fade" id="moveDataModal" 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 Verschieben</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">
Bitte neues Verzeichnis auswählen:
<div id="agencydirlist"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
<!-- MODEAL ADD DIR -->
<div class="modal fade" id="addDir" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="" aria-hidden="false">
<div class="modal-dialog " role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mainmodalArea_title">
{% if breadcrump|length == 0 %}
Ordner in Heimverzeichnis der Agentur erstellen
{% else %}
Ordner in {{breadcrump.0}} erstellen
{% endif %}
</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="form-group">
<label for="exampleInputPassword1">Name:</label>
<input class="form-control" id="newdirname" type="text" value="" placeholder="Ordnername" onkeyup="javascript:validateDirName(this.value, 0)">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Abrechen</button>&nbsp;
<button id="doActionTaskModal" type="button" class="btn btn-success" data-dismiss="modal" onclick="javascript:addDirAction()" disabled="true">Ordner anlegen</button>
</div>
</div>
</div>
</div>
<!-- CHANGE GROUPS -->
<div class="modal fade" id="changeGroupOfDataObj" 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">Zugriffe 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 diese Daten Zugriff haben?
<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-success" data-dismiss="modal">Beenden</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".toast").toast({
autohide: true,
delay : 5000
});
});
//GROUPS
function showGroupChangeModal(tochangeid){
$("#changeGroupOfDataObj").modal("toggle");
$(".groupclass").attr("checked", false);
workingdirid = tochangeid;
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "getgroupsofdir",
dirid : workingdirid
},
success: function( data )
{
for(i = 0; i < data["data"]["gdir"].length; i++){
$("#group_" + data["data"]["gdir"][i]['id']).attr("checked", true);
}
}
});
}
$('#changeGroupOfDataObj').on('hidden.bs.modal', function (e) {
window.location = window.location
})
function changeGroup(groupid, value){
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "changedirgroups",
groupid : groupid,
dirid : workingdirid,
value : value
},
success: function( data )
{
}
});
}
//MOVING OPERATIONS
function moveFile(fileid)
{
workingfileid = fileid;
workingdirid = false;
$("#moveDataModal").modal("toggle");
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "getdirlist"
},
success: function( data )
{
$("#agencydirlist").html("");
html = ['<ul id="simple_list"><li><i class="fa fa-folder"></i>&nbsp;<a href="javascript:targetParentToMove({{rootid}})"><b><u>Heimverzeichnis<u></b></a>'];
createList(data["data"]["agencydirlist"], l);
$("#agencydirlist").html(html);
}
});
}
var html = ['<ul id="simple_list"><li><i class="fa fa-folder"></i>&nbsp;<a href="javascript:targetParentToMove({{rootid}})"><b><u>Heimverzeichnis<u></b></a>'];
let l = 2;
//Create UL-LI-List for tree
function createList(arr, l) {
html.push('<ul>');
$.each(arr, function(i, val) {
if(val.parent == ""){
html.push('<li><i class="fa fa-folder mt-2"></i>&nbsp;<a href="javascript:targetParentToMove('+val.id+')"><b>' + val.name + '</b></a>');
}
else {
html.push('<li class="ml-'+l+' mt-2"><i class="fa fa-folder" ></i><a href="javascript:targetParentToMove('+val.id+')">&nbsp;'+val.name+'</a></li>');
}
if (val.subdirs) {
createList(val.subdirs, l+1)
}
html.push('</li>');
});
html.push('</ul>');
}
function targetParentToMove(parid){
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "movefile",
fileid : workingfileid,
newpar : parid
},
success: function( data )
{
window.location = window.location
}
});
}
// preventing page from redirecting
$("html").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
});
$("html").on("drop", function(e) { e.preventDefault(); e.stopPropagation(); });
uploadtoparent = {{parentid}};
</script>
{% if user|usergperm:"filesmanager" %}
<script type="text/javascript">
$( ".droppable_tr" ).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
currentid = e["currentTarget"]['id'];
$("#" + currentid + "_icon").html("");
$("#" + currentid + "_icon").html('<i class="fas fa-folder-open"></i>');
$("#" + currentid).addClass('table-secondary');
});
$('.droppable_tr').on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
uploadtoparent = e["currentTarget"]['id'].split("_")[1];
uploadAction(e.originalEvent.dataTransfer.files[0], e["currentTarget"]['id'].split("_")[1]);
$("#" + currentid).removeClass('table-secondary');
$("#" + currentid + "_icon").html("");
$("#" + currentid + "_icon").html('<i class="fas fa-folder"></i>');
});
$('.droppable_tr').on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
currentid = e["currentTarget"]['id'];
$("#" + currentid + "_icon").html("");
$("#" + currentid + "_icon").html('<i class="fas fa-folder"></i>');
$("#" + currentid).removeClass('table-secondary');
});
$( ".droppable_div" ).on('dragenter', function (e) {
e.stopPropagation();
e.preventDefault();
currentid = e["currentTarget"]['id'];
$("#{{parentid}}_div").addClass('bg-secondary');
});
$('.droppable_div').on('drop', function (e) {
e.stopPropagation();
e.preventDefault();
$("#{{parentid}}_div").removeClass('bg-secondary');
uploadAction(e.originalEvent.dataTransfer.files[0], e["currentTarget"]['id'].split("_")[0]);
});
$('.droppable_div').on('dragleave', function (e) {
e.stopPropagation();
e.preventDefault();
currentid = e["currentTarget"]['id'];
$("#{{parentid}}_div").removeClass('bg-secondary');
});
allowedtypes = "application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint, text/plain, application/pdf, image/*"
function uploadAction(filetodo, parid){
var formData = new FormData($("#uploadFileForm")[0]);
formData.append("uploadedfile", filetodo);
var bar = $('.bar');
var percent = $('.percent');
if(allowedtypes.includes(filetodo.type) && filetodo.type.length > 0){
$.ajax({
url: "{% url 'cloud-adddir' %}" + parid,
headers: {
"X-CSRFTOKEN": "{{ csrf_token }}"
},
data: formData,
type: 'POST',
cache: false,
processData: false,
contentType: false,
beforeSend: function(){
$("#uploadModalProgress").modal("toggle");
},
uploadProgress: function(event, position, total, percentComplete){
var percentVal = percentComplete + '%';
},
success: function(data) {
if(data["success"] == true){
window.location = window.location;
}
else{
$("#forbiddenFileType").modal("toggle")
}
}
});
}
else{
$("#forbiddenFileType").modal("toggle")
}
}
</script>
{% endif %}
<script type="text/javascript">
$('#uploadedfile').on('change', function() {
uploadAction($("#uploadedfile")[0]['files'][0], {{parentid}});
});
function uploadButtonPush(){
$("#uploadedfile").click();
}
//FILE OPERATIONS
workingfileid = false;
function delDataFileObje(fileid){
workingfileid = fileid;
$("#delDataFile").modal("toggle");
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "getname_file",
id : workingfileid
},
success: function( data )
{
$("#filenametodel").html("");
$("#filenametodel").html(data["data"]["filename"]);
}
});
}
function doDelDataFile(){
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "del_file",
id : workingfileid
},
success: function( data )
{
window.location = window.location;
}
});
}
workingdirid = false;
// DIR FUNCTIONS
function delDataDirObje(id){
workingdirid = id;
$("#delDataObj").modal("toggle");
}
function doDelDataDir(){
$("#delDataObj").modal("toggle");
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "del_dir",
id : workingdirid
},
success: function( data )
{
if(data["success"]){
window.location = window.location;
}
else{
$("#fileerr").toast("show");
}
}
});
}
function changeDirName(dirid){
$("#changeName").modal("toggle");
workingdirid = dirid;
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "getname_dir",
id : dirid
},
success: function( data )
{
$("#actualName").html("Ordner <b>" + data["data"]['dirname'] + "</b>");
$("#changename").val(data["data"]['dirname']);
$("#doUpdateName").attr("disabled", false);
}
});
}
function updateName(){
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "change_dir_name",
id : workingdirid,
newdirname : $("#changename").val()
},
success: function( data )
{
$("#changeName").modal("toggle");
window.location = window.location;
}
});
}
function addDirModal(){
$("#addDir").modal("toggle");
$("#newdirname").val("");
$("#doActionTaskModal").attr("disabled", true)
}
//VALIDATE FOR CORRECT INPUT IN GROUP
function validateNewName(newdirname){
var letters = /^[A-Za-zßäöüÄÖÜ_\-0-9 ]+$/;
if(newdirname.length > 0){
if(!newdirname.match(letters))
{
$("#doUpdateName").attr("disabled", true);
}
else{
$("#doUpdateName").attr("disabled", false);
}
}
else{
$("#doUpdateName").attr("disabled", true);
}
}
//VALIDATE FOR CORRECT INPUT IN GROUP
function validateDirName(newdirname){
var letters = /^[A-Za-zßäöüÄÖÜ_\-0-9 ]+$/;
if(newdirname.length > 0){
if(!newdirname.match(letters))
{
$("#doActionTaskModal").attr("disabled", true);
}
else{
$("#doActionTaskModal").attr("disabled", false);
}
}
else{
$("#doActionTaskModal").attr("disabled", true);
}
}
function addDirAction(){
$.ajax(
{
type: "GET",
url: "{% url 'cloud-adddir' parentid %}",
data:{
action : "adddir",
parent : {{parentid}},
newdirname : $("#newdirname").val()
},
success: function( data )
{
window.location = window.location;
}
});
}
</script>
{% endblock %}