Save
This commit is contained in:
@@ -112,6 +112,47 @@
|
||||
<p v-if="selected_option_1 === 0" class="budget-info" style="margin-top: 20px; font-size: 14px; color: #666; font-style: italic;">
|
||||
Orientacyjny budżet całorocznego ogrodu zimowego zwykle mieści się w przedziale 120 000 – 180 000 zł netto
|
||||
</p>
|
||||
|
||||
<div class="tabs_examples" v-if="selected_option_1 === 0">
|
||||
<h3>Przykłady cen ogrodu zimowego 4x5m</h3>
|
||||
<div class="tabs_examples-nav">
|
||||
<button :class="{ active: activeExampleTab === 'standard' }" @click="activeExampleTab = 'standard'">Standard</button>
|
||||
<button :class="{ active: activeExampleTab === 'comfort' }" @click="activeExampleTab = 'comfort'">Comfort</button>
|
||||
<button :class="{ active: activeExampleTab === 'premium' }" @click="activeExampleTab = 'premium'">Premium</button>
|
||||
</div>
|
||||
<div class="tabs_examples-content">
|
||||
<!-- Standard -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'standard'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-1.png" alt="Ogród zimowy Standard 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Standard</h4>
|
||||
<p>Ogród zimowy standard z szybami Ug=1,1 na dachu i ścianach i z jednymi drzwiami tarasowymi uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m. Bez osłon przeciwsłonecznych (nadaje się w zacienione miejsca).</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Comfort -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'comfort'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-2.png" alt="Ogród zimowy Comfort 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Comfort</h4>
|
||||
<p>Ogród zimowy Comfort z szybami Ug=1,1 na dachu i ścianach i z dwoma drzwiami tarasowymi uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m + boczna ściana 3 kwatery 1 skrzydło PSK + osłona przeciwsłoneczna dachu, 2 osłony Veranda ster. elektr.</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Premium -->
|
||||
<div class="tabs_examples-panel" v-if="activeExampleTab === 'premium'">
|
||||
<div class="tabs_examples-img">
|
||||
<img src="/wp-content/uploads/2026/02/image-3.png" alt="Ogród zimowy Premium 4x5m">
|
||||
</div>
|
||||
<div class="tabs_examples-desc">
|
||||
<h4>Ogród zimowy Premium</h4>
|
||||
<p>Ogród zimowy premium z szybami energooszczędnymi Ug=0,5 na dachu i ścianach i z dwoma drzwiami tarasowymi. 1 szt. uchylno-przesuwnymi PSK na frontowej ścianie 2,5x2,2m + 1 szt. drzwi HS na bocznej ścianie 1 skrzydło + komplet osłon przeciwsłonecznych na dachu, 2 osłony Veranda ster. elektr. z czujnikiem słońce wiatr + 1 szt. osłony przeciwsłoneczne żaluzje C80 na bocznych ścianach ster. el. + okno HS w dachu przesuwane, sterowane el. + oświetlenie punktowe LED z pilotem. Montaż na co drugiej krokwi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -256,23 +297,57 @@
|
||||
</ul>
|
||||
|
||||
<ul v-if="selected_option_1 === 0" class="calc-texts" style="margin-top: 20px;">
|
||||
<li class="c-select">
|
||||
<li class="c-datepicker">
|
||||
<p>Planowany termin montażu</p>
|
||||
<select v-model="configData.step_4.planned_date">
|
||||
<option value="">-- Wybierz --</option>
|
||||
<option value="3–6 miesięcy">3–6 miesięcy</option>
|
||||
<option value="6–12 miesięcy">6–12 miesięcy</option>
|
||||
<option value="później">później</option>
|
||||
</select>
|
||||
<div class="datepicker-wrapper">
|
||||
<div class="datepicker-input" @click="showDatepicker = !showDatepicker">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#88b14b" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
<span :class="{ placeholder: !configData.step_4.planned_date }">
|
||||
{{ configData.step_4.planned_date || 'Wybierz datę' }}
|
||||
</span>
|
||||
<svg class="datepicker-chevron" :class="{ open: showDatepicker }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="datepicker-calendar" v-if="showDatepicker">
|
||||
<div class="datepicker-header">
|
||||
<button type="button" @click.stop="dpPrevMonth">‹</button>
|
||||
<span>{{ dpMonthName }} {{ dpYear }}</span>
|
||||
<button type="button" @click.stop="dpNextMonth">›</button>
|
||||
</div>
|
||||
<div class="datepicker-weekdays">
|
||||
<span>Pn</span><span>Wt</span><span>Śr</span><span>Cz</span><span>Pt</span><span>Sb</span><span>Nd</span>
|
||||
</div>
|
||||
<div class="datepicker-days">
|
||||
<span v-for="blank in dpFirstDayOffset" class="datepicker-day empty"></span>
|
||||
<span
|
||||
v-for="day in dpDaysInMonth"
|
||||
:key="day"
|
||||
class="datepicker-day"
|
||||
:class="{
|
||||
selected: dpIsSelected(day),
|
||||
disabled: dpIsDisabled(day),
|
||||
today: dpIsToday(day)
|
||||
}"
|
||||
@click.stop="dpSelectDay(day)"
|
||||
>{{ day }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="c-select">
|
||||
<p>Orientacyjny budżet</p>
|
||||
<select v-model="configData.step_4.budget_range">
|
||||
<option value="">-- Wybierz --</option>
|
||||
<option value="poniżej 100 000 zł">poniżej 100 000 zł</option>
|
||||
<option value="120 000 – 150 000 zł">120 000 – 150 000 zł</option>
|
||||
<option value="150 000 – 200 000 zł">150 000 – 200 000 zł</option>
|
||||
<option value="powyżej 200 000 zł">powyżej 200 000 zł</option>
|
||||
<option value="100.000 zł - 150.000 zł">100.000 zł - 150.000 zł</option>
|
||||
<option value="150.000 zł - 200.000 zł">150.000 zł - 200.000 zł</option>
|
||||
<option value="250.000 zł - 300.000 zł">250.000 zł - 300.000 zł</option>
|
||||
<option value="Pow. 300.000 zł">Pow. 300.000 zł</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="c-select">
|
||||
@@ -372,6 +447,10 @@
|
||||
selected_option_3: null,
|
||||
progressBar: 25,
|
||||
windowWidth: 0,
|
||||
activeExampleTab: 'standard',
|
||||
showDatepicker: false,
|
||||
dpMonth: new Date().getMonth(),
|
||||
dpYear: new Date().getFullYear(),
|
||||
|
||||
acfData: {
|
||||
acf: {}
|
||||
@@ -587,6 +666,36 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
dpPrevMonth() {
|
||||
if (this.dpMonth === 0) { this.dpMonth = 11; this.dpYear--; }
|
||||
else { this.dpMonth--; }
|
||||
},
|
||||
dpNextMonth() {
|
||||
if (this.dpMonth === 11) { this.dpMonth = 0; this.dpYear++; }
|
||||
else { this.dpMonth++; }
|
||||
},
|
||||
dpSelectDay(day) {
|
||||
if (this.dpIsDisabled(day)) return;
|
||||
const d = String(day).padStart(2, '0');
|
||||
const m = String(this.dpMonth + 1).padStart(2, '0');
|
||||
this.configData.step_4.planned_date = `${d}.${m}.${this.dpYear}`;
|
||||
this.showDatepicker = false;
|
||||
},
|
||||
dpIsSelected(day) {
|
||||
const d = String(day).padStart(2, '0');
|
||||
const m = String(this.dpMonth + 1).padStart(2, '0');
|
||||
return this.configData.step_4.planned_date === `${d}.${m}.${this.dpYear}`;
|
||||
},
|
||||
dpIsDisabled(day) {
|
||||
const date = new Date(this.dpYear, this.dpMonth, day);
|
||||
const today = new Date();
|
||||
today.setHours(0,0,0,0);
|
||||
return date < today;
|
||||
},
|
||||
dpIsToday(day) {
|
||||
const now = new Date();
|
||||
return day === now.getDate() && this.dpMonth === now.getMonth() && this.dpYear === now.getFullYear();
|
||||
},
|
||||
getWindowWidth() {
|
||||
this.windowWidth = window.innerWidth;
|
||||
},
|
||||
@@ -594,10 +703,26 @@
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.getWindowWidth);
|
||||
this.getWindowWidth();
|
||||
document.addEventListener('click', (e) => {
|
||||
if (this.showDatepicker && !e.target.closest('.datepicker-wrapper')) {
|
||||
this.showDatepicker = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
debug() {
|
||||
return this.configData
|
||||
},
|
||||
dpMonthName() {
|
||||
const names = ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec','Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'];
|
||||
return names[this.dpMonth];
|
||||
},
|
||||
dpDaysInMonth() {
|
||||
return new Date(this.dpYear, this.dpMonth + 1, 0).getDate();
|
||||
},
|
||||
dpFirstDayOffset() {
|
||||
const d = new Date(this.dpYear, this.dpMonth, 1).getDay();
|
||||
return d === 0 ? 6 : d - 1;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user