Capacity editor

by Alon Rotem

HTML

<div class="capacity-container" id="capacityContainer">
    <div class="fixed-capacity" id="fixedCapacity"></div>
    <div class="dynamic-capacity" id="dynamicCapacity">
      <div class="dynamic-border" id="dynamicBorder"></div>
    </div>
  </div>
  <div class="dynamic-value" id="dynamicValue">
    Dynamic Value: 50
  </div>

CSS

/* Main container */
    .capacity-container {
      width: 500px; /* Adjust as needed */
      height: 50px;
      border: 2px solid #000;
      position: relative;
      display: flex;
      align-items: center;
      background-color: #f0f0f0;
    }

    /* Fixed capacity rectangle */
    .fixed-capacity {
      background-color: #007bff; /* Blue */
      height: 100%;
    }

    /* Dynamic capacity rectangle */
    .dynamic-capacity {
      background-color: #28a745; /* Green */
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
    }

    /* Draggable border for the dynamic rectangle */
    .dynamic-border {
      width: 5px;
      background-color: #ff0000; /* Red */
      cursor: ew-resize;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
    }

    /* Dynamic value display */
    .dynamic-value {
      margin-top: 10px;
      font-family: Arial, sans-serif;
      font-size: 16px;
      font-weight: bold;
    }

JavaScript

const capacityContainer = document.getElementById('capacityContainer');
    const fixedCapacity = document.getElementById('fixedCapacity');
    const dynamicCapacity = document.getElementById('dynamicCapacity');
    const dynamicBorder = document.getElementById('dynamicBorder');
    const dynamicValueDisplay = document.getElementById('dynamicValue');

    const totalCapacity = 250; // The total capacity value
    const containerWidth = capacityContainer.clientWidth;

    const fixedValue = 40; // Fixed capacity value
    let dynamicValue = 50; // Initial dynamic capacity value

    // Function to update widths and dynamic value display
    function updateWidths() {
      const fixedWidth = (fixedValue / totalCapacity) * containerWidth;
      const dynamicWidth = (dynamicValue / totalCapacity) * containerWidth;

      fixedCapacity.style.width = `${fixedWidth}px`;
      dynamicCapacity.style.width = `${dynamicWidth}px`;

      // Update the displayed dynamic value
      dynamicValueDisplay.textContent = `Dynamic Value: ${dynamicValue.toFixed(0)}`;
    }

    // Initial setup
    updateWidths();

    // Dragging functionality
    let isDragging = false;

    dynamicBorder.addEventListener('mousedown', (event) => {
      isDragging = true;
      document.body.style.cursor = 'ew-resize';
    });

    document.addEventListener('mousemove', (event) => {
      if (!isDragging) return;

      const rect = capacityContainer.getBoundingClientRect();
      const mouseX = event.clientX - rect.left; // Mouse position relative to the container
      const fixedWidth = (fixedValue / totalCapacity) * containerWidth;

      let newDynamicWidth = mouseX - fixedWidth;

      // Ensure dynamic capacity stays within bounds
      if (newDynamicWidth < 0) newDynamicWidth = 0;
      if (newDynamicWidth > containerWidth - fixedWidth)
        newDynamicWidth = containerWidth - fixedWidth;

      dynamicValue = (newDynamicWidth / containerWidth) * totalCapacity;
      updateWidths();
   ...