appstore: implement star logic, at least on catalog
This commit is contained in:
@ -35,12 +35,29 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-2">
|
||||
<a
|
||||
href="#"
|
||||
class="mr-3 inline-block group btn border text-violet-600 border-violet-500 hover:bg-violet-500 hover:text-white"
|
||||
>
|
||||
123 <i class="fa fa-star-o inline-block group-hover:hidden" aria-hidden="true"></i>
|
||||
<i class="fa fa-star hidden group-hover:inline-block" aria-hidden="true"></i>
|
||||
{% set this_app_stars = stars.get(app_id, {})|length %}
|
||||
{% if user %}
|
||||
{% set user_starred_this_app = user['id'] in stars.get(app_id, {}) %}
|
||||
{% else %}
|
||||
{% set user_starred_this_app = False %}
|
||||
{% endif %}
|
||||
|
||||
<a
|
||||
href="{{ url_for('star_app', app_id=app_id, action="unstar" if user_starred_this_app else "star") }}"
|
||||
role="button"
|
||||
class="mr-3 inline-block group btn border text-violet-600 border-violet-500 {% if user %}hover:bg-violet-500 hover:text-white{% endif %}"
|
||||
>
|
||||
{% if not user_starred_this_app %}
|
||||
<span class="inline-block {% if user %}group-hover:hidden{% endif %}">{{ this_app_stars }}</span>
|
||||
<span class="hidden {% if user %}group-hover:inline-block{% endif %}">{{ this_app_stars+1 }}</span>
|
||||
<i class="fa fa-star-o inline-block {% if user %}group-hover:hidden{% endif %}" aria-hidden="true"></i>
|
||||
<i class="fa fa-star hidden {% if user %}group-hover:inline-block{% endif %}" aria-hidden="true"></i>
|
||||
{% else %}
|
||||
<span class="inline-block group-hover:hidden">{{ this_app_stars }}</span>
|
||||
<span class="hidden group-hover:inline-block">{{ this_app_stars-1 }}</span>
|
||||
<i class="fa fa-star inline-block group-hover:hidden" aria-hidden="true"></i>
|
||||
<i class="fa fa-star-o hidden group-hover:inline-block" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if infos["manifest"]["upstream"]["demo"] %}
|
||||
<a
|
||||
|
@ -1,8 +1,18 @@
|
||||
{% set locale = 'en' %}
|
||||
|
||||
{% macro appCard(app, infos, timestamp_now, catalog) -%}
|
||||
|
||||
{% set this_app_stars = stars.get(app, {})|length %}
|
||||
{% if user %}
|
||||
{% set user_starred_this_app = user['id'] in stars.get(app, {}) %}
|
||||
{% else %}
|
||||
{% set user_starred_this_app = False %}
|
||||
{% endif %}
|
||||
|
||||
<div class="search-entry"
|
||||
data-appid="{{ app }}"
|
||||
data-stars="{{ this_app_stars }}"
|
||||
data-starred="{{ user_starred_this_app }}"
|
||||
data-addedincatalog="{{ ((timestamp_now - infos['added_in_catalog']) / 3600 / 24) | int }}"
|
||||
data-category="{%- if infos['category'] -%}{{ infos['category'] }}{%- endif -%}"
|
||||
>
|
||||
@ -36,9 +46,9 @@
|
||||
{% elif infos['level'] == 8 %}
|
||||
<i class="fa fa-diamond text-teal-500 py-0.5" aria-hidden="true"></i>
|
||||
{% endif %}
|
||||
<span class="group text-violet-500 hover:text-white hover:bg-violet-500 rounded-md px-1 py-0.5">
|
||||
123 <i class="fa fa-star-o inline-block group-hover:hidden" aria-hidden="true"></i>
|
||||
<i class="fa fa-star hidden group-hover:inline-block" aria-hidden="true"></i>
|
||||
<span class="inline-block group rounded-md text-xs text-violet-500 px-1 py-0.5">
|
||||
<span class="inline-block">{{ this_app_stars }}</span>
|
||||
<i class="fa {% if not user_starred_this_app %}fa-star-o{% else %}fa-star{% endif %} inline-block" aria-hidden="true"></i>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@ -113,8 +123,8 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="inline-block flex items-center px-2">
|
||||
<label for="onlyfav" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
|
||||
<input type="checkbox" id="onlyfav" class="peer sr-only" />
|
||||
<label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
|
||||
<input type="checkbox" id="starsonly" class="peer sr-only" {% if user and init_starsonly %}checked{% endif %} />
|
||||
|
||||
<span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500">
|
||||
</span>
|
||||
@ -122,7 +132,7 @@
|
||||
<span class="absolute inset-y-0 start-0 m-1 h-2 w-2 rounded-full bg-white transition-all peer-checked:start-3">
|
||||
</span>
|
||||
</label>
|
||||
Show only your bookmarks
|
||||
Show only apps you starred
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -151,7 +161,7 @@
|
||||
Applications currently broken or low-quality
|
||||
</h2>
|
||||
<p class="text-sm">
|
||||
There are apps which failed our automatic tests.<br/>
|
||||
These are apps which failed our automatic tests.<br/>
|
||||
This is usually a temporary situation which requires packagers to fix something in the app.
|
||||
</p>
|
||||
</div>
|
||||
@ -172,6 +182,7 @@
|
||||
let searchInput = document.getElementById('search');
|
||||
let selectCategory = document.getElementById('selectcategory');
|
||||
let selectSort = document.getElementById('selectsort');
|
||||
let toggleStarsonly = document.getElementById('starsonly');
|
||||
|
||||
function liveSearch() {
|
||||
// Locate the card elements
|
||||
@ -179,12 +190,14 @@
|
||||
// Locate the search input
|
||||
let search_query = searchInput.value.trim().toLowerCase();
|
||||
let selectedCategory = selectCategory.value.trim();
|
||||
let starsOnly = toggleStarsonly.checked;
|
||||
let at_least_one_match = false;
|
||||
// Loop through the entries
|
||||
for (var i = 0; i < entries.length; i++) {
|
||||
// If the text is within the card and the text matches the search query
|
||||
if ((entries[i].textContent.toLowerCase().includes(search_query))
|
||||
&& (! selectedCategory || (entries[i].dataset.category == selectedCategory)))
|
||||
&& (! selectedCategory || (entries[i].dataset.category == selectedCategory))
|
||||
&& (! starsOnly || (entries[i].dataset.starred == "True")))
|
||||
{
|
||||
// ...remove the `.is-hidden` class.
|
||||
entries[i].classList.remove("hidden");
|
||||
@ -220,6 +233,11 @@
|
||||
return a.dataset.addedincatalog - b.dataset.addedincatalog;
|
||||
});
|
||||
}
|
||||
else if (sortBy === "popularity") {
|
||||
toSort.sort(function(a, b) {
|
||||
return a.dataset.stars < b.dataset.stars;
|
||||
});
|
||||
}
|
||||
else if (sortBy === "") {
|
||||
toSort.sort(function(a, b) {
|
||||
return a.dataset.appid > b.dataset.appid;
|
||||
@ -239,12 +257,14 @@
|
||||
let search_query = searchInput.value.trim();
|
||||
let category = selectCategory.value.trim();
|
||||
let sortBy = selectSort.value.trim();
|
||||
let starsOnly = toggleStarsonly.checked;
|
||||
|
||||
if ('URLSearchParams' in window) {
|
||||
var queryArgs = new URLSearchParams(window.location.search)
|
||||
if (search_query) { queryArgs.set("search", search_query) } else { queryArgs.delete("search"); };
|
||||
if (category) { queryArgs.set("category", category) } else { queryArgs.delete("category"); };
|
||||
if (sortBy) { queryArgs.set("sort", sortBy) } else { queryArgs.delete("sortBy"); };
|
||||
if (starsOnly) { queryArgs.set("starsonly", true) } else { queryArgs.delete("starsonly"); };
|
||||
|
||||
let newUrl;
|
||||
if (queryArgs.toString())
|
||||
@ -278,6 +298,11 @@
|
||||
liveSort("catalogLowQuality");
|
||||
});
|
||||
|
||||
toggleStarsonly.addEventListener('change', () => {
|
||||
clearTimeout(typingTimer);
|
||||
typingTimer = setTimeout(liveSearch, typeInterval);
|
||||
});
|
||||
|
||||
liveSearch();
|
||||
liveSort("catalogGoodQuality");
|
||||
liveSort("catalogLowQuality");
|
||||
|
@ -85,8 +85,9 @@
|
||||
href="#"
|
||||
class="inline-block group btn-sm border text-violet-600 border-violet-500 hover:bg-violet-500 hover:text-white"
|
||||
>
|
||||
123 <i class="fa fa-star-o inline-block group-hover:hidden" aria-hidden="true"></i>
|
||||
<i class="fa fa-star hidden group-hover:inline-block" aria-hidden="true"></i>
|
||||
{{ stars.get(app, {})|length }}
|
||||
<i class="fa fa-star-o inline-block group-hover:hidden" aria-hidden="true"></i>
|
||||
<i class="fa fa-star hidden group-hover:inline-block" aria-hidden="true"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
Reference in New Issue
Block a user