src/lib/visualization/VisualizationSidebar.svelte - master - Alcatraz/Wagomon

src/lib/visualization/VisualizationSidebar.svelte
204 строки5 KB
saitgalineu
start
25 фев 2026, 16:24
25 фев 2026, 16:24e8a3e93
<script>
  import { controllers as controllersStore, controllerMeta as controllerMetaStore } from '$lib/visualization/dataStore';
  import { sensorData as sensorDataStore } from '$lib/visualization/dataStore';
  import { getControllerSensors as getControllerSensorsFromData } from '$lib/sensors.js';
  
  export let expandedControllers = {};
  export let getControllerSensors = getControllerSensorsFromData;

  export let onToggleController = () => {};
  export let onAddSensor = () => {};
</script>

<div class="sidebar">
  <h3>Датчики</h3>

  {#each $controllersStore as controller}
    {@const sensors = getControllerSensors($sensorDataStore, controller)}
    {@const isExpanded = expandedControllers[controller]}

    {#if sensors.analog.length > 0 || sensors.binary.length > 0}
      <div class="controller-folder">
        <button
          class="controller-header"
          on:click={() => onToggleController(controller)}
        >
          <span class="folder-icon">{isExpanded ? '📂' : '📁'}</span>
          <span class="controller-name">
            {$controllerMetaStore[controller]?.displayName ?? controller}
          </span>
          <span class="expand-icon">{isExpanded ? '▼' : '▶'}</span>
        </button>

        {#if isExpanded}
          <div class="controller-content">
            {#if sensors.analog.length > 0}
              <div class="sensor-group">
                <h4>Аналоговые</h4>
                <ul>
                  {#each sensors.analog as sensor}
                    <li>
                      <button
                        class="sensor-item"
                        on:click={() => onAddSensor(sensor, 'analog', controller)}
                      >
                        {sensor.name}
                      </button>
                    </li>
                  {/each}
                </ul>
              </div>
            {/if}

            {#if sensors.binary.length > 0}
              <div class="sensor-group">
                <h4>Бинарные</h4>
                <ul>
                  {#each sensors.binary as sensor}
                    <li>
                      <button
                        class="sensor-item"
                        on:click={() => onAddSensor(sensor, 'binary', controller)}
                      >
                        {sensor.name}
                      </button>
                    </li>
                  {/each}
                </ul>
              </div>
            {/if}
          </div>
        {/if}
      </div>
    {:else if $sensorDataStore[controller]?.error}
      <div class="controller-folder">
        <div class="controller-header error">
          <span class="folder-icon">⚠️</span>
          <span class="controller-name">
            {$controllerMetaStore[controller]?.displayName ?? controller}
          </span>
          <span class="error-text">Ошибка</span>
        </div>
      </div>
    {/if}
  {/each}
</div>

<style>
  .sidebar {
    width: 320px;
    background: var(--glass-bg, #fff);
    border: 1px solid var(--glass-border, #e2e8f0);
    border-radius: 1rem;
    padding: 1rem;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .sidebar h3 {
    margin: 0 0 1rem 0;
    color: #2d6cdf;
    font-size: 1.2rem;
  }

  .controller-folder {
    margin-bottom: 0.5rem;
  }

  .controller-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(45, 108, 223, 0.05);
    border: 1px solid rgba(45, 108, 223, 0.2);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
  }

  .controller-header:hover {
    background: rgba(45, 108, 223, 0.1);
    border-color: rgba(45, 108, 223, 0.3);
  }

  .controller-header.error {
    background: rgba(185, 28, 28, 0.05);
    border-color: rgba(185, 28, 28, 0.2);
    cursor: default;
  }

  .folder-icon {
    font-size: 1rem;
  }

  .controller-name {
    flex: 1;
    font-weight: 600;
    color: #1e293b;
  }

  .expand-icon {
    color: #64748b;
    font-size: 0.8rem;
  }

  .error-text {
    color: #b91c1c;
    font-size: 0.85rem;
  }

  .controller-content {
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid rgba(45, 108, 223, 0.2);
  }

  .sensor-group {
    margin-bottom: 1rem;
  }

  .sensor-group h4 {
    margin: 0 0 0.5rem 0;
    color: #475569;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-left: 0.5rem;
  }

  .sensor-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sensor-group li {
    margin-bottom: 0.4rem;
  }

  .sensor-item {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(25, 118, 210, 0.1);
    border: 1px solid rgba(25, 118, 210, 0.25);
    border-radius: 0.5rem;
    color: #1976d2;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    transition: all 0.2s;
  }

  .sensor-item:hover {
    background: rgba(25, 118, 210, 0.2);
    border-color: rgba(25, 118, 210, 0.4);
  }

  button {
    background: none;
    border: none;
  }
</style>