Grit-Grenzdoerfer/wm-AllKids-tibi2023
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Grit-Grenzdoerfer
2023-09-17 13:24:39 +02:00
commit 5f27fe0c5b
753 changed files with 15517 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
frontend/src/lib/components/pagebuilder/form/form.svelte Normal file
View File

@@ -0,0 +1,160 @@
<script lang="ts">
import FormLabelNumberBlock from "./formLabelNumberBlock.svelte"
export let formRow: FormRow
export let index: number
export let formValues
function getSortedFields(column: FormColumn) {
const fields = [
...(column.text.length ? [{ text: column.text, type: "text", order: column.textfieldOrder ?? 3 }] : []),
...(column.showTimes ? [{ type: "times", order: column.timesfieldOrder ?? 3, times: column.times }] : []),
...(column.showDate
? [{ type: "date", order: column.datefieldOrder ?? 3, datePlaceholder: column.datePlaceholder }]
: []),
]
return fields.sort((a, b) => a.order - b.order)
}
//formRow.columns = formRow.columns.map((e) => getSortedFields(e))
function removeInvalid(e) {
let element = e.currentTarget
element.classList.remove("invalid")
}
</script>
<div class="form-row">
<div class="form-cols">
{#each formRow.columns as column, columnIndex}
<div class="form-column">
<h3>{column?.title ?? ""}</h3>
{#if column?.annotation}
<p>{column?.annotation}</p>
{/if}
{#if column.showLabelNumber}
<FormLabelNumberBlock column="{column}" formValues="{formValues}" rowIndex="{index}" />
{/if}
{#if column?.showTimes}
<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>
{/if}
{#if column?.showSelect}
<label bind:this="{$formValues[`select_${column?.title ? column.title + '_' : ''}label`]}">
<select
required="{column?.dateSelectNotRequired !== 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>
{/if}
{#if column.showDate}
<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>
{/if}
{#if column.showNumber}
<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>
{/if}
{#each column.text as textField, 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}
{/each}
</div>
{/each}
</div>
</div>
<style lang="less">
</style>

63
frontend/src/lib/components/pagebuilder/form/formLabelNumberBlock.svelte Normal file
View File

@@ -0,0 +1,63 @@
<script lang="ts">
export let column
export let formValues
export let rowIndex
let blockContainer
$formValues["blockGroups"] = new Set(column.labelNumber.map((e) => e.group))
console.log($formValues["blockGroups"])
</script>
<div class="blockContainer" bind:this="{blockContainer}">
{#each column.labelNumber as outerblock, i}
<div class="{`block`}" bind:this="{$formValues['blockGroups'][i]}">
<h3>{outerblock.title}</h3>
<div class="innterBlockContainer">
{#each outerblock.block as innerBlock}
<div class="innerBlock">
<div class="label">{innerBlock.label}</div>
<input
placeholder="0"
on:change="{(e) => {
let element = e.currentTarget
element.classList.remove('border-red')
blockContainer.classList.remove('invalidBlocks')
}}"
type="number"
name="{outerblock.group}"
class="{`group-${outerblock.group}`}"
bind:this="{$formValues[
`numberLabel_${outerblock.title ?? ''}_${innerBlock.label}_${rowIndex}_${
innerBlock.emailName
}`
]}"
/>
</div>
{/each}
</div>
</div>
{/each}
</div>
<style lang="less">
.block {
width: 100%;
padding: 25px 0px;
h3 {
margin-bottom: 0px;
}
.innerBlock {
width: 100%;
display: flex;
justify-content: space-between;
.label {
display: flex;
align-items: flex-end;
}
input {
text-align: center;
width: 80px;
font-size: 1rem;
}
}
}
</style>

311
frontend/src/lib/components/pagebuilder/form/mobileForm.svelte Normal file
View File

@@ -0,0 +1,311 @@
<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>