Untitled

  _setLabel(position, data) {
    const infoEl = document.createElement('div');
    infoEl.className = 'info';
    infoEl.textContent = 'Click me';
    const containerText = document.createElement('div');
    containerText.className = 'container-details';
    containerText.style.display = 'none';
    const vol = getVolumeGaloons(data);
    const chemical = getChemical(vol.cub);
    switch (this.isDesign) {
      case 'calculator':
        containerText.innerHTML = `
        <table>
          <thead>
            <tr>
              <th colspan="3">Volume: ${vol.cub}m3 (${vol.gal} gall)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Chlorine Tablet</td>
              <td>${chemical.ChlorineTablet} tablet</td>
              <td>increase CL ±0.3</td>
            </tr>
            <tr>
              <td>Chlorine Granular 90%</td>
              <td>${chemical.ChlorineGranular} gram (${chemical.ChlorineGranularHandfuls} genggam)</td>
              <td>increase CL ±0.3</td>
            </tr>
            <tr>
              <td>Hypochlorite (70%)</td>
              <td>${chemical.kaporit} gram (${chemical.kaporitHandfuls} genggam)</td>
              <td>increase CL ±0.3</td>
            </tr>
            <tr>
              <td>Soda Ash</td>
              <td>${chemical.sodaAsh} kg (${chemical.sodaAshHandfuls} genggam)</td>
              <td>increase pH 0.2</td>
            </tr>
            <tr>
              <td>HCL</td>
              <td>${chemical.HCL} liter </td>
              <td>decrease pH 0.2</td>
            </tr>
            <tr>
              <td>PAC</td>
              <td>${chemical.PAC} gram (${chemical.PACHandfuls} genggam)</td>
              <td>deposit dirt/dust</td>
            </tr>
            <tr>
              <td>Terusi (Copper-sulfate)</td>
              <td>${chemical.Terusi} kg (${chemical.TerusiHandfuls} genggam)</td>
              <td>clean and blue water</td>
            </tr>
          </tbody>
        </table>
      `;
        break;
      case 'ceramic':
        // Assuming these are the sizes of the boxes (dus)
        const tilesPerBox10x10 = 100; // 100 tiles in one box for 10x10 cm tiles
        const tilesPerBox20x20 = 50; // 50 tiles in one box for 20x20 cm tiles
        const tilesPerBox25x25 = 30; // 30 tiles in one box for 25x25 cm tiles
        const tilesPerBox30x30 = 20; // 20 tiles in one box for 30x30 cm tiles

        const totalArea = getTotalArea(data);
        const {
          totalCeramic10x10,
          totalCeramic20x20,
          totalCeramic25x25,
          totalCeramic30x30,
        } = getTotalCeramic(totalArea);

        // Calculate the number of boxes needed
        const boxes10x10 = Math.ceil(totalCeramic10x10 / tilesPerBox10x10);
        const boxes20x20 = Math.ceil(totalCeramic20x20 / tilesPerBox20x20);
        const boxes25x25 = Math.ceil(totalCeramic25x25 / tilesPerBox25x25);
        const boxes30x30 = Math.ceil(totalCeramic30x30 / tilesPerBox30x30);

        // Updated containerText with proper values
        containerText.innerHTML = `
        <table>
          <thead>
            <tr>
              <th colspan="3">Volume: ${vol.cub} m³ (${vol.gal} gallons)</th>
            </tr>
            <tr>
              <th>Type Ceramic</th>
              <th>Total Pieces</th>
              <th>Total Boxes (Dus)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Ceramic Palimanan 10x10 (cm)</td>
              <td>±${totalCeramic10x10} pcs</td>
              <td>±${boxes10x10} dus</td>
            </tr>
            <tr>
              <td>Ceramic Glossy Blue 20x20 (cm)</td>
              <td>±${totalCeramic20x20} pcs</td>
              <td>±${boxes20x20} dus</td>
            </tr>
            <tr>
              <td>Ceramic Anti-Slip 25x25 (cm)</td>
              <td>±${totalCeramic25x25} pcs</td>
              <td>±${boxes25x25} dus</td>
            </tr>
            <tr>
              <td>Ceramic Mozaik 30x30 (cm)</td>
              <td>±${totalCeramic30x30} pcs</td>
              <td>±${boxes30x30} dus</td>
            </tr>
          </tbody>
        </table>
      `;
        break;

      case 'balancing-tank':
        // Calculate the pool volume and the balancing tank volume
        const poolVolume = getPoolVolume(data); // Assuming a function getPoolVolume that calculates the volume of the pool
        const balancingTankVolume = getBalancingTankVolume(poolVolume); // Assuming a function getBalancingTankVolume that calculates the volume of the balancing tank

        // Update the balancing tank calculator section
        containerText.innerHTML = `
            <table>
              <thead>
                <tr>
                  <th colspan="2">Balancing Tank Calculation</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Pool Volume</td>
                  <td>${poolVolume.toFixed(2)} m³</td>
                </tr>
                <tr>
                  <td>Balancing Tank Volume</td>
                  <td>${balancingTankVolume} m³</td>
                </tr>
              </tbody>
            </table>
          `;
        break;

      default:
        break;
    }

    infoEl.appendChild(containerText);
    infoEl.addEventListener('pointerdown', function () {
      containerText.classList.toggle('active-info');
      if (containerText.classList.contains('active-info')) {
        containerText.style.display = 'block';
      } else {
        containerText.style.display = 'none';
      }
    });
    const label = new CSS2DObject(infoEl);
    label.position.copy(position);
    label.position.set(
      label.position.x,
      label.position.y + 0.5,
      label.position.z
    );
    this._labelMap.set('info-label', label);
    this._labelElMap.set('info-element', infoEl);
    this.scene.add(label);
  }