Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

updated new iframe

Browse Source
This commit is contained in:
Luca Haid
2025-06-24 15:21:13 +02:00
parent b740e7b752
commit c502d3c205
4 changed files with 188 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
Layout/default/Preordercampaign/Form.php
View File

@@ -305,18 +305,27 @@
<!-- IFrame Consents -->
<div class="form-group row">
<label class="col-lg-2 col-form-label" for="iframe_consents">IFrame Consents</label>
<label class="col-lg-2 col-form-label">IFrame Consents</label>
<div class="col-lg-10">
<div id="iframe-consents-container">
<!-- Dynamic inputs will be added here -->
<div class="card">
<div class="card-header">
<button class="btn btn-link text-left p-0 w-100" type="button" data-toggle="collapse" data-target="#iframe-consents-collapse" aria-expanded="false" aria-controls="iframe-consents-collapse">
<i class="fas fa-chevron-right" id="iframe-consents-icon"></i>
<strong>IFrame Consents konfigurieren</strong>
</button>
</div>
<div class="collapse" id="iframe-consents-collapse">
<div class="card-body">
<div id="iframe-consents-container">
<!-- Dynamic inputs will be added here -->
</div>
<input type="hidden" name="iframe_consents" id="iframe_consents" value=""/>
<small class="form-text text-muted">
Zustimmungen für verschiedene Bereiche konfigurieren
</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-success mt-2" id="add-iframe-consent">
<i class="fas fa-plus"></i> Zustimmung
</button>
<input type="hidden" name="iframe_consents" id="iframe_consents" value=""/>
<small class="form-text text-muted">
Zusätzliche Custom Zustimmungen mit Verlinkung
</small>
</div>
</div>
@@ -743,9 +752,50 @@
$(document).ready(function() {
// Initialize with existing data
let iframeOrigins = <?= $campaign->iframe_origins ?? '[]'; ?>;
let iframeConsents = <?= $campaign->iframe_consents ?? '[]'; ?>;
let iframeConsents = <?= $campaign->iframe_consents ?? '{}'; ?>;
// IFrame Origins Management
console.log(iframeConsents);
// Predefined consent types with default texts
const consentTypes = {
'agb': {
'label': 'Zustimmung AGB',
required: true,
'defaultText': 'Ich habe mich über die wesentlichen Vertragsinhalte lt. Vertragsbedingungen Glasfaseranschluss informiert und akzeptiere die Allgemeinen Geschäftsbedingungen.'
},
'dsgvo': {
'label': 'Zustimmung DSGVO',
required: true,
'defaultText': 'Ich habe die Information zur Datenschutzgrundverordnung (DSGVO) zur Kenntnis genommen. Diese ist jederzeit im Downloadbereich abrufbar.'
},
'ruecktrittsrecht': {
'label': 'Zustimmung Rücktrittsrecht',
required: true,
'defaultText': 'Ich habe die Information über die Rücktrittsrechte für Verbraucher gemäß §3 KSchG und §§ 11 FAGG erhalten, gelesen und zur Kenntnis genommen.'
},
'datenweitergabe': {
'label': 'Zustimmung Datenweitergabe',
'defaultText': 'Ich stimme zu, dass meine Daten zur telefonischen Kontaktaufnahme, sowie für die postalische und elektronische Zusendung von Produkt- und Dienstleistungs-Informationen bzw. für Marketingaktivitäten an verbundene Unternehmen übermittelt werden. Diese Zustimmungserklärung kann jederzeit widerrufen werden.'
},
'grabungsarbeiten': {
'label': 'Zustimmung Grabungsarbeiten',
'defaultText': 'Ich stimme den notwendigen Grabungsarbeiten für die Installation des Glasfaseranschlusses zu.'
}
};
// Ensure iframeConsents is an object with all consent types
Object.keys(consentTypes).forEach(key => {
if (!iframeConsents[key]) {
iframeConsents[key] = {
url: consentTypes[key].defaultURL || '',
text: consentTypes[key].defaultText,
required: consentTypes[key].required || false,
replace: consentTypes[key].defaultReplacer || ''
};
}
});
// IFrame Origins Management (unchanged)
function renderIframeOrigins() {
const container = $('#iframe-origins-container');
container.empty();
@@ -793,46 +843,57 @@
updateIframeOriginsInput();
});
// IFrame Consents Management
// IFrame Consents Management (modified for predefined types)
function renderIframeConsents() {
const container = $('#iframe-consents-container');
container.empty();
iframeConsents.forEach((consent, index) => {
Object.keys(consentTypes).forEach(consentKey => {
const consent = iframeConsents[consentKey];
const consentConfig = consentTypes[consentKey];
const row = $(`
<div class="card mb-2">
<div class="card mb-3">
<div class="card-header">
<h6 class="mb-0">${consentConfig.label}</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label class="form-label">URL</label>
<input type="text" class="form-control iframe-consent-url"
placeholder="https://partner.com" value="${consent.url || ''}" data-index="${index}">
placeholder="https://partner.com" value="${consent.url || ''}" data-consent="${consentKey}">
</div>
<div class="col-md-6">
<label class="form-label">Text</label>
<input type="text" class="form-control iframe-consent-text"
placeholder="Text" value="${consent.text || ''}" data-index="${index}">
</div>
</div>
<div class="row mt-2">
<div class="col-md-4">
<label class="form-label">URL Replacer</label>
<input type="text" class="form-control iframe-consent-replace"
placeholder="Consent" value="${consent.replace || ''}" data-index="${index}">
placeholder="Consent" value="${consent.replace || 'Consent'}" data-consent="${consentKey}">
</div>
</div>
<div class="row mt-3">
<div class="col-md-8">
<label class="form-label">Text</label>
<textarea class="form-control iframe-consent-text" rows="4"
placeholder="${consentConfig.defaultText}" data-consent="${consentKey}">${consent.text || consentConfig.defaultText}</textarea>
</div>
<div class="col-md-4">
<div class="form-check mt-4">
<input type="checkbox" class="form-check-input iframe-consent-required"
id="consent-required-${index}" data-index="${index}" ${consent.required ? 'checked' : ''}>
<label class="form-check-label" for="consent-required-${index}">
id="consent-required-${consentKey}" data-consent="${consentKey}" ${consent.required ? 'checked' : ''}>
<label class="form-check-label" for="consent-required-${consentKey}">
Erforderlich?
</label>
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-outline-danger btn-sm mt-4 remove-iframe-consent" data-index="${index}">
<i class="fas fa-trash"></i> Entfernen
</button>
<div class="form-check mt-4">
<input type="checkbox" class="form-check-input iframe-consent-activated"
id="consent-activated-${consentKey}" data-consent="${consentKey}" ${consent.activated ? 'checked' : ''}>
<label class="form-check-label" for="consent-activated-${consentKey}">
Aktiviert?
</label>
</div>
</div>
</div>
</div>
@@ -845,53 +906,43 @@
}
function updateIframeConsentsInput() {
console.log('json result', JSON.stringify(iframeConsents));
$('#iframe_consents').val(JSON.stringify(iframeConsents));
}
// Add new iframe consent
$('#add-iframe-consent').click(function() {
iframeConsents.push({
url: '',
text: '',
required: false,
replace: 'Consent'
});
renderIframeConsents();
});
// Remove iframe consent
$(document).on('click', '.remove-iframe-consent', function() {
const index = $(this).data('index');
iframeConsents.splice(index, 1);
renderIframeConsents();
});
// Update iframe consent values
$(document).on('input', '.iframe-consent-url', function() {
const index = $(this).data('index');
const consentKey = $(this).data('consent');
const value = $(this).val();
iframeConsents[index].url = value;
iframeConsents[consentKey].url = value;
updateIframeConsentsInput();
});
$(document).on('input', '.iframe-consent-text', function() {
const index = $(this).data('index');
const consentKey = $(this).data('consent');
const value = $(this).val();
iframeConsents[index].text = value;
iframeConsents[consentKey].text = value;
updateIframeConsentsInput();
});
$(document).on('input', '.iframe-consent-replace', function() {
const index = $(this).data('index');
const consentKey = $(this).data('consent');
const value = $(this).val();
iframeConsents[index].replace = value;
iframeConsents[consentKey].replace = value;
updateIframeConsentsInput();
});
$(document).on('change', '.iframe-consent-required', function() {
const index = $(this).data('index');
const consentKey = $(this).data('consent');
const checked = $(this).is(':checked');
iframeConsents[index].required = checked;
iframeConsents[consentKey].required = checked;
updateIframeConsentsInput();
});
$(document).on('change', '.iframe-consent-activated', function() {
const consentKey = $(this).data('consent');
const checked = $(this).is(':checked');
iframeConsents[consentKey].activated = checked;
updateIframeConsentsInput();
});
@@ -899,15 +950,20 @@
renderIframeOrigins();
renderIframeConsents();
// Add at least one empty entry if none exist
// Add at least one empty entry if none exist for origins
if (iframeOrigins.length === 0) {
$('#add-iframe-origin').click();
}
if (iframeConsents.length === 0) {
$('#add-iframe-consent').click();
}
// Handle collapse icon rotation
$('#iframe-consents-collapse').on('show.bs.collapse', function () {
$('#iframe-consents-icon').removeClass('fa-chevron-right').addClass('fa-chevron-down');
});
$('#iframe-consents-collapse').on('hide.bs.collapse', function () {
$('#iframe-consents-icon').removeClass('fa-chevron-down').addClass('fa-chevron-right');
});
});
</script>
</script>
<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>

71
Layout/default/VueViews/PreorderIFrame.php
View File

@@ -9,7 +9,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellformular</title>
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>-->
<!-- use non production vue for testing-->
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
<script type="text/javascript">
@@ -205,6 +207,7 @@
const isLoading = ref(false);
const errorMessage = ref('');
const orderResponse = ref(null);
const iframeConsents = reactive({});
const form = reactive({
customerType: 'Privatkunde', title: '', birthDate: '', firstName: '', lastName: '', phone: '', email: '', isOwner: 'Ja', notes: '',
billingAddressChoice: 'Anschlussadresse',
@@ -214,7 +217,8 @@
});
// add header where the iframe is embedded
const referrer = document.referrer.split('?')[0];
// const referrer = document.referrer.split('?')[0];
const referrer = 'http://localhost/test.html';
const api = axios.create({ baseURL: API_BASE_URL, headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-Frame-Options': 'SAMEORIGIN', 'X-Frame-Referrer': referrer } });
config.color = new URLSearchParams(window.location.search).get('color') || config.color || 'blue';
@@ -251,6 +255,14 @@
watch(() => addressForm.city, (n, o) => { if (n && n !== o) { addressStep.value = 'street'; clearSubsequentSteps('city'); fetchStreets(addressForm.zip, n); } });
watch(() => addressForm.street, (n, o) => { if (n && n !== o) { addressStep.value = 'housenumber'; clearSubsequentSteps('street');} });
watch(() => addressForm.wohneinheit_id, (n) => { if (n) { const unit = units.value.find(u => u.wohneinheit_id === n); if (unit) selectAddress(unit); } });
watch(currentStep, async (newStep) => {
if (newStep === 'addressSearch' && clusterId.value) {
const response = await api.get(`/getClusterInfo`, { params: { cluster_id: clusterId.value } });
Object.assign(iframeConsents, response.data?.iframe_consents || {});
console.log(response.data.iframe_consents);
console.log('Iframe consents:', iframeConsents);
}
});
// --- API CALLS & METHODS ---
function handleError(error, message) {
@@ -353,18 +365,31 @@
}
const isFormInvalid = computed(() => {
const { firstName, lastName, email, billingAddressChoice, billing, acceptAgb, acceptWithdrawal, acceptDsgvo } = form;
if (!firstName || !lastName || !email || !acceptAgb || !acceptWithdrawal || !acceptDsgvo) return true;
const { firstName, lastName, email, billingAddressChoice, billing } = form;
// Basic form field validation
if (!firstName || !lastName || !email) return true;
// Billing address validation
if (billingAddressChoice === 'Andere') {
if (!billing.name || !billing.street || !billing.housenumber || !billing.zip || !billing.city) return true;
}
// Dynamic validation for required consents
for (const key in iframeConsents) {
if (iframeConsents[key].required && !form[key]) {
return true;
}
}
return false;
});
return {
currentStep, clusterId, clusters, addressStep, addressForm, goBackToStep,
cities, streets, units, isLoading, selectedAddress, isFormInvalid, form,
findAddress, submitOrder, startNewOrder, orderResponse, errorMessage,
findAddress, submitOrder, startNewOrder, orderResponse, errorMessage, iframeConsents,
handleClusterSelection: () => { if (clusterId.value) currentStep.value = 'addressSearch'; },
};
},
@@ -437,7 +462,7 @@
<label for="connectionType" class="block text-sm font-medium text-slate-600 mb-2">Anschlussart *</label>
<!-- For building_type = 1 (single option) -->
<div v-if="selectedAddress.building_type === 1" class="space-y-2">
<div v-if="selectedAddress.building_type === 2" class="space-y-2">
<div class="p-4 border-2 border-[var(--color-primary-600)] rounded-md bg-[var(--color-primary-50)]">
<div class="flex items-center justify-between">
<span class="font-medium text-slate-800">Wohnungs-Anschluss</span>
@@ -448,7 +473,7 @@
</div>
<!-- For building_type = 2 (multiple options) -->
<div v-else-if="selectedAddress.building_type === 2" class="space-y-3">
<div v-else-if="selectedAddress.building_type === 1" class="space-y-3">
<label class="flex items-center p-4 border-2 rounded-md cursor-pointer hover:bg-slate-50 transition-colors"
:class="form.connectionType === 'vorsorge' ? 'border-[var(--color-primary-600)] bg-[var(--color-primary-50)]' : 'border-slate-300'">
<input type="radio" v-model="form.connectionType" value="vorsorge" class="form-radio h-5 w-5 text-[var(--color-primary-600)] mr-3">
@@ -572,22 +597,22 @@
<fieldset>
<legend class="text-lg font-semibold text-slate-800 mb-2">Zustimmungen</legend>
<div class="space-y-4">
<label class="flex items-start space-x-3 cursor-pointer">
<input type="checkbox" v-model="form.acceptAgb" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
<span class="text-slate-600 text-sm">*Ich habe mich über die wesentlichen Vertragsinhalte lt. Vertragsbedingungen Glasfaseranschluss informiert und akzeptiere die Allgemeinen Geschäftsbedingungen.</span>
</label>
<label class="flex items-start space-x-3 cursor-pointer">
<input type="checkbox" v-model="form.acceptMarketing" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
<span class="text-slate-600 text-sm">Ich stimme zu, dass meine Daten zur telefonischen Kontaktaufnahme, sowie für die postalische und elektronische Zusendung von Produkt- und Dienstleistungs-Informationen bzw. für Marketingaktivitäten an verbundene Unternehmen der Energie Steiermark Breitband GmbH übermittelt werden. Diese Zustimmungserklärung kann jederzeit widerrufen werden. <a href="#" class="text-[var(--color-primary-600)] hover:underline">Mehr erfahren</a></span>
</label>
<label class="flex items-start space-x-3 cursor-pointer">
<input type="checkbox" v-model="form.acceptWithdrawal" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
<span class="text-slate-600 text-sm">*Ich habe die Information über die Rücktrittsrechte für Verbraucher gemäß §3 KSchG und §§ 11 FAGG erhalten, gelesen und zur Kenntnis genommen.</span>
</label>
<label class="flex items-start space-x-3 cursor-pointer">
<input type="checkbox" v-model="form.acceptDsgvo" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
<span class="text-slate-600 text-sm">*Ich habe die Information zur Datenschutzgrundverordnung (DSGVO) zur Kenntnis genommen. Diese ist jederzeit im Downloadbereich abrufbar.</span>
</label>
<template v-for="(consent, key) in iframeConsents" :key="key">
<label v-if="consent.activated" class="flex items-start space-x-3 cursor-pointer">
<input type="checkbox" v-model="form[key]" class="form-checkbox h-5 w-5 text-[var(--color-primary-600)] mt-0.5 flex-shrink-0">
<span class="text-slate-600 text-sm">
<template v-if="consent.replace && consent.url">
{{ consent.text.split(consent.replace)[0] }}
<a :href="consent.url" target="_blank" class="text-[var(--color-primary-600)] hover:underline">{{ consent.replace }}</a>
{{ consent.text.split(consent.replace)[1] }}
</template>
<template v-else>
{{ consent.text }}
</template>
<span v-if="consent.required" class="text-red-500">*</span>
</span>
</label>
</template>
</div>
</fieldset>

21
application/PreorderIFrame/PreorderIFrameController.php
View File

@@ -38,6 +38,27 @@ class PreorderIFrameController extends mfBaseController
self::returnJson(['clusters' => $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER'])]);
}
public function getClusterInfoAction()
{
$clusterId = $this->request->get('cluster_id');
if (!$clusterId) self::sendError("Cluster ID is required.");
$allClusters = $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER']);
if (!$allClusters) self::sendError("No cluster found for the given ID.");
$clusterInfo = null;
foreach ($allClusters as $cluster) {
if ($cluster['id'] == $clusterId) {
$clusterInfo = $cluster;
break;
}
}
$preorderCampaign = new Preordercampaign($clusterInfo['campaign_id']);
self::returnJson(['iframe_consents' => json_decode($preorderCampaign->iframe_consents ?? '[]')]);
}
public function findCityAction()
{
$allowedClusters = $this->preorderIFrameModel->getClusters($_SERVER['HTTP_X_FRAME_REFERRER']);

2
application/PreorderIFrame/PreorderIFrameModel.php
View File

@@ -47,7 +47,7 @@ class PreorderIFrameModel extends mfBaseModel
public function getClusters($frame_referrer): array
{
$query = "
SELECT n.adb_netzgebiet_id as id, ng.name
SELECT n.adb_netzgebiet_id as id, ng.name, pc.id as campaign_id, pc.name as campaign_name
FROM thetool.Preordercampaign pc
JOIN thetool.Network n ON pc.Network_id = n.id
JOIN addressdb.Netzgebiet ng ON n.adb_netzgebiet_id = ng.id