Untitled
unknown
plain_text
6 months ago
5.9 kB
6
Indexable
_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); }
Editor is loading...
Leave a Comment