marc/folkugat-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Filtres i ordres als resultats de cerca

Browse Source
This commit is contained in:
marc
2025-10-10 00:14:36 +02:00
parent aec310c39c
commit 31aeb09dd9
13 changed files with 339 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
folkugat_web/assets/static/css/main.css
View File

@@ -649,11 +649,6 @@ video {
margin-bottom: 0.75rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
@@ -666,6 +661,10 @@ video {
margin-left: auto;
}
.mr-1 {
margin-right: 0.25rem;
}
.mr-2 {
margin-right: 0.5rem;
}
@@ -718,6 +717,10 @@ video {
min-height: 400px;
}
.w-0 {
width: 0px;
}
.w-1\/2 {
width: 50%;
}
@@ -988,10 +991,18 @@ video {
padding-bottom: 1rem;
}
.pb-2 {
padding-bottom: 0.5rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pr-2 {
padding-right: 0.5rem;
}
.pt-4 {
padding-top: 1rem;
}
@@ -1056,9 +1067,9 @@ video {
color: rgb(76 16 30 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-red-400 {

3
folkugat_web/assets/templates/fragments/temes/pagina.html
View File

@@ -1,6 +1,7 @@
{% include "fragments/menu.html" %}
<div class="p-12 text-center flex flex-col items-center justify-center">
<h3 class="text-3xl text-beige p-4">Temes</h3>
{% set hx_vars = build_hx_vars({"properties": properties_str}, order_params_dict) %}
<input id="query-input"
type="text" name="query" value="{{ query }}"
placeholder="Busca una tema..."
@@ -11,7 +12,7 @@
hx-get="/api/temes/busca"
hx-trigger="revealed, keyup delay:500ms changed"
hx-target="#search-results"
hx-vars="properties:{{ properties_str }}"
hx-vars="{{ hx_vars }}"
hx-swap="outerHTML">
<div id="search-results" class="flex-col"></div>
</div>

42
folkugat_web/assets/templates/fragments/temes/result.html
View File

@@ -8,27 +8,16 @@
{{ tema.title }}
</a>
</div>
<div class="px-4 text-sm text-gray-500">
{% if tema.stats %}
Tocat {{ tema.stats.times_played }}
{% if tema.stats.times_played == 1 %}
cop
{% else %}
cops
{% endif %}
{% else %}
No s'ha tocat mai
{% endif %}
</div>
{% if tema.properties %}
<ul class="flex flex-wrap text-sm px-3">
{% for property in tema.properties %}
{% set hx_vars = build_hx_vars({"properties": add_property_str(property.value)}, order_params_dict) %}
<button class="bg-beige text-white rounded
m-1 px-2"
hx-get="/api/content/temes"
hx-target="#content"
hx-include="[name=query]"
hx-vars="properties:{{ add_property_str(property.value) }}"
hx-vars="{{ hx_vars }}"
hx-swap="innerHTML"
>
{{ property.value }}
@@ -38,9 +27,34 @@
{% endif %}
{% if tema.main_score() and tema.main_score().preview_url %}
<a href="/tema/{{ tema.id }}">
<img class="px-4"
<img class="px-4 pb-2"
src="{{ tema.main_score().preview_url }}" />
</a>
{% endif %}
<div class="flex flex-row w-full">
<div class="flex flex-row items-center
row-0 px-4 text-sm text-gray-400">
<i class="mx-1">{% include "icons/music-box.svg" %}</i>
{% if tema.stats %}
Tocat {{ tema.stats.times_played }}
{% if tema.stats.times_played == 1 %}
cop
{% else %}
cops
{% endif %}
{% else %}
No s'ha tocat mai
{% endif %}
</div>
<div class="flex-1 grow"></div>
<div class="flex flex-row items-center
row-0 px-4 text-sm text-gray-400">
{% if tema.stats and tema.stats.sessions_played %}
<i class="mx-1">{% include "icons/calendar.svg" %}</i>
{% set dn = get_date_names(tema.stats.sessions_played[0].date) %}
{{ dn.day }} {{ dn.month_name }} de {{ dn.year }}
{% endif %}
</div>
</div>
</div>
</li>

44
folkugat_web/assets/templates/fragments/temes/results.html
View File

@@ -12,38 +12,14 @@
<i>{{ query }}</i>
</button>
{% endif %}
<ul class="flex flex-wrap justify-center my-4">
{% for property in properties %}
<li>
<button class="bg-beige rounded
text-white
m-1 px-2"
hx-get="/api/content/temes"
hx-target="#content"
hx-include="[name=query]"
hx-vars="properties:{{ remove_property_str(property) }}"
hx-swap="innerHTML"
>
{{ property }}
</button>
</li>
{% endfor %}
{% for property in property_results %}
<li>
<button class="border border-beige rounded
text-white
m-1 px-2"
hx-get="/api/content/temes"
hx-target="#content"
hx-vars="properties:{{ add_property_str(property) }}"
hx-swap="innerHTML"
>
{{ property }}
</button>
</li>
{% endfor %}
</ul>
<hr class="h-px mt-1 mb-3 bg-beige border-0">
<div class="mx-4 flex flex-col">
{% include "fragments/temes/search_params/order_by.html" %}
{% include "fragments/temes/search_params/filter.html" %}
</div>
<hr class="h-px mt-3 mb-3 bg-beige border-0">
<ul class="min-w-full w-full">
{% for tema in temes %}
{% include "fragments/temes/result.html" %}
@@ -52,20 +28,22 @@
{% if prev_offset is not none or next_offset is not none %}
<div class="py-2">
{% if prev_offset is not none %}
{% set hx_vars = build_hx_vars({"properties": properties_str, "offset": prev_offset}, order_params_dict) %}
<button class="text-beige mx-2"
hx-get="/api/temes/busca"
hx-include="[name=query]"
hx-vars="properties:{{ properties_str }},offset:{{ prev_offset }}"
hx-vars="{{ hx_vars }}"
hx-target="#search-results"
hx-swap="outerHTML">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</button>
{% endif %}
{% if next_offset is not none %}
{% set hx_vars = build_hx_vars({"properties": properties_str, "offset": next_offset}, order_params_dict) %}
<button class="text-beige mx-2"
hx-get="/api/temes/busca"
hx-include="[name=query]"
hx-vars="properties:{{ properties_str }},offset:{{ next_offset }}"
hx-vars="{{ hx_vars }}"
hx-target="#search-results"
hx-swap="outerHTML">
<i class="fa fa-chevron-right" aria-hidden="true"></i>

40
folkugat_web/assets/templates/fragments/temes/search_params/filter.html Normal file
View File

@@ -0,0 +1,40 @@
{% if properties or property_results %}
<div class="flex flex-row items-center">
<p class="pr-2 py-2
{% if properties %} text-beige {% else %} text-gray-400 {% endif %}
">Filtres:</p>
<ul class="flex flex-wrap justify-center my-1">
{% for property in properties %}
<li>
{% set hx_vars = build_hx_vars({"properties": remove_property_str(property)}, order_params_dict) %}
<button class="bg-beige rounded
text-white
m-1 px-2"
hx-get="/api/content/temes"
hx-target="#content"
hx-include="[name=query]"
hx-vars="{{ hx_vars }}"
hx-swap="innerhtml"
>
{{ property }}
</button>
</li>
{% endfor %}
{% for property in property_results %}
<li>
{% set hx_vars = build_hx_vars({"properties": add_property_str(property)}, order_params_dict) %}
<button class="border border-beige rounded
text-white
m-1 px-2"
hx-get="/api/content/temes"
hx-target="#content"
hx-vars="{{ hx_vars }}"
hx-swap="innerhtml"
>
{{ property }}
</button>
</li>
{% endfor %}
</ul>
</div>
{% endif %}

67
folkugat_web/assets/templates/fragments/temes/search_params/order_by.html Normal file
View File

@@ -0,0 +1,67 @@
<div class="flex flex-row items-center justify-center">
{% set times_played_color = "text-gray-400" %}
{% set times_played_caret = "off" %}
{% set times_played_target_params = {"order_by": "'times_played'", "order": "'desc'"} %}
{% set last_played_color = "text-gray-400" %}
{% set last_played_caret = "off" %}
{% set last_played_target_params = {"order_by": "'last_played'", "order": "'desc'"} %}
{% if order_params is not none %}
{% if order_params.order_by == OrderBy.TIMES_PLAYED %}
{% set times_played_color = "text-beige" %}
{% if order_params.order == Order.ASC %}
{% set times_played_caret = "asc" %}
{% set times_played_target_params = {} %}
{% elif order_params.order == Order.DESC %}
{% set times_played_caret = "desc" %}
{% set times_played_target_params = {"order_by": "'times_played'", "order": "'asc'"} %}
{% endif %}
{% elif order_params.order_by == OrderBy.LAST_PLAYED %}
{% set last_played_color = "text-beige" %}
{% if order_params.order == Order.ASC %}
{% set last_played_caret = "asc" %}
{% set last_played_target_params = {} %}
{% elif order_params.order == Order.DESC %}
{% set last_played_caret = "desc" %}
{% set last_played_target_params = {"order_by": "'last_played'", "order": "'asc'"} %}
{% endif %}
{% endif %}
{% endif %}
{% set hx_vars = build_hx_vars({"properties": properties_str}, times_played_target_params) %}
<button title="Ordena per cops tocat"
class="{{ times_played_color }} mx-2 flex flex-row"
hx-get="/api/temes/busca"
hx-include="[name=query]"
hx-vars="{{ hx_vars }}"
hx-target="#search-results"
hx-swap="outerHTML">
<i class="mr-1 flex-none">{% include "icons/music-box.svg" %}</i>
{% if times_played_caret == "asc" %}
<i class="fa fa-caret-up flex-1 w-0" aria-hidden="true"></i>
{% elif times_played_caret == "desc" %}
<i class="fa fa-caret-down flex-1 w-0" aria-hidden="true"></i>
{% else %}
<div class="flex-1 w-0"></div>
{% endif %}
</button>
{% set hx_vars = build_hx_vars({"properties": properties_str}, last_played_target_params) %}
<button title="Ordena per últim cop tocat"
class="{{ last_played_color }} mx-2 flex flex-row"
hx-get="/api/temes/busca"
hx-include="[name=query]"
hx-vars="{{ hx_vars }}"
hx-target="#search-results"
hx-swap="outerHTML">
<i class="mr-1">{% include "icons/calendar.svg" %}</i>
{% if last_played_caret == "asc" %}
<i class="fa fa-caret-up flex-1 w-0" aria-hidden="true"></i>
{% elif last_played_caret == "desc" %}
<i class="fa fa-caret-down flex-1 w-0" aria-hidden="true"></i>
{% else %}
<div class="flex-1 w-0"></div>
{% endif %}
</button>
</div>

19
folkugat_web/assets/templates/icons/calendar.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="16"
height="16"
fill="currentColor"
class="bi bi-spotify"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
d="M 5.6841749,7.1762614 V 8.7837442 H 4.0766921 V 7.1762614 Z m 3.1766921,0 V 8.7837442 H 7.2916577 V 7.1762614 Z m 3.214966,0 V 8.7837442 H 10.46835 V 7.1762614 Z m 1.569209,-5.5687796 q 0.669784,0 1.129065,0.4784175 0.478418,0.4592808 0.478418,1.1290653 V 14.352524 q 0,0.669784 -0.478418,1.129065 -0.459281,0.478418 -1.129065,0.478418 H 2.5074827 q -0.6697844,0 -1.1482019,-0.478418 Q 0.89999998,15.022308 0.89999998,14.352524 V 3.2149646 q 0,-0.6697845 0.45928082,-1.1290653 Q 1.8376983,1.6074818 2.5074827,1.6074818 H 3.2920874 V -9.4223022e-7 H 4.8995702 V 1.6074818 H 11.252955 V -9.4223022e-7 h 1.607482 V 1.6074818 Z m 0,12.7450422 V 5.6070521 H 2.5074827 V 14.352524 Z M 5.6841749,10.391227 v 1.569209 H 4.0766921 v -1.569209 z m 3.1766921,0 v 1.569209 H 7.2916577 v -1.569209 z m 3.214966,0 v 1.569209 H 10.46835 v -1.569209 z"
id="text50"
style="font-size:19.1367px;line-height:1.25;stroke-width:1.4355"
aria-label="󰸗" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

19
folkugat_web/assets/templates/icons/music-box.svg Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="16"
height="16"
fill="currentColor"
class="bi bi-spotify"
viewBox="0 0 16 16"
version="1.1"
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<path
d="M 1.5769257,3.1922874 H 0 V 14.423075 q 0,0.634616 0.46153922,1.096156 0.48077001,0.48077 1.11538648,0.48077 H 12.807713 V 14.423075 H 1.5769257 Z M 12.807713,3.9807502 h -2.40385 v 4.4230842 q 0,0.8269244 -0.5961547,1.4230792 -0.576924,0.5769244 -1.4038484,0.5769244 -0.8076937,0 -1.4230793,-0.5769244 -0.5961548,-0.5961548 -0.5961548,-1.4038484 0,-0.8269244 0.5961548,-1.4230793 Q 7.5961662,6.3846003 8.4038599,6.3846003 9.0384763,6.3653695 9.6154003,6.7884471 V 2.4038246 H 12.807713 Z M 14.4231,-2.5497437e-5 H 4.8077002 q -0.6730781,0 -1.1538481,0.480770017437 Q 3.1923129,0.94228373 3.1923129,1.5769002 V 11.1923 q 0,0.673078 0.4615392,1.153849 0.48077,0.461539 1.1538481,0.461539 H 14.4231 q 0.634617,0 1.096156,-0.461539 0.48077,-0.480771 0.48077,-1.153849 V 1.5769002 q 0,-0.63461647 -0.48077,-1.09615568 Q 15.057717,-2.5497437e-5 14.4231,-2.5497437e-5 Z"
id="text48"
style="font-size:19.2308px;line-height:1.25;stroke-width:1.44231"
aria-label="󰌳" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB