Добавить товар
diff --git a/main/_front/dist/css/style.css b/main/_front/dist/css/style.css
index 4964673..066c63b 100644
--- a/main/_front/dist/css/style.css
+++ b/main/_front/dist/css/style.css
@@ -284,6 +284,24 @@ body.no-scroll {
line-height: 19px;
}
+.filter__title {
+ text-align: center;
+ font-size: 20px;
+ font-weight: 700;
+ margin-bottom: 12px;
+}
+
+.filter__block {
+ margin-bottom: 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.filter__subtitle {
+ font-size: 18px;
+}
+
.header {
padding: 15px 0;
border-bottom: 1px solid #D0D0D0;
diff --git a/main/_front/dist/js/components.js b/main/_front/dist/js/components.js
index 0253ba8..562231c 100644
--- a/main/_front/dist/js/components.js
+++ b/main/_front/dist/js/components.js
@@ -11,6 +11,11 @@ let global_id_for_dialog;
const header_nav = document.querySelector("#header_nav");
+const filter_name = document.querySelector("#filter_name");
+const filter_from = document.querySelector("#filter_from");
+const filter_to = document.querySelector("#filter_to");
+const filter_submit = document.querySelector("#filter_submit");
+
let isAdmin = false;
const addAdminPanel = () => {
@@ -60,9 +65,31 @@ const openDialog = (name, id) => {
btn_no.addEventListener("click", no_event_handler)
}
+function createQueryParams(baseUrl, filters) {
+ const params = new URLSearchParams();
+
+ Object.entries(filters).forEach(([key, value]) => {
+ if (Array.isArray(value)) {
+ // Если значение — массив
+ value.forEach(val => params.append(`${key}[]`, val));
+ } else if (typeof value === "object" && value !== null) {
+ // Если значение — объект
+ Object.entries(value).forEach(([subKey, subValue]) =>
+ params.append(`${key}[${subKey}]`, subValue)
+ );
+ } else {
+ // Если значение — примитив
+ params.append(key, value);
+ }
+ });
+
+ return `${baseUrl}?${params.toString()}`;
+}
-const addCards = (type) => {
- fetch(`http://localhost:4444/components${type ? "?type=" + type : ""}`)
+const addCards = (filters) => {
+ const query = createQueryParams("http://localhost:4444/components", filters)
+ console.log(query)
+ fetch(query)
.then(res => res.json())
.then(data => {
console.log(data);
@@ -114,7 +141,10 @@ choiceLists.forEach((choiceList) => {
console.log(choice.dataset.value);
console.log("here");
if (choiceList.id === "choice_components") {
- addCards(choice.dataset.value)
+ const params = {
+ type: choice.dataset.value
+ };
+ addCards(params)
}
}else {
choice.classList.remove("active");
@@ -125,6 +155,7 @@ choiceLists.forEach((choiceList) => {
})
+
const btn_add = document.querySelector("#add");
document.addEventListener("DOMContentLoaded", function() {
@@ -142,7 +173,25 @@ document.addEventListener("DOMContentLoaded", function() {
addAdminPanel();
btn_add.parentElement.classList.remove('hide');
}
- addCards("cpu");
+ const params = {
+ type: "cpu"
+ };
+
+ addCards(params);
})
})
+filter_submit.addEventListener('click', () => {
+ const params = {};
+ if (filter_name.value.trim() !== ""){
+ params["name"] = filter_name.value.trim();
+ }
+ if (filter_to.value.trim() !== ""){
+ params["max_price"] = filter_to.value;
+ }
+ if (filter_from.value.trim() !== ""){
+ params["min_price"] = filter_from.value;
+ }
+ params["type"] = choice_components.dataset.value;
+ addCards(params);
+})
diff --git a/main/_front/src/html/components.html b/main/_front/src/html/components.html
index 7c4919c..5ae107f 100644
--- a/main/_front/src/html/components.html
+++ b/main/_front/src/html/components.html
@@ -249,6 +249,30 @@
Cокет
+
+
Добавить товар
diff --git a/main/_front/src/js/components.js b/main/_front/src/js/components.js
index 0253ba8..562231c 100644
--- a/main/_front/src/js/components.js
+++ b/main/_front/src/js/components.js
@@ -11,6 +11,11 @@ let global_id_for_dialog;
const header_nav = document.querySelector("#header_nav");
+const filter_name = document.querySelector("#filter_name");
+const filter_from = document.querySelector("#filter_from");
+const filter_to = document.querySelector("#filter_to");
+const filter_submit = document.querySelector("#filter_submit");
+
let isAdmin = false;
const addAdminPanel = () => {
@@ -60,9 +65,31 @@ const openDialog = (name, id) => {
btn_no.addEventListener("click", no_event_handler)
}
+function createQueryParams(baseUrl, filters) {
+ const params = new URLSearchParams();
+
+ Object.entries(filters).forEach(([key, value]) => {
+ if (Array.isArray(value)) {
+ // Если значение — массив
+ value.forEach(val => params.append(`${key}[]`, val));
+ } else if (typeof value === "object" && value !== null) {
+ // Если значение — объект
+ Object.entries(value).forEach(([subKey, subValue]) =>
+ params.append(`${key}[${subKey}]`, subValue)
+ );
+ } else {
+ // Если значение — примитив
+ params.append(key, value);
+ }
+ });
+
+ return `${baseUrl}?${params.toString()}`;
+}
-const addCards = (type) => {
- fetch(`http://localhost:4444/components${type ? "?type=" + type : ""}`)
+const addCards = (filters) => {
+ const query = createQueryParams("http://localhost:4444/components", filters)
+ console.log(query)
+ fetch(query)
.then(res => res.json())
.then(data => {
console.log(data);
@@ -114,7 +141,10 @@ choiceLists.forEach((choiceList) => {
console.log(choice.dataset.value);
console.log("here");
if (choiceList.id === "choice_components") {
- addCards(choice.dataset.value)
+ const params = {
+ type: choice.dataset.value
+ };
+ addCards(params)
}
}else {
choice.classList.remove("active");
@@ -125,6 +155,7 @@ choiceLists.forEach((choiceList) => {
})
+
const btn_add = document.querySelector("#add");
document.addEventListener("DOMContentLoaded", function() {
@@ -142,7 +173,25 @@ document.addEventListener("DOMContentLoaded", function() {
addAdminPanel();
btn_add.parentElement.classList.remove('hide');
}
- addCards("cpu");
+ const params = {
+ type: "cpu"
+ };
+
+ addCards(params);
})
})
+filter_submit.addEventListener('click', () => {
+ const params = {};
+ if (filter_name.value.trim() !== ""){
+ params["name"] = filter_name.value.trim();
+ }
+ if (filter_to.value.trim() !== ""){
+ params["max_price"] = filter_to.value;
+ }
+ if (filter_from.value.trim() !== ""){
+ params["min_price"] = filter_from.value;
+ }
+ params["type"] = choice_components.dataset.value;
+ addCards(params);
+})
diff --git a/main/_front/src/scss/blocks/_components.scss b/main/_front/src/scss/blocks/_components.scss
index dcc79cf..b5047d5 100644
--- a/main/_front/src/scss/blocks/_components.scss
+++ b/main/_front/src/scss/blocks/_components.scss
@@ -30,4 +30,5 @@
.components__sort {
margin-bottom: 20px;
-}
\ No newline at end of file
+}
+
diff --git a/main/_front/src/scss/elems/_filter.scss b/main/_front/src/scss/elems/_filter.scss
new file mode 100644
index 0000000..a5cf36b
--- /dev/null
+++ b/main/_front/src/scss/elems/_filter.scss
@@ -0,0 +1,17 @@
+.filter__title {
+ text-align: center;
+ font-size: 20px;
+ font-weight: 700;
+ margin-bottom: 12px;
+}
+
+.filter__block {
+ margin-bottom: 15px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.filter__subtitle {
+ font-size: 18px;
+}
\ No newline at end of file
diff --git a/main/controllers/ComponentsController.js b/main/controllers/ComponentsController.js
index f238bd1..19c48ec 100644
--- a/main/controllers/ComponentsController.js
+++ b/main/controllers/ComponentsController.js
@@ -1,4 +1,5 @@
import ComponentsModel from "../models/Components.js";
+import components from "../models/Components.js";
export const addComponent = async (req, res) => {
try {
@@ -31,12 +32,54 @@ export const addComponent = async (req, res) => {
export const getAll = async (req, res) => {
try {
console.log(req.query);
- let components;
+ const conditions = []
if (req.query.type){
- components = await ComponentsModel.find({type: req.query.type}).exec();
- }else {
- components = await ComponentsModel.find().exec();
+ conditions.push({
+ type: req.query.type,
+ });
+ }
+ if (req.query.max_price && req.query.min_price) {
+ conditions.push({
+ price: {$gte: req.query.min_price, $lte: req.query.max_price}
+ });
+ }else if (req.query.min_price) {
+ conditions.push({
+ price: {$gte: req.query.min_price}
+ })
+ }else if (req.query.max_price) {
+ conditions.push({
+ price: {$lte: req.query.max_price}
+ })
+ }
+ if (req.query.name){
+ conditions.push({
+ name: {$regex: new RegExp(req.query.name, "i")},
+ })
}
+ const query = conditions.length > 0 ? {$and: conditions} : {}
+ const components = await ComponentsModel.find(query)
+ console.log(components);
+ // let components;
+ // if (req.query.type){
+ // components = await ComponentsModel.find({type: req.query.type}).exec();
+ // }else {
+ // components = await ComponentsModel.find().exec();
+ // }
+ // const conditions = [];
+ // conditions.push({
+ // main_properties: {
+ // $elemMatch: {
+ // name: "Сокет (разъем на плате)",
+ // value: "LGA 1700"
+ // }
+ // },
+ // })
+ // conditions.push({
+ // price: {$gte: 9000, $lte: 18000}
+ // })
+ // const query = conditions.length > 0 ? {$and: conditions} : {}
+ // const components2 = await ComponentsModel.find(query)
+ // console.log(components2);
res.json(components);
}catch (err){
console.warn(err);