From db9f145d9533ff765087fedd9388a5286b3f9fa5 Mon Sep 17 00:00:00 2001 From: necitboss Date: Thu, 12 Dec 2024 16:03:40 +0300 Subject: [PATCH] add name and price filters --- main/_front/dist/components.html | 24 +++++++++ main/_front/dist/css/style.css | 18 +++++++ main/_front/dist/js/components.js | 57 ++++++++++++++++++-- main/_front/src/html/components.html | 24 +++++++++ main/_front/src/js/components.js | 57 ++++++++++++++++++-- main/_front/src/scss/blocks/_components.scss | 3 +- main/_front/src/scss/elems/_filter.scss | 17 ++++++ main/controllers/ComponentsController.js | 51 ++++++++++++++++-- 8 files changed, 238 insertions(+), 13 deletions(-) create mode 100644 main/_front/src/scss/elems/_filter.scss diff --git a/main/_front/dist/components.html b/main/_front/dist/components.html index 6b5570b..2677976 100644 --- a/main/_front/dist/components.html +++ b/main/_front/dist/components.html @@ -249,6 +249,30 @@

Cокет

+ +
+

Фильтры

+
+
+ + Название +
+
+
+
Цена
+
+ + Цена от +
+
+ + Цена до +
+
+
+
+ +
Добавить товар 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);