From c29ff338c4fdbdc1faedf8dcb5ec495bebfd53c0 Mon Sep 17 00:00:00 2001 From: ifdjhxh Date: Sat, 7 Dec 2024 16:47:10 +0300 Subject: [PATCH] Component logic --- main/_front/src/html/component.html | 75 ++++------------------------- main/_front/src/js/component.js | 60 +++++++++++++++++++++++ 2 files changed, 70 insertions(+), 65 deletions(-) create mode 100644 main/_front/src/js/component.js diff --git a/main/_front/src/html/component.html b/main/_front/src/html/component.html index e521c4c..d6c1162 100644 --- a/main/_front/src/html/component.html +++ b/main/_front/src/html/component.html @@ -6,8 +6,9 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + Document - +
@@ -18,7 +19,7 @@

Пора Cобрать ПК

- Комплектующие + Комплектующие Конфигуратор Готовые сборки @@ -57,7 +58,10 @@

Пора Cобрать ПК

-

AMD Ryzen 5 2600

+

+ + +

@@ -68,70 +72,11 @@

AMD Ryzen 5 2600

Характеристики:
-
-
-
-
Сокет (разьем на мат плате)
-
AM4
-
-
-
-
-
Количество ядер / потоков
-
6 ядер / 12 потоков
-
-
-
-
-
Базовая / макс частота
-
3.4GHz / 3.9GHz
-
-
-
-
-
Разблокирован множитель
-
Да
-
-
-
-
-
TDP
-
65W
-
-
-
-
-
Наличие встроенной графики
-
Нет
-
-
-
-
-
Стандарт памяти
-
DDR4
-
-
-
-
-
Лучшая технология разгона
-
Нет
-
-
-
-
-
Техпроцесс
-
12 нм
-
-
-
-
-
Поколение (архитектура), год
-
2000 (Zen+), 2018 год
-
-
+
+
-
8 500 ₽
+
diff --git a/main/_front/src/js/component.js b/main/_front/src/js/component.js new file mode 100644 index 0000000..e0e8d0c --- /dev/null +++ b/main/_front/src/js/component.js @@ -0,0 +1,60 @@ +const name = document.querySelector("#name") +const type = document.querySelector("#type") +const properties = document.querySelector("#properties") +const price = document.querySelector("#price") +console.log(properties); +const fetchComponent = () => { + fetch("http://localhost:4444/components/6732325e90454c580db794bd") + .then(res => res.json()) + .then(data => { + console.log(data); + name.textContent = data.name; + switch (data.type) { + case "cpu": + type.textContent = "Процессор "; + break; + case "motherboard": + type.textContent = "Материнская плата "; + break; + case "gpu": + type.textContent = "Видеокарта "; + break; + case "ram": + type.textContent = "Оперативная память "; + break; + case "rom": + type.textContent = "Накопитель "; + break; + case "power_unit": + type.textContent = "Блок питания "; + break; + case "case": + type.textContent = "Корпус "; + break; + case "cooler": + type.textContent = "Система охлаждения "; + break; + } + let props = []; + data.main_properties.forEach((item) => { + props.push(item); + }) + console.log(props) + data.other_properties.forEach((item) => { + props.push(item); + }) + props.forEach((item) => { + properties.insertAdjacentHTML("beforeend", ` +
+
+
${item.name}
+
${item.value}
+
+
+ `) + }) + price.textContent = data.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₽"; + }) +} + +fetchComponent() \ No newline at end of file