312 lines
10 KiB
Svelte
312 lines
10 KiB
Svelte
<script lang="ts">
|
|
import FormLabelNumberBlock from "./formLabelNumberBlock.svelte"
|
|
|
|
export let formRow: FormRow
|
|
export let formValues
|
|
export let index
|
|
function removeInvalid(e) {
|
|
let element = e.currentTarget
|
|
element.classList.remove("invalid")
|
|
}
|
|
|
|
function getPosition(column, pos, i = 0) {
|
|
let position = 0
|
|
if (pos == 0) return
|
|
if (column.showLabelNumber) position++
|
|
if (pos == 1) return position
|
|
if (column.showTimes) position++
|
|
if (pos == 2) return position
|
|
|
|
if (column.showSelect) position++
|
|
if (pos == 3) return position
|
|
if (column.showDate) position++
|
|
if (pos == 4) return position
|
|
if (column.showNumber) position++
|
|
return position + i
|
|
}
|
|
</script>
|
|
|
|
<div class="form-row">
|
|
<div class="form-cols mobile-fields">
|
|
{#each formRow.columns as column, columnIndex}
|
|
<h3>{column?.title ?? ""}</h3>
|
|
{#if column?.annotation}
|
|
<p>{column?.annotation}</p>
|
|
{/if}
|
|
{#if column.showLabelNumber}
|
|
<div class="{`column-${columnIndex} position-${getPosition(column, 0)}`}">
|
|
<FormLabelNumberBlock column="{column}" formValues="{formValues}" rowIndex="{index}" />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if column?.showTimes}
|
|
<div class="column-{columnIndex} position-{getPosition(column, 1)}">
|
|
<label bind:this="{$formValues[`times_${column?.title ? column.title + '_' : ''}label`]}">
|
|
<select
|
|
id="time-select"
|
|
bind:this="{$formValues[
|
|
`times_${column?.title ?? 'Zeiten'}_${column.timesfieldOrder}_${index}_${
|
|
column.emailNameTimes || columnIndex + 'invalidtimes'
|
|
}`
|
|
]}"
|
|
required="{column?.timeNotRequired !== true}"
|
|
on:change="{removeInvalid}"
|
|
>
|
|
<option value="" disabled selected>Bitte Uhrzeit wählen</option>
|
|
{#each column?.times as time}
|
|
<option value="{time?.timeFrom}-{time?.timeTo}">
|
|
{time?.timeFrom} - {time?.timeTo}
|
|
</option>
|
|
{/each}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if column?.showSelect}
|
|
<div class="column-{columnIndex} position-{getPosition(column, 2)}">
|
|
<label bind:this="{$formValues[`select_${column?.title ? column.title + '_' : ''}label`]}">
|
|
<select
|
|
required="{column?.dateNotRequired !== true}"
|
|
bind:this="{$formValues[
|
|
`select_${column?.title ?? 'Auswahl'}_${column.datefieldOrder}_${index}_${
|
|
column?.emailNameTime || columnIndex + 'invalidtime'
|
|
}`
|
|
]}"
|
|
on:change="{removeInvalid}"
|
|
>
|
|
<option value="" disabled selected>{column.selectTitle}</option>
|
|
{#each column?.selectEntries as entry}
|
|
<option value="{entry?.leftSide}-{entry?.rightSide}">
|
|
{entry?.leftSide}-{entry?.rightSide}
|
|
</option>
|
|
{/each}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if column.showDate}
|
|
<div class="column-{columnIndex} position-{getPosition(column, 3)}">
|
|
<label bind:this="{$formValues[`date_${column?.title ? column.title + '_' : ''}label`]}">
|
|
<input
|
|
class="date"
|
|
type="date"
|
|
required="{column?.dateNotRequired !== true}"
|
|
on:change="{removeInvalid}"
|
|
bind:this="{$formValues[
|
|
`date_${column?.title ?? 'Datum'}_${column.datefieldOrder}_${index}_${
|
|
column?.emailNameDate || columnIndex + 'invaliddate'
|
|
}`
|
|
]}"
|
|
/>
|
|
</label>
|
|
</div>
|
|
{/if}
|
|
{#if column.showNumber}
|
|
<div class=" column-{columnIndex} position-{getPosition(column, 4)}">
|
|
<label
|
|
bind:this="{$formValues[
|
|
`input_${column.title ? column.title + '_' : ''}${column?.numberPlaceholder}_label`
|
|
]}"
|
|
>
|
|
<input
|
|
type="number"
|
|
step="any"
|
|
required="{column?.numberNotRequired !== true}"
|
|
on:change="{removeInvalid}"
|
|
placeholder="{column?.numberPlaceholder}"
|
|
bind:this="{$formValues[
|
|
`input_${column.title ? column.title + '_' : ''}${column?.numberPlaceholder}_${
|
|
column.numberfieldOrder
|
|
}_${index}_${column?.emailNameNumber || columnIndex + 'invalidnumber'}`
|
|
]}"
|
|
/>
|
|
</label>
|
|
</div>
|
|
{/if}
|
|
|
|
{#each column.text as textField, textFieldIndex}
|
|
<div class="column-{columnIndex} position-{getPosition(column, 5 + textFieldIndex, textFieldIndex)}">
|
|
{#if textField?.textArea}
|
|
<label bind:this="{$formValues[`textarea_Nachricht_label`]}">
|
|
<textarea
|
|
placeholder="{textField?.textPlaceholder}"
|
|
required="{textField?.notRequired !== true}"
|
|
on:change="{removeInvalid}"
|
|
bind:this="{$formValues[
|
|
`textarea_Nachricht_${textField.textfieldOrder}_${index}_${
|
|
textField.emailName || columnIndex + 'invalidtext' + textFieldIndex
|
|
}`
|
|
]}"></textarea>
|
|
</label>
|
|
{:else}
|
|
<label
|
|
bind:this="{$formValues[
|
|
`input_${column.title ? column.title + '_' : ''}${textField?.textPlaceholder}_label`
|
|
]}"
|
|
>
|
|
<input
|
|
type="text"
|
|
placeholder="{textField?.textPlaceholder}"
|
|
on:change="{removeInvalid}"
|
|
required="{textField?.notRequired !== true}"
|
|
bind:this="{$formValues[
|
|
`${
|
|
textField?.telValidation
|
|
? 'Telefon'
|
|
: textField?.emailValidation
|
|
? 'Email'
|
|
: 'input'
|
|
}_${column.title ? column.title + '_' : ''}${textField?.textPlaceholder}_${
|
|
textField.textfieldOrder
|
|
}_${index}_${textField.emailName || columnIndex + 'invalidtext' + textFieldIndex}`
|
|
]}"
|
|
/>
|
|
</label>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="less">
|
|
.mobile-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-field {
|
|
order: 1;
|
|
}
|
|
|
|
/* Order for first column */
|
|
.column-0.position-0 {
|
|
order: 1;
|
|
}
|
|
.column-0.position-1 {
|
|
order: 5;
|
|
}
|
|
.column-0.position-2 {
|
|
order: 9;
|
|
}
|
|
.column-0.position-3 {
|
|
order: 13;
|
|
}
|
|
.column-0.position-4 {
|
|
order: 17;
|
|
}
|
|
.column-0.position-5 {
|
|
order: 21;
|
|
}
|
|
.column-0.position-6 {
|
|
order: 25;
|
|
}
|
|
.column-0.position-7 {
|
|
order: 29;
|
|
}
|
|
.column-0.position-8 {
|
|
order: 33;
|
|
}
|
|
.column-0.position-9 {
|
|
order: 37;
|
|
}
|
|
|
|
/* Order for second column */
|
|
.column-1.position-0 {
|
|
order: 2;
|
|
}
|
|
.column-1.position-1 {
|
|
order: 6;
|
|
}
|
|
.column-1.position-2 {
|
|
order: 10;
|
|
}
|
|
.column-1.position-3 {
|
|
order: 14;
|
|
}
|
|
.column-1.position-4 {
|
|
order: 18;
|
|
}
|
|
.column-1.position-5 {
|
|
order: 22;
|
|
}
|
|
.column-1.position-6 {
|
|
order: 26;
|
|
}
|
|
.column-1.position-7 {
|
|
order: 30;
|
|
}
|
|
.column-1.position-8 {
|
|
order: 34;
|
|
}
|
|
.column-1.position-9 {
|
|
order: 38;
|
|
}
|
|
|
|
/* Order for third column */
|
|
.column-2.position-0 {
|
|
order: 3;
|
|
}
|
|
.column-2.position-1 {
|
|
order: 7;
|
|
}
|
|
.column-2.position-2 {
|
|
order: 11;
|
|
}
|
|
.column-2.position-3 {
|
|
order: 15;
|
|
}
|
|
.column-2.position-4 {
|
|
order: 19;
|
|
}
|
|
.column-2.position-5 {
|
|
order: 23;
|
|
}
|
|
.column-2.position-6 {
|
|
order: 27;
|
|
}
|
|
.column-2.position-7 {
|
|
order: 31;
|
|
}
|
|
.column-2.position-8 {
|
|
order: 35;
|
|
}
|
|
.column-2.position-9 {
|
|
order: 39;
|
|
}
|
|
|
|
/* Order for fourth column */
|
|
.column-3.position-0 {
|
|
order: 4;
|
|
}
|
|
.column-3.position-1 {
|
|
order: 8;
|
|
}
|
|
.column-3.position-2 {
|
|
order: 12;
|
|
}
|
|
.column-3.position-3 {
|
|
order: 16;
|
|
}
|
|
.column-3.position-4 {
|
|
order: 20;
|
|
}
|
|
.column-3.position-5 {
|
|
order: 24;
|
|
}
|
|
.column-3.position-6 {
|
|
order: 28;
|
|
}
|
|
.column-3.position-7 {
|
|
order: 32;
|
|
}
|
|
.column-3.position-8 {
|
|
order: 36;
|
|
}
|
|
.column-3.position-9 {
|
|
order: 40;
|
|
}
|
|
</style>
|