@rmdes/indiekit-endpoint-funkwhale 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,130 @@
1
+ {% extends "document.njk" %}
2
+
3
+ {% block content %}
4
+ {% if error %}
5
+ {{ prose({ text: error.message }) }}
6
+ {% else %}
7
+ <section class="funkwhale-section">
8
+ {# Tabs #}
9
+ <div class="funkwhale-tabs" role="tablist">
10
+ <button class="funkwhale-tab funkwhale-tab--active" role="tab" data-tab="all" aria-selected="true">
11
+ {{ __("funkwhale.allTime") }}
12
+ </button>
13
+ <button class="funkwhale-tab" role="tab" data-tab="month" aria-selected="false">
14
+ {{ __("funkwhale.thisMonth") }}
15
+ </button>
16
+ <button class="funkwhale-tab" role="tab" data-tab="week" aria-selected="false">
17
+ {{ __("funkwhale.thisWeek") }}
18
+ </button>
19
+ <button class="funkwhale-tab" role="tab" data-tab="trends" aria-selected="false">
20
+ {{ __("funkwhale.trends") }}
21
+ </button>
22
+ </div>
23
+
24
+ {# All Time Tab #}
25
+ <div class="funkwhale-tab-content funkwhale-tab-content--active" id="tab-all" role="tabpanel">
26
+ {% set summary = stats.summary.all %}
27
+ {% include "partials/stats-summary.njk" %}
28
+
29
+ <h3>{{ __("funkwhale.topArtists") }}</h3>
30
+ {% set topArtists = stats.topArtists.all %}
31
+ {% include "partials/top-artists.njk" %}
32
+
33
+ <h3>{{ __("funkwhale.topAlbums") }}</h3>
34
+ {% set topAlbums = stats.topAlbums.all %}
35
+ {% include "partials/top-albums.njk" %}
36
+ </div>
37
+
38
+ {# This Month Tab #}
39
+ <div class="funkwhale-tab-content" id="tab-month" role="tabpanel" hidden>
40
+ {% set summary = stats.summary.month %}
41
+ {% include "partials/stats-summary.njk" %}
42
+
43
+ <h3>{{ __("funkwhale.topArtists") }}</h3>
44
+ {% set topArtists = stats.topArtists.month %}
45
+ {% include "partials/top-artists.njk" %}
46
+
47
+ <h3>{{ __("funkwhale.topAlbums") }}</h3>
48
+ {% set topAlbums = stats.topAlbums.month %}
49
+ {% include "partials/top-albums.njk" %}
50
+ </div>
51
+
52
+ {# This Week Tab #}
53
+ <div class="funkwhale-tab-content" id="tab-week" role="tabpanel" hidden>
54
+ {% set summary = stats.summary.week %}
55
+ {% include "partials/stats-summary.njk" %}
56
+
57
+ <h3>{{ __("funkwhale.topArtists") }}</h3>
58
+ {% set topArtists = stats.topArtists.week %}
59
+ {% include "partials/top-artists.njk" %}
60
+
61
+ <h3>{{ __("funkwhale.topAlbums") }}</h3>
62
+ {% set topAlbums = stats.topAlbums.week %}
63
+ {% include "partials/top-albums.njk" %}
64
+ </div>
65
+
66
+ {# Trends Tab #}
67
+ <div class="funkwhale-tab-content" id="tab-trends" role="tabpanel" hidden>
68
+ <h3>{{ __("funkwhale.listeningTrend") }}</h3>
69
+ {% if stats.trends and stats.trends.length > 0 %}
70
+ <div class="funkwhale-chart">
71
+ {% set maxCount = 0 %}
72
+ {% for day in stats.trends %}
73
+ {% if day.count > maxCount %}
74
+ {% set maxCount = day.count %}
75
+ {% endif %}
76
+ {% endfor %}
77
+ <div class="funkwhale-chart__bars">
78
+ {% for day in stats.trends %}
79
+ <div class="funkwhale-chart__bar-wrapper" title="{{ day.date }}: {{ day.count }} plays">
80
+ <div class="funkwhale-chart__bar" style="height: {{ (day.count / maxCount * 100) if maxCount > 0 else 0 }}%"></div>
81
+ </div>
82
+ {% endfor %}
83
+ </div>
84
+ <div class="funkwhale-chart__labels">
85
+ <span>{{ stats.trends[0].date }}</span>
86
+ <span>{{ stats.trends[stats.trends.length - 1].date }}</span>
87
+ </div>
88
+ </div>
89
+ {% else %}
90
+ {{ prose({ text: "No trend data available yet" }) }}
91
+ {% endif %}
92
+ </div>
93
+ </section>
94
+
95
+ <div class="button-grid">
96
+ {{ button({
97
+ classes: "button--secondary",
98
+ href: mountPath,
99
+ text: "Back to Dashboard"
100
+ }) }}
101
+ </div>
102
+
103
+ <script>
104
+ // Simple tab switching
105
+ document.querySelectorAll('.funkwhale-tab').forEach(tab => {
106
+ tab.addEventListener('click', () => {
107
+ // Update tabs
108
+ document.querySelectorAll('.funkwhale-tab').forEach(t => {
109
+ t.classList.remove('funkwhale-tab--active');
110
+ t.setAttribute('aria-selected', 'false');
111
+ });
112
+ tab.classList.add('funkwhale-tab--active');
113
+ tab.setAttribute('aria-selected', 'true');
114
+
115
+ // Update content
116
+ document.querySelectorAll('.funkwhale-tab-content').forEach(content => {
117
+ content.classList.remove('funkwhale-tab-content--active');
118
+ content.hidden = true;
119
+ });
120
+ const targetId = 'tab-' + tab.dataset.tab;
121
+ const target = document.getElementById(targetId);
122
+ if (target) {
123
+ target.classList.add('funkwhale-tab-content--active');
124
+ target.hidden = false;
125
+ }
126
+ });
127
+ });
128
+ </script>
129
+ {% endif %}
130
+ {% endblock %}