diff --git a/includes/version.php b/includes/version.php
index 0ce4cf0..c663205 100644
--- a/includes/version.php
+++ b/includes/version.php
@@ -1,3 +1,3 @@
\ No newline at end of file
diff --git a/index.php b/index.php
index f5d1420..5bdfc0c 100644
--- a/index.php
+++ b/index.php
@@ -50,20 +50,106 @@
-
-
-
-
- - onClick="setSortOption('name')" id="sort-name">
- - onClick="setSortOption('id')" id="sort-id">
- - onClick="setSortOption('price')" id="sort-price">
- - onClick="setSortOption('next_payment')" id="sort-next_payment">
- - onClick="setSortOption('payer_user_id')" id="sort-payer_user_id">
- - onClick="setSortOption('category_id')" id="sort-category_id">
- - onClick="setSortOption('payment_method_id')" id="sort-payment_method_id">
-
+
+
+
+
+
+
+
+
+
+
+
+
+ - onClick="setSortOption('name')" id="sort-name">
+ - onClick="setSortOption('id')" id="sort-id">
+ - onClick="setSortOption('price')" id="sort-price">
+ - onClick="setSortOption('next_payment')" id="sort-next_payment">
+ - onClick="setSortOption('payer_user_id')" id="sort-payer_user_id">
+ - onClick="setSortOption('category_id')" id="sort-category_id">
+ - onClick="setSortOption('payment_method_id')" id="sort-payment_method_id">
+
+
diff --git a/scripts/dashboard.js b/scripts/dashboard.js
index 6a162f7..36848f8 100644
--- a/scripts/dashboard.js
+++ b/scripts/dashboard.js
@@ -238,7 +238,17 @@ function closeLogoSearch() {
function fetchSubscriptions() {
const subscriptionsContainer = document.querySelector("#subscriptions");
- const getSubscriptions = "endpoints/subscriptions/get.php";
+ let getSubscriptions = "endpoints/subscriptions/get.php";
+
+ if (activeFilters['category'] !== "") {
+ getSubscriptions += `?category=${activeFilters['category']}`;
+ }
+ if (activeFilters['member'] !== "") {
+ getSubscriptions += getSubscriptions.includes("?") ? `&member=${activeFilters['member']}` : `?member=${activeFilters['member']}`;
+ }
+ if (activeFilters['payment'] !== "") {
+ getSubscriptions += getSubscriptions.includes("?") ? `&payment=${activeFilters['payment']}` : `?payment=${activeFilters['payment']}`;
+ }
fetch(getSubscriptions)
.then(response => response.text())
@@ -246,8 +256,8 @@ function fetchSubscriptions() {
if (data) {
subscriptionsContainer.innerHTML = data;
const mainActions = document.querySelector("#main-actions");
- if (data.includes("empty-page")) {
- mainActions.classList.add("hidden");
+ if (data.includes("no-matching-subscriptions")) {
+ // mainActions.classList.add("hidden");
} else {
mainActions.classList.remove("hidden");
}
@@ -319,4 +329,129 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#sort-options').addEventListener('focus', function() {
isSortOptionsOpen = true;
});
-});
\ No newline at end of file
+});
+
+function searchSubscriptions() {
+ const searchInput = document.querySelector("#search");
+ const searchTerm = searchInput.value.trim().toLowerCase();
+
+ const subscriptions = document.querySelectorAll(".subscription");
+ subscriptions.forEach(subscription => {
+ const name = subscription.getAttribute('data-name').toLowerCase();
+ if (!name.includes(searchTerm)) {
+ subscription.classList.add("hide");
+ } else {
+ subscription.classList.remove("hide");
+ }
+ });
+}
+
+function closeSubMenus() {
+ var subMenus = document.querySelectorAll('.filtermenu-submenu-content');
+ subMenus.forEach(subMenu => {
+ subMenu.classList.remove('is-open');
+ });
+
+}
+
+const activeFilters = [];
+activeFilters['category'] = "";
+activeFilters['member'] = "";
+activeFilters['payment'] = "";
+
+document.addEventListener("DOMContentLoaded", function() {
+ var filtermenu = document.querySelector('#filtermenu-button');
+ filtermenu.addEventListener('click', function() {
+ this.parentElement.querySelector('.filtermenu-content').classList.toggle('is-open');
+ closeSubMenus();
+ });
+
+ document.addEventListener('click', function(e) {
+ var filtermenuContent = document.querySelector('.filtermenu-content');
+ if (filtermenuContent.classList.contains('is-open')) {
+ var subMenus = document.querySelectorAll('.filtermenu-submenu');
+ var clickedInsideSubmenu = Array.from(subMenus).some(subMenu => subMenu.contains(e.target) || subMenu === e.target);
+
+ if (!filtermenu.contains(e.target) && !clickedInsideSubmenu) {
+ closeSubMenus();
+ filtermenuContent.classList.remove('is-open');
+ }
+ }
+ });
+});
+
+function toggleSubMenu(subMenu) {
+ var subMenu = document.getElementById("filter-" + subMenu);
+ if (subMenu.classList.contains("is-open")) {
+ closeSubMenus();
+ } else {
+ closeSubMenus();
+ subMenu.classList.add("is-open");
+ }
+}
+
+document.querySelectorAll('.filter-item').forEach(function(item) {
+ item.addEventListener('click', function(e) {
+ const searchInput = document.querySelector("#search");
+ searchInput.value = "";
+
+ if (this.hasAttribute('data-categoryid')) {
+ const categoryId = this.getAttribute('data-categoryid');
+ if (activeFilters['category'] === categoryId) {
+ activeFilters['category'] = "";
+ this.classList.remove('selected');
+ } else {
+ activeFilters['category'] = categoryId;
+ Array.from(this.parentNode.children).forEach(sibling => {
+ sibling.classList.remove('selected');
+ });
+ this.classList.add('selected');
+ }
+ } else if (this.hasAttribute('data-memberid')) {
+ const memberId = this.getAttribute('data-memberid');
+ if (activeFilters['member'] === memberId) {
+ activeFilters['member'] = "";
+ this.classList.remove('selected');
+ } else {
+ activeFilters['member'] = memberId;
+ Array.from(this.parentNode.children).forEach(sibling => {
+ sibling.classList.remove('selected');
+ });
+ this.classList.add('selected');
+ }
+ } else if (this.hasAttribute('data-paymentid')) {
+ const paymentId = this.getAttribute('data-paymentid');
+ if (activeFilters['payment'] === paymentId) {
+ activeFilters['payment'] = "";
+ this.classList.remove('selected');
+ } else {
+ activeFilters['payment'] = paymentId;
+ Array.from(this.parentNode.children).forEach(sibling => {
+ sibling.classList.remove('selected');
+ });
+ this.classList.add('selected');
+ }
+ }
+
+ if (activeFilters['category'] !== "" || activeFilters['member'] !== "" || activeFilters['payment'] !== "") {
+ document.querySelector('#clear-filters').classList.remove('hide');
+ } else {
+ document.querySelector('#clear-filters').classList.add('hide');
+ }
+
+ fetchSubscriptions();
+ });
+});
+
+function clearFilters() {
+ const searchInput = document.querySelector("#search");
+ searchInput.value = "";
+ activeFilters['category'] = "";
+ activeFilters['member'] = "";
+ activeFilters['payment'] = "";
+ document.querySelectorAll('.filter-item').forEach(function(item) {
+ item.classList.remove('selected');
+ });
+ document.querySelector('#clear-filters').classList.add('hide');
+ fetchSubscriptions();
+}
\ No newline at end of file
diff --git a/stats.php b/stats.php
index 9655bc5..7e0ac55 100644
--- a/stats.php
+++ b/stats.php
@@ -202,89 +202,90 @@ $numberOfElements = 6;
diff --git a/styles/styles.css b/styles/styles.css
index 0b8f425..8437e01 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -163,7 +163,7 @@ main > .contain {
margin: 0px 0px 20px 0px;
display: flex;
flex-direction: row;
- justify-content: end;
+ justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
position: relative;
@@ -176,6 +176,7 @@ main > .contain {
@media (max-width: 768px) {
.main-actions {
justify-content: space-between;
+ flex-direction: column-reverse;
}
}
@@ -187,12 +188,13 @@ main > .contain {
font-weight: 500;
text-align: center;
vertical-align: middle;
+ justify-content: center;
cursor: pointer;
user-select: none;
color: #fff;
border: 1px solid #007bff;
background-color: #007bff;
- padding: 14px 30px;
+ padding: 15px 30px;
font-size: 1rem;
border-radius: 8px;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
@@ -208,6 +210,28 @@ main > .contain {
padding: 14px 20px;
}
+.top-actions {
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ align-items: center;
+ width: auto;
+}
+
+.top-actions .search {
+ flex-grow: 1;
+}
+
+.top-actions > .search > .search-icon {
+ float: right;
+ right: 15px;
+ margin-top: -35px;
+ position: relative;
+ z-index: 2;
+ color: #007bff;
+ font-size: 20px;
+}
+
.subscriptions {
display: flex;
flex-direction: column;
@@ -229,6 +253,10 @@ main > .contain {
cursor: pointer;
}
+.subscription.hide {
+ display: none;
+}
+
.subscription.inactive {
opacity: 0.6;
}
@@ -380,7 +408,8 @@ main > .contain {
margin-right: 0px;;
}
-.empty-page {
+.empty-page,
+.no-matching-subscriptions {
display: block;
max-width: 90%;
margin: auto;
@@ -388,15 +417,25 @@ main > .contain {
font-size: 20px;
}
-.empty-page > img {
+.empty-page > img,
+.no-matching-subscriptions > img {
max-width: 100%;
}
+.no-matching-subscriptions > img {
+ margin-top: 30px;
+}
+
.empty-page > p {
margin: 5px 0px 40px 0px;
}
-.empty-page > button {
+.no-matching-subscriptions > p {
+ margin: 30px 0px 40px 0px;
+}
+
+.empty-page > button,
+.no-matching-subscriptions > button {
margin: 0px auto;
}
@@ -1378,7 +1417,13 @@ input[type="checkbox"] {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 3;
overflow: hidden;
- margin-top: 4px;
+ margin-top: 6px;
+}
+
+@media (max-width: 354px) {
+ .on-dashboard .filtermenu-content {
+ right: -94px;
+ }
}
.filtermenu-content.is-open {
@@ -1395,6 +1440,10 @@ input[type="checkbox"] {
user-select: none;
}
+.filtermenu-content .filtermenu-submenu.hide {
+ display: none;
+}
+
.filtermenu-content .filtermenu-submenu:last-of-type .filter-title {
border-bottom: none;
}
-