102 lines
3.4 KiB
HTML
102 lines
3.4 KiB
HTML
{% extends "users/base.html" %}
|
|
{% block content %}
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<div class="content-section col-12">
|
|
<h3>Bereichsverwaltung</h3>
|
|
<hr>
|
|
<p>
|
|
Bereiche unterteilen die Agentur in verschiedene Verantwortungsbereiche.
|
|
</p>
|
|
<div class="row">
|
|
<div class="content-section col-4">
|
|
<a class="btn btn-primary" href="{% url 'areas-addarea' %} ">Bereich anlegen</a>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="form-group mb-2">
|
|
<input class="form-control" id="tableSearch" size="50" type="text" placeholder="Suche in Tabelle...">
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="areas_maintable">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Name</th>
|
|
<th scope="col">Erstellt von</th>
|
|
<th scope="col">Erstellt am</th>
|
|
<th scope="col">Farbe</th>
|
|
<th scope="col"> </th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableresults">
|
|
{% for item in areas_of_agency %}
|
|
<tr id="{{ item.pk }}">
|
|
<td>{{ item.name }}</td>
|
|
<td>{{ item.created_area_by.first_name }} {{ item.created_area_by.last_name }}</td>
|
|
<td>{{ item.created_area_date }}</td>
|
|
<td><div style="width: 60px; height: 20px; background-color: {{ item.color }}"></div></td>
|
|
<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">
|
|
<div class="dropdown-header">Bereichsinfo</div>
|
|
<a class="dropdown-item" href="{% url 'areas-manage' item.pk %}">Bearbeiten</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item text-danger" href="{% url 'areas-delete' item.pk %}" >Löschen</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
<script>
|
|
$(document).ready(function(){
|
|
/*$('#areas_maintable').DataTable();*/
|
|
$("#tableSearch").on("keyup", function() {
|
|
var value = $(this).val().toLowerCase();
|
|
$("#tableresults tr").filter(function() {
|
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
|
|
});
|
|
});
|
|
});
|
|
|
|
|
|
|
|
/*
|
|
Update the sort-list by drag'n'drop
|
|
*/
|
|
$( "tbody" ).sortable({
|
|
update: function( event, ui ) {
|
|
datatoserver = [];
|
|
var rows = $( "tbody" ).sortable( "widget" )[0]['rows'];
|
|
for(i = 0; i < rows.length; i++){
|
|
datatoserver.push({"id" : rows[i]['id'], "neworder" : i});
|
|
}
|
|
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "/areas/updateorder",
|
|
data:{
|
|
action: "newareaorder",
|
|
finalod : JSON.stringify(datatoserver)
|
|
},
|
|
success: function( data )
|
|
{
|
|
console.log(data);
|
|
}
|
|
});
|
|
|
|
|
|
}
|
|
});
|
|
|
|
</script>
|
|
{% endblock content %}
|