Ceratic/MediaCollectorLibary
1
0
Fork 0
mirror of https://github.com/ceratic/MediaCollectorLibary.git synced 2026-05-13 23:56:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

better filter?

Browse Source
This commit is contained in:
Lars Behrends
2025-10-24 19:13:00 +02:00
parent e78c073f21
commit db0fd4e728
5 changed files with 226 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
resources/views/adult/index.twig
View File

@@ -20,19 +20,13 @@
{% if available_filters.genres %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Genres</h6>
{% for genre in available_filters.genres %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="genres[]"
value="{{ genre }}"
id="genre_{{ genre|lower|replace({' ': '_'}) }}"
{{ genre in filters.genres ? 'checked' : '' }}>
<label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
{% for genre in available_filters.genres %}
<option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
{{ genre }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -40,19 +34,13 @@
{% if available_filters.directors %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Directors</h6>
{% for director in available_filters.directors %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="directors[]"
value="{{ director }}"
id="director_{{ director|lower|replace({' ': '_'}) }}"
{{ director in filters.directors ? 'checked' : '' }}>
<label class="form-check-label small" for="director_{{ director|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="directors[]" multiple data-placeholder="Select directors...">
{% for director in available_filters.directors %}
<option value="{{ director }}" {{ director in filters.directors ? 'selected' : '' }}>
{{ director }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -384,19 +372,55 @@
</div>
</div>
<style>
/* Custom styles for Select2 integration */
.select2-container {
z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
}
.select2-selection {
min-height: 38px;
}
.select2-selection__choice {
background-color: #0d6efd !important;
border: none !important;
color: white !important;
}
.select2-selection__choice__remove {
color: white !important;
margin-right: 5px;
}
.select2-selection__choice__remove:hover {
color: #f8f9fa !important;
}
</style>
<script>
$(document).ready(function() {
// Initialize Select2 for all select2 elements
$('.select2').select2({
width: '100%',
allowClear: true,
placeholder: function() {
return $(this).data('placeholder');
}
});
// Auto-submit filter form when Select2 selection changes
$('.select2').on('change', function() {
document.getElementById('filterForm').submit();
});
});
document.getElementById('per_page')?.addEventListener('change', function() {
const url = new URL(window.location);
url.searchParams.set('per_page', this.value);
url.searchParams.set('page', '1'); // Reset to first page
window.location = url.toString();
});
// Auto-submit filter form when checkboxes change
document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
</script>
{% endblock %}

86
resources/views/games/index.twig
View File

@@ -20,19 +20,13 @@
{% if available_filters.genres %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Genres</h6>
{% for genre in available_filters.genres %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="genres[]"
value="{{ genre }}"
id="genre_{{ genre|lower|replace({' ': '_'}) }}"
{{ genre in filters.genres ? 'checked' : '' }}>
<label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
{% for genre in available_filters.genres %}
<option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
{{ genre }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -40,19 +34,13 @@
{% if available_filters.platforms %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Platforms</h6>
{% for platform in available_filters.platforms %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="platforms[]"
value="{{ platform }}"
id="platform_{{ platform|lower|replace({' ': '_'}) }}"
{{ platform in filters.platforms ? 'checked' : '' }}>
<label class="form-check-label small" for="platform_{{ platform|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="platforms[]" multiple data-placeholder="Select platforms...">
{% for platform in available_filters.platforms %}
<option value="{{ platform }}" {{ platform in filters.platforms ? 'selected' : '' }}>
{{ platform }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -359,19 +347,55 @@
</div>
</div>
<style>
/* Custom styles for Select2 integration */
.select2-container {
z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
}
.select2-selection {
min-height: 38px;
}
.select2-selection__choice {
background-color: #0d6efd !important;
border: none !important;
color: white !important;
}
.select2-selection__choice__remove {
color: white !important;
margin-right: 5px;
}
.select2-selection__choice__remove:hover {
color: #f8f9fa !important;
}
</style>
<script>
$(document).ready(function() {
// Initialize Select2 for all select2 elements
$('.select2').select2({
width: '100%',
allowClear: true,
placeholder: function() {
return $(this).data('placeholder');
}
});
// Auto-submit filter form when Select2 selection changes
$('.select2').on('change', function() {
document.getElementById('filterForm').submit();
});
});
document.getElementById('per_page')?.addEventListener('change', function() {
const url = new URL(window.location);
url.searchParams.set('per_page', this.value);
url.searchParams.set('page', '1'); // Reset to first page
window.location = url.toString();
});
// Auto-submit filter form when checkboxes change
document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
</script>
{% endblock %}

6
resources/views/layouts/app.twig
View File

@@ -6,6 +6,8 @@
<title>{{ title }} - Media Collector</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<!-- In the head section of app.twig -->
{% if app_env == 'production' %}
{% if manifest['resources/css/app.css'] is defined %}
@@ -21,6 +23,10 @@
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Before closing </head> tag -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery (required for Select2) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
{% if app_env == 'production' and manifest['resources/js/app.js'] is defined %}
<script type="module" src="{{ base_url() }}/build/assets/{{ manifest['resources/js/app.js'].file }}"></script>
{% else %}

86
resources/views/movies/index.twig
View File

@@ -20,19 +20,13 @@
{% if available_filters.genres %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Genres</h6>
{% for genre in available_filters.genres %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="genres[]"
value="{{ genre }}"
id="genre_{{ genre|lower|replace({' ': '_'}) }}"
{{ genre in filters.genres ? 'checked' : '' }}>
<label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
{% for genre in available_filters.genres %}
<option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
{{ genre }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -40,19 +34,13 @@
{% if available_filters.directors %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Directors</h6>
{% for director in available_filters.directors %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="directors[]"
value="{{ director }}"
id="director_{{ director|lower|replace({' ': '_'}) }}"
{{ director in filters.directors ? 'checked' : '' }}>
<label class="form-check-label small" for="director_{{ director|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="directors[]" multiple data-placeholder="Select directors...">
{% for director in available_filters.directors %}
<option value="{{ director }}" {{ director in filters.directors ? 'selected' : '' }}>
{{ director }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -378,19 +366,55 @@
</div>
</div>
<style>
/* Custom styles for Select2 integration */
.select2-container {
z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
}
.select2-selection {
min-height: 38px;
}
.select2-selection__choice {
background-color: #0d6efd !important;
border: none !important;
color: white !important;
}
.select2-selection__choice__remove {
color: white !important;
margin-right: 5px;
}
.select2-selection__choice__remove:hover {
color: #f8f9fa !important;
}
</style>
<script>
$(document).ready(function() {
// Initialize Select2 for all select2 elements
$('.select2').select2({
width: '100%',
allowClear: true,
placeholder: function() {
return $(this).data('placeholder');
}
});
// Auto-submit filter form when Select2 selection changes
$('.select2').on('change', function() {
document.getElementById('filterForm').submit();
});
});
document.getElementById('per_page')?.addEventListener('change', function() {
const url = new URL(window.location);
url.searchParams.set('per_page', this.value);
url.searchParams.set('page', '1'); // Reset to first page
window.location = url.toString();
});
// Auto-submit filter form when checkboxes change
document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
</script>
{% endblock %}

86
resources/views/tvshows/index.twig
View File

@@ -20,19 +20,13 @@
{% if available_filters.genres %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Genres</h6>
{% for genre in available_filters.genres %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="genres[]"
value="{{ genre }}"
id="genre_{{ genre|lower|replace({' ': '_'}) }}"
{{ genre in filters.genres ? 'checked' : '' }}>
<label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
<select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
{% for genre in available_filters.genres %}
<option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
{{ genre }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -40,19 +34,13 @@
{% if available_filters.years %}
<div class="mb-4">
<h6 class="fw-bold text-dark mb-2">Years</h6>
{% for year in available_filters.years %}
<div class="form-check">
<input class="form-check-input"
type="checkbox"
name="years[]"
value="{{ year }}"
id="year_{{ year }}"
{{ year in filters.years ? 'checked' : '' }}>
<label class="form-check-label small" for="year_{{ year }}">
<select class="form-select select2" name="years[]" multiple data-placeholder="Select years...">
{% for year in available_filters.years %}
<option value="{{ year }}" {{ year in filters.years ? 'selected' : '' }}>
{{ year }}
</label>
</div>
{% endfor %}
</option>
{% endfor %}
</select>
</div>
{% endif %}
@@ -371,19 +359,55 @@
</div>
</div>
<style>
/* Custom styles for Select2 integration */
.select2-container {
z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
}
.select2-selection {
min-height: 38px;
}
.select2-selection__choice {
background-color: #0d6efd !important;
border: none !important;
color: white !important;
}
.select2-selection__choice__remove {
color: white !important;
margin-right: 5px;
}
.select2-selection__choice__remove:hover {
color: #f8f9fa !important;
}
</style>
<script>
$(document).ready(function() {
// Initialize Select2 for all select2 elements
$('.select2').select2({
width: '100%',
allowClear: true,
placeholder: function() {
return $(this).data('placeholder');
}
});
// Auto-submit filter form when Select2 selection changes
$('.select2').on('change', function() {
document.getElementById('filterForm').submit();
});
});
document.getElementById('per_page')?.addEventListener('change', function() {
const url = new URL(window.location);
url.searchParams.set('per_page', this.value);
url.searchParams.set('page', '1'); // Reset to first page
window.location = url.toString();
});
// Auto-submit filter form when checkboxes change
document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
checkbox.addEventListener('change', function() {
document.getElementById('filterForm').submit();
});
});
</script>
{% endblock %}