src/lib/settings/MeasureTypesTable.svelte - master - Alcatraz/Wagomon

src/lib/settings/MeasureTypesTable.svelte
332 строки9 KB
saitgalineu
vkr
26 май 2026, 10:08
26 май 2026, 10:08f9b2919
<script>
  import { createEventDispatcher } from 'svelte';
  import { Settings } from 'lucide-svelte';

  export let measureTypes = [];
  export let binarySensorTypesList = [];
  export let getDisplayedValue;
  export let isRowChanged;

  const dispatch = createEventDispatcher();

  let expandedMeasureTypesSections = new Set();

  function toggleMeasureTypesSection(key) {
    const next = new Set(expandedMeasureTypesSections);
    if (next.has(key)) {
      next.delete(key);
    } else {
      next.add(key);
    }
    expandedMeasureTypesSections = next;
  }

  function openMtCreate() {
    dispatch('openMtCreate');
  }

  function openMtEdit(item) {
    dispatch('openMtEdit', { item });
  }

  function openBstCreate() {
    dispatch('openBstCreate');
  }

  function openBstEdit(item) {
    dispatch('openBstEdit', { item });
  }
</script>

<section class="section">
  <p class="section-help">
    Типы измерений для аналоговых датчиков и типы бинарных датчиков (QF, SD, QS, KV, S). Изменения применяются по кнопке «Принять изменения».
  </p>
  <div class="param-tables-list">
    <div class="controller-section">
      <div class="controller-header">
        <button class="expand-btn" on:click={() => toggleMeasureTypesSection('analog')}>
          <svg class:rotated={expandedMeasureTypesSections.has('analog')} width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
        <h3>Типы измерений (аналоговые)</h3>
        <button class="btn-create-small" on:click={openMtCreate}>
          Добавить тип
        </button>
      </div>
      {#if expandedMeasureTypesSections.has('analog')}
        <p class="section-help-inline">Код и название для аналоговых датчиков.</p>
        <div class="table-shell">
          <table class="fb-table">
            <thead>
              <tr>
                <th>Название</th>
                <th>Описание</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {#if measureTypes.length === 0}
                <tr>
                  <td colspan="3" class="empty">Пока нет ни одного типа измерений.</td>
                </tr>
              {:else}
                {#each measureTypes as item}
                  <tr class:row-changed={isRowChanged('measureTypes', item)}>
                    <td>
                      <span
                        class="cell-text"
                        title={String(getDisplayedValue('measureTypes', item, 'name') ?? '')}
                      >
                        {getDisplayedValue('measureTypes', item, 'name') ?? '—'}
                      </span>
                    </td>
                    <td>
                      <span
                        class="cell-text muted"
                        title={String(getDisplayedValue('measureTypes', item, 'description') ?? '')}
                      >
                        {getDisplayedValue('measureTypes', item, 'description') ?? '—'}
                      </span>
                    </td>
                    <td class="actions">
                      <button
                        class="gear-btn-small"
                        type="button"
                        on:click={() => openMtEdit(item)}
                        title="Редактировать"
                      >
                        <Settings size={18} />
                      </button>
                    </td>
                  </tr>
                {/each}
              {/if}
            </tbody>
          </table>
        </div>
      {/if}
    </div>

    <div class="controller-section">
      <div class="controller-header">
        <button class="expand-btn" on:click={() => toggleMeasureTypesSection('binary')}>
          <svg class:rotated={expandedMeasureTypesSections.has('binary')} width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </button>
        <h3>Типы бинарных датчиков</h3>
        <button class="btn-create-small" on:click={openBstCreate}>
          Добавить тип
        </button>
      </div>
      {#if expandedMeasureTypesSections.has('binary')}
        <p class="section-help-inline">
          Код и описание типа (QF, SD, QS, KV, S). Используются в настройках бинарных датчиков.
        </p>
        {#if binarySensorTypesList.length > 0}
          <div class="table-shell">
            <table class="fb-table">
              <thead>
                <tr>
                  <th>Код (name)</th>
                  <th>Описание</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {#each binarySensorTypesList as item}
                  <tr class:row-changed={isRowChanged('binarySensorTypes', item)}>
                    <td>
                      <code
                        class="cell-text"
                        title={String(getDisplayedValue('binarySensorTypes', item, 'name') ?? '')}
                      >
                        {getDisplayedValue('binarySensorTypes', item, 'name') ?? '—'}
                      </code>
                    </td>
                    <td>
                      <span
                        class="cell-text muted"
                        title={String(getDisplayedValue('binarySensorTypes', item, 'description') ?? '')}
                      >
                        {getDisplayedValue('binarySensorTypes', item, 'description') ?? '—'}
                      </span>
                    </td>
                    <td class="actions">
                      <button
                        class="gear-btn-small"
                        type="button"
                        on:click={() => openBstEdit(item)}
                        title="Редактировать"
                      >
                        <Settings size={18} />
                      </button>
                    </td>
                  </tr>
                {/each}
              </tbody>
            </table>
          </div>
        {:else}
          <p class="empty">
            Пока нет типов бинарных датчиков. Добавьте QF, SD, QS, KV, S или свои.
          </p>
        {/if}
      {/if}
    </div>
  </div>
</section>

<style>
  .section {
    margin-top: 0.5rem;
  }

  .section-help {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
  }

  .section-help-inline {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0 0 0.75rem 0;
  }

  .param-tables-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .controller-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    padding: 1rem;
  }

  .controller-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
    flex-wrap: wrap;
  }

  .controller-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #1f2937;
    flex: 1;
  }

  .expand-btn {
    background: transparent;
    color: #64748b;
    padding: 0.25rem;
    border: none;
    cursor: pointer;
  }

  .expand-btn svg {
    transition: transform 0.2s ease;
  }

  .expand-btn svg.rotated {
    transform: rotate(-90deg);
  }

  .btn-create-small {
    background: #10b981;
    color: #fff;
    border: none;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    border-radius: 0.55rem;
    cursor: pointer;
    font-weight: 600;
  }

  .btn-create-small:hover {
    filter: brightness(1.05);
  }

  .table-shell {
    width: 100%;
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    margin-top: 1rem;
  }

  .fb-table {
    width: 100%;
    border-collapse: collapse;
  }

  .fb-table th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
  }

  .fb-table td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #e2e8f0;
  }

  .fb-table tbody tr:hover {
    background: #f9fafb;
  }

  .row-changed td {
    background: linear-gradient(90deg, rgba(254, 240, 138, 0.65), rgba(254, 249, 195, 0.35));
  }

  .cell-text {
    display: block;
  }

  .cell-text.muted {
    color: #64748b;
  }

  .empty {
    color: #94a3b8;
    font-style: italic;
    padding: 1rem;
    text-align: center;
  }

  .actions {
    text-align: center;
  }

  .gear-btn-small {
    background: #eef2ff;
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4c51bf;
    cursor: pointer;
  }

  .gear-btn-small:hover {
    background: #c7d2fe;
  }
</style>