YunoHost/apps
1
0
Fork 0
mirror of https://github.com/YunoHost/apps.git synced 2024-09-03 20:06:07 +02:00
Code Projects Activity

appstore: basic filter implementation

Browse source
This commit is contained in:
Alexandre Aubin 2023-08-26 11:29:02 +02:00
parent 476796b184
commit 21e968f0ba
2 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
store/app.py
View file

@ -119,7 +119,7 @@ def index():
@app.route('/catalog')
def browse_catalog(category_filter=None):
return render_template("catalog.html", user=session.get('user', {}), catalog=catalog)
return render_template("catalog.html", user=session.get('user', {}), catalog=catalog, timestamp_now=int(time.time()))
@app.route('/app/<app_id>')

40
store/templates/catalog.html
View file

@ -66,7 +66,7 @@
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 max-w-screen-lg mx-auto pt-10">
{% for app, infos in catalog['apps'].items() %}
<div>
<div class="search" data-addedincatalog="{{ ((timestamp_now - infos['added_in_catalog']) / 3600 / 24) | int }}">
<a
href="{{ url_for('app_info', app_id=app) }}"
class="relative block overflow-hidden rounded-lg p-2 hover:bg-gray-200"
@ -89,6 +89,7 @@
{{ infos['manifest']['name'] }}
</h3>
<span class="pt-1 pr-2 text-xs">
{% if infos['level'] == 0 %}
<i class="fa fa-exclamation-circle text-red-500 py-0.5" aria-hidden="true"></i>
{% elif infos['level']|int <= 4 %}
@ -105,6 +106,9 @@
<p class="max-w-[40ch] text-xs text-gray-500">
{{ infos['manifest']['description']['en'] }}
</p>
<div class="hidden">
{{ infos["potential_alternative_to"]|join(', ') }}
</div>
{% if infos['category'] %}
<span class="rounded-full px-2.5 py-0.5 text-[10px] border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
{{ catalog['categories'][infos['category']]['title'][locale].lower() }}
@ -116,4 +120,38 @@
</div>
{% endfor %}
</div>
<script>
// A little delay
let typingTimer;
let typeInterval = 500; // Half a second
let searchInput = document.getElementById('search');
function liveSearch() {
// Locate the card elements
let entries = document.querySelectorAll('.search')
// Locate the search input
let search_query = searchInput.value;
// Loop through the entries
for (var i = 0; i < entries.length; i++) {
// If the text is within the card...
if(entries[i].textContent.toLowerCase()
// ...and the text matches the search query...
.includes(search_query.toLowerCase())) {
// ...remove the `.is-hidden` class.
entries[i].classList.remove("hidden");
} else {
// Otherwise, add the class.
entries[i].classList.add("hidden");
}
}
}
searchInput.addEventListener('keyup', () => {
clearTimeout(typingTimer);
typingTimer = setTimeout(liveSearch, typeInterval);
});
</script>
{% endblock %}