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">
<ul class="nav navbar-nav">
<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>
<ul class="dropdown-menu">
<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" role="menu" aria-labelledby="dLabel">
{% for corpstat in available %}
<li>
<a href="{% url 'corputils:view_corp' corpstat.corp.corporation_id %}">{{ corpstat.corp.corporation_name }}</a>
@ -27,7 +27,7 @@
</ul>
<form class="navbar-form navbar-right" role="search" action="{% url 'corputils:search' %}" method="GET">
<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>
</form>
</div>
@ -35,5 +35,4 @@
{% block member_data %}{% endblock %}
</div>
</div>
{% endblock %}
{% endblock %}

View File

@ -1,7 +1,6 @@
{% extends 'corputils/base.html' %}
{% load i18n %}
{% load humanize %}
{% load bootstrap_pagination %}
{% block member_data %}
{% if corpstats %}
<div class="row">
@ -58,104 +57,117 @@
<div class="tab-content">
<div class="tab-pane fade in active" id="mains">
{% if mains %}
<div class="text-center">{% bootstrap_paginate mains range=10 %}</div>
<div class="table-responsive">
<table class="table table-hover">
{% for main in mains %}
<table class="table table-hover" id="table-mains">
<thead>
<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>
<th></th>
<th></th>
</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>
</div>
{% endif %}
</div>
<div class="tab-pane fade" id="members">
{% if members %}
<div class="text-center">{% bootstrap_paginate members range=10 %}</div>
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th></th>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center"></th>
<th class="text-center">{% trans "Main Character" %}</th>
<th class="text-center">{% trans "Main Corporation" %}</th>
<th class="text-center">{% trans "Main Alliance" %}</th>
</tr>
{% 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>
<table class="table table-hover" id="table-members">
<thead>
<tr>
<th></th>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center"></th>
<th class="text-center">{% trans "Main Character" %}</th>
<th class="text-center">{% trans "Main Corporation" %}</th>
<th class="text-center">{% trans "Main Alliance" %}</th>
</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>
</div>
{% endif %}
</div>
<div class="tab-pane fade" id="unregistered">
{% if unregistered %}
<div class="text-center">{% bootstrap_paginate unregistered range=10 %}</div>
<div class="table-responsive">
<table class="table table-hover">
<tr>
<th></th>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center"></th>
</tr>
{% 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>
<table class="table table-hover" id="table-unregistered">
<thead>
<tr>
<th></th>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center"></th>
</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>
</div>
{% endif %}
@ -167,3 +179,17 @@
</div>
{% endif %}
{% 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" %}
{% load i18n %}
{% load bootstrap_pagination %}
{% load eveonline_extras %}
{% block member_data %}
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="panel-title pull-left">{% trans "Search Results" %}</div>
</div>
<div class="panel-body">
<div class="text-center">
{% bootstrap_paginate results range=10 %}
</div>
<table class="table table-hover">
<tr>
<th class="text-center"></th>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center">{% trans "Corporation" %}</th>
<th class="text-center">{% trans "zKillboard" %}</th>
<th class="text-center">{% trans "Main Character" %}</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>
<table class="table table-hover" id="table-search">
<thead>
<tr>
<th class="text-center"></th>
<th class="text-center">{% trans "Character" %}</th>
<th class="text-center">{% trans "Corporation" %}</th>
<th class="text-center">{% trans "zKillboard" %}</th>
<th class="text-center">{% trans "Main Character" %}</th>
<th class="text-center">{% trans "Main Corporation" %}</th>
<th class="text-center">{% trans "Main Alliance" %}</th>
</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>
</div>
</div>
{% 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.core.exceptions import PermissionDenied
from django.db import IntegrityError
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.utils.translation import ugettext_lazy as _
from django.conf import settings
from eveonline.models import EveCharacter, EveCorporationInfo
from eveonline.managers import EveManager
from corputils.models import CorpStats
from esi.decorators import token_required
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):
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,
}
# 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:
members = corpstats.members.all()
mains = corpstats.mains.all()
unregistered = corpstats.unregistered_members.all()
context.update({
'corpstats': corpstats,
'members': members,
@ -142,12 +120,10 @@ def corpstats_search(request):
similar = corpstats.members.filter(character_name__icontains=search_string)
for s in similar:
results.append((corpstats, s))
page = request.GET.get('page', 1)
results = sorted(results, key=lambda x: x[1].character_name)
results_page = get_page(results, page)
context = {
'available': CorpStats.objects.visible_to(request.user),
'results': results_page,
'results': results,
'search_string': search_string,
}
return render(request, 'corputils/search.html', context=context)