Added Combat Log view (#39)

* Added Combat Log view * Added the combat log download link.
STOCD · May 12, 2024 · adfe248 · adfe248
1 parent 449042c
commit adfe248
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 19 deletions.
diff --git a/combatlog/migrations/0002_combatlog_youtube.py b/combatlog/migrations/0002_combatlog_youtube.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.9 on 2024-05-12 22:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("combatlog", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="combatlog",
+            name="youtube",
+            field=models.TextField(default=None, null=True),
+        ),
+    ]
diff --git a/combatlog/models/combatlog.py b/combatlog/models/combatlog.py
@@ -30,6 +30,7 @@ class CombatLog(BaseModel):
     )
 
     name = models.TextField(null=True, default=None)
+    youtube = models.TextField(null=True, default=None)
 
     def update_metadata_from_remote(self):
         """Updates Metadata from remote storage"""

diff --git a/combatlog/templates/combatlog.html b/combatlog/templates/combatlog.html
@@ -0,0 +1,48 @@
+{% extends 'template.html' %}
+{% block 'content' %}
+{% load l10n %}
+{% load static %}
+<div data-bs-theme="dark">
+    <h2 style="display: inline-block;">{{object.metadata.map}} {% if object.metadata.difficulty is not None %}({{object.metadata.difficulty}}){% endif %}</h2>&nbsp;
+    <h5 style="display: inline-block;">{{object.metadata.date_time|date:"DATETIME_FORMAT"}}</h5>
+    <a href="{% url 'combatlog-download' object.pk %}"><div class="float-end"><img src="{% static 'img/download.svg' %}" data-toggle="tooltip" data-placement="top" title="Download"></img></div></a>
+    <hr>
+    <table class="table table-dark table-hover table-sm table-responsive">
+        <thead>
+            <tr scope="row">
+                <th scope="col">Player</th>
+                <th scope="col">Time</th>
+                <th scope="col">DPS</th>
+                <th scope="col">Total Damage</th>
+                <th scope="col">Debuff</th>
+                <th scope="col">Attacks-in Share</th>
+                <th scope="col">Taken Damage Share</th>
+                <th scope="col">Max One Hit</th>
+                <th scope="col">Deaths</th>
+                <th scope="col">Build</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for x, player in object.metadata.summary %}
+            <tr scope="row">
+                <td scople="col">{{player.name}}{{player.handle}}</td>
+                <td scople="col">{{player.combat_time|floatformat:0|localize}}s</td>
+                <td scople="col">{{player.DPS|floatformat:0}}</td>
+                <td scople="col">{{player.total_damage|floatformat:0}}</td>
+                <td scople="col">{{player.debuff|floatformat:2}}%</td>
+                <td scople="col">{{player.attacks_in_share|floatformat:2}}%</td>
+                <td scople="col">{{player.taken_damage_share|floatformat:2}}%</td>
+                <td scople="col">{{player.max_one_hit|floatformat:0|localize}}</td>
+                <td scople="col">{{player.deaths|floatformat:0}}</td>
+                <td scople="col">{{player.build}}</td>
+            </tr>
+        </tbody>
+        {% endfor %}
+    </table>
+    {% if object.youtube is not None %}
+        <div class="ratio ratio-16x9">
+            <iframe src="https://www.youtube.com/embed/{{object.youtube}}" class="ratio ratio-16x9"></iframe>
+        </div>
+    {% endif %}
+</div>
+{% endblock %}
diff --git a/combatlog/urls/combatlog.py b/combatlog/urls/combatlog.py
@@ -10,4 +10,9 @@
 
 urlpatterns = [
     path("", include(router.urls)),
+    path(
+        "ui/combatlog/<int:pk>/",
+        views.CombatLogDetailView.as_view(template_name="combatlog.html"),
+        name="combatlog",
+    ),
 ]
diff --git a/combatlog/views/combatlog.py b/combatlog/views/combatlog.py
@@ -2,8 +2,14 @@
 
 import logging
 
+from combatlog.models import CombatLog
+from combatlog.serializers import (CombatLogSerializer,
+                                   CombatLogUploadResponseSerializer,
+                                   CombatLogUploadSerializer)
+from core.pagination import PageNumberPagination
 from django.db import transaction
 from django.http import HttpResponse
+from django.views.generic.detail import DetailView
 from drf_yasg import openapi
 from drf_yasg.utils import swagger_auto_schema
 from rest_framework.decorators import action
@@ -12,14 +18,6 @@
 from rest_framework.response import Response
 from rest_framework.viewsets import GenericViewSet
 
-from combatlog.models import CombatLog
-from combatlog.serializers import (
-    CombatLogSerializer,
-    CombatLogUploadResponseSerializer,
-    CombatLogUploadSerializer,
-)
-from core.pagination import PageNumberPagination
-
 LOGGER = logging.getLogger("django")
 
 
@@ -91,3 +89,9 @@ def download(self, request, pk=None):
         response["Content-Transfer-Encoding"] = "binary"
         response.write(data)
         return response
+
+
+class CombatLogDetailView(DetailView):
+    """Combat Log Detail View"""
+
+    model = CombatLog
diff --git a/ladder/templates/ladder_entry.html b/ladder/templates/ladder_entry.html
@@ -1,6 +1,7 @@
 {% extends 'template.html' %}
 {% block 'content' %}
 {% load l10n %}
+{% load static %}
 {% load ladder %}
 {% load ladder_entry %}
     <form action="{% url 'ladder_entries' %}">
@@ -77,6 +78,7 @@
                 <button type="submit" class="btn btn-primary btn-sm float-end">Search</button>
             </div>
         </div>
+        <hr>
         <div data-bs-theme="dark">
             <table class="table table-dark table-hover table-sm table-responsive">
                 <thead>
@@ -89,8 +91,10 @@
                         <th scope="col">Difficulty</th>
                         <th scope="col">DPS</th>
                         <th scope="col">Damage</th>
-                        <th scope="col">Combat Time</th>
+                        <th scope="col">Time</th>
                         <th scope="col">Build</th>
+                        <th scope="col">Group Size</th>
+                        <th scope="col"></th>
                     </tr>
                 </thead>
                 <tbody>
@@ -101,17 +105,46 @@
                         <td>{{entry.player}}</td>
                         <td>{{entry.ladder.variant.name}}</td>
                         <td>{{entry.ladder.name}}</td>
-                        <td>{{entry.ladder.difficulty}}</td>
+                        <td>
+                            {% if entry.ladder.difficulty == "Elite" %}
+                                <img src="{% static 'img/18px-TFO_elite_icon.png' %}"></img>&nbsp;Elite
+                            {% elif entry.ladder.difficulty == "Advanced" %}
+                                <img src="{% static 'img/18px-TFO_advanced_icon.png' %}"></img>&nbsp;Advanced
+                            {% elif entry.ladder.difficulty == "Normal" %}
+                                <img src="{% static 'img/18px-TFO_normal_icon.png' %}"></img>&nbsp;Normal
+                            {% elif entry.ladder.difficulty is None %}
+                                <img src="{% static 'img/18px-TFO_normal_icon.png' %}"></img>&nbsp;Any
+                            {% else %}
+                            {{entry.ladder.difficulty}}
+                            {% endif %}
+                        </td>
                         <td>{{entry.data.DPS|floatformat:0|localize}}</td>
                         <td>{{entry.data.total_damage|floatformat:0|localize}}</td>
-                        <td>{{entry.data.combat_time|floatformat:0|localize}}</td>
+                        <td>{{entry.data.combat_time|floatformat:0|localize}}s</td>
                         <td>{{entry.data.build}}</td>
+                        <td>
+                            {% if entry.ladder.is_solo %}
+                            Solo
+                            {% else %}
+                            2+ Players
+                            {% endif %}
+                        </td>
+                        <td>
+                            <a href="{% url 'combatlog' entry.combatlog.pk %}" target="_blank"><img src="{% static 'img/info.svg' %}" data-toggle="tooltip" data-placement="top" title="Details"></img></a>
+                            {% if entry.combatlog.youtube %}
+                                <a href="https://www.youtube.com/watch/{{entry.combatlog.youtube}}" target="_blank">
+                                    <img src="{% static 'img/youtube.svg' %}" data-toggle="tooltip" data-placement="top" title="Youtube"></img>
+                                </a>
+                            {% else %}
+                                <img src="{% static 'img/youtube.svg' %}" data-toggle="tooltip" data-placement="top" title="Youtube" class="invisible"></img>
+                            {% endif %}
+                        </td>
                     </tr>
                 </tbody>
                 {% endfor %}
             </table>
         </div>
-        <div class="row" data-bs-theme="dark">
+        <div data-bs-theme="dark">
             <div class="col">
                 <nav aria-label="" class="float-end">
                   <ul class="pagination pagination-sm">

diff --git a/ladder/views/ladder_entry.py b/ladder/views/ladder_entry.py
@@ -49,4 +49,4 @@ class LadderEntryView(FilterView):
     filter_backends = (BaseFilterBackend, OrderingFilter)
     filterset_class = LadderEntryFilter
     ordering = "-data__DPS"
-    paginate_by = 20
+    paginate_by = 15
diff --git a/ui/static/css/style.css b/ui/static/css/style.css
@@ -17,15 +17,12 @@ html, body {
 }
 
 .ui-container {
-    display: flex;
-    flex-direction: column;
     min-height: 100vh;
 }
 
 .ui-content {
     margin: .5rem;
     padding: .5rem;
-    flex: 1;
     border-radius: .5rem;
 }
 
@@ -70,4 +67,3 @@ table, td, tr, th {
     display: inline-flex;
     box-shadow: 0 0 0 .25rem rgba(200, 41, 52, .25);
 }
-
diff --git a/ui/static/img/18px-TFO_advanced_icon.png b/ui/static/img/18px-TFO_advanced_icon.png
diff --git a/ui/static/img/18px-TFO_elite_icon.png b/ui/static/img/18px-TFO_elite_icon.png
diff --git a/ui/static/img/18px-TFO_normal_icon.png b/ui/static/img/18px-TFO_normal_icon.png
diff --git a/ui/static/img/download.svg b/ui/static/img/download.svg
diff --git a/ui/static/img/info.svg b/ui/static/img/info.svg
diff --git a/ui/static/img/youtube.svg b/ui/static/img/youtube.svg
diff --git a/ui/templates/template.html b/ui/templates/template.html
@@ -11,11 +11,11 @@
         <title>OSCR | Open Source Combatlog Reader</title>
     </head>
     <body>
-        <div class="ui-container">
+        <div class="ui-container container-fluid g-0">
             <div>
                 <a href="{% url 'ui' %}"><img src="{% static 'img/oscrbanner-slim-dark-label.png' %}" class='banner'></img></a>
             </div>
-            <div class="ui-content content-background">
+            <div class="flex ui-content content-background">
                 {% block 'content' %}
                 {% endblock %}
             </div>