Implement DataTables in CorpStats

Site header is broken on pages with DataTables.
This commit is contained in:
Adarnof 2017-06-08 17:28:05 -04:00
parent b7062c8dda
commit fd8ab2688e
4 changed files with 150 additions and 137 deletions

View File

@ -10,8 +10,8 @@
<div class="container-fluid"> <div class="container-fluid">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% trans "Corporations" %}<span class="caret"></span></a> <a href="#" id="dLabel" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">{% trans "Corporations" %}<span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
{% for corpstat in available %} {% for corpstat in available %}
<li> <li>
<a href="{% url 'corputils:view_corp' corpstat.corp.corporation_id %}">{{ corpstat.corp.corporation_name }}</a> <a href="{% url 'corputils:view_corp' corpstat.corp.corporation_id %}">{{ corpstat.corp.corporation_name }}</a>
@ -27,7 +27,7 @@
</ul> </ul>
<form class="navbar-form navbar-right" role="search" action="{% url 'corputils:search' %}" method="GET"> <form class="navbar-form navbar-right" role="search" action="{% url 'corputils:search' %}" method="GET">
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" name="search_string" placeholder="{% if search_string %}{{ search_string }}{% else %}{% trans "Search characters..." %}{% endif %}"> <input type="text" class="form-control" name="search_string" placeholder="{% if search_string %}{{ search_string }}{% else %}{% trans "Search all corporations..." %}{% endif %}">
</div> </div>
</form> </form>
</div> </div>
@ -35,5 +35,4 @@
{% block member_data %}{% endblock %} {% block member_data %}{% endblock %}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,7 +1,6 @@
{% extends 'corputils/base.html' %} {% extends 'corputils/base.html' %}
{% load i18n %} {% load i18n %}
{% load humanize %} {% load humanize %}
{% load bootstrap_pagination %}
{% block member_data %} {% block member_data %}
{% if corpstats %} {% if corpstats %}
<div class="row"> <div class="row">
@ -58,104 +57,117 @@
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane fade in active" id="mains"> <div class="tab-pane fade in active" id="mains">
{% if mains %} {% if mains %}
<div class="text-center">{% bootstrap_paginate mains range=10 %}</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover" id="table-mains">
{% for main in mains %} <thead>
<tr> <tr>
<td class="text-center" style="vertical-align:middle"> <th></th>
<div class="thumbnail" <th></th>
style="border: 0 none; box-shadow: none; background: transparent;">
<img src="{{ main.portrait_url_64 }}" class="img-circle">
<div class="caption text-center">
{{ main }}
</div>
</div>
</td>
<td>
<table class="table table-hover">
{% for alt in main.alts %}
{% if forloop.first %}
<tr>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center">{% trans "Corporation" %}</th>
<th class="text-center">{% trans "Alliance" %}</th>
<th class="text-center"></th>
</tr>
{% endif %}
<tr>
<td class="text-center">{{ alt.character_name }}</td>
<td class="text-center">{{ alt.corporation_name }}</td>
<td class="text-center">{{ alt.alliance_name }}</td>
<td class="text-center">
<a href="https://zkillboard.com/character/{{ alt.character_id }}/"
class="label label-danger" target="_blank">
{% trans "Killboard" %}
</a>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr> </tr>
{% endfor %} </thead>
<tbody>
{% for main in mains %}
<tr>
<td class="text-center" style="vertical-align:middle">
<div class="thumbnail"
style="border: 0 none; box-shadow: none; background: transparent;">
<img src="{{ main.portrait_url_64 }}" class="img-circle">
<div class="caption text-center">
{{ main }}
</div>
</div>
</td>
<td>
<table class="table table-hover">
{% for alt in main.alts %}
{% if forloop.first %}
<tr>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center">{% trans "Corporation" %}</th>
<th class="text-center">{% trans "Alliance" %}</th>
<th class="text-center"></th>
</tr>
{% endif %}
<tr>
<td class="text-center">{{ alt.character_name }}</td>
<td class="text-center">{{ alt.corporation_name }}</td>
<td class="text-center">{{ alt.alliance_name }}</td>
<td class="text-center">
<a href="https://zkillboard.com/character/{{ alt.character_id }}/"
class="label label-danger" target="_blank">
{% trans "Killboard" %}
</a>
</td>
</tr>
{% endfor %}
</table>
</td>
</tr>
{% endfor %}
</tbody>
</table> </table>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="tab-pane fade" id="members"> <div class="tab-pane fade" id="members">
{% if members %} {% if members %}
<div class="text-center">{% bootstrap_paginate members range=10 %}</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover" id="table-members">
<tr> <thead>
<th></th> <tr>
<th class="text-center">{% trans "Character" %}</th> <th></th>
<th class="text-center"></th> <th class="text-center">{% trans "Character" %}</th>
<th class="text-center">{% trans "Main Character" %}</th> <th class="text-center"></th>
<th class="text-center">{% trans "Main Corporation" %}</th> <th class="text-center">{% trans "Main Character" %}</th>
<th class="text-center">{% trans "Main Alliance" %}</th> <th class="text-center">{% trans "Main Corporation" %}</th>
</tr> <th class="text-center">{% trans "Main Alliance" %}</th>
{% for member in members %}
<tr {% if not member.registered %}class="danger"{% endif %}>
<td><img src="{{ member.portrait_url }}" class="img-circle"></td>
<td class="text-center">{{ member.character_name }}</td>
<td class="text-center"><a
href="https://zkillboard.com/character/{{ member.character_id }}/"
class="label label-danger"
target="_blank">{% trans "Killboard" %}</a></td>
<td class="text-center">{{ member.main_character.character_name }}</td>
<td class="text-center">{{ member.main_character.corporation_name }}</td>
<td class="text-center">{{ member.main_character.alliance_name }}</td>
</tr> </tr>
{% endfor %} </thead>
<tbody>
{% for member in members %}
<tr {% if not member.registered %}class="danger"{% endif %}>
<td><img src="{{ member.portrait_url }}" class="img-circle"></td>
<td class="text-center">{{ member.character_name }}</td>
<td class="text-center"><a
href="https://zkillboard.com/character/{{ member.character_id }}/"
class="label label-danger"
target="_blank">{% trans "Killboard" %}</a></td>
<td class="text-center">{{ member.main_character.character_name }}</td>
<td class="text-center">{{ member.main_character.corporation_name }}</td>
<td class="text-center">{{ member.main_character.alliance_name }}</td>
</tr>
{% endfor %}
</tbody>
</table> </table>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div class="tab-pane fade" id="unregistered"> <div class="tab-pane fade" id="unregistered">
{% if unregistered %} {% if unregistered %}
<div class="text-center">{% bootstrap_paginate unregistered range=10 %}</div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover" id="table-unregistered">
<tr> <thead>
<th></th> <tr>
<th class="text-center">{% trans "Character" %}</th> <th></th>
<th class="text-center"></th> <th class="text-center">{% trans "Character" %}</th>
</tr> <th class="text-center"></th>
{% for member in unregistered %}
<tr class="danger">
<td><img src="{{ member.portrait_url }}" class="img-circle"></td>
<td class="text-center">{{ member.character_name }}</td>
<td class="text-center">
<a href="https://zkillboard.com/character/{{ member.character_id }}/"
class="label label-danger"
target="_blank">
{% trans "Killboard" %}
</a>
</td>
</tr> </tr>
{% endfor %} </thead>
<tbody>
{% for member in unregistered %}
<tr class="danger">
<td><img src="{{ member.portrait_url }}" class="img-circle"></td>
<td class="text-center">{{ member.character_name }}</td>
<td class="text-center">
<a href="https://zkillboard.com/character/{{ member.character_id }}/"
class="label label-danger"
target="_blank">
{% trans "Killboard" %}
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table> </table>
</div> </div>
{% endif %} {% endif %}
@ -167,3 +179,17 @@
</div> </div>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block extra_javascript %}
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table-mains').DataTable();
$('#table-members').DataTable();
$('#table-unregistered').DataTable();
$('.dropdown-toggle').dropdown();
});
</script>
{% endblock %}
{% block extra_css %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.css"/>
{% endblock %}

View File

@ -1,38 +1,50 @@
{% extends "corputils/base.html" %} {% extends "corputils/base.html" %}
{% load i18n %} {% load i18n %}
{% load bootstrap_pagination %} {% load bootstrap_pagination %}
{% load eveonline_extras %}
{% block member_data %} {% block member_data %}
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading clearfix"> <div class="panel-heading clearfix">
<div class="panel-title pull-left">{% trans "Search Results" %}</div> <div class="panel-title pull-left">{% trans "Search Results" %}</div>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div class="text-center"> <table class="table table-hover" id="table-search">
{% bootstrap_paginate results range=10 %} <thead>
</div> <tr>
<table class="table table-hover"> <th class="text-center"></th>
<tr> <th class="text-center">{% trans "Character" %}</th>
<th class="text-center"></th> <th class="text-center">{% trans "Corporation" %}</th>
<th class="text-center">{% trans "Character" %}</th> <th class="text-center">{% trans "zKillboard" %}</th>
<th class="text-center">{% trans "Corporation" %}</th> <th class="text-center">{% trans "Main Character" %}</th>
<th class="text-center">{% trans "zKillboard" %}</th> <th class="text-center">{% trans "Main Corporation" %}</th>
<th class="text-center">{% trans "Main Character" %}</th> <th class="text-center">{% trans "Main Alliance" %}</th>
<th class="text-center">{% trans "Main Corporation" %}</th>
<th class="text-center">{% trans "Main Alliance" %}</th>
</tr>
{% for result in results %}
<tr {% if not result.1.registered %}class="danger"{% endif %}>
<td class="text-center"><img src="{{ result.1.portrait_url }}" class="img-circle"></td>
<td class="text-center">{{ result.1.character_name }}</td>
<td class="text-center">{{ result.0.corp.corporation_name }}</td>
<td class="text-center"><a href="https://zkillboard.com/character/{{ result.1.character_id }}/" class="label label-danger" target="_blank">{% trans "Killboard" %}</a></td>
<td class="text-center">{{ result.1.main_character.character_name }}</td>
<td class="text-center">{{ result.1.main_character.corporation_name }}</td>
<td class="text-center">{{ result.1.main_character.alliance_name }}</td>
</tr> </tr>
{% endfor %} </thead>
<tbody>
{% for result in results %}
<tr {% if not result.1.registered %}class="danger"{% endif %}>
<td class="text-center"><img src="{{ result.1.portrait_url }}" class="img-circle"></td>
<td class="text-center">{{ result.1.character_name }}</td>
<td class="text-center">{{ result.0.corp.corporation_name }}</td>
<td class="text-center"><a href="https://zkillboard.com/character/{{ result.1.character_id }}/" class="label label-danger" target="_blank">{% trans "Killboard" %}</a></td>
<td class="text-center">{{ result.1.main_character.character_name }}</td>
<td class="text-center">{{ result.1.main_character.corporation_name }}</td>
<td class="text-center">{{ result.1.main_character.alliance_name }}</td>
</tr>
{% endfor %}
</tbody>
</table> </table>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% block extra_javascript %}
<script type="text/javascript" src="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table-search').DataTable();
$('.dropdown-toggle').dropdown();
});
</script>
{% endblock %}
{% block extra_css %}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs-3.3.7/dt-1.10.15/r-2.1.1/rg-1.0.0/datatables.min.css"/>
{% endblock %}

View File

@ -4,28 +4,13 @@ from django.shortcuts import render, redirect, get_object_or_404
from django.contrib import messages from django.contrib import messages
from django.core.exceptions import PermissionDenied from django.core.exceptions import PermissionDenied
from django.db import IntegrityError from django.db import IntegrityError
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.translation import ugettext_lazy as _ from django.utils.translation import ugettext_lazy as _
from django.conf import settings
from eveonline.models import EveCharacter, EveCorporationInfo from eveonline.models import EveCharacter, EveCorporationInfo
from eveonline.managers import EveManager from eveonline.managers import EveManager
from corputils.models import CorpStats from corputils.models import CorpStats
from esi.decorators import token_required from esi.decorators import token_required
from bravado.exception import HTTPError from bravado.exception import HTTPError
MEMBERS_PER_PAGE = int(getattr(settings, 'CORPSTATS_MEMBERS_PER_PAGE', 20))
def get_page(model_list, page_num):
p = Paginator(model_list, MEMBERS_PER_PAGE)
try:
members = p.page(page_num)
except PageNotAnInteger:
members = p.page(1)
except EmptyPage:
members = p.page(p.num_pages)
return members
def access_corpstats_test(user): def access_corpstats_test(user):
return user.has_perm('corputils.view_corp_corpstats') or user.has_perm( return user.has_perm('corputils.view_corp_corpstats') or user.has_perm(
@ -94,17 +79,10 @@ def corpstats_view(request, corp_id=None):
'available': available, 'available': available,
} }
# paginate
members = []
mains = []
unregistered = []
if corpstats:
page = request.GET.get('page', 1)
members = get_page(corpstats.members.all(), page)
mains = get_page(corpstats.mains.all(), page)
unregistered = get_page(corpstats.unregistered_members.all(), page)
if corpstats: if corpstats:
members = corpstats.members.all()
mains = corpstats.mains.all()
unregistered = corpstats.unregistered_members.all()
context.update({ context.update({
'corpstats': corpstats, 'corpstats': corpstats,
'members': members, 'members': members,
@ -142,12 +120,10 @@ def corpstats_search(request):
similar = corpstats.members.filter(character_name__icontains=search_string) similar = corpstats.members.filter(character_name__icontains=search_string)
for s in similar: for s in similar:
results.append((corpstats, s)) results.append((corpstats, s))
page = request.GET.get('page', 1)
results = sorted(results, key=lambda x: x[1].character_name) results = sorted(results, key=lambda x: x[1].character_name)
results_page = get_page(results, page)
context = { context = {
'available': CorpStats.objects.visible_to(request.user), 'available': CorpStats.objects.visible_to(request.user),
'results': results_page, 'results': results,
'search_string': search_string, 'search_string': search_string,
} }
return render(request, 'corputils/search.html', context=context) return render(request, 'corputils/search.html', context=context)