Symfony Profiler

{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(path('home')) }}">
{% endblock %}
{% block cssadicional %}{% endblock %}
{% block classbody %}footer_none icono_ruleta_none{% endblock %}
{% block content %}
<div class="ruleta_header">
<div class="ruleta_header_row ww_center">
{% if home.logo|image_path %}
<a class="ruleta_header_logo" href="{{ path('home') }}">
<img src="{{ asset(home.logo|image_path) }}" width="203" alt="{{ asset(home.logo|split_alt) }}">
</a>
{% endif %}
{% if home.backBtn %}
<div class="ruleta_header_back">
<a class="btn btn_blue" href="{{ path('home') }}">{{ home.backBtn }}</a>
</div>
{% endif %}
</div>
</div>
<section class="ruleta" id="roulette_app"></section>
<section class="ruleta_footer">
{% if awards %}
<div class="ruleta_footer_conatiner ww_center">
{% if home.awardTitle %}
<h2>{{ home.awardTitle }}</h2>
{% endif %}
<div class="ruleta_footer_wrap">
{% for item in awards %}
<div class="ruleta_footer_item">
<figure><img src="{{ asset(item.image|image_path) }}" alt="{{ item.title }}"></figure>
<h3>{{ item.title|nl2br }}</h3>
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if home.awardDisclaimer %}
<div class="ruleta_footer_txt">
<div class="ww_center">
{{ home.awardDisclaimer|raw }}
</div>
</div>
{% endif %}
</section>
{% endblock %}
{% block jsfinal %}
<script src="{{ asset('static/js/validationform/jquery.validationEngine-es.js') }}"></script>
<script src="{{ asset('static/js/validationform/staff.validationEngine.js') }}"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.8/purify.min.js" integrity="sha512-M72KfQy4kPuLYC6CeTrN0eA17U1lXEMrr5qEJC/40CLdZGC3HpwPS0esQLqBHnxty2FIcuNdP9EqwSOCLEVJXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
{# <script src="{{ asset('static/js/ruleta.js') }}"></script> #}
<script type="text/babel" src="{{ asset('static/react/roulette_info.js') }}"></script>
<script type="text/babel" src="{{ asset('static/react/roulette.js') }}"></script>
<script type="text/babel" src="{{ asset('static/react/roulette_login_register.js') }}"></script>
<script type="text/babel" src="{{ asset('static/react/roulette_messages.js') }}"></script>
<script type="text/babel">
const App = (props) => {
const [is_logged, setIsLogged] = React.useState(props.logged);
const [current_user, setCurrentUser] = React.useState(props.currentUser);
const [current_date, setCurrentDate] = React.useState(props.currentDate);
const [selected_award, setSelectedAward] = React.useState(null);
const [login_data, setLoginData] = React.useState({'document': null});
const [register_data, setRegisterData] = React.useState({
'document' : null,
'email' : null,
'phone' : null,
'name' : null,
'address' : null,
});
const [register_errors, setRegisterErrors] = React.useState('');
React.useEffect(() => {
// Anything in here is fired on component mount.
$("form").validationEngine('attach', {
promptPosition: "bottomLeft",
autoHidePrompt: true,
autoHideDelay: 30000,
binded: false,
scroll: false
});
$('.soloNumber').keypress(validateNumber);
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if (key < 48 || key > 57) {
return false;
} else {
return true;
}
}
return () => {
// Anything in here is fired on component unmount.
$("form").validationEngine('detach');
}
}, []);
const onSpin = (event) => {
const btn = event.target;
if (!is_logged) {
firePopup('.ruleta_dni');
return;
} else {
const data = {
'user_id': current_user.id
};
if (current_user.blocked < current_date) {
$('.ruleta_capa').addClass('active');
spinRoulette(360 * 20, 20);
const response = doPostData(props.sdUrls.spin, data);
response.then(resp => {
console.log(resp, '<-- award')
if (resp.success) {
let tmp_user = {...current_user};
tmp_user['blocked'] = resp.blocked;
setCurrentUser(tmp_user);
setSelectedAward(resp.award)
const factor = 360 / props.awardCount;
const deg_base = 360 * (props.awardCount - 1)
const degs = deg_base + (factor * resp.award.position)
console.log(factor, deg_base, resp.award.position, degs, '<-- del giro')
spinRoulette(degs, 2);
if (resp.award.try_again) {
setTimeout(function () {
fireMessage('.ruleta_mensaje_try_again');
}, 2000)
} else {
setTimeout(function () {
fireMessage('.ruleta_mensaje_felicidades');
}, 2000)
}
} else {
spinRoulette(360, 1);
fireMessage('.ruleta_mensaje_alerta');
}
$('.ruleta_capa').removeClass('active');
});
} else {
fireMessage('.ruleta_mensaje_alerta');
}
}
};
const spinRoulette = (degree, duration) => {
$('.ruleta_image').css({
'transform': 'rotate(-' + degree.toString() + 'deg)',
'transition': 'all ' + duration.toString() + 's cubic-bezier(0.76, 0, 0.24, 1)'
})
}
const onLoginFormChange = (event) => {
let data = {'document': event.target.value};
setLoginData(data)
}
const onRegisterFormChange = (event) => {
let data = {
...register_data,
document: login_data.document
}
data[event.target.name] = event.target.value;
setRegisterData(data);
}
const onLogin = (event) => {
event.preventDefault();
const btn = event.target;
btn.disabled = true;
const form = event.target.closest('form')
const valid = $(form).validationEngine('validate');
if (!valid) {
btn.disabled = false;
return false;
} else {
console.log(login_data);
const response = doPostData(props.sdUrls.login, login_data);
response.then(resp => {
console.log(resp, '<-- login')
closePopup('.ruleta_dni');
if (!resp.success) {
firePopup('.ruleta_registro');
btn.disabled = false;
} else {
setCurrentUser({
'name': resp.name,
'id': resp.id,
'blocked': resp.blocked,
'current_date': resp.current_date
});
setIsLogged(resp.success);
setCurrentDate(resp.current_date);
if (resp.blocked > current_date) {
fireMessage('.ruleta_mensaje_alerta');
}
}
});
}
}
const onRegister = (event) => {
event.preventDefault();
const btn = event.target;
btn.disabled = true;
const form = event.target.closest('form')
const valid = $(form).validationEngine('validate');
if (!valid) {
btn.disabled = false;
return false;
} else {
const response = doPostData(props.sdUrls.register, register_data);
response.then(resp => {
if (resp.success) {
closePopup('.ruleta_registro');
setCurrentUser({
'name': resp.name,
'id': resp.id,
'blocked': resp.blocked,
'current_date': resp.current_date
});
setIsLogged(resp.success);
setCurrentDate(resp.current_date);
} else {
btn.disabled = false;
setRegisterErrors(resp.message);
}
})
}
}
const onClosePopup = (event) => {
event.target.closest('.sd_popup').classList.remove('active')
}
const firePopup = (htmlClass) => {
document.querySelector(htmlClass).classList.add('active');
}
const closePopup = (htmlClass) => {
document.querySelector(htmlClass).classList.remove('active');
}
const fireMessage = (htmlClass) => {
document.querySelector(htmlClass).classList.remove('active');
}
const closeMessage = (htmlClass) => {
document.querySelector(htmlClass).classList.add('active');
}
const onCloseMessage = (event) => {
event.target.closest('.ruleta_mensaje').classList.add('active')
}
function doPostData(url, form_data) {
let payload = new FormData();
for (let key in form_data) {
payload.append(key, form_data[key]);
}
return fetch(url, {
body: payload,
method: "post"
//headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
//}
})
.then(response => response.json())
.then(res => {
return res;
})
.catch(error => console.error('error fetching', error))
}
const renderLogin = () => {
if (is_logged) {
return null;
}
return <RouletteLogin title={props.login} onClose={onClosePopup} onSubmit={onLogin}
onFormChange={onLoginFormChange}/>
}
const renderRegister = () => {
if (is_logged) {
return null;
}
return <RouletteRegister title={props.register} onClose={onClosePopup} onSubmit={onRegister}
onFormChange={onRegisterFormChange}
termsUrl={props.sdUrls.terms} privacyUrl={props.sdUrls.privacy}
sderrors={register_errors} document={login_data.document} />
}
const renderSuccess = () => {
if (!is_logged) {
return null;
}
return <RouletteSuccess params={props.winParams} award={selected_award} onClose={onCloseMessage}/>
}
const renderTryAgain = () => {
if (!is_logged) {
return null;
}
return <RouletteTryAgain params={props.tryAgainParams} award={selected_award} onClose={onCloseMessage}/>
}
const renderWarning = () => {
if (!is_logged) {
return null;
}
return <RouletteWarning params={props.warParams} onClose={onCloseMessage}/>
}
return (
<>
<div className="ruleta_container ww_center">
<RouletteInfo data={props.info}/>
<Roulette params={props.rParams} onSpin={onSpin}/>
</div>
{renderLogin()}
{renderRegister()}
{renderSuccess()}
{renderTryAgain()}
{renderWarning()}
</>
);
}
const r_info = {
'preffix': '{{ home.preffix }}',
'title': '{{ home.title }}',
'suffix': '{{ home.suffix }}',
'title_strong': '{{ home.titleStrong }}',
'description': '{{ home.description ? home.description|raw|replace({"<p>":"", "</p>":""}) : "" }}'
}
const r_params = {
'image': '{{ home.rouletteImage|image_path ? asset(home.rouletteImage|image_path) : "" }}',
'image_alt': '{{ home.rouletteImage|image_path ? home.rouletteImage|split_alt : "" }}',
'btn_text': '{{ home.rouletteBtn }}',
}
const home_url = "{{ path('home') }}";
const sd_urls = {
"login": "{{ path('user_login') }}",
"register": "{{ path('user_register') }}",
"terms": "{{ path('terms_and_conditions') }}",
"privacy": "{{ path('data_protection_policies') }}",
"spin": "{{ path('roulette_award') }}",
}
const login_title = "{{ home.loginTitle }}";
const register_title = "{{ home.registerTitle }}";
const win_params = {
'title': '{{ home.winTitle }}',
'btn': '{{ home.winBtn }}',
'url': home_url,
'image': '{{ asset('static/img/ruleta-deco.gif') }}',
'image_center': '{{ asset('static/img/ruleta-deco-center.gif') }}',
};
const try_again_params = {
'title': '{{ home.tryAgainTitle }}',
'btn': '{{ home.tryAgainBtn }}',
};
const war_params = {
'title': '{{ home.warningTitle }}',
'text': '{{ home.warningText ? home.warningText|raw|replace({"<p>":"", "</p>":""}) : "" }}',
'btn': '{{ home.warningBtn }}',
'url': home_url
};
const is_logged = "{{ is_granted('ROLE_USER') ? 1 : 0 }}" == "1";
const current_date = parseInt("{{ current_date }}");
const award_length = parseInt("{{ awards|length }}")
const rootElement = document.getElementById('roulette_app');
let current_user = null;
{% if app.user %}
current_user = {
"id": "{{ app.user.id }}",
"name": "{{ app.user.name }}",
"blocked": parseInt("{{ app.user.nextPlayOn ? app.user.nextPlayOn|date('U') : 0 }}"),
"current_date": current_date
}
{% endif %}
ReactDOM.render(<App info={r_info} rParams={r_params} logged={is_logged} sdUrls={sd_urls} currentDate={current_date}
currentUser={current_user}
login={login_title} register={register_title} winParams={win_params} tryAgainParams={try_again_params} warParams={war_params}
awardCount={award_length}/>, rootElement);
</script>
{% endblock %}

templates/front/default/ruleta.html.twig line 1