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

src/lib/settings/FormulasTable.svelte
213 строк5 KB
saitgalineu
start
25 фев 2026, 16:24
25 фев 2026, 16:24e8a3e93
<script>
  import { createEventDispatcher } from 'svelte';
  import { Settings } from 'lucide-svelte';

  export let formulas = [];
  export let getDisplayedValue;
  export let isRowChanged;
  export let inputTypeOptions = [];

  const dispatch = createEventDispatcher();

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

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

<section class="section">
  <header class="section-header">
    <h2>Формулы аналоговых датчиков</h2>
    <button class="btn-create-small" on:click={openCreate}>Добавить формулу</button>
  </header>
  <p class="section-help">
    Формула задаёт, как из входного сигнала (тока 4–20 мА или сырого значения АЦП) получить
    физическую величину. В выражении доступны переменные
    <code>raw</code>, <code>current</code>, <code>min_value</code>, <code>max_value</code>,
    <code>min_current</code>, <code>max_current</code>, <code>bit_resolution</code>.
  </p>
  <div class="table-shell">
    <table class="fb-table">
      <thead>
        <tr>
          <th>Название</th>
          <th>Тип входа</th>
          <th>Выражение</th>
          <th>Описание</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {#if formulas.length === 0}
          <tr>
            <td colspan="5" class="empty">Пока нет ни одной формулы.</td>
          </tr>
        {:else}
          {#each formulas as item}
            <tr class:row-changed={isRowChanged('formulas', item)}>
              <td>
                <span
                  class="cell-text"
                  title={String(getDisplayedValue('formulas', item, 'name') ?? '')}
                >
                  {getDisplayedValue('formulas', item, 'name') ?? '—'}
                </span>
              </td>
              <td>
                {#if getDisplayedValue('formulas', item, 'input_type') === 'current'}
                  Ток (4–20 мА)
                {:else if getDisplayedValue('formulas', item, 'input_type') === 'raw'}
                  Сырое значение АЦП
                {:else}
                  {getDisplayedValue('formulas', item, 'input_type') ?? '—'}
                {/if}
              </td>
              <td>
                <code class="cell-text">
                  {getDisplayedValue('formulas', item, 'expression') ?? '—'}
                </code>
              </td>
              <td>
                <span
                  class="cell-text muted"
                  title={String(getDisplayedValue('formulas', item, 'description') ?? '')}
                >
                  {getDisplayedValue('formulas', item, 'description') ?? '—'}
                </span>
              </td>
              <td class="actions">
                <button
                  class="gear-btn-small"
                  type="button"
                  on:click={() => openEdit(item)}
                  title="Редактировать"
                >
                  <Settings size={18} />
                </button>
              </td>
            </tr>
          {/each}
        {/if}
      </tbody>
    </table>
  </div>
</section>

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

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.6rem;
  }

  .section-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #1f2937;
  }

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

  .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>