KomSuite/KomPage
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects 1 Releases 10 Wiki Activity

feat: add a check to see if an entry is already in komga, if so, reduce opacity, add border, disable buttons closes #6

Browse Source
This commit is contained in:
WorldTeacher
2025-05-04 23:07:41 +02:00
parent a9555375be
commit a7a167a3b2
3 changed files with 74 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/templates/index.html
View File

@@ -14,17 +14,17 @@
<input type="text" id="searchInput" placeholder="Search..." />
<div class="selectors">
<div class="autocomplete">
<input type="text" id="genreInput" placeholder="Select genres..." oninput="filterSuggestions('genre')"
onclick="showDropdown('genre')">
<button onclick="resetGenres()" , class="reset">Reset</button>
<input type="text" id="genreInput" placeholder="Select genres..." readonly
oninput="filterSuggestions('genre')" onclick="showDropdown('genre')">
<button onclick="resetGenres()" class="reset">Reset</button>
<div class="dropdown-content" id="genreDropdown">
<!-- Genre suggestions will be dynamically populated here -->
</div>
</div>
<div class="autocomplete">
<input type="text" id="tagInput" placeholder="Select tags..." oninput="filterSuggestions('tag')"
onclick="showDropdown('tag')">
<input type="text" id="tagInput" placeholder="Select tags..." readonly
oninput="filterSuggestions('tag')" onclick="showDropdown('tag')">
<button onclick="resetTags()" class="reset">Reset</button>
<div class="dropdown-content" id="tagDropdown">
<!-- Tag suggestions will be dynamically populated here -->
@@ -44,7 +44,8 @@
<div class="results">
{% for result in results %}
<div class="card">
<div class="card {% if result.in_komga %}komga{% endif %}">
<div class="image-container {{ 'nsfw' if result.isAdult else '' }}">
<img src="{{ result.image }}" alt="Cover">
@@ -56,7 +57,10 @@
<p>{{ result.title }}</p>
<div class="actions">
<button onclick="showInfo({{ result | tojson | safe }})" , class="info">Info</button>
<button onclick="sendRequest({{ result.id | tojson }})" , class="request">Request</button>
<!-- if entry has in_komga == true, do not show the request button, else show it -->
{% if not result.in_komga %}
<button onclick="sendRequest('{{ result.id }}')" class="request">Request</button>
{% endif %}
</div>
</div>
{% endfor %}
@@ -129,6 +133,8 @@
fetchOptions("/api/tags", "tag");
});
async function fetchOptions(url, dropdownId) {
try {
const res = await fetch(url);
@@ -151,10 +157,15 @@
const input = document.getElementById(inputId + 'Input');
const currentValues = input.value.split(',').map(v => v.trim()).filter(v => v);
// Add the selected value if it's not already in the list
if (!currentValues.includes(value)) {
currentValues.push(value);
input.value = currentValues.join(', ');
}
// Hide the dropdown after selection
const dropdown = document.getElementById(inputId + 'Dropdown');
dropdown.classList.remove('show');
}
function filterSuggestions(inputId) {
@@ -172,6 +183,13 @@
});
dropdown.classList.toggle('show', hasVisibleItems);
// Reset visibility of all items if input is cleared
if (!filter) {
Array.from(items).forEach(item => {
item.style.display = '';
});
}
}
function showDropdown(inputId) {
@@ -188,11 +206,15 @@
});
function resetGenres() {
document.getElementById('genreInput').value = '';
const input = document.getElementById('genreInput');
input.value = '';
filterSuggestions('genre'); // Reset dropdown to show all
}
function resetTags() {
document.getElementById('tagInput').value = '';
const input = document.getElementById('tagInput');
input.value = '';
filterSuggestions('tag'); // Reset dropdown to show all
}
function performSearch() {
@@ -222,7 +244,7 @@
data.forEach(result => {
const card = document.createElement('div');
card.className = 'card';
card.className = `card ${result.in_komga ? 'komga' : ''}`;
const imageContainer = document.createElement('div');
imageContainer.className = `image-container ${result.isAdult ? 'nsfw' : ''}`;