558 lines
26 KiB
PHP
558 lines
26 KiB
PHP
<?php get_header(); ?>
|
|
<div class="wrapper--default">
|
|
<div id="primary" class="wrapper--inner">
|
|
<div id="content" role="main" class="span8 offset2">
|
|
<?php if ( have_posts() ) : ?>
|
|
<?php while ( have_posts() ) : the_post(); ?>
|
|
<article class="post mt-12">
|
|
<h1 class=""><?php the_title(); ?></h1>
|
|
<p class="subtitle"><?= get_field('subtitle'); ?></p>
|
|
<div class="the-content">
|
|
<?php the_content(); ?>
|
|
<?php wp_link_pages(); ?>
|
|
</div><!-- the-content -->
|
|
</article>
|
|
<?php endwhile; ?>
|
|
<?php else : ?>
|
|
<article class="post error">
|
|
<h1 class="404">Nothing posted yet</h1>
|
|
</article>
|
|
<?php endif; ?>
|
|
</div><!-- #content .site-content -->
|
|
</div><!-- #primary .content-area -->
|
|
</div>
|
|
|
|
<div id="primary" class="row-fluid mx-auto lg:container lg:mx-auto">
|
|
<div id="content" role="main" class="wrapper--inner span8 offset2">
|
|
<?php if (have_posts()) : ?>
|
|
<div id="app">
|
|
<div class="page-data post">
|
|
<div id="calc-container">
|
|
<div class="calc-bar-fix">
|
|
<div id="calc-bar" ref="calcBar">
|
|
<div class="calc-s calc-placeholder"></div>
|
|
<!-- Step 1 -->
|
|
<div class="calc-s active" id="calc-ch-0" ref="slide1">
|
|
<div class="calc-box gray-bg box-shadow">
|
|
<div class="calc-box--data">
|
|
<div class="calc-box--title">
|
|
<h2>Krok 1</h2>
|
|
</div>
|
|
<ul class="calc-radio" v-if="isLoaded">
|
|
<li v-for="(step, index) in acfData.acf.step_1" :key="index" @click="setStep_1(step.text, index)" :class="{ selected: index === selected_option_1 }">
|
|
<div class="radio"></div>
|
|
<div class="radio-text">
|
|
<div class="radio-title">{{ step.text }}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="next disabled" v-if="!configData.step_1">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div v-else>
|
|
<div class="next" v-if="windowWidth > 1000" @click="swipeSlide('slide2', -125, 2)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next" v-else @click="swipeSlide('slide2', -100, 2)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="calc-s" id="calc-ch-1" ref="slide2">
|
|
<div class="calc-box gray-bg box-shadow">
|
|
<div class="calc-box--data">
|
|
<div class="calc-box--title">
|
|
<h2>Krok 2</h2>
|
|
</div>
|
|
<div class="slide-data">
|
|
<img :src="acfData.acf.step_2.image" alt="">
|
|
<ul class="calc-texts" v-if="isLoaded && this.selected_option_1 !== 2">
|
|
<li>
|
|
<p>{{ acfData.acf.step_2.width }} ( od 2m do 7m ):<br><span v-if="configData.step_2.width">{{ configData.step_2.width / 1000 }}m</span></p>
|
|
<input v-model="configData.step_2.width" ref="rangeWidth" type="range" name="width" id="width" value="2000" min="2000" max="7000" step="500">
|
|
</li>
|
|
<li>
|
|
<p>{{ acfData.acf.step_2.length }} ( od 2m do 7m ):<br><span v-if="configData.step_2.length">{{ configData.step_2.length / 1000 }}m</span></p>
|
|
<input v-model="configData.step_2.length" type="range" name="length" id="length" min="2000" max="7000" step="500">
|
|
</li>
|
|
<li>
|
|
<p>{{ acfData.acf.step_2.height }} ( do 2,8m lub do 3,5m ):<br><span v-if="configData.step_2.height">{{ configData.step_2.height / 1000 }}m</span></p>
|
|
<input v-model="configData.step_2.height" ref="rangeHeight" type="range" name="height" id="height" min="2800" max="3500" step="100">
|
|
</li>
|
|
</ul>
|
|
<!-- Second variant -->
|
|
<ul class="calc-texts" v-if="isLoaded && this.selected_option_1 === 2">
|
|
<li>
|
|
<p>{{ acfData.acf.step_2.width }} ( od 5m do 7,5m ):<br><span v-if="configData.step_2.width">{{ configData.step_2.width / 1000 }}m</span></p>
|
|
<input v-model="configData.step_2.width" ref="rangeWidth" type="range" name="width" id="width" min="5000" max="7500" step="500">
|
|
</li>
|
|
<li>
|
|
<p>{{ acfData.acf.step_2.length }} ( od 2,5m do 7,5m ):<br><span v-if="configData.step_2.length">{{ configData.step_2.length / 1000 }}m</span></p>
|
|
<input v-model="configData.step_2.length" type="range" name="length" id="length" min="2500" max="7500" step="500">
|
|
</li>
|
|
<li class="c-select">
|
|
<p>Wjazd standardowy lub wjazd boczny</p>
|
|
<select v-model="configData.step_2.entry">
|
|
<option value="Standardowy od niskiej albo wysokiej strony">Standardowy od niskiej albo wysokiej strony</option>
|
|
<option value="Boczny z bocznej skośnej strony dachu">Boczny z bocznej skośnej strony dachu</option>
|
|
</select>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="windowWidth > 1000">
|
|
<div class="prev" @click="swipeSlide('slide1', -55, 1)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next" @click="swipeSlide('slide3', -195, 3)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="prev" @click="swipeSlide('slide1', 0, 1)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next" @click="swipeSlide('slide3', -200, 3)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="calc-s" id="calc-ch-2" ref="slide3">
|
|
<div class="calc-box gray-bg box-shadow">
|
|
<div class="calc-box--data">
|
|
<div class="calc-box--title">
|
|
<h2>Krok 3</h2>
|
|
</div>
|
|
<ul class="calc-radio" v-if="isLoaded && this.selected_option_1 !== 2">
|
|
<li
|
|
v-for="(step, index) in acfData_step_3"
|
|
:key="index"
|
|
@click="setStep_3(step.text, index, step.extra_option)"
|
|
:class="{ selected: index === selected_option_3 || (step.extra_option && this.configData.step_3_extra) }"
|
|
>
|
|
<div class="radio"></div>
|
|
<div class="radio-text">
|
|
<div class="radio-title">{{ step.text }}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<!-- Second variant -->
|
|
<ul class="calc-radio" v-if="isLoaded && this.selected_option_1 === 2">
|
|
<li
|
|
v-for="(step, index) in acfData_step_3"
|
|
:key="index"
|
|
@click="setStep_3(step.text, index, step.extra_option)"
|
|
:class="{ selected: index === selected_option_3 || (step.extra_option && this.configData.step_3_extra) }"
|
|
>
|
|
<div class="radio"></div>
|
|
<div class="radio-text">
|
|
<div class="radio-title">{{ step.text }}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul class="calc-texts" v-if="isLoaded && this.selected_option_1 === 2">
|
|
<li class="c-select">
|
|
<p>Klient prywatny , klient biznesowy</p>
|
|
<select v-model="configData.step_3_extra">
|
|
<option value="Prywatny">Prywatny</option>
|
|
<option value="Biznesowy B2B">Biznesowy B2B</option>
|
|
</select>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="windowWidth > 1000">
|
|
<div class="prev" @click="swipeSlide('slide2', -125, 2)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next disabled" v-if="!configData.step_3">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next" v-else @click="swipeSlide('slide4', -265, 4)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="prev" @click="swipeSlide('slide2', -100, 2)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next disabled" v-if="!configData.step_3">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
<div class="next" v-else @click="swipeSlide('slide4', -300, 4)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="calc-s" id="calc-ch-2" ref="slide4">
|
|
<div class="calc-box gray-bg box-shadow">
|
|
<div class="calc-box--data">
|
|
<div class="calc-box--title">
|
|
<h2>Krok 4</h2>
|
|
</div>
|
|
<ul class="calc-texts" v-if="isLoaded">
|
|
<li>
|
|
<p>{{acfData.acf.step_4.miejsce_montazu}}</p>
|
|
<input v-model="configData.step_4.miejsce_montazu" type="text" name="miejsce_montazu" id="calc_miejsce_montazu" class="input" require>
|
|
</li>
|
|
<li>
|
|
<p>{{acfData.acf.step_4.name}}</p>
|
|
<input v-model="configData.step_4.name" type="text" name="name" id="calc_name" class="input" require>
|
|
</li>
|
|
<li>
|
|
<p>{{acfData.acf.step_4.email}}</p>
|
|
<input v-model="configData.step_4.email" type="email" name="email" id="calc_email" class="input" require>
|
|
</li>
|
|
<li>
|
|
<p>{{acfData.acf.step_4.phone}}</p>
|
|
<input v-model="configData.step_4.phone" type="tel" name="phone" id="calc_phone" class="input" require>
|
|
</li>
|
|
<li>
|
|
<p>{{acfData.acf.step_4.attachment}}</p>
|
|
<input type="file" ref="fileInput" name="attachment" id="calc_attachment" class="input">
|
|
</li>
|
|
</ul>
|
|
|
|
<button class="btn_send btn btn-primary" type="submit" @click="sendEmail()" :disabled="isSended">Wyślij</button>
|
|
</div>
|
|
|
|
<div v-if="windowWidth > 1000">
|
|
<div class="prev" @click="swipeSlide('slide3', -195, 3)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="prev" @click="swipeSlide('slide3', -200, 3)">
|
|
<svg class="svg-arrow" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
|
<path d="M11.166 23.963L22.36 17.5C23.79 16.676 23.79 15.325 22.36 14.5L11.165 8.037C9.73502 7.211 8.56702 7.887 8.56702 9.537V22.463C8.56702 24.113 9.73702 24.789 11.165 23.963H11.166Z" fill="#F8F8F8" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="progress-bar">
|
|
<div class="progress-bar">
|
|
<div class="progress-bar-line" :style="{ width: progressBar + '%' }"></div>
|
|
</div>
|
|
<!-- <progress id="calculate-progres" :value="progressBar" max="100"></progress> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="section-header xl:container xl:mx-auto">
|
|
<h2 class="title">Przykładowe realizacje</h2>
|
|
</section>
|
|
<section class="section-realizacje flex flex-row items-center flex-wrap sm:justify-start xl:container xl:mx-auto">
|
|
<?php
|
|
$related = get_posts(
|
|
array(
|
|
'category__in' => wp_get_post_categories($post->ID),
|
|
'numberposts' => 4,
|
|
'post_type' => 'realizacje',
|
|
'post__not_in' => array($post->ID)
|
|
)
|
|
);
|
|
|
|
if ($related) foreach ($related as $post) {
|
|
setup_postdata($post); ?>
|
|
|
|
<a href="<?= the_permalink(); ?>" class="recent-realizations-item" style="background-image: url(<?= get_the_post_thumbnail_url(); ?>)">
|
|
|
|
<p class="absolute text-xl min-w-full min-h-full bg-opacity-90 h-full w-full flex items-center justify-center text-white text-center">
|
|
<?= get_the_title(); ?></p>
|
|
</a>
|
|
|
|
<?php } wp_reset_postdata(); ?>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<?php else : ?>
|
|
<article class="post error">
|
|
<h1 class="404">Nothing posted yet</h1>
|
|
</article>
|
|
<?php endif; ?>
|
|
</div><!-- #content .site-content -->
|
|
</div>
|
|
|
|
<script>
|
|
var app = Vue.createApp({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
isLoaded: false,
|
|
isSended: false,
|
|
selected_option_1: null,
|
|
selected_option_3: null,
|
|
progressBar: 25,
|
|
windowWidth: 0,
|
|
|
|
acfData: {
|
|
acf: {}
|
|
},
|
|
|
|
|
|
acfData_step_3: {
|
|
|
|
},
|
|
|
|
configData: {
|
|
step_1: '',
|
|
step_2: {},
|
|
step_3: '',
|
|
step_3_extra: '',
|
|
step_4: {
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
}
|
|
}
|
|
}
|
|
},
|
|
async beforeMount() {
|
|
this.getWindowWidth();
|
|
try {
|
|
const res = await fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/pages/<?php echo get_the_ID() ?>`);
|
|
const data = await res.json();
|
|
this.acfData = data;
|
|
this.isLoaded = true;
|
|
} catch (error) {
|
|
console.error('Error fetching data:', error);
|
|
this.isLoaded = true;
|
|
}
|
|
},
|
|
methods: {
|
|
setStep_1(value, index) {
|
|
this.configData.step_1 = value
|
|
this.selected_option_1 = index
|
|
this.updateStep2Content();
|
|
this.updateStep3Content();
|
|
},
|
|
updateStep2Content() {
|
|
this.configData.step_2 = {};
|
|
|
|
// Tutaj umieszczasz logikę, która zmienia zawartość kroku 2 w zależności od wyboru w kroku 1.
|
|
// Przykład: zmiana obrazka w kroku 2 na podstawie wyboru
|
|
if (this.selected_option_1 === 0) { // Zakładając, że pierwsza opcja w kroku 1 zmienia obraz na 'obrazek1.webp'
|
|
this.acfData.acf.step_2.image = '/wp-content/uploads/2024/02/konfigurator-ogrod-zimowy.png';
|
|
} else if (this.selected_option_1 === 1) { // Druga opcja zmienia obraz na 'obrazek2.webp'
|
|
this.acfData.acf.step_2.image = '/wp-content/uploads/2024/02/konfigurator-ogrod-letni.png';
|
|
} else if (this.selected_option_1 === 2) { // Druga opcja zmienia obraz na 'obrazek2.webp'
|
|
this.acfData.acf.step_2.image = '/wp-content/uploads/2024/02/konfigurator-ogrod-dach-jednospadowy.png';
|
|
}
|
|
// I tak dalej dla innych opcji...
|
|
},
|
|
|
|
updateStep3Content() {
|
|
this.configData.step_3 = {};
|
|
this.configData.step_3_extra = '';
|
|
|
|
if (this.selected_option_1 === 0) {
|
|
this.acfData_step_3 = this.acfData.acf.step_3.items_1
|
|
} else if (this.selected_option_1 === 1) {
|
|
this.acfData_step_3 = this.acfData.acf.step_3.items_2
|
|
} else if (this.selected_option_1 === 2) {
|
|
this.acfData_step_3 = this.acfData.acf.step_3.items_3
|
|
}
|
|
},
|
|
|
|
setStep_3(value, index, extra_option = false) {
|
|
if (!extra_option) {
|
|
this.configData.step_3 = value
|
|
this.selected_option_3 = index
|
|
this.configData.step_3_extra = ''
|
|
} else {
|
|
this.configData.step_3_extra = value
|
|
}
|
|
},
|
|
swipeSlide(refName, percent, progress) {
|
|
const myDiv = this.$refs.calcBar;
|
|
const slide = this.$refs[refName];
|
|
const calcSElements = myDiv.querySelectorAll('.calc-s');
|
|
|
|
calcSElements.forEach((element) => {
|
|
element.classList.remove('active');
|
|
});
|
|
|
|
myDiv.style.marginLeft = `${percent}%`;
|
|
slide.classList.add('active');
|
|
|
|
this.progressBar = ((100 / 4) * progress)
|
|
},
|
|
sendEmail() {
|
|
if (this.checkFields()) {
|
|
const url = '/konfigurator-mail.php';
|
|
|
|
const formData = new FormData();
|
|
|
|
formData.append('configData', JSON.stringify(this.configData));
|
|
|
|
const file = this.$refs.fileInput?.files[0];
|
|
if (file) {
|
|
formData.append('attachment', file);
|
|
}
|
|
// const data = {
|
|
// configData: this.configData,
|
|
// };
|
|
|
|
this.isSended = true
|
|
|
|
// const options = {
|
|
// method: 'POST',
|
|
// headers: {
|
|
// 'Content-Type': 'application/json',
|
|
// },
|
|
// body: JSON.stringify(data),
|
|
// };
|
|
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
this.isSended = false
|
|
this.resetAllFields()
|
|
this.swipeSlide('slide1', 0)
|
|
window.location.href = "/konfigurator-podziekowania/";
|
|
})
|
|
.catch(error => {
|
|
this.isSended = false
|
|
console.error(error);
|
|
});
|
|
} else {
|
|
alert('Proszę uzupełnić wszystkie pola.');
|
|
}
|
|
},
|
|
areAllFieldsFilled(configData) {
|
|
const checkFields = (data, ignoreKeys = []) => {
|
|
for (const key in data) {
|
|
if (ignoreKeys.includes(key)) continue;
|
|
|
|
const value = data[key];
|
|
|
|
if (typeof value === 'object' && value !== null) {
|
|
if (!checkFields(value, ignoreKeys)) {
|
|
return false;
|
|
}
|
|
} else if (value === '' || value === null || value === undefined) {
|
|
return false;
|
|
} else if (typeof value === 'string' && value.trim() === '') {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
};
|
|
|
|
// przekazujemy klucze, które należy zignorować
|
|
return checkFields(configData, ['step_3_extra']);
|
|
},
|
|
|
|
checkFields() {
|
|
return this.areAllFieldsFilled(this.configData);
|
|
},
|
|
|
|
resetAllFields() {
|
|
const stack = [this.configData];
|
|
|
|
this.selected_option_1 = null
|
|
this.selected_option_3 = null
|
|
|
|
while (stack.length > 0) {
|
|
const obj = stack.pop();
|
|
|
|
for (const key in obj) {
|
|
const value = obj[key];
|
|
|
|
if (typeof value === 'object') {
|
|
stack.push(value);
|
|
} else {
|
|
if (Array.isArray(value)) {
|
|
obj[key] = [];
|
|
} else if (typeof value === 'number') {
|
|
obj[key] = 0;
|
|
} else if (typeof value === 'string') {
|
|
obj[key] = '';
|
|
} else if (typeof value === 'boolean') {
|
|
obj[key] = false;
|
|
} else {
|
|
obj[key] = null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getWindowWidth() {
|
|
this.windowWidth = window.innerWidth;
|
|
},
|
|
},
|
|
mounted() {
|
|
window.addEventListener('resize', this.getWindowWidth);
|
|
this.getWindowWidth();
|
|
},
|
|
computed: {
|
|
debug() {
|
|
return this.configData
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
configData: {
|
|
deep: true,
|
|
handler() {
|
|
console.log('configData changed:\n', JSON.stringify(this.configData, null, 2));
|
|
}
|
|
}
|
|
},
|
|
|
|
beforeDestroy() {
|
|
window.removeEventListener('resize', this.getWindowWidth);
|
|
},
|
|
})
|
|
|
|
app.mount('#app')
|
|
</script>
|
|
<?php get_footer(); ?>
|