IoTManagerWeb/src/pages/Config.svelte

<script>
  import Card from "../components/Card.svelte";

  export let configJson;
  export let widgetsJson;
  export let itemsJson;
  export let itemsJsonBind;

  export let elementsDropdownChange = () => {};
  export let saveConfig = () => {};
  export let deleteLine = (i) => {};

  let hideAllSubParams = true;
</script>

<!--{#if itemsJsonParced && widgetsJsonParced && configJsonParced && settingsJsonParced}-->
<div class="grd-1cols">
  <Card>
    <div class="grd-2colsfx">
      <select class="slct-lg" bind:value={itemsJsonBind} on:change={() => elementsDropdownChange()}>
        {#each itemsJson as item}
          {#if item.header}
            <optgroup label={item.header} />
          {/if}
          {#if !item.header}
            <option value={item.num}>
              {item.name}
            </option>
          {/if}
        {/each}
      </select>
      <select class="slct-lg"><option>{"Выберите пресет"}</option></select>
    </div>
    <table class="table-fixed w-full select-none my-2 ">
      <thead class="bg-gray-100">
        <tr class="tbl-txt-sz tbl-txt-p">
          <th class="tbl-hd">Тип</th>
          <th class="tbl-hd">Id</th>
          <th class="tbl-hd">Виджет</th>
          <th class="tbl-hd">Вкладка</th>
          <th class="tbl-hd">Название</th>
          <th class="tbl-hd w-7" />
          <th class="tbl-hd w-7" />
        </tr>
      </thead>
      <tbody class="bg-white">
        {#each configJson as element, i}
          <tr class="tbl-txt-sz tbl-txt-p">
            <td class="tbl-bdy">{element.subtype}</td>
            <td class="tbl-bdy"><input bind:value={element.id} class="tbl-ipt w-full" type="text" /></td>
            <td class="tbl-bdy"
              ><select bind:value={element.widget} class="tbl-ipt w-full">
                {#each widgetsJson as select}
                  <option value={select.name}>
                    {select.label}
                  </option>
                {/each}
              </select></td>
            <td class="tbl-bdy"><input bind:value={element.page} class="tbl-ipt w-full" type="text" /></td>
            <td class="tbl-bdy"><input bind:value={element.descr} class="tbl-ipt w-full" type="text" /></td>
            <td class="tbl-bdy"><svg on:click={() => (hideAllSubParams = !hideAllSubParams)} class="h-6 w-6 text-green-400 cursor-pointer" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" /> <circle cx="5" cy="12" r="1" /> <circle cx="12" cy="12" r="1" /> <circle cx="19" cy="12" r="1" /></svg></td>
            <td class="tbl-bdy"><svg on:click={() => deleteLine(i)} class="h-6 w-6 text-red-400 cursor-pointer" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /></svg></td>
          </tr>
          {#if !hideAllSubParams}
            {#each Object.entries(element) as [key, param]}
              {#if key != "type" && key != "subtype" && key != "id" && key != "widget" && key != "page" && key != "descr"}
                <tr class="tbl-txt-sz tbl-txt-p">
                  <td />
                  <td />
                  <td />
                  <td class="tbl-s-bdy text-right">
                    <p class="tbl-s-txt">{key}</p>
                  </td>
                  <td class="tbl-s-bdy text-center">
                    <input bind:value={element[key]} class="tbl-s-ipt w-full" type="text" />
                  </td>
                </tr>
              {/if}
            {/each}
            <!--<br />-->
          {/if}
        {/each}
      </tbody>
    </table>
    <button class="btn-lg" on:click={() => saveConfig()}>{"Сохранить"}</button>
  </Card>
</div>
<!--{:else if !itemsJsonParced && !widgetsJsonParced && !configJsonParced && !settingsJsonParced}-->
<!--<div class="flex justify-center items-center">-->
<!--<div style="border-top-color:transparent" class="w-20 h-20 border-4 border-blue-400 border-solid rounded-full animate-spin" />-->
<!--</div>-->
<!--{/if}-->