Move from HTML templates to pure Python
Remove cruft
This commit is contained in:
@@ -1,2 +0,0 @@
|
||||
<c-layouts.add>
|
||||
</c-layouts.add>
|
||||
@@ -1,9 +0,0 @@
|
||||
<c-layouts.add>
|
||||
<c-slot name="additional_row">
|
||||
<c-button type="submit" color="gray"
|
||||
name="submit_and_redirect"
|
||||
>
|
||||
Submit & Create Purchase
|
||||
</c-button>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
@@ -1,15 +0,0 @@
|
||||
<c-layouts.add>
|
||||
<c-slot name="additional_row">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<c-button type="submit"
|
||||
color="gray"
|
||||
name="submit_and_redirect"
|
||||
>
|
||||
Submit & Create Session
|
||||
</c-button>
|
||||
</td>
|
||||
</tr>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
@@ -1,38 +0,0 @@
|
||||
<c-layouts.add>
|
||||
<c-slot name="form_content">
|
||||
<div class="max-width-container">
|
||||
<div id="add-form" class="form-container max-w-xl mx-auto">
|
||||
<form method="post" enctype="multipart/form-data" class="">
|
||||
{% csrf_token %}
|
||||
{% for field in form %}
|
||||
<div>
|
||||
{{ field.label_tag }}
|
||||
{% if field.name == "note" %}
|
||||
{{ field }}
|
||||
{% else %}
|
||||
{{ field }}
|
||||
{% endif %}
|
||||
{% if field.name == "timestamp_start" or field.name == "timestamp_end" %}
|
||||
<span class="form-row-button-group flex-row gap-3 justify-start mt-3" hx-boost="false">
|
||||
<c-button data-target="{{ field.name }}" data-type="now" size="xs">Set to now</c-button>
|
||||
<c-button data-target="{{ field.name }}" data-type="toggle" size="xs">Toggle text</c-button>
|
||||
<c-button data-target="{{ field.name }}" data-type="copy" size="xs">
|
||||
Copy {%if field.name == "timestamp_start" %}start{% else %}end{% endif %} value to {%if field.name == "timestamp_start" %}end{% else %}start{% endif %}
|
||||
</c-button>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div>
|
||||
<c-button type="submit">
|
||||
Submit
|
||||
</c-button>
|
||||
</div>
|
||||
<div class="submit-button-container">
|
||||
{{ additional_row }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</c-slot>
|
||||
</c-layouts.add>
|
||||
@@ -1,3 +0,0 @@
|
||||
<c-vars color="blue" size="base" type="button" />
|
||||
{% load button_tag %}
|
||||
{% python_button color=color size=size icon=icon type=type class_=class hx_get=hx_get hx_target=hx_target hx_swap=hx_swap title=title onclick=onclick data_target=data_target data_type=data_type name=name slot=slot %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load button_group_tag %}
|
||||
{% python_button_group buttons=buttons %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load gamelink_tag %}
|
||||
{% python_gamelink game_id=game_id name=name slot=slot %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load gamestatus_tag %}
|
||||
{% python_gamestatus status=status display=display class_=class slot=slot %}
|
||||
@@ -1,3 +0,0 @@
|
||||
<c-vars badge="" />
|
||||
{% load h1_tag %}
|
||||
{% python_h1 badge=badge slot=slot %}
|
||||
@@ -1,28 +0,0 @@
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
{% if form_content %}
|
||||
{{ form_content }}
|
||||
{% else %}
|
||||
<div id="add-form" class="max-width-container">
|
||||
<div id="add-form" class="form-container max-w-xl mx-auto">
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{{ form.as_div }}
|
||||
<div>
|
||||
<c-button type="submit" class="mt-3">
|
||||
Submit
|
||||
</c-button>
|
||||
</div>
|
||||
<div class="submit-button-container">
|
||||
{{ additional_row }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<c-slot name="scripts">
|
||||
{% if script_name %}
|
||||
<script type="module" src="{% static 'js/'|add:script_name %}"></script>
|
||||
{% endif %}
|
||||
</c-slot>
|
||||
</c-layouts.base>
|
||||
@@ -1,212 +0,0 @@
|
||||
{% load django_htmx %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{% load static %}
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="description" content="Self-hosted time-tracker." />
|
||||
<meta name="keywords" content="time, tracking, video games, self-hosted" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Timetracker - {{ title }}</title>
|
||||
<script src="{% static 'js/htmx.min.js' %}"></script>
|
||||
<script>
|
||||
htmx.config.scrollBehavior = 'smooth';
|
||||
htmx.config.selfRequestsOnly = false;
|
||||
</script>
|
||||
<script src="{% static 'js/htmx-redirect-toast.js' %}"></script>
|
||||
{% django_htmx_script %}
|
||||
<link rel="stylesheet" href="{% static 'base.css' %}" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.4.1/dist/flowbite.min.js"></script>
|
||||
{% comment %} <script src="//unpkg.com/alpinejs" defer></script>
|
||||
<script src="//unpkg.com/@alpinejs/mask" defer></script> {% endcomment %}
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script>
|
||||
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
||||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body hx-indicator="#indicator" class="bg-neutral-primary">
|
||||
<script id="django-messages" type="application/json">
|
||||
[
|
||||
{% for message in messages %}
|
||||
{"message": "{{ message|escapejs }}", "type": "{{ message.tags|default:'info' }}"}{% if not forloop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
</script>
|
||||
<img id="indicator"
|
||||
src="{% static 'icons/loading.png' %}"
|
||||
class="absolute right-3 top-3 animate-spin htmx-indicator"
|
||||
height="24"
|
||||
width="24"
|
||||
alt="loading indicator" />
|
||||
<div class="flex flex-col min-h-screen">
|
||||
{% include "navbar.html" %}
|
||||
<div id="main-container" class="flex flex-1 flex-col pt-8 pb-16">{{ slot }}</div>
|
||||
{% load version %}
|
||||
<span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
|
||||
</div>
|
||||
{{ scripts }}
|
||||
<script type="module">
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
if (window.mountCrownIcon) {
|
||||
window.mountCrownIcon('#crown-icon-mount-point', {
|
||||
mastered: {{ game.mastered|yesno:"true,false" }}
|
||||
});
|
||||
}
|
||||
|
||||
// Theme toggle logic
|
||||
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
||||
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||
|
||||
// Ensure all elements are found before proceeding
|
||||
if (themeToggleDarkIcon && themeToggleLightIcon && themeToggleBtn) {
|
||||
// Initial state of icons based on current theme
|
||||
// The FOUC script in <head> already set document.documentElement.classList.add/remove('dark')
|
||||
// So we just need to set the icon visibility based on that.
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
themeToggleLightIcon.classList.remove('hidden');
|
||||
themeToggleDarkIcon.classList.add('hidden');
|
||||
} else {
|
||||
themeToggleDarkIcon.classList.remove('hidden');
|
||||
themeToggleLightIcon.classList.add('hidden');
|
||||
}
|
||||
|
||||
themeToggleBtn.addEventListener('click', function () {
|
||||
// toggle icons inside button
|
||||
themeToggleDarkIcon.classList.toggle('hidden');
|
||||
themeToggleLightIcon.classList.toggle('hidden');
|
||||
|
||||
// if set via local storage previously
|
||||
if (localStorage.getItem('color-theme')) {
|
||||
if (localStorage.getItem('color-theme') === 'light') {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('color-theme', 'dark');
|
||||
} else { // current theme is dark, switch to light
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('color-theme', 'light');
|
||||
}
|
||||
|
||||
// if NOT set via local storage previously
|
||||
} else { // no theme in local storage, use system preference
|
||||
if (document.documentElement.classList.contains('dark')) { // currently dark, switch to light
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('color-theme', 'light');
|
||||
} else { // currently light, switch to dark
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('color-theme', 'dark');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!-- hx-swap-oob makes sure the modal gets removed upon any HTMX response -->
|
||||
<div id="global-modal-container" hx-swap-oob="true"></div>
|
||||
|
||||
<div x-data="toastStore()"
|
||||
role="region"
|
||||
aria-label="Notifications"
|
||||
aria-atomic="true"
|
||||
class="fixed z-50 bottom-0 right-0 flex flex-col items-end pointer-events-none p-4">
|
||||
<template x-for="toast in $store.toasts.toasts" :key="toast.id">
|
||||
<div x-show="toast.visible"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-x-8"
|
||||
x-transition:enter-end="opacity-100 translate-x-0"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-x-0"
|
||||
x-transition:leave-end="opacity-0 translate-x-8"
|
||||
:role="toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'"
|
||||
:aria-live="toast.type === 'error' ? 'assertive' : 'polite'"
|
||||
tabindex="0"
|
||||
class="pointer-events-auto max-w-sm w-72 cursor-pointer mb-3 last:mb-0"
|
||||
:class="{
|
||||
'success': toast.type === 'success',
|
||||
'error': toast.type === 'error',
|
||||
'info': toast.type === 'info',
|
||||
'warning': toast.type === 'warning',
|
||||
'debug': toast.type === 'debug'
|
||||
}"
|
||||
@click="dismissToast(toast.id)"
|
||||
@mouseenter="$store.toasts.clearToastTimer(toast.id)"
|
||||
@mouseleave="$store.toasts.resumeToastTimer(toast.id, 5000)"
|
||||
@keydown.escape="dismissToast(toast.id)">
|
||||
<div class="rounded-lg shadow-lg p-4 flex items-start gap-3"
|
||||
:class="{
|
||||
'bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700': toast.type === 'success',
|
||||
'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700': toast.type === 'error',
|
||||
'bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700': toast.type === 'info',
|
||||
'bg-amber-50 dark:bg-amber-900 border border-amber-200 dark:border-amber-700': toast.type === 'warning',
|
||||
'bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700': toast.type === 'debug'
|
||||
}">
|
||||
<span class="flex-shrink-0 mt-0.5"
|
||||
:class="{
|
||||
'text-green-500': toast.type === 'success',
|
||||
'text-red-500': toast.type === 'error',
|
||||
'text-blue-500': toast.type === 'info',
|
||||
'text-amber-500': toast.type === 'warning',
|
||||
'text-gray-500': toast.type === 'debug'
|
||||
}">
|
||||
<template x-if="toast.type === 'success'">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="toast.type === 'error'">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="toast.type === 'info'">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="toast.type === 'warning'">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 13l5 5 5-5M7 6l5 5 5-5"/>
|
||||
</svg>
|
||||
</template>
|
||||
<template x-if="toast.type === 'debug'">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</template>
|
||||
</span>
|
||||
<p class="flex-1 text-sm"
|
||||
:class="{
|
||||
'text-green-800 dark:text-green-200': toast.type === 'success',
|
||||
'text-red-800 dark:text-red-200': toast.type === 'error',
|
||||
'text-blue-800 dark:text-blue-200': toast.type === 'info',
|
||||
'text-amber-800 dark:text-amber-200': toast.type === 'warning',
|
||||
'text-gray-800 dark:text-gray-200': toast.type === 'debug'
|
||||
}"
|
||||
x-text="toast.message"></p>
|
||||
<button @click.stop="dismissToast(toast.id)"
|
||||
class="flex-shrink-0"
|
||||
:class="{
|
||||
'text-green-400 hover:text-green-600 dark:text-green-500 dark:hover:text-green-300': toast.type === 'success',
|
||||
'text-red-400 hover:text-red-600 dark:text-red-500 dark:hover:text-red-300': toast.type === 'error',
|
||||
'text-blue-400 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-300': toast.type === 'info',
|
||||
'text-amber-400 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-300': toast.type === 'warning',
|
||||
'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300': toast.type === 'debug'
|
||||
}">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<script src="{% static 'js/toast.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,3 +0,0 @@
|
||||
<c-vars popover_content="" wrapped_content="" wrapped_classes="" id="" />
|
||||
{% load popover_tag %}
|
||||
{% python_popover popover_content=popover_content wrapped_content=wrapped_content wrapped_classes=wrapped_classes id=id slot=slot %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load price_converted_tag %}
|
||||
{% python_price_converted slot=slot %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load table_header_tag %}
|
||||
{% python_table_header slot=slot %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load table_row_tag %}
|
||||
{% python_table_row data=data %}
|
||||
@@ -1,2 +0,0 @@
|
||||
{% load table_td_tag %}
|
||||
{% python_table_td slot=slot %}
|
||||
@@ -1,16 +0,0 @@
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
<div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
|
||||
<form method="post" class="dark:text-white">
|
||||
{% csrf_token %}
|
||||
<div>
|
||||
<p>Are you sure you want to delete this status change?</p>
|
||||
<c-button color="red" type="submit" size="lg" class="w-full">Delete</c-button>
|
||||
<a href="{% url 'games:view_game' object.game.id %}" class="">
|
||||
<c-button color="gray" class="w-full">Cancel</c-button>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
|
||||
|
Before Width: | Height: | Size: 284 B After Width: | Height: | Size: 284 B |
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.5 KiB |
|
Before Width: | Height: | Size: 819 B After Width: | Height: | Size: 819 B |
|
Before Width: | Height: | Size: 477 B After Width: | Height: | Size: 477 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 571 B After Width: | Height: | Size: 571 B |
|
Before Width: | Height: | Size: 798 B After Width: | Height: | Size: 798 B |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 643 B After Width: | Height: | Size: 643 B |
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 779 B After Width: | Height: | Size: 779 B |
|
Before Width: | Height: | Size: 252 B After Width: | Height: | Size: 252 B |
|
Before Width: | Height: | Size: 825 B After Width: | Height: | Size: 825 B |
|
Before Width: | Height: | Size: 248 B After Width: | Height: | Size: 248 B |
|
Before Width: | Height: | Size: 978 B After Width: | Height: | Size: 978 B |
|
Before Width: | Height: | Size: 978 B After Width: | Height: | Size: 978 B |
|
Before Width: | Height: | Size: 834 B After Width: | Height: | Size: 834 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 496 B After Width: | Height: | Size: 496 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 882 B After Width: | Height: | Size: 882 B |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 879 B After Width: | Height: | Size: 879 B |
|
Before Width: | Height: | Size: 669 B After Width: | Height: | Size: 669 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 345 B After Width: | Height: | Size: 345 B |
@@ -1,17 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="text-slate-300 mx-auto max-w-(--breakpoint-lg) text-center">
|
||||
{% if session_count > 0 %}
|
||||
You have played a total of {{ session_count }} sessions for a total of {{ total_duration_formatted }}.
|
||||
{% elif not game_available or not platform_available %}
|
||||
There are no games in the database. Start by clicking "New Game" and "New Platform".
|
||||
{% elif not purchase_available %}
|
||||
There are no owned games. Click "New Purchase" at the top.
|
||||
{% else %}
|
||||
You haven't played any games yet. Click "New Session" to add one now.
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@@ -1,6 +0,0 @@
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
<div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
|
||||
{% include "simple_table.html" with rows=data.rows columns=data.columns page_obj=page_obj elided_page_range=elided_page_range header_action=data.header_action %}
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
@@ -1,6 +0,0 @@
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
<div class="2xl:max-w-(--breakpoint-2xl) xl:max-w-(--breakpoint-xl) md:max-w-(--breakpoint-md) sm:max-w-(--breakpoint-sm) self-center">
|
||||
{% include "simple_table.html" with rows=data.rows columns=data.columns page_obj=page_obj elided_page_range=elided_page_range header_action=data.header_action %}
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
@@ -1,73 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="flex-col">
|
||||
{% if dataset_count >= 1 %}
|
||||
{% url 'games:list_sessions_start_session_from_session' last.id as start_session_url %}
|
||||
<div class="mx-auto text-center my-4">
|
||||
<a id="last-session-start"
|
||||
href="{{ start_session_url }}"
|
||||
hx-get="{{ start_session_url }}"
|
||||
hx-swap="afterbegin"
|
||||
hx-target=".responsive-table tbody"
|
||||
onClick="document.querySelector('#last-session-start').classList.add('invisible')"
|
||||
class="{% if last.timestamp_end == null %}invisible{% endif %}">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if dataset_count != 0 %}
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
|
||||
<th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
|
||||
<th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for session in dataset %}
|
||||
{% partialdef session-row inline=True %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name relative align-top w-24 h-12 group">
|
||||
<span class="inline-block relative">
|
||||
<a class="underline decoration-slate-500 sm:decoration-2 inline-block truncate max-w-20char group-hover:absolute group-hover:max-w-none group-hover:-top-8 group-hover:-left-6 group-hover:min-w-60 group-hover:px-6 group-hover:py-3.5 group-hover:bg-purple-600 group-hover:rounded-xs group-hover:outline-dashed group-hover:outline-purple-400 group-hover:outline-4 group-hover:decoration-purple-900 group-hover:text-purple-100"
|
||||
href="{% url 'games:view_game' session.game.id %}">
|
||||
{{ session.game.name }}
|
||||
</a>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
|
||||
{{ session.timestamp_start | date:"d/m/Y H:i" }}
|
||||
</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
|
||||
{% if not session.timestamp_end %}
|
||||
{% url 'games:list_sessions_end_session' session.id as end_session_url %}
|
||||
<a href="{{ end_session_url }}"
|
||||
hx-get="{{ end_session_url }}"
|
||||
hx-target="closest tr"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator="#indicator"
|
||||
onClick="document.querySelector('#last-session-start').classList.remove('invisible')">
|
||||
<span class="text-yellow-300">Finish now?</span>
|
||||
</a>
|
||||
{% elif session.duration_manual %}
|
||||
--
|
||||
{% else %}
|
||||
{{ session.timestamp_end | date:"d/m/Y H:i" }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ session.duration_formatted }}</td>
|
||||
</tr>
|
||||
{% endpartialdef %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="mx-auto text-center text-slate-300 text-xl">No sessions found.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@@ -1,146 +0,0 @@
|
||||
{% load static %}
|
||||
<nav class="bg-neutral-primary-soft border-b border-default">
|
||||
<div class="max-w-(--breakpoint-xl) flex flex-wrap items-center justify-between mx-auto p-4">
|
||||
<a href="{% url 'games:index' %}"
|
||||
class="flex items-center space-x-3 rtl:space-x-reverse">
|
||||
<img src="{% static 'icons/schedule.png' %}"
|
||||
height="48"
|
||||
width="48"
|
||||
alt="Timetracker Logo"
|
||||
class="mr-4" />
|
||||
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Timetracker</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="navbar-dropdown"
|
||||
type="button"
|
||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||
aria-controls="navbar-dropdown"
|
||||
aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 17 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="hidden w-full md:block md:w-auto" id="navbar-dropdown">
|
||||
<ul class="items-center flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
|
||||
<li class="flex items-center">
|
||||
<button id="theme-toggle" type="button" class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm hover:cursor-pointer">
|
||||
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</li>
|
||||
<li class="dark:text-white flex flex-col items-center text-xs">
|
||||
<span class="flex uppercase gap-1">Today<span class="dark:text-gray-400">·</span>Last 7 days</span>
|
||||
<span class="flex items-center gap-1">{{ today_played }}<span class="dark:text-gray-400">·</span>{{ last_7_played }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#"
|
||||
class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500 dark:bg-blue-600 md:dark:bg-transparent"
|
||||
aria-current="page">Home</a>
|
||||
</li>
|
||||
<li>
|
||||
<button id="dropdownNavbarNewLink"
|
||||
data-dropdown-toggle="dropdownNavbarNew"
|
||||
class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent hover:cursor-pointer">
|
||||
New
|
||||
<svg class="w-2.5 h-2.5 ms-2.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div id="dropdownNavbarNew"
|
||||
class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
|
||||
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400"
|
||||
aria-labelledby="dropdownLargeButton">
|
||||
<li>
|
||||
<a href="{% url 'games:add_device' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Device</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:add_game' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Game</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:add_platform' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Platform</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:add_purchase' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Purchase</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:add_session' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Session</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<button id="dropdownNavbarManageLink"
|
||||
data-dropdown-toggle="dropdownNavbarManage"
|
||||
class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto dark:text-white md:dark:hover:text-blue-500 dark:focus:text-white dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent hover:cursor-pointer">
|
||||
Manage
|
||||
<svg class="w-2.5 h-2.5 ms-2.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown menu -->
|
||||
<div id="dropdownNavbarManage"
|
||||
class="z-10 hidden font-normal bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44 dark:bg-gray-700 dark:divide-gray-600">
|
||||
<ul class="py-2 text-sm text-gray-700 dark:text-gray-400"
|
||||
aria-labelledby="dropdownLargeButton">
|
||||
<li>
|
||||
<a href="{% url 'games:list_devices' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Devices</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:list_games' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Games</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:list_platforms' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Platforms</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:list_playevents' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Play events</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:list_purchases' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Purchases</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:list_sessions' %}"
|
||||
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Sessions</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'games:stats_by_year' global_current_year %}"
|
||||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Stats</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'logout' %}"
|
||||
class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Log
|
||||
out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@@ -1,32 +0,0 @@
|
||||
{% load modal_tag %}
|
||||
{% python_modal "delete-game-confirmation-modal" %}
|
||||
<h1 class="text-2xl leading-6 font-medium dark:text-white text-center">Delete Game</h1>
|
||||
<p class="dark:text-white text-center mt-5">
|
||||
Are you sure you want to delete <strong>{{ game.name }}</strong>?
|
||||
</p>
|
||||
<form class=""
|
||||
hx-post="{% url 'games:delete_game' game.id %}"
|
||||
hx-replace-url="true"
|
||||
hx-target="#main-container"
|
||||
hx-select="#main-container"
|
||||
hx-swap="outerHTML"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<p class="dark:text-white text-center mt-3 text-sm text-gray-600 dark:text-gray-400">
|
||||
This will permanently delete this game and all associated data:
|
||||
</p>
|
||||
<ul class="dark:text-white text-center mt-1 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
|
||||
{% if session_count %}<li>{{ session_count }} session(s)</li>{% endif %}
|
||||
{% if purchase_count %}<li>{{ purchase_count }} purchase(s)</li>{% endif %}
|
||||
{% if playevent_count %}<li>{{ playevent_count }} play event(s)</li>{% endif %}
|
||||
{% if not session_count and not purchase_count and not playevent_count %}<li>No associated data</li>{% endif %}
|
||||
</ul>
|
||||
<p class="dark:text-white text-center mt-3 text-sm font-medium text-red-600 dark:text-red-400">
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
<div class="items-center mt-5">
|
||||
<c-button color="red" size="lg" type="submit" class="w-full">Delete</c-button>
|
||||
<c-button color="gray" size="base" class="mt-0 w-full" onclick="this.closest('#delete-game-confirmation-modal').remove()">Cancel</c-button>
|
||||
</div>
|
||||
</form>
|
||||
{% endpython_modal %}
|
||||
@@ -1,49 +0,0 @@
|
||||
<div class="flex gap-2 items-center"
|
||||
x-data="{
|
||||
status: '{{ game.status }}',
|
||||
status_display: '{{ game.get_status_display }}',
|
||||
open: false,
|
||||
saving: false,
|
||||
setStatus(newStatus, newStatusDisplay) {
|
||||
this.status = newStatus;
|
||||
this.status_display = newStatusDisplay;
|
||||
this.saving = true;
|
||||
// TODO: migrate to hx-post + hx-on::after-request for HTMX-native toast handling
|
||||
fetchWithHtmxTriggers(`/api/games/{{ game.id }}/status`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
},
|
||||
body: JSON.stringify({ status: newStatus })
|
||||
})
|
||||
.then(() => {
|
||||
document.body.dispatchEvent(new CustomEvent('status-changed'));
|
||||
})
|
||||
.catch(() => {
|
||||
console.error('Failed to update status');
|
||||
})
|
||||
.finally(() => this.saving = false);
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div class="inline-flex rounded-md shadow-2xs" role="group" @click.outside="open = false">
|
||||
<button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle hover:cursor-pointer">
|
||||
<span class="flex flex-row gap-4 justify-between items-center">
|
||||
{% for status_value, status_label in game_statuses %}
|
||||
<template x-if="status == '{{ status_value }}'">
|
||||
<c-gamestatus display="flex" status="{{ status_value }}">{{ status_label }}</c-gamestatus>
|
||||
</template>
|
||||
{% endfor %}
|
||||
<c-icon.arrowdown />
|
||||
</span>
|
||||
<div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">
|
||||
<ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
|
||||
{% for status_value, status_label in game_statuses %}
|
||||
<li><a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;" class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-sm no-underline! border-0!" :class="{ 'font-bold': status === '{{ status_value }}' }"><c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,6 +0,0 @@
|
||||
<ul class="list-disc list-inside">
|
||||
{% for change in statuschanges %}
|
||||
<li class="text-slate-500">
|
||||
{% if change.timestamp %}{{ change.timestamp | date:"d/m/Y H:i" }}: Changed{% else %}At some point changed{% endif %} status from <c-gamestatus :status="change.old_status">{{ change.get_old_status_display }}</c-gamestatus> to <c-gamestatus :status="change.new_status">{{ change.get_new_status_display }}</c-gamestatus> (<a href="{% url 'games:edit_statuschange' change.id %}">Edit</a>, <a href="{% url 'games:delete_statuschange' change.id %}">Delete</a>)</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -1,17 +0,0 @@
|
||||
{% load modal_tag %}
|
||||
{% python_modal "refund-confirmation-modal" %}
|
||||
<h1 class="text-2xl leading-6 font-medium dark:text-white text-center">Confirm Refund</h1>
|
||||
<p class="dark:text-white text-center mt-5">
|
||||
Are you sure you want to mark this purchase as refunded?
|
||||
</p>
|
||||
<form class="" hx-post="{% url 'games:refund_purchase' purchase_id %}" hx-target="#purchase-row-{{ purchase_id }}" hx-swap="outerHTML">
|
||||
{% csrf_token %}
|
||||
<p class="dark:text-white text-center mt-3 text-sm">
|
||||
Games will be marked as abandoned.
|
||||
</p>
|
||||
<div class="items-center mt-5">
|
||||
<c-button color="blue" size="lg" type="submit" class="w-full">Refund</c-button>
|
||||
<c-button color="gray" size="base" class="mt-0 w-full" onclick="this.closest('#refund-confirmation-modal').remove()">Cancel</c-button>
|
||||
</div>
|
||||
</form>
|
||||
{% endpython_modal %}
|
||||
@@ -1 +0,0 @@
|
||||
{{ form.related_purchase }}
|
||||
@@ -1,49 +0,0 @@
|
||||
<div class="flex gap-2 items-center"
|
||||
x-data="{
|
||||
originalDeviceId: {{ session.device.id|default:'null' }},
|
||||
originalDeviceName: '{{ session.device.name|default:'Unknown'|escapejs }}',
|
||||
deviceId: {{ session.device.id|default:'null' }},
|
||||
deviceName: '{{ session.device.name|default:'Unknown'|escapejs }}',
|
||||
open: false,
|
||||
saving: false,
|
||||
setDevice(newDeviceId, newDeviceName) {
|
||||
this.deviceId = newDeviceId;
|
||||
this.deviceName = newDeviceName;
|
||||
this.saving = true;
|
||||
// TODO: migrate to hx-post + hx-on::after-request for HTMX-native toast handling
|
||||
fetchWithHtmxTriggers(`/api/session/{{ session.id }}/device`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
},
|
||||
body: JSON.stringify({ device_id: newDeviceId })
|
||||
})
|
||||
.then((res) => {
|
||||
document.body.dispatchEvent(new CustomEvent('device-changed'));
|
||||
})
|
||||
.catch(() => {
|
||||
this.deviceName = this.originalDeviceName;
|
||||
this.deviceId = this.originalDeviceId;
|
||||
console.error('Failed to update device');
|
||||
})
|
||||
.finally(() => this.saving = false);
|
||||
}
|
||||
}"
|
||||
>
|
||||
<div class="inline-flex rounded-md shadow-2xs" role="group" @click.outside="open = false">
|
||||
<button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle hover:cursor-pointer">
|
||||
<span class="flex flex-row gap-4 justify-between items-center">
|
||||
<span x-text="deviceName"></span>
|
||||
<c-icon.arrowdown />
|
||||
</span>
|
||||
<div class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700" x-show="open" style="display: none;">
|
||||
<ul class="[&_li:first-of-type_a]:rounded-none [&_li:last-of-type_a]:rounded-t-none">
|
||||
{% for device in session_devices %}
|
||||
<li><a href="#" @click.prevent.stop="setDevice({{ device.id }}, '{{ device.name|escapejs }}'); open = false;" class="block px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-sm no-underline! border-0!" :class="{ 'font-bold': deviceId === {{ device.id }} }">{{ device.name }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,18 +0,0 @@
|
||||
<c-layouts.base title="Login">
|
||||
{% load static %}
|
||||
<div class="flex items-center flex-col">
|
||||
<h2 class="text-3xl text-white mb-8">Please log in to continue</h2>
|
||||
<form method="post">
|
||||
<table>
|
||||
{% csrf_token %}
|
||||
{{ form.as_table }}
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type="submit" value="Login" />
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</table>
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
@@ -1,155 +0,0 @@
|
||||
{% extends "base.html" %}
|
||||
{% load static %}
|
||||
{% block title %}
|
||||
{{ title }}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div class="flex self-center m-4 flex-col gap-4 [&_h1]:mb-2">
|
||||
<div>
|
||||
<h1 class="text-white text-lg">No size</h1>
|
||||
<c-button>
|
||||
No attributes
|
||||
</c-button>
|
||||
<c-button color="blue">
|
||||
No attributes, blue
|
||||
</c-button>
|
||||
<c-button color="red">
|
||||
No attributes, red
|
||||
</c-button>
|
||||
<c-button color="green">
|
||||
No attributes, green
|
||||
</c-button>
|
||||
<c-button color="gray">
|
||||
No attributes, gray
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">No size, icons</h1>
|
||||
<c-button>
|
||||
<c-icon.edit />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button>
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Extra Small, icons</h1>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xs">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Small, icons</h1>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="sm">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Base, icons</h1>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="base">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Large, icons</h1>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="lg">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Extra Large, icons</h1>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.edit /> Edit
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.finish />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.end />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.delete />
|
||||
</c-button>
|
||||
<c-button icon="true" size="xl">
|
||||
<c-icon.play />
|
||||
</c-button>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-white text-lg">Group (sm)</h1>
|
||||
<c-button-group>
|
||||
<c-button-group-button-sm>
|
||||
No attributes
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="blue">
|
||||
No attributes, blue
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="red">
|
||||
No attributes, red
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="green">
|
||||
No attributes, green
|
||||
</c-button-group-button-sm>
|
||||
<c-button-group-button-sm color="gray">
|
||||
No attributes, gray
|
||||
</c-button-group-button-sm>
|
||||
</c-button-group>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
@@ -1,53 +0,0 @@
|
||||
{% load param_utils table_header_tag table_row_tag %}
|
||||
<div class="shadow-md" hx-boost="false">
|
||||
<div class="relative overflow-x-auto sm:rounded-t-lg">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||
{% if header_action %}
|
||||
{% python_table_header slot=header_action %}
|
||||
{% endif %}
|
||||
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400 max-sm:[&_th:not(:first-child):not(:last-child)]:hidden">
|
||||
<tr>
|
||||
{% for column in columns %}<th scope="col" class="px-6 py-3">{{ column }}</th>{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="dark:divide-y max-sm:[&_td:not(:first-child):not(:last-child)]:hidden">
|
||||
{% for row in rows %}{% python_table_row data=row %}{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% if page_obj and elided_page_range %}
|
||||
<nav class="flex items-center flex-col md:flex-row md:justify-between px-6 py-4 dark:bg-gray-900 sm:rounded-b-lg"
|
||||
aria-label="Table navigation">
|
||||
<span class="text-sm text-center font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto"><span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.start_index }}</span>—<span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.end_index }}</span> of <span class="font-semibold text-gray-900 dark:text-white">{{ page_obj.paginator.count }}</span></span>
|
||||
<ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
|
||||
<li>
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="?{% param_replace page=page_obj.previous_page_number %}"
|
||||
class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
|
||||
{% else %}
|
||||
<a aria-current="page"
|
||||
class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Previous</a>
|
||||
{% endif %}
|
||||
{% for page in elided_page_range %}
|
||||
<li>
|
||||
{% if page != page_obj.number %}
|
||||
<a href="?{% param_replace page=page %}"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ page }}</a>
|
||||
{% else %}
|
||||
<a aria-current="page"
|
||||
class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-white border bg-gray-400 border-gray-300 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200">{{ page }}</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if page_obj.has_next %}
|
||||
<a href="?{% param_replace page=page_obj.next_page_number %}"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
|
||||
{% else %}
|
||||
<a aria-current="page"
|
||||
class="cursor-not-allowed flex items-center justify-center px-3 h-8 leading-tight text-gray-300 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-600">Next</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,292 +0,0 @@
|
||||
<c-layouts.base>
|
||||
{% load static %}
|
||||
{% load duration_formatter %}
|
||||
{% partialdef purchase-name %}
|
||||
{% if purchase.type != 'game' %}
|
||||
<c-gamelink :game_id=purchase.first_game.id>
|
||||
{% if purchase.game_name %}{{ purchase.game_name }}{% else %}{{ purchase.name }}{% endif %} ({{ purchase.first_game.name }} {{ purchase.get_type_display }})
|
||||
</c-gamelink>
|
||||
{% else %}
|
||||
{% if purchase.game_name %}
|
||||
<c-gamelink :game_id=purchase.first_game.id :name=purchase.game_name />
|
||||
{% else %}
|
||||
<c-gamelink :game_id=purchase.first_game.id :name=purchase.first_game.name />
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endpartialdef %}
|
||||
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
||||
<div class="flex justify-center items-center">
|
||||
<form method="get" class="text-center">
|
||||
<label class="text-5xl text-center inline-block mb-10" for="yearSelect">Stats for:</label>
|
||||
<select name="year"
|
||||
id="yearSelect"
|
||||
onchange="this.form.submit();"
|
||||
class="mx-2">
|
||||
{% for year_item in stats_dropdown_year_range %}
|
||||
<option value="{{ year_item }}" {% if year == year_item %}selected{% endif %}>{{ year_item }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<h1 class="text-5xl text-center my-6">Playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Hours</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_hours }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Sessions</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_sessions }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Days</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ unique_days }} ({{ unique_days_percent }}%)</td>
|
||||
</tr>
|
||||
{% if total_games %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Games</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_games }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Games ({{ year }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ total_year_games }}</td>
|
||||
</tr>
|
||||
{% if all_finished_this_year_count %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Finished</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_finished_this_year_count }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Finished ({{ year }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ this_year_finished_this_year_count }}</td>
|
||||
</tr>
|
||||
{% if longest_session_game.id %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Longest session</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ longest_session_time }} (<c-gamelink :game_id=longest_session_game.id :name=longest_session_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if highest_session_count_game.id %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Most sessions</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ highest_session_count }} (<c-gamelink :game_id=highest_session_count_game.id :name=highest_session_count_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if highest_session_average_game.id %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Highest session average</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ highest_session_average }} (<c-gamelink :game_id=highest_session_average_game.id :name=highest_session_average_game.name />)
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if first_play_game.id %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">First play</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
<c-gamelink :game_id=first_play_game.id :name=first_play_game.name /> ({{ first_play_date }})
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% if last_play_game.id %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Last play</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
<c-gamelink :game_id=last_play_game.id :name=last_play_game.name /> ({{ last_play_date }})
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if month_playtimes %}
|
||||
<h1 class="text-5xl text-center my-6">Playtime per month</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
{% for month in month_playtimes %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">{{ month.month | date:"F" }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ month.playtime | format_duration }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
<h1 class="text-5xl text-center my-6">Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Total</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ all_purchased_this_year_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Refunded</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ all_purchased_refunded_this_year_count }} ({{ refunded_percent }}%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Dropped</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ dropped_count }} ({{ dropped_percentage }}%)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Unfinished</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ purchased_unfinished_count }} ({{ unfinished_purchases_percent }}%)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Backlog Decrease</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ backlog_decrease_count }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2">Spendings ({{ total_spent_currency }})</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
{{ total_spent | floatformat }} ({{ spent_per_game | floatformat }}/game)
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h1 class="text-5xl text-center my-6">Games by playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for game in top_10_games_by_playtime %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
|
||||
<c-gamelink :game_id=game.id :name=game.name />
|
||||
</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ game.total_playtime | format_duration }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<h1 class="text-5xl text-center my-6">Platforms by playtime</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Platform</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Playtime</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in total_playtime_per_platform %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.platform_name }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ item.playtime | format_duration }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if all_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Finished</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in all_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if this_year_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Finished ({{ year }} games)</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in this_year_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if purchased_this_year_finished_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">Bought and Finished ({{ year }})</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in purchased_this_year_finished_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_finished | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if purchased_unfinished %}
|
||||
<h1 class="text-5xl text-center my-6">Unfinished Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in purchased_unfinished %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.converted_price | floatformat }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
{% if all_purchased_this_year %}
|
||||
<h1 class="text-5xl text-center my-6">All Purchases</h1>
|
||||
<table class="responsive-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char">Name</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Price ({{ total_spent_currency }})</th>
|
||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for purchase in all_purchased_this_year %}
|
||||
<tr>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{% partial purchase-name %}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.converted_price | floatformat }}</td>
|
||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">{{ purchase.date_purchased | date:"d/m/Y" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
</c-layouts.base>
|
||||
@@ -1,173 +0,0 @@
|
||||
<c-layouts.base>
|
||||
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
||||
<div id="game-info" class="mb-10">
|
||||
<div class="flex gap-5 mb-3">
|
||||
<span class="text-balance max-w-120 text-4xl">
|
||||
<span class="font-bold font-serif">{{ game.name }}</span>{% if game.year_released %} <c-popover id="popover-year" popover_content="Original release year" class="text-slate-500 text-2xl">{{ game.year_released }}</c-popover>{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-4 dark:text-slate-400 mb-3">
|
||||
<c-popover id="popover-hours" popover_content="Total hours played" class="flex gap-2 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
{{ game.playtime_formatted }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-sessions" popover_content="Number of sessions" class="flex gap-2 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
|
||||
</svg>
|
||||
{{ session_count }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-average" popover_content="Average playtime per session" class="flex gap-2 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" />
|
||||
</svg>
|
||||
{{ session_average_without_manual }}
|
||||
</c-popover>
|
||||
<c-popover id="popover-playrange" popover_content="Earliest and latest dates played" class="flex gap-2 items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
|
||||
</svg>
|
||||
{{ playrange }}
|
||||
</c-popover>
|
||||
</div>
|
||||
<div class="flex flex-col mb-6 text-gray-600 dark:text-slate-400 gap-y-4">
|
||||
<div class="flex gap-2 items-center">
|
||||
<span class="uppercase">Original year</span>
|
||||
<span class="text-black dark:text-slate-300">{{ game.original_year_released }}</span>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center"
|
||||
>
|
||||
<span class="uppercase">Status</span>
|
||||
{% include "partials/gamestatus_selector.html" %}
|
||||
{% if game.mastered %}👑{% endif %}
|
||||
</div>
|
||||
<div class="flex gap-2 items-center"
|
||||
x-data="{ open: false }"
|
||||
>
|
||||
<span class="uppercase">Played</span>
|
||||
<div class="inline-flex rounded-md shadow-2xs" role="group" x-data="{ played: {{ game.playevents.count }} }">
|
||||
<a href="{% url 'games:add_playevent' %}">
|
||||
<button type="button" class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
|
||||
<span x-text="played"></span> times
|
||||
</button>
|
||||
</a>
|
||||
<button type="button" x-on:click="open = !open" @click.outside="open = false" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border-e border-b border-t border-gray-200 rounded-e-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle hover:cursor-pointer">
|
||||
<c-icon.arrowdown />
|
||||
<div
|
||||
class="absolute top-full -left-px w-auto whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-tl-none border border-gray-200 dark:border-gray-700"
|
||||
x-show="open"
|
||||
>
|
||||
<ul
|
||||
class=""
|
||||
>
|
||||
<li class="px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-tr-md">
|
||||
<a href="{% url 'games:add_playevent_for_game' game.id %}">Add playthrough...</a>
|
||||
</li>
|
||||
<li
|
||||
x-on:click="createPlayEvent"
|
||||
class="relative px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded-b-md"
|
||||
>
|
||||
Played times +1
|
||||
</li>
|
||||
<script>
|
||||
function createPlayEvent() {
|
||||
this.played++;
|
||||
// TODO: migrate to hx-post + hx-on::after-request for HTMX-native toast handling
|
||||
fetchWithHtmxTriggers('{% url 'api-1.0.0:create_playevent' %}', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': '{{ csrf_token }}', 'Content-Type': 'application/json' },
|
||||
body: '{"game_id": {{ game.id }}}'
|
||||
})
|
||||
.catch(() => {
|
||||
this.played--;
|
||||
console.error('Failed to record play');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</ul>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="flex gap-2 items-center">
|
||||
<span class="uppercase">Platform</span>
|
||||
<span class="text-black dark:text-slate-300">{{ game.platform }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex rounded-md shadow-xs mb-3" role="group">
|
||||
<a href="{% url 'games:edit_game' game.id %}">
|
||||
<button type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
|
||||
Edit
|
||||
</button>
|
||||
</a>
|
||||
<a href="#" hx-get="{% url 'games:delete_game_confirmation' game.id %}" hx-target="#global-modal-container">
|
||||
<button type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
|
||||
Delete
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge="purchase_count">Purchases</c-h1>
|
||||
{% if purchase_count %}
|
||||
{% include "simple_table.html" with rows=purchase_data.rows columns=purchase_data.columns page_obj=None elided_page_range=None header_action=None %}
|
||||
{% else %}
|
||||
No purchases yet.
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge="session_count">Sessions</c-h1>
|
||||
{% if session_count %}
|
||||
{% include "simple_table.html" with rows=session_data.rows columns=session_data.columns header_action=session_data.header_action page_obj=session_page_obj elided_page_range=session_elided_page_range %}
|
||||
{% else %}
|
||||
No sessions yet.
|
||||
{% endif %}
|
||||
</div>
|
||||
<!-- list all playevents -->
|
||||
<div class="mb-6">
|
||||
<c-h1 :badge="playevent_count">Play Events</c-h1>
|
||||
{% if playevent_count %}
|
||||
{% include "simple_table.html" with rows=playevent_data.rows columns=playevent_data.columns page_obj=None elided_page_range=None header_action=None %}
|
||||
{% else %}
|
||||
No play events yet.
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="mb-6" id="history-container" hx-get="" hx-trigger="status-changed from:body" hx-select="#history-container" hx-swap="outerHTML">
|
||||
<c-h1 :badge="statuschange_count">History</c-h1>
|
||||
{% include "partials/history.html" %}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function getSessionCount() {
|
||||
return document.getElementById('session-count').textContent.match("[0-9]+");
|
||||
}
|
||||
</script>
|
||||
</c-layouts.base>
|
||||
@@ -1,50 +0,0 @@
|
||||
<c-layouts.base>
|
||||
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
|
||||
|
||||
<div class="flex flex-col gap-5 mb-3">
|
||||
<div class="font-bold font-serif text-slate-500 text-2xl">
|
||||
{% if not purchase.name %}
|
||||
Unnamed purchase
|
||||
{% else %}
|
||||
{{ purchase.name }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="text-balance max-w-120 text-4xl">
|
||||
<span class="font-bold font-serif">
|
||||
{{ purchase.date_purchased }} ({{ purchase.num_purchases }} game{{ purchase.num_purchases|pluralize}})
|
||||
</span>
|
||||
</span>
|
||||
<div class="inline-flex rounded-md shadow-xs mb-3" role="group">
|
||||
<a href="{% url 'games:edit_purchase' purchase.id %}">
|
||||
<button type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-s-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white">
|
||||
Edit
|
||||
</button>
|
||||
</a>
|
||||
<a href="{% url 'games:delete_purchase' purchase.id %}">
|
||||
<button type="button"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white">
|
||||
Delete
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
Price:
|
||||
<c-price-converted>{{ purchase.standardized_price }}</c-price-converted>
|
||||
({{ purchase.price | floatformat:2 }} {{ purchase.price_currency }})
|
||||
</p>
|
||||
<p>Price per game: <c-price-converted>{{ purchase.price_per_game | floatformat:0 }} {{ purchase.converted_currency }}</c-price-converted> </p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-base">Items:</h2>
|
||||
<ul class="list-disc list-inside">
|
||||
{% for game in purchase.games.all %}
|
||||
<li><c-gamelink :game_id=game.id :name=game.name /></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</c-layouts.base>
|
||||
Reference in New Issue
Block a user