File size: 2,840 Bytes
1123781
246efdb
 
 
 
 
 
 
 
1123781
246efdb
1123781
246efdb
 
 
 
 
 
1123781
 
6a5df00
 
 
246efdb
3207814
246efdb
 
3207814
246efdb
 
3207814
246efdb
 
3207814
246efdb
 
f45636e
246efdb
 
1123781
 
 
 
6a5df00
 
 
 
246efdb
 
6a5df00
 
 
 
246efdb
6a5df00
246efdb
 
6a5df00
246efdb
 
6a5df00
246efdb
 
6a5df00
246efdb
 
6a5df00
246efdb
 
6a5df00
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script lang="ts">
  import type { Fields } from "$lib/types";
  import { FieldType } from "$lib/types";
  import InputRange from "./InputRange.svelte";
  import SeedInput from "./SeedInput.svelte";
  import TextArea from "./TextArea.svelte";
  import Checkbox from "./Checkbox.svelte";
  import Selectlist from "./Selectlist.svelte";
  import { pipelineValues } from "$lib/store";

  let { pipelineParams = $bindable() }: { pipelineParams: Fields } = $props();

  let advanceOptions = $derived(
    Object.values(pipelineParams)?.filter((e) => e?.hide == true),
  );
  let featuredOptions = $derived(
    Object.values(pipelineParams)?.filter((e) => e?.hide !== true),
  );
</script>

<div class="flex flex-col gap-3">
  <div class="grid grid-cols-1 items-center gap-3">
    {#if featuredOptions}
      {#each featuredOptions as params (params.id)}
        {#if params.field === FieldType.RANGE}
          <InputRange {params} bind:value={$pipelineValues[params.id] as number}
          ></InputRange>
        {:else if params.field === FieldType.SEED}
          <SeedInput {params} bind:value={$pipelineValues[params.id] as number}
          ></SeedInput>
        {:else if params.field === FieldType.TEXTAREA}
          <TextArea {params} bind:value={$pipelineValues[params.id] as string}
          ></TextArea>
        {:else if params.field === FieldType.CHECKBOX}
          <Checkbox {params} bind:value={$pipelineValues[params.id] as boolean}
          ></Checkbox>
        {:else if params.field === FieldType.SELECT}
          <Selectlist {params} bind:value={$pipelineValues[params.id] as string}
          ></Selectlist>
        {/if}
      {/each}
    {/if}
  </div>

  <details>
    <summary class="cursor-pointer font-medium">Advanced Options</summary>
    <div
      class="grid grid-cols-1 items-center gap-3 {Object.values(pipelineParams)
        .length > 5
        ? 'sm:grid-cols-2'
        : ''}"
    >
      {#if advanceOptions}
        {#each advanceOptions as params (params.id)}
          {#if params.field === FieldType.RANGE}
            <InputRange {params} bind:value={$pipelineValues[params.id]}
            ></InputRange>
          {:else if params.field === FieldType.SEED}
            <SeedInput {params} bind:value={$pipelineValues[params.id]}
            ></SeedInput>
          {:else if params.field === FieldType.TEXTAREA}
            <TextArea {params} bind:value={$pipelineValues[params.id]}
            ></TextArea>
          {:else if params.field === FieldType.CHECKBOX}
            <Checkbox {params} bind:value={$pipelineValues[params.id]}
            ></Checkbox>
          {:else if params.field === FieldType.SELECT}
            <Selectlist {params} bind:value={$pipelineValues[params.id]}
            ></Selectlist>
          {/if}
        {/each}
      {/if}
    </div>
  </details>
</div>