Розробка калькулятора матеріалів (будівництво, ремонт) на сайті

Розробка калькулятора матеріалів (будівництво, ремонт) на сайті

Калькулятор будівельних матеріалів — це прикладна геометрія плюс база нормативів витрати. Користувач вводить розміри приміщення або конструкції, калькулятор вважає кількість матеріалу з запасом, вартість та список до покупки.

Типові розрахункові задачі

• Шпалери — площа стін за вирахуванням дверей та вікон, кількість смуг за висотою та ширина рулону, підгонка рисунка
• Плитка — площа покриття, кількість плиток з урахуванням підрізки та відходів, витрата клею та затирки
• Штукатурка / шпатлівка — площа поверхні × товщина шару × щільність
• Цегла / блоки — об'єм кладки ÷ об'єм одиниці + розчин
• Ламінат / паркет — площа підлоги + запас 10–15% на підрізку, напрямок укладання впливає на витрату
• Фарба — площа × кількість шарів ÷ витрата на м² (із характеристик конкретної фарби)

Розрахунок шпалер

function calcWallpaper(params) {
  const {
    roomLength,    // м
    roomWidth,     // м
    ceilingHeight, // м
    rollWidth,     // м, зазвичай 0.53 або 1.06
    rollLength,    // м, зазвичай 10 або 15
    patternRepeat, // м, 0 якщо без рисунка
    doors,         // масив { width, height }
    windows,       // масив { width, height }
  } = params;

  // Периметр стін
  const perimeter = 2 * (roomLength + roomWidth);

  // Вичитаємо проломи (тільки якщо > 0.5 м²)
  const openingsArea = [
    ...doors.map(d => d.width * d.height),
    ...windows.map(w => w.width * w.height),
  ]
    .filter(a => a > 0.5)
    .reduce((s, a) => s + a, 0);

  // Смуги з урахуванням рисунка
  const effectiveHeight = patternRepeat > 0
    ? Math.ceil(ceilingHeight / patternRepeat) * patternRepeat
    : ceilingHeight;

  const stripsPerRoll = Math.floor(rollLength / effectiveHeight);
  const totalStrips = Math.ceil(perimeter / rollWidth);

  // Коригуємо на проломи: видаляємо смуги, повністю що потрапляють у пролом
  const savedStrips = Math.floor(openingsArea / (rollWidth * ceilingHeight));

  const netStrips = Math.max(0, totalStrips - savedStrips);
  const rolls = Math.ceil(netStrips / stripsPerRoll);

  return {
    rolls,
    totalStrips: netStrips,
    wallArea: perimeter * ceilingHeight - openingsArea,
  };
}

Розрахунок плитки

function calcTiles(params) {
  const {
    areaM2,        // площа в м²
    tileWidth,     // мм
    tileHeight,    // мм
    groutWidth,    // мм, ширина шва
    wastePercent,  // % запасу (5–15%)
  } = params;

  const tileW = (tileWidth + groutWidth) / 1000; // в метри
  const tileH = (tileHeight + groutWidth) / 1000;
  const tileArea = tileW * tileH;

  const tilesNet = areaM2 / tileArea;
  const tilesWithWaste = Math.ceil(tilesNet * (1 + wastePercent / 100));

  // Витрата клею: ~4–6 кг/м² при товщині нанесення 6 мм
  const adhesiveKg = Math.ceil(areaM2 * 5); // середня витрата

  // Витрата затирки: залежить від розміру плитки та ширини шва
  const groutKg = Math.ceil(areaM2 * (groutWidth / tileWidth) * 0.7 * 2);

  return {
    tiles: tilesWithWaste,
    tilesNet: Math.ceil(tilesNet),
    adhesiveKg,
    groutKg,
  };
}

Багатокімнатний калькулятор

Для ремонту цілої квартири потрібен список приміщень з окремими параметрами:

function MultiRoomCalculator() {
  const [rooms, setRooms] = useState([
    { id: 1, name: 'Гостинна', length: 5, width: 4, height: 2.7 },
  ]);

  const addRoom = () => setRooms(prev => [
    ...prev,
    { id: Date.now(), name: `Кімната ${prev.length + 1}`, length: 3, width: 3, height: 2.7 },
  ]);

  const totalArea = rooms.reduce((s, r) => s + r.length * r.width, 0);

  return (
    <div>
      {rooms.map(room => (
        <RoomForm
          key={room.id}
          room={room}
          onChange={(updated) =>
            setRooms(prev => prev.map(r => r.id === room.id ? updated : r))
          }
          onRemove={() =>
            setRooms(prev => prev.filter(r => r.id !== room.id))
          }
        />
      ))}
      <button onClick={addRoom}>+ Додати приміщення</button>
      <div className="total">Загальна площа: {totalArea.toFixed(1)} м²</div>
      <MaterialsSummary rooms={rooms} />
    </div>
  );
}

Список матеріалів до покупки

function MaterialsSummary({ rooms, selectedMaterial }) {
  const totals = rooms.reduce((acc, room) => {
    const result = calcMaterial(selectedMaterial, room);
    for (const [key, val] of Object.entries(result)) {
      acc[key] = (acc[key] || 0) + val;
    }
    return acc;
  }, {});

  return (
    <table className="materials-list">
      <thead>
        <tr><th>Матеріал</th><th>Кількість</th><th>Одиниця</th></tr>
      </thead>
      <tbody>
        {Object.entries(totals).map(([key, val]) => (
          <tr key={key}>
            <td>{materialLabels[key]}</td>
            <td>{val}</td>
            <td>{materialUnits[key]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Інтеграція з каталогом товарів

Потужний варіант — калькулятор пов'язаний з каталогом магазину. Розрахував кількість → бачиш конкретні SKU з цінами → додаєш у кошик:

async function fetchProducts(materialType, quantity) {
  const res = await fetch(`/api/products?category=${materialType}&min_pack_size=${quantity}`);
  return res.json();
}

Експорт кошторису

Користувач хоче надрукувати список покупок або надіслати прорабу:

function exportToPDF(materials, rooms) {
  // Використовуємо jsPDF + autoTable
  import('jspdf').then(({ jsPDF }) => {
    import('jspdf-autotable').then(() => {
      const doc = new jsPDF();
      doc.setFont('helvetica');
      doc.text('Кошторис на матеріали', 14, 20);
      doc.autoTable({
        head: [['Матеріал', 'Кіл-во', 'Од.']],
        body: materials.map(m => [m.name, m.qty, m.unit]),
        startY: 30,
      });
      doc.save('koshtoris.pdf');
    });
  });
}

Для кирилиці в jsPDF потрібно підключати TTF-шрифт через doc.addFileToVFS + doc.addFont.

Терміни

Калькулятор одного типу матеріалу (шпалери або плитка) з основними параметрами — 2–3 робочі дні. Багатокімнатний калькулятор з кількома типами матеріалів, списком до покупки, інтеграцією каталогу та експортом PDF — 7–10 днів.