{% extends 'admin/base.html.twig' %}{% block title %}Member{% endblock %}{% block body %} <!-- Page Header--> <div class="page-header"> <h1 class="page-heading">Profile </h1> </div> <section> <div class="row"> <div class="col-md-4"> <div class="card mb-4 bg-success text-white"> <div class="card-header card-header-transparent card-heading">5 Kilos perdu la semaine derniére</div> <div class="card-body"> <h5 class="card-title">Sed tortor dui, vestibulum at ligula ac, lobortis vestibulum augue</h5> <p class="card-text">Aenean nisi urna, cursus condimentum diam quis, blandit dignissim ex. Cras pharetra.</p> <p class="card-text">Aenean nisi urna, cursus condimentum diam quis, blandit dignissim ex. Cras pharetra.</p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <div class="card-header"> <h4 class="card-heading">Evolution du poids</h4> </div> <div class="card-body"> <canvas id="lineChartCustom2"></canvas> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <div class="card-header"> <h4 class="card-heading">Evolution du muscle</h4> </div> <div class="card-body"> <canvas id="lineChartCustom3"></canvas> </div> </div> </div> </div> <div class="row"> <div class="col-lg-4"> <div class="card card-profile mb-4"> <div class="card-header" style="background-image: url({{asset('img/photos/paul-morris-116514-unsplash.jpg')}} );"> </div> <div class="card-body text-center"><img class="card-profile-img" src="{{asset('img/avatar-1.jpg')}}" alt=""> <h3 class="mb-3">{{ member.firstName }} {{ member.lastName }}</h3> <p class="mb-4"></p> </div> </div> </div> <div class="col-lg-8"> <form class="card mb-4"> <div class="card-header"> <h4 class="card-heading">Détails</h4> </div> <div class="card-body"> <div class="row"> <div class="col-sm-6 col-md-3"> <div class="mb-4"> <label class="form-label">Prénom</label> <input class="form-control" type="text" placeholder="Username" value="{{ member.firstName }}"> </div> </div> <div class="col-sm-6 col-md-4"> <div class="mb-4"> <label class="form-label">Nom</label> <input class="form-control" type="email" placeholder="{{ member.lastName }}"> </div> </div> <div class="col-sm-6 col-md-4"> <div class="mb-4"> <label class="form-label">Sexe</label> <input class="form-control" type="text" placeholder="{{ member.sexe }}"> </div> </div> <div class="col-sm-6 col-md-6"> <div class="mb-4"> <label class="form-label">Email</label> <input class="form-control" type="email" placeholder="{{ member.email }}"> </div> </div> <div class="col-sm-6 col-md-6"> <div class="mb-4"> <label class="form-label">Téléphone</label> <input class="form-control" type="text" placeholder="{{ member.phone }}"> </div> </div> <div class="col-md-12"> <div class="mb-4"> <label class="form-label">Adresse</label> <input class="form-control" type="text" placeholder="{{member.address}}"> </div> </div> <div class="col-sm-6 col-md-4"> <div class="mb-4"> <label class="form-label">Ville</label> <input class="form-control" type="text" placeholder="ville"> </div> </div> <div class="col-sm-6 col-md-3"> <div class="mb-4"> <label class="form-label">Code postale</label> <input class="form-control" type="number" placeholder="{{member.address.postcode}}"> </div> </div> <div class="col-md-5"> <div class="mb-4"> <label class="form-label">Pays</label> <select class="form-control custom-select"> <option value="">fr</option> <option value="">US</option> </select> </div> </div> </div> </div> <div class="card-footer text-end"> <a class="btn btn-primary" href="{{ path('app_member_edit', {'id': member.id}) }}" >Modifier</a> </div> </form> </div> </div> <div class="row"> <div class="col-3"> <a class="btn btn-primary" href="{{ path('app_member_index') }}">Retour à la liste des clients</a> </div> </div> </section> {% block javascripts %} <script src="{{asset('js/charts-custom.js')}}"></script> <script src="{{asset('vendor/chart.js/Chart.min.js')}}"></script> <script src="{{asset('js/charts-defaults.js')}}"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function () { const lineChartCustom2 = new Chart(document.getElementById("lineChartCustom2"), { type: "line", options: { tooltips: { mode: "index", intersect: false, }, scales: { xAxes: [ { display: false, }, ], yAxes: [ { ticks: { max: 200, min: 50, }, gridLines: { display: true, drawBorder: false, }, }, ], }, legend: { display: false, }, }, data: { labels: ["Semaine1", "Semaine2", "Semaine3", "Semaine4", "Semaine5", "Semaine6", "Semaine7"], datasets: [ { label: "poids", fill: true, backgroundColor: window.gradients.primaryWhite, borderColor: window.colors.primary, pointBorderColor: window.colors.primary, pointHoverBackgroundColor: window.colors.primary, borderCapStyle: "butt", borderDash: [], borderJoinStyle: "miter", borderWidth: 2, pointBackgroundColor: window.colors.primary, pointBorderWidth: 5, pointHoverRadius: 5, pointHoverBorderColor: window.colors.primary, pointHoverBorderWidth: 1, pointRadius: 0, pointHitRadius: 2, data: [125, 120, 117, 100, 105, 99, 95], spanGaps: false, }, ], }, }); const lineChartCustom3 = new Chart(document.getElementById("lineChartCustom3"), { type: "line", options: { tooltips: { mode: "index", intersect: false, }, scales: { xAxes: [ { display: false, }, ], yAxes: [ { ticks: { max: 100, min: 0, }, gridLines: { display: true, drawBorder: false, }, }, ], }, legend: { display: false, }, }, data: { labels: ["Semaine1", "Semaine2", "Semaine3", "Semaine4", "Semaine5", "Semaine6", "Semaine7"], datasets: [ { label: "pourcentage", fill: true, backgroundColor: window.gradients.primaryWhite, borderColor: window.colors.primary, pointBorderColor: window.colors.primary, pointHoverBackgroundColor: window.colors.primary, borderCapStyle: "butt", borderDash: [], borderJoinStyle: "miter", borderWidth: 2, pointBackgroundColor: window.colors.primary, pointBorderWidth: 5, pointHoverRadius: 5, pointHoverBorderColor: window.colors.primary, pointHoverBorderWidth: 1, pointRadius: 0, pointHitRadius: 2, data: [14, 15, 16, 17, 18, 19, 20], spanGaps: false, }, ], }, }); }) </script> {% endblock %} {% endblock %}