114 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			114 lines
		
	
	
		
			6.7 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| {% extends "base.html" %}
 | |
| {% block title %}
 | |
|     {{ title }}
 | |
| {% endblock title %}
 | |
| {% load static %}
 | |
| {% load markdown_extras %}
 | |
| {% block content %}
 | |
|     <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
 | |
|         <h1 class="text-4xl flex items-center">
 | |
|             {{ game.name }}
 | |
|             <span class="dark:text-slate-500">(#{{ game.pk }})</span>
 | |
|             {% url 'edit_game' game.id as edit_url %}
 | |
|             {% include 'components/edit_button.html' with edit_url=edit_url %}
 | |
|         </h1>
 | |
|         <h2 class="text-lg my-2 ml-2">
 | |
|             {{ hours_sum }} <span class="dark:text-slate-500">total</span>
 | |
|             {{ session_average }} <span class="dark:text-slate-500">avg</span>
 | |
|             ({{ playrange }})
 | |
|         </h2>
 | |
|         <hr class="border-slate-500">
 | |
|         <h1 class="text-3xl mt-4 mb-1">
 | |
|             Editions <span class="dark:text-slate-500">({{ edition_count }})</span> and Purchases <span class="dark:text-slate-500">({{ purchase_count }})</span>
 | |
|         </h1>
 | |
|         <ul>
 | |
|             {% for edition in editions %}
 | |
|                 <li class="sm:pl-2 flex items-center">
 | |
|                     {{ edition.name }} ({{ edition.platform }}, {{ edition.year_released }})
 | |
|                     {% if edition.wikidata %}
 | |
|                         <span class="hidden sm:inline">
 | |
|                             <a href="https://www.wikidata.org/wiki/{{ edition.wikidata }}">
 | |
|                                 <img class="inline mx-2 w-6" src="{% static 'icons/wikidata.png' %}" />
 | |
|                             </a>
 | |
|                         </span>
 | |
|                     {% endif %}
 | |
|                     {% url 'edit_edition' edition.id as edit_url %}
 | |
|                     {% include 'components/edit_button.html' with edit_url=edit_url %}
 | |
|                 </li>
 | |
|                 <ul>
 | |
|                     {% for purchase in edition.game_purchases %}
 | |
|                         <li class="sm:pl-6 flex items-center {% if purchase.date_refunded %}text-red-600{% endif %}">
 | |
|                             {{ purchase.get_ownership_type_display }}, {{ purchase.date_purchased | date:"Y" }}
 | |
|                             {% if purchase.price != 0 %}({{ purchase.price }} {{ purchase.price_currency }}){% endif %}
 | |
|                             {% url 'edit_purchase' purchase.id as edit_url %}
 | |
|                             {% include 'components/edit_button.html' with edit_url=edit_url %}
 | |
|                         </li>
 | |
|                         <ul>
 | |
|                             {% for related_purchase in purchase.nongame_related_purchases %}
 | |
|                                 <li class="sm:pl-12 flex items-center">
 | |
|                                     {{ related_purchase.name }} ({{ related_purchase.get_type_display }}, {{ purchase.platform }}, {{ related_purchase.date_purchased | date:"Y" }}, {{ related_purchase.price }} {{ related_purchase.price_currency }})
 | |
|                                     {% url 'edit_purchase' related_purchase.id as edit_url %}
 | |
|                                     {% include 'components/edit_button.html' with edit_url=edit_url %}
 | |
|                                 </li>
 | |
|                             {% endfor %}
 | |
|                         </ul>
 | |
|                     {% endfor %}
 | |
|                 </ul>
 | |
|             {% endfor %}
 | |
|         </ul>
 | |
|         <h1 class="text-3xl mt-4 mb-1 flex gap-2 items-center">
 | |
|             Sessions
 | |
|             <span class="dark:text-slate-500" id="session-count">({{ session_count }})</span>
 | |
|             {% url 'view_game_start_session_from_session' latest_session_id as add_session_link %}
 | |
|             <a
 | |
|                 class="truncate max-w-xs py-1 px-2 text-xs bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-sm"
 | |
|                 title="Start new session"
 | |
|                 href="{{ add_session_link }}"
 | |
|                 hx-get="{{ add_session_link }}"
 | |
|                 hx-vals="js:{session_count:getSessionCount()}"
 | |
|                 hx-target="#session-list"
 | |
|                 hx-swap="afterbegin"
 | |
|             >New</a>
 | |
|             and Notes <span class="dark:text-slate-500">({{ sessions_with_notes_count }})</span>
 | |
|         </h1>
 | |
|         <ul id="session-list">
 | |
|             {% for session in sessions %}
 | |
|                 {% partialdef session-info inline=True %}
 | |
|                     <li class="sm:pl-2 mt-4 mb-2 dark:text-slate-400 flex items-center space-x-1">
 | |
|                         {{ session.timestamp_start | date:"d/m/Y H:m" }}
 | |
|                         ({{ session.device.get_type_display | default:"Unknown" }}, {{ session.duration_formatted }})
 | |
|                         {% url 'edit_session' session.id as edit_url %}
 | |
|                         {% include 'components/edit_button.html' with edit_url=edit_url %}
 | |
|                         {% if not session.timestamp_end %}
 | |
|                         {% url 'view_game_end_session' session.id as end_session_url %}
 | |
|                         <a
 | |
|                             class="flex bg-green-600 rounded-full px-2 w-7 h-4 text-white justify-center items-center"
 | |
|                             href="{{ end_session_url }}"
 | |
|                             hx-get="{{ end_session_url }}"
 | |
|                             hx-target="closest li"
 | |
|                             hx-swap="outerHTML"
 | |
|                             hx-vals="js:{session_count:getSessionCount()}"
 | |
|                             hx-indicator="#indicator"
 | |
|                         >
 | |
|                         <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" class="h-3" x="0px" y="0px" viewBox="0 0 24 24">
 | |
|                             <path d="M 12 2 C 6.486 2 2 6.486 2 12 C 2 17.514 6.486 22 12 22 C 17.514 22 22 17.514 22 12 C 22 10.874 21.803984 9.7942031 21.458984 8.7832031 L 19.839844 10.402344 C 19.944844 10.918344 20 11.453 20 12 C 20 16.411 16.411 20 12 20 C 7.589 20 4 16.411 4 12 C 4 7.589 7.589 4 12 4 C 13.633 4 15.151922 4.4938906 16.419922 5.3378906 L 17.851562 3.90625 C 16.203562 2.71225 14.185 2 12 2 z M 21.292969 3.2929688 L 11 13.585938 L 7.7070312 10.292969 L 6.2929688 11.707031 L 11 16.414062 L 22.707031 4.7070312 L 21.292969 3.2929688 z"></path>
 | |
|                         </svg>
 | |
|                         </a>
 | |
| 
 | |
|                         {% endif %}
 | |
|                     </li>
 | |
|                     <li class="sm:pl-4 markdown-content">{{ session.note|markdown }}</li>
 | |
|                     <div class="hidden" hx-swap-oob="innerHTML:#session-count">
 | |
|                         ({{ session_count }})
 | |
|                     </div>
 | |
|                 {% endpartialdef %}
 | |
|             {% endfor %}
 | |
|         </ul>
 | |
|     </div>
 | |
|     <script>
 | |
|         function getSessionCount() {
 | |
|             return document.getElementById('session-count').textContent.match("[0-9]+");
 | |
|         }
 | |
|     </script>
 | |
| {% endblock content %}
 |