Actualizacion con cambios de miguel

parent 392e1c13
<p>Estimado {{nombre_usuario}}, ya han pasado {{dias}} dia(s) desde que inicio el cambio con el producto xxx de nutrapharm.</p> <p>Estimado {{nombre_usuario}}, ya han pasado {{dias}} dia(s) desde que inicio el cambio con el producto INOVAGE de nutrapharm.</p>
<br> <br>
<p>Tomese una nueva foto y comparta sus cambios haciendo click <a href="{{url_sitio}}{{seccion}}?idp={{id_usuario}}" target="_blank">aquí</a></p> <p>Tomese una nueva foto y comparta sus cambios haciendo click <a href="{{url_sitio}}{{seccion}}?idp={{id_usuario}}" target="_blank">aquí</a></p>
......
...@@ -8,12 +8,28 @@ ...@@ -8,12 +8,28 @@
<meta property="og:image:width" content="1200" /> <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" /> <meta property="og:image:height" content="630" />
<meta property="og:image" content="{{urlSitio}}uploads/users/{{idp}}_comparacion.png"/> <meta property="og:image" content="{{urlSitio}}uploads/users/{{idp}}_comparacion.png"/>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="row">
<div class="panel-body">
<h2>AQUI VES LA COMPARACIÓN DEL ANTES Y EL DESPUES CON INOVAGE</h2>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="panel-body"> <div class="panel-body">
<label>Foto Comparación</label> <label></label>
<img src="{{urlSitio}}nutrapharm/get/photo?file_name={{idp}}_comparacion.{{extComparacion}}" /> <img src="{{urlSitio}}nutrapharm/get/photo?file_name={{idp}}_comparacion.{{extComparacion}}" />
<div class="form-group"> <div class="form-group">
<span>{{comentarioFinal}}</span> <span>{{comentarioFinal}}</span>
...@@ -23,8 +39,21 @@ ...@@ -23,8 +39,21 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="panel-body"> <div class="col-md-6">
<button class="btn" onclick="iniciarProceso(event)">Registra tu cambio</button> <div class="panel-body">
<div class="form-group">
<div id="shareButtonContainer" style="display:none">
<div class="form-group">
<button id="buttonShare" class="btn">Compartir En Facebook</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-body">
<button class="btn" onclick="iniciarProceso(event)">Registra tu cambio</button>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -32,7 +61,80 @@ ...@@ -32,7 +61,80 @@
{% block javascripts %} {% block javascripts %}
<script> <script>
var url = '{{urlSitio}}{{seccionComparacion}}?idp={{idp}}';
window.fbAsyncInit = function () {
FB.init({
appId: '{{facebookAppId}}',
status: true,
xfbml: true,
cookie: true,
version: 'v7.0'
});
}
function countCompartirFacebook(idUsuario) {
var url = "{{ path('nutrapharm_compartir_facebook') }}";
var formData = new FormData();
$.ajax
({
type: "POST",
url: url,
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
timeout: 60000,
statusCode: {
400: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
$("#btnGuardar").prop("disabled", false);
},
500: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
$("#btnGuardar").prop("disabled", false);
}
},
success: function (data) {
$("#mensaje-nutrapharm").removeClass("alert-danger");
$("#mensaje-nutrapharm").addClass("alert-success");
$("#mensaje-nutrapharm").html(data.msg);
$("#mensaje-nutrapharm").show();
}
});
}
$("#buttonShare").click(function () {
console.log("compartiendo en facebook...");
FB.ui({
xfbml: true,
method: 'share',
href: url
}, function (response) {
if (response && response.post_id) {
console.log('Comparación Compartido en Facebook.');
countCompartirFacebook(usuarioNutraPharm);
} else {
console.log('Comparación No Compartido en Facebook.');
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html("No se pudo compartir en Facebook.Intente nuevamente.");
$("#mensaje-nutrapharm").show();
}
});
})
function iniciarProceso(event) { function iniciarProceso(event) {
event.preventDefault(); event.preventDefault();
window.location.assign("{{path('nutrapharm_homepage')}}"); window.location.assign("{{path('nutrapharm_homepage')}}");
......
...@@ -25,90 +25,105 @@ ...@@ -25,90 +25,105 @@
{% block body %} {% block body %}
<div class="row"> <div class="row">
{{ include('producto/includes/alert.messages.html.twig') }} {{ include('producto/includes/alert.messages.html.twig') }}
</div>
<div class="row">
<div class="panel-body">
<h2>COMIENZA TU TRATAMIENTO CON INOVAGE</h2>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="panel-body">
<div class="panel-body"> <label class="col-md-12 control-label">Toma una foto con tu cámara aquí</label>
<div id="mensaje-nutrapharm" style="display:none" class="alert alert-success" role="alert"></div> <div class="col-md-12">
<div class="form-group"> <button id="tomarFoto" name="tomarFoto" onclick="mostrarTomarFoto(event)">Tomar Foto</button>
<label class="col-md-3 control-label">Nombre</label> </div>
<div class="col-md-9"> <label class="col-md-12 control-label">Subo una foto desde tu galería o desde tu PC</label>
<input id="nombreUsuario" type="text" placeholder="Nombre..."/> <div class="col-md-12">
</div> <button id="subirFoto" name="subirFoto" onclick="mostrarSubirFoto(event)">Subir Foto</button>
</div> </div>
<div class="form-group"> <div class="col-md-12">
<label class="col-md-3 control-label">Mail</label> <div id="tomarFotoContainer" style="display:none">
<div class="col-md-9"> <div class="form-group">
<input id="mailUsuario" type="text" placeholder="Mail..."/> <div class="camera">
<video id="video" width="600" height="315">No se encuentra disponible una camara</video>
<button id="startbutton">Tomar Foto</button>
</div>
</div> </div>
<div class="form-group">
<canvas id="canvas" width="auto" height="auto">
</canvas>
<div class="output">
<img id="photo" width="auto" height="auto" alt="Foto Tomada" src="">
</div>
</div>
</div> </div>
<div class="form-group"> </div>
<label class="col-md-3 control-label">Comentarios</label> <div class="col-md-12">
<div class="col-md-9"> <div id="subirFotoContainer" style="display:none">
<input id="comentarioFotoUsuario" type="textarea" placeholder="Comentarios..."/> <div class="form-group">
<input type='file' id="imgInp" accept="image/*" />
<img id="imagenUsuario" width="200" height="auto" style="display:none" src="#" alt="Imagen subida" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="panel-body"> <div class="col-lg-12">
<div id="containerFormulario" style="display:none">
<div class="panel-body">
<div class="form-group">
<label class="col-md-3 control-label">Escribe un comentario de tu foto al inicio del tratamiento</label>
<div class="col-md-9">
<input id="comentarioFotoUsuario" type="textarea" placeholder="Comentario..."/>
</div>
</div>
<button id="tomarFoto" name="tomarFoto" onclick="mostrarTomarFoto(event)">Tomar Foto</button> <div class="form-group">
<button id="subirFoto" name="subirFoto" onclick="mostrarSubirFoto(event)">Subir Foto</button> <label class="col-md-3 control-label">Ingresa tu nombre e email</label>
<div id="tomarFotoContainer" style="display:none"> <div class="col-md-9">
<div class="form-group"> <input id="nombreUsuario" type="text" placeholder="Nombre..."/>
<div class="camera"> </div>
<video id="video" width="600" height="315">No se encuentra disponible una camara</video>
<button id="startbutton">Tomar Foto</button>
</div> </div>
</div> <div class="form-group">
<div class="form-group"> <div class="col-md-9">
<canvas id="canvas" width="600" height="315"> <input id="mailUsuario" type="text" placeholder="Mail..."/>
</canvas> </div>
<div class="output">
<img id="photo" width="600" height="315" alt="Preview" src="">
</div> </div>
</div>
</div>
<div id="subirFotoContainer" style="display:none">
<div class="form-group">
<input type='file' id="imgInp" accept="image/*" />
<img id="imagenUsuario" width="200" height="auto" style="display:none" src="#" alt="Imagen subida" />
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="panel-body"> <div class="panel-body">
<div class="form-group"> <div class="form-group">
<button id="btnGuardar">Guardar</button> <div class="col-md-12">
<button id="btnGuardar">Guardar</button>
</div>
</div> </div>
<div id="mensaje-nutrapharm" style="display:none" class="alert alert-success" role="alert"></div>
</div> </div>
</div> </div>
<div class="row">
<div class="panel-body">
<div class="form-group">
<span>RELLENA TUS DATOS Y SUBE TU FOTO</span>
</div>
</div>
</div>
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="{{asset('frontend/js/capture.js')}}"></script> <script src="{{asset('frontend/js/capture.js')}}"></script>
<script> <script>
var imagenSubida = false; var imagenSubida = false;
var imagenTomada = false; var imagenTomada = false;
var usuarioNutraPharm = "none"; var usuarioNutraPharm = "none";
var tipoUsuarioFormulario = 1; var tipoUsuarioFormulario = 1;
var upload; var upload;
</script> </script>
<script> <script>
var fileUpload = $("#imgInp");
fileUpload.on('change', function () {
$("#containerFormulario").show();
});
function mostrarTomarFoto(event) { function mostrarTomarFoto(event) {
event.preventDefault(); event.preventDefault();
......
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% block head %} {% block head %}
<meta property="fb:app_id" content="{{facebookAppId}}" /> <meta property="fb:app_id" content="{{facebookAppId}}" />
<meta property="og:url" content="{{urlSitio}}{{seccionGenerarCambios}}?idp={{idp}}" /> <meta property="og:url" content="{{urlSitio}}{{seccionGenerarCambios}}?idp={{idp}}" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="NutraPharm - Comparación Foto" /> <meta property="og:title" content="NutraPharm - Comparación Foto" />
<meta property="og:description" content="Visualiza tus cambios!" /> <meta property="og:description" content="Visualiza tus cambios!" />
<meta property="og:image:width" content="1200" /> <meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" /> <meta property="og:image:height" content="630" />
<meta property="og:image" content="{{urlSitio}}uploads/users/{{idp}}.{{extInicial}}"/> <meta property="og:image" content="{{urlSitio}}uploads/users/{{idp}}.{{extInicial}}"/>
<link href="{{asset('frontend/css/camara.css')}}" rel="stylesheet" /> <link href="{{asset('frontend/css/camara.css')}}" rel="stylesheet" />
<script> <script>
(function (d, s, id) { (function (d, s, id) {
...@@ -23,154 +23,99 @@ ...@@ -23,154 +23,99 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="row"> <div class="row">
{{ include('producto/includes/alert.messages.html.twig') }} {{ include('producto/includes/alert.messages.html.twig') }}
</div> </div>
<div class="row">
<div class="panel-body">
<h2>COMIENZA TU TRATAMIENTO CON INOVAGE</h2>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div id="mensaje-nutrapharm" style="display:none" class="alert alert-success" role="alert"></div> <label>Esta es la foto que te tomaste al iniciar el tratamiento</label>
<label>Foto Subida antes</label>
<img width="200" height="auto" src="{{urlSitio}}nutrapharm/get/photo?file_name={{idp}}.{{extInicial}}" /> <img width="200" height="auto" src="{{urlSitio}}nutrapharm/get/photo?file_name={{idp}}.{{extInicial}}" />
<div class="form-group">
<label class="col-md-3 control-label">Comentarios</label>
<div class="col-md-9">
<input id="comentarioFotoUsuario" type="textarea" placeholder="Comentarios..."/>
</div>
</div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-lg-12">
<label>Ahora queremos ver cuales han sido los cambios en estos días</label>
</div>
</div>
<div class="row"> <div class="row">
<div class="panel-body"> <div class="panel-body">
<button id="tomarFoto" name="tomarFoto" onclick="mostrarTomarFoto(event)">Tomar Foto</button> <label class="col-md-12 control-label">Toma una foto con tu cámara aquí</label>
<button id="subirFoto" name="subirFoto" onclick="mostrarSubirFoto(event)">Subir Foto</button> <div class="col-md-12">
<div id="tomarFotoContainer" style="display:none"> <button id="tomarFoto" name="tomarFoto" onclick="mostrarTomarFoto(event)">Tomar Foto</button>
<div class="form-group"> </div>
<div class="camera"> <label class="col-md-12 control-label">Subo una foto desde tu galería o desde tu PC</label>
<video id="video" width="600" height="315">No se encuentra disponible una camara</video> <div class="col-md-12">
<button id="startbutton">Tomar Foto</button> <button id="subirFoto" name="subirFoto" onclick="mostrarSubirFoto(event)">Subir Foto</button>
</div>
<div class="col-md-12">
<div id="tomarFotoContainer" style="display:none">
<div class="form-group">
<div class="camera">
<video id="video" width="600" height="315">No se encuentra disponible una camara</video>
<button id="startbutton">Tomar Foto</button>
</div>
</div> </div>
<div class="form-group">
<canvas id="canvas" width="auto" height="auto">
</canvas>
<div class="output">
<img id="photo" width="auto" height="auto" alt="Foto Tomada" src="">
</div>
</div>
</div> </div>
<div class="form-group"> </div>
<canvas id="canvas" width="600" height="315"> <div class="col-md-12">
</canvas> <div id="subirFotoContainer" style="display:none">
<div class="output"> <div class="form-group">
<img id="photo" width="600" height="315" alt="Preview" src=""> <input type='file' id="imgInp" accept="image/*" />
<img id="imagenUsuario" width="200" height="auto" style="display:none" src="#" alt="Imagen subida" />
</div> </div>
</div>
</div>
<div id="subirFotoContainer" style="display:none">
<div class="form-group">
<input type='file' id="imgInp" accept="image/*" />
<img id="imagenUsuario" width="200" height="auto" style="display:none" src="#" alt="Imagen subida" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="panel-body"> <div class="col-lg-12">
<div class="form-group"> <div id="containerFormulario" style="display:none">
<button id="btnGuardar">Guardar</button> <div class="panel-body">
<div class="form-group">
<label class="col-md-3 control-label"> Escribe un comentario de como va el tratamiento</label>
<div class="col-md-9">
<input id="comentarioFotoUsuario" type="textarea" placeholder="Comentario..."/>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="panel-body"> <div class="panel-body">
<div class="form-group"> <div class="form-group">
<span>RELLENA TUS DATOS Y SUBE TU FOTO</span> <div class="col-md-12">
<div id="shareButtonContainer" style="display:none"> <button id="btnGuardar">Guardar</button>
<div class="form-group">
<button id="buttonShare" class="btn">Compartir En Facebook</button>
</div>
</div> </div>
</div> </div>
</div> <div id="mensaje-nutrapharm" style="display:none" class="alert alert-success" role="alert"></div>
</div>
</div> </div>
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
<script src="{{asset('frontend/js/capture.js')}}"></script> <script src="{{asset('frontend/js/capture.js')}}"></script>
<script> <script>
var imagenSubida = false; var imagenSubida = false;
var imagenTomada = false; var imagenTomada = false;
var usuarioNutraPharm = "{{idp}}"; var usuarioNutraPharm = "{{idp}}";
var tipoUsuarioFormulario = 3; var tipoUsuarioFormulario = 3;
var upload; var upload;
var url = '{{urlSitio}}{{seccionComparacion}}?idp={{idp}}';
</script> </script>
<script> <script>
window.fbAsyncInit = function () {
FB.init({
appId: '{{facebookAppId}}',
status: true,
xfbml: true,
cookie: true,
version: 'v7.0'
});
}
function countCompartirFacebook(idUsuario) {
var url = "{{ path('nutrapharm_compartir_facebook') }}";
var formData = new FormData();
$.ajax
({
type: "POST",
url: url,
data: formData,
async: true,
cache: false,
contentType: false,
processData: false,
timeout: 60000,
statusCode: {
400: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
$("#btnGuardar").prop("disabled", false);
},
500: function (respuesta) {
console.log(respuesta.responseText);
var respuestaJson = JSON.parse(respuesta.responseText);
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html(respuestaJson.msg);
$("#mensaje-nutrapharm").show();
$("#btnGuardar").prop("disabled", false);
}
},
success: function (data) {
$("#mensaje-nutrapharm").removeClass("alert-danger");
$("#mensaje-nutrapharm").addClass("alert-success");
$("#mensaje-nutrapharm").html(data.msg);
$("#mensaje-nutrapharm").show();
}
});
}
$("#buttonShare").click(function () {
console.log("compartiendo en facebook...");
FB.ui({
xfbml: true,
method: 'share',
href: url
}, function (response) {
if (response && response.post_id) {
console.log('Comparación Compartido en Facebook.');
countCompartirFacebook(usuarioNutraPharm);
} else {
console.log('Comparación No Compartido en Facebook.');
$("#mensaje-nutrapharm").removeClass("alert-success");
$("#mensaje-nutrapharm").addClass("alert-danger");
$("#mensaje-nutrapharm").html("No se pudo compartir en Facebook.Intente nuevamente.");
$("#mensaje-nutrapharm").show();
}
});
})
function mostrarTomarFoto(event) { function mostrarTomarFoto(event) {
......
...@@ -56,6 +56,8 @@ ...@@ -56,6 +56,8 @@
startbutton.addEventListener('click', function(ev){ startbutton.addEventListener('click', function(ev){
takepicture(); takepicture();
ev.preventDefault(); ev.preventDefault();
showForm();
hidePhotoButtons();
}, false); }, false);
clearphoto(); clearphoto();
...@@ -92,6 +94,15 @@ ...@@ -92,6 +94,15 @@
clearphoto(); clearphoto();
} }
} }
function showForm(){
$("#containerFormulario").show();
}
function hidePhotoButtons(){
$("#tomarFotoContainer").show();
$("#subirFotoContainer").hide();
}
// Set up our event listener to run the startup process // Set up our event listener to run the startup process
// once loading is complete. // once loading is complete.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment