Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filtering now refreshes as you type. #52

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Filtering now refreshes as you type. #52

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
98fa484
Filtering now refreshes as you type.
Aksiznarf-Uar Dec 16, 2024
93c78b8
Added devices_results.html
Aksiznarf-Uar Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/nac/subviews/device_management.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
from django.urls import reverse_lazy
from django.shortcuts import render
import json
from django.http import JsonResponse
from django.template.loader import render_to_string

from ..models import Device, AuthorizationGroup, DeviceRoleProd
from ..forms import DeviceForm, DeviceSearchForm
Expand Down Expand Up @@ -38,8 +40,18 @@ def get_queryset(self):
device_list = device_list.filter(appl_NAC_DeviceRoleProd__in=selected_device_roles_prod)
return device_list.order_by("name")

def get(self, request, *args, **kwargs):
# Check if the request is an AJAX request
if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
# Handle AJAX request by rendering only the relevant part of the template
html = render_to_string('devices_results.html', {"device_list": self.get_queryset()})
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

devices_results.html seems to be missing in the git repository. It would be good to have a test, to check if this site can be rendered ;)

return JsonResponse({'html': html})

# Otherwise, handle a normal HTTP request
return super().get(request, *args, **kwargs)

# we need this for the drop-down menus with filtering options
def get_context_data(self, *, object_list=None, **kwargs):
def get_context_data(self, **kwargs):
context = super(DeviceListView, self).get_context_data(**kwargs)
context["auth_group_list"] = AuthorizationGroup.objects.filter(id__in=self.request.user.authorization_group.all())
context["device_role_prod_list"] = DeviceRoleProd.objects.all()
Expand Down
30 changes: 30 additions & 0 deletions src/static/device_filtering.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const search_form = $("#search_form")
const results_div = $('#results')
const endpoint = '/devices/'
const delay_by_in_ms = 700
let scheduled_function = false

let ajax_call = function (endpoint, request_parameters) {
$.getJSON(endpoint, request_parameters)
.done(response => {
// replace the HTML contents
results_div.html(response['html'])
})
}

search_form.on('input', function () {

const request_parameters = {
search_string: $('#id_search_string').val(),
device_role_prod: $('#id_device_role_prod').val(),
authorization_group: $('#id_authorization_group').val()
}

// if scheduled_function is NOT false, cancel the execution of the function
if (scheduled_function) {
clearTimeout(scheduled_function)
}

// setTimeout returns the ID of the function to be executed
scheduled_function = setTimeout(ajax_call, delay_by_in_ms, endpoint, request_parameters);
})
5 changes: 4 additions & 1 deletion src/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@
<link rel="icon" href="{% static 'icons/favicon.svg' %}" sizes="any" type="image/svg+xml">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>


{% block head %}{% endblock %}

Expand Down
72 changes: 8 additions & 64 deletions src/templates/devices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% block content %}
<div class="container">
<h1>Devices</h1>
<form action="{% url 'devices' %}" method="get">
<form id="search_form" action="{% url 'devices' %}" method="get">
<div class="row">
{% for field in search_form %}
<div class="col-md-4 ">
Expand All @@ -15,68 +15,12 @@ <h1>Devices</h1>
</div>
<button type="submit" class="btn btn-secondary btn-sm">Filter</button>
</form>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">FQDN</th>
<th scope="col">Device Role Prod</th>
<th scope="col">MAC</th>
<th scope="col" width="60"></th>
</tr>
</thead>

{% for device in device_list %}
<tr>
<td>
<a href="{% url 'device_detail' device.pk %}">{{ device.name }}</a>
</td>
<td>
{% if device.appl_NAC_Active %}
<span class="icon-desc" desc="Active Device"><img src="{% static 'icons/check-lg.svg' %}" alt="appl_NAC_Active_True" height="25" width="25" class="icon-zoom" /></span>
{% else %}
<span class="icon-desc" desc="Inactive Device"><img src="{% static 'icons/x-lg.svg' %}" alt="appl_NAC_Active_False" height="25" width="25" class="icon-zoom" /></span>
{% endif %}
{% if device.appl_NAC_Install %}
<span class="icon-desc" desc="Install"><img src="{% static 'icons/wrench.svg' %}" alt="appl_NAC_Install" height="25" width="25" class="icon-zoom"/></span>
{% endif %}
</td>
<td>
{{ device.appl_NAC_FQDN }}
</td>
<td>
{{ device.appl_NAC_DeviceRoleProd }}
</td>
<td>
{% for mac in device.get_appl_NAC_macAddressAIR %}
<b>
{% if mac != None %}
<span class="icon-desc" desc="macAddressAIR"><img src="{% static 'icons/wifi.svg' %}" alt="appl_NAC_macAddressAIR" height="14" width="14" class="icon-zoom"/></span>
<b> {{mac}}</b> <br />
{% endif %}
</b>
{% endfor %}
{% for mac in device.get_appl_NAC_macAddressCAB %}
<b>
{% if mac != None %}
<span class="icon-desc" desc="macAddressCAB"><img src="{% static 'icons/ethernet.svg' %}" alt="appl_NAC_macAddressCAB" height="14" width="14" class="icon-zoom"/></span>
<b> {{mac}}</b> <br />
{% endif %}
</b>
{% endfor %}
</td>
<td>
<a href="{% url 'device_edit' device.pk %}">
<span class="icon-desc" desc="edit"><img src="{% static 'icons/pencil-square.svg' %}" alt="edit" height="16" width="16" class="icon-zoom"/></span>

</a>
<a href="{% url 'device_delete' device.pk %}">
<span class="icon-desc" desc="delete"><img src="{% static 'icons/trash.svg' %}" alt="delete" height="16" width="16" class="icon-zoom"/></span>
</a>
</td>
</tr>
{% endfor %}
</table>
<div id="results">
{% include "devices_results.html" %}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

device_results.html seems to be missing in the git repository.

</div>
</div>
{% endblock content %}

<script type="text/javascript" src="{% static 'device_filtering.js' %}"></script>

{% endblock content %}
Loading