Skip to content

Commit

Permalink
Merge pull request #18 from moevm/manucharova_component_logic
Browse files Browse the repository at this point in the history
Component logic
  • Loading branch information
necitboss authored Dec 7, 2024
2 parents 415a185 + c29ff33 commit 39c9d2a
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 65 deletions.
75 changes: 10 additions & 65 deletions main/_front/src/html/component.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../scss/style.scss">
<script src="../js/component.js" defer></script>
<title>Document</title>

</head>
<body>
<header class="header">
Expand All @@ -18,7 +19,7 @@
<h2 class="header__title">Пора Cобрать ПК</h2>
</div>
<div class="header__nav">
<a href="/" class="header__link active">Комплектующие</a>
<a href="/" class="header__link">Комплектующие</a>
<a href="#!" class="header__link">Конфигуратор</a>
<a href="#!" class="header__link">Готовые сборки</a>
<a href="#!" class="header__link">
Expand Down Expand Up @@ -57,7 +58,10 @@ <h2 class="header__title">Пора Cобрать ПК</h2>
</header>
<section class="title">
<div class="container">
<h1 class="title__text">AMD Ryzen 5 2600</h1>
<h1 class="title__text">
<span id="type"><!-- Сюда вставится текст после запроса --></span>
<span id="name"><!-- Сюда вставится текст после запроса --></span>
</h1>
</div>
</section>
<section class="info">
Expand All @@ -68,70 +72,11 @@ <h1 class="title__text">AMD Ryzen 5 2600</h1>
</div>
<div class="info__block">
<div class="subtitle info__title">Характеристики:</div>
<div class="info__properties">
<div class="property">
<div class="property__text">
<div class="property__name">Сокет (разьем на мат плате)</div>
<div class="property__value">AM4</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Количество ядер / потоков</div>
<div class="property__value">6 ядер / 12 потоков</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Базовая / макс частота</div>
<div class="property__value">3.4GHz / 3.9GHz</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Разблокирован множитель</div>
<div class="property__value">Да</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">TDP</div>
<div class="property__value">65W</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Наличие встроенной графики</div>
<div class="property__value">Нет</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Стандарт памяти</div>
<div class="property__value">DDR4</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Лучшая технология разгона</div>
<div class="property__value">Нет</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Техпроцесс</div>
<div class="property__value">12 нм</div>
</div>
</div>
<div class="property">
<div class="property__text">
<div class="property__name">Поколение (архитектура), год</div>
<div class="property__value">2000 (Zen+), 2018 год</div>
</div>
</div>
<div class="info__properties" id="properties">
<!-- Сюда вставятся свойства после запроса -->
</div>
<div class="info__down">
<div class="info__price">8 500 ₽</div>
<div class="info__price" id="price"></div>
<button class="info__btn btn btn-big">Купить</button>
</div>
</div>
Expand Down
60 changes: 60 additions & 0 deletions main/_front/src/js/component.js
Original file line number Diff line number Diff line change
@@ -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", `
<div class="property">
<div class="property__text">
<div class="property__name">${item.name}</div>
<div class="property__value">${item.value}</div>
</div>
</div>
`)
})
price.textContent = data.price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " ₽";
})
}

fetchComponent()

0 comments on commit 39c9d2a

Please sign in to comment.