This commit is contained in:
maher
2026-01-03 16:02:34 +01:00
parent c7b5685f35
commit 1d2b4fbb6b
11 changed files with 817 additions and 446 deletions

View File

@@ -26,6 +26,12 @@ final class DemoController extends AbstractController
return $this->render('demo/empty.html.twig', []); return $this->render('demo/empty.html.twig', []);
} }
#[Route('/demo/collapse', name: 'app_demo_collapse')]
public function collapse(): Response
{
return $this->render('demo/collapse.html.twig', []);
}
#[Route('/demo/chart', name: 'app_demo_chart')] #[Route('/demo/chart', name: 'app_demo_chart')]
public function chart(): Response public function chart(): Response

View File

@@ -82,6 +82,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@@ -88,6 +88,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div><!-- container --> </div><!-- container -->

View File

@@ -0,0 +1,394 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-90680653-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-90680653-2');
</script>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Twitter -->
<!-- <meta name="twitter:site" content="@bootstrapdash">
<meta name="twitter:creator" content="@bootstrapdash">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Azia">
<meta name="twitter:description" content="Responsive Bootstrap 4 Dashboard Template">
<meta name="twitter:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png"> -->
<!-- Facebook -->
<!-- <meta property="og:url" content="https://www.bootstrapdash.com/azia">
<meta property="og:title" content="Azia">
<meta property="og:description" content="Responsive Bootstrap 4 Dashboard Template">
<meta property="og:image" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
<meta property="og:image:secure_url" content="https://www.bootstrapdash.com/azia/img/azia-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="600"> -->
<!-- Meta -->
<meta name="description" content="Responsive Bootstrap 4 Dashboard Template">
<meta name="author" content="BootstrapDash">
<title>Azia Responsive Bootstrap 4 Dashboard Template</title>
<!-- vendor css -->
<link href="{{ asset('assets/lib/fontawesome-free/css/all.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/lib/ionicons/css/ionicons.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/lib/typicons.font/typicons.css') }}" rel="stylesheet">
<link href="{{ asset('assets/lib/line-awesome/css/line-awesome.min.css') }}" rel="stylesheet">
<!-- azia CSS -->
<link rel="stylesheet" href="{{ asset('assets/css/azia.css') }}">
</head>
<body>
<div class="az-header">
<div class="container">
<div class="az-header-left">
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
<a href="" id="azMenuShow" class="az-header-menu-icon d-lg-none"><span></span></a>
</div>
<!-- az-header-left -->
<div class="az-header-menu">
<div class="az-header-menu-header">
<a href="{{ path('app_demo_index') }}" class="az-logo"><span></span> azia</a>
<a href="" class="close">&times;</a>
</div>
<!-- az-header-menu-header -->
<ul class="nav">
<li class="nav-item">
<a href="{{ path('app_demo_index') }}" class="nav-link"><i class="typcn typcn-chart-area-outline"></i> Dashboard</a>
</li>
<li class="nav-item">
<a href="" class="nav-link with-sub"><i class="typcn typcn-document"></i> Pages</a>
<nav class="az-menu-sub">
<a href="{{ path('app_demo_signin') }}" class="nav-link">Sign In</a>
<a href="{{ path('app_demo_signup') }}" class="nav-link">Sign Up</a>
</nav>
</li>
<li class="nav-item">
<a href="{{ path('app_demo_chart') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Charts</a>
</li>
<li class="nav-item">
<a href="{{ path('app_demo_elements') }}" class="nav-link"><i class="typcn typcn-chart-bar-outline"></i> Forms</a>
</li>
<li class="nav-item active">
<a href="" class="nav-link with-sub"><i class="typcn typcn-book"></i> Components</a>
<div class="az-menu-sub">
<div class="container">
<div>
<nav class="nav">
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav>
</div>
</div>
<!-- container -->
</div>
</li>
</ul>
</div>
<!-- az-header-menu -->
<div class="az-header-right">
<a href="https://www.bootstrapdash.com/demo/azia-free/docs/documentation.html" target="_blank" class="az-header-search-link"><i class="far fa-file-alt"></i></a>
<a href="" class="az-header-search-link"><i class="fas fa-search"></i></a>
<div class="az-header-message">
<a href="#"><i class="typcn typcn-messages"></i></a>
</div>
<!-- az-header-message -->
<div class="dropdown az-header-notification">
<a href="" class="new"><i class="typcn typcn-bell"></i></a>
<div class="dropdown-menu">
<div class="az-dropdown-header mg-b-20 d-sm-none">
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
</div>
<h6 class="az-notification-title">Notifications</h6>
<p class="az-notification-text">You have 2 unread notification</p>
<div class="az-notification-list">
<div class="media new">
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face2.jpg') }}" alt=""></div>
<div class="media-body">
<p>Congratulate <strong>Socrates Itumay</strong> for work anniversaries</p>
<span>Mar 15 12:32pm</span>
</div>
<!-- media-body -->
</div>
<!-- media -->
<div class="media new">
<div class="az-img-user online"><img src="{{ asset('assets/img/faces/face3.jpg') }}" alt=""></div>
<div class="media-body">
<p><strong>Joyce Chua</strong> just created a new blog post</p>
<span>Mar 13 04:16am</span>
</div>
<!-- media-body -->
</div>
<!-- media -->
<div class="media">
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face4.jpg') }}" alt=""></div>
<div class="media-body">
<p><strong>Althea Cabardo</strong> just created a new blog post</p>
<span>Mar 13 02:56am</span>
</div>
<!-- media-body -->
</div>
<!-- media -->
<div class="media">
<div class="az-img-user"><img src="{{ asset('assets/img/faces/face5.jpg') }}" alt=""></div>
<div class="media-body">
<p><strong>Adrian Monino</strong> added new comment on your photo</p>
<span>Mar 12 10:40pm</span>
</div>
<!-- media-body -->
</div>
<!-- media -->
</div>
<!-- az-notification-list -->
<div class="dropdown-footer"><a href="">View All Notifications</a></div>
</div>
<!-- dropdown-menu -->
</div>
<!-- az-header-notification -->
<div class="dropdown az-profile-menu">
<a href="" class="az-img-user"><img src="{{ asset('assets/img/faces/face1.jpg') }}" alt=""></a>
<div class="dropdown-menu">
<div class="az-dropdown-header d-sm-none">
<a href="" class="az-header-arrow"><i class="icon ion-md-arrow-back"></i></a>
</div>
<div class="az-header-profile">
<div class="az-img-user">
<img src="{{ asset('assets/img/faces/face1.jpg') }}" alt="">
</div>
<!-- az-img-user -->
<h6>Aziana Pechon</h6>
<span>Premium Member</span>
</div>
<!-- az-header-profile -->
<a href="" class="dropdown-item"><i class="typcn typcn-user-outline"></i> My Profile</a>
<a href="" class="dropdown-item"><i class="typcn typcn-edit"></i> Edit Profile</a>
<a href="" class="dropdown-item"><i class="typcn typcn-time"></i> Activity Logs</a>
<a href="" class="dropdown-item"><i class="typcn typcn-cog-outline"></i> Account Settings</a>
<a href="{{ path('app_demo_signin') }}" class="dropdown-item"><i class="typcn typcn-power-outline"></i> Sign Out</a>
</div>
<!-- dropdown-menu -->
</div>
</div>
<!-- az-header-right -->
</div>
<!-- container -->
</div>
<!-- az-header -->
<div class="az-content pd-y-20 pd-lg-y-30 pd-xl-y-40">
<div class="container">
<div class="az-content-left az-content-left-components">
<div class="component-item">
<label>UI Elements</label>
<nav class="nav flex-column">
<a href="{{ path('app_demo_buttons') }}" class="nav-link">Buttons</a>
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link active">Collapses</a>
</nav>
<label>Forms</label>
<nav class="nav flex-column">
<a href="{{ path('app_demo_elements') }}" class="nav-link">Form Elements</a>
</nav>
<label>Charts</label>
<nav class="nav flex-column">
<a href="{{ path('app_demo_chart') }}" class="nav-link">ChartJS</a>
</nav>
<label>Tables</label>
<nav class="nav flex-column">
<a href="{{ path('app_demo_table') }}" class="nav-link">Basic Tables</a>
</nav>
</div>
<!-- component-item -->
</div>
<!-- az-content-left -->
<div class="az-content-body pd-lg-l-40 d-flex flex-column">
<div class="az-content-breadcrumb">
<span>Components</span>
<span>UI Elements</span>
<span>Collapses</span>
</div>
<h2 class="az-content-title">Collapses</h2>
{# ---------------------------------------- #}
<div id="accordion">
<!-- Card 1 - Ligne en haut -->
<div class="card border-top border-primary">
<div class="card-header" id="headingOne" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="d-flex align-items-center">
<div style="flex: 1;">
<h5 class="card-title mb-1">Very nice central apartment</h5>
<p class="card-text mb-1">1 bedroom • 113 reviews</p>
<div class="price">$85 per night</div>
</div>
<i class="fas fa-chevron-down arrow"></i>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="collapse-content">
<img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="card-img-top mb-3" alt="Very nice central apartment">
<p>Beautiful central apartment located in the heart of Chicago. Perfect for business travelers or tourists who want to experience the city.</p>
<div class="details">
<div class="detail-item">
<span class="detail-label">Check-in:</span>
<span class="detail-value">3:00 PM</span>
</div>
<div class="detail-item">
<span class="detail-label">Check-out:</span>
<span class="detail-value">11:00 AM</span>
</div>
<div class="detail-item">
<span class="detail-label">Max guests:</span>
<span class="detail-value">2</span>
</div>
<div class="detail-item">
<span class="detail-label">Rating:</span>
<span class="detail-value">4.8/5 (113 reviews)</span>
</div>
</div>
<div class="amenities">
<span class="amenity">WiFi</span>
<span class="amenity">Kitchen</span>
<span class="amenity">TV</span>
<span class="amenity">Heating</span>
<span class="amenity">Air conditioning</span>
</div>
<button class="btn btn-primary mt-3">Book now</button>
</div>
</div>
</div>
<!-- Card 2 - Ligne en bas -->
<div class="card border-bottom border-success">
<div class="card-header" id="headingTwo" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<div class="d-flex align-items-center">
<div style="flex: 1;">
<h5 class="card-title mb-1">Beautiful room in Chicago</h5>
<p class="card-text mb-1">1 bedroom • 23 reviews</p>
<div class="price">$85 per night</div>
</div>
<i class="fas fa-chevron-down arrow"></i>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="collapse-content">
<img src="https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="card-img-top mb-3" alt="Beautiful room in Chicago">
<p>Cozy room with beautiful views of Chicago. Located in a quiet neighborhood but close to public transportation.</p>
<div class="details">
<div class="detail-item">
<span class="detail-label">Check-in:</span>
<span class="detail-value">2:00 PM</span>
</div>
<div class="detail-item">
<span class="detail-label">Check-out:</span>
<span class="detail-value">12:00 PM</span>
</div>
<div class="detail-item">
<span class="detail-label">Max guests:</span>
<span class="detail-value">2</span>
</div>
<div class="detail-item">
<span class="detail-label">Rating:</span>
<span class="detail-value">4.5/5 (23 reviews)</span>
</div>
</div>
<div class="amenities">
<span class="amenity">WiFi</span>
<span class="amenity">Breakfast</span>
<span class="amenity">Parking</span>
<span class="amenity">TV</span>
<span class="amenity">Heating</span>
</div>
<button class="btn btn-success mt-3">Book now</button>
</div>
</div>
</div>
<!-- Card 3 - Ligne à droite -->
<div class="card border-right border-danger">
<div class="card-header" id="headingThree" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<div class="d-flex align-items-center">
<div style="flex: 1;">
<h5 class="card-title mb-1">Modern loft in downtown</h5>
<p class="card-text mb-1">Studio • 47 reviews</p>
<div class="price">$95 per night</div>
</div>
<i class="fas fa-chevron-down arrow"></i>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="collapse-content">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="card-img-top mb-3" alt="Modern loft in downtown">
<p>Modern and stylish loft located in downtown Chicago. Features open space design and modern amenities.</p>
<div class="details">
<div class="detail-item">
<span class="detail-label">Check-in:</span>
<span class="detail-value">4:00 PM</span>
</div>
<div class="detail-item">
<span class="detail-label">Check-out:</span>
<span class="detail-value">10:00 AM</span>
</div>
<div class="detail-item">
<span class="detail-label">Max guests:</span>
<span class="detail-value">3</span>
</div>
<div class="detail-item">
<span class="detail-label">Rating:</span>
<span class="detail-value">4.7/5 (47 reviews)</span>
</div>
</div>
<div class="amenities">
<span class="amenity">WiFi</span>
<span class="amenity">Kitchen</span>
<span class="amenity">Gym access</span>
<span class="amenity">Smart TV</span>
<span class="amenity">Air conditioning</span>
<span class="amenity">Washer/Dryer</span>
</div>
<button class="btn btn-danger mt-3">Book now</button>
</div>
</div>
</div>
</div>
<!-- az-content-body -->
</div>
<!-- container -->
</div>
<!-- az-content -->
<script src="{{ asset('assets/lib/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/lib/ionicons/ionicons.js') }}"></script>
<script src="../js/jquery.cookie.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/js/azia.js') }}"></script>
<script>
$(function(){
'use strict'
});
</script>
</body>
</html>

View File

@@ -82,6 +82,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@@ -89,6 +89,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@@ -83,6 +83,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@@ -83,6 +83,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@@ -82,6 +82,7 @@
<a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a> <a href="{{ path('app_demo_dropdown') }}" class="nav-link">Dropdown</a>
<a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a> <a href="{{ path('app_demo_icons') }}" class="nav-link">Icons</a>
<a href="{{ path('app_demo_table') }}" class="nav-link">Table</a> <a href="{{ path('app_demo_table') }}" class="nav-link">Table</a>
<a href="{{ path('app_demo_collapse') }}" class="nav-link">Collapse</a>
</nav> </nav>
</div> </div>
</div> </div>

View File

@@ -2,8 +2,6 @@
{% block title %}Enquête{% endblock %} {% block title %}Enquête{% endblock %}
{% block content %} {% block content %}
{% set prototypeHtml %} {% set prototypeHtml %}
@@ -11,24 +9,29 @@
{% endset %} {% endset %}
<style> <style>
.save-question { .save-question {
position: fixed; right: 80px; top: 65%; width:215px; position: fixed;
right: 80px;
top: 65%;
width: 215px;
} }
.add-question { .add-question {
position: fixed; right: 80px; top: 73%; position: fixed;
right: 80px;
top: 73%;
} }
.investigation-ready { .investigation-ready {
position: fixed; right: 80px; top: 81%; width:215px; position: fixed;
right: 80px;
top: 81%;
width: 215px;
} }
</style> </style>
<!-- az-header -->
<div class="az-content"> <div class="az-content">
<div class="container"> <div class="container">
<div class="az-content-body d-flex flex-column"> <div class="az-content-body d-flex flex-column">
<div class="az-content-breadcrumb"> <div class="az-content-breadcrumb">
<span>Enquête</span> <span>Enquête</span>
@@ -39,7 +42,6 @@
<div class="az-content-label mg-b-5"></div> <div class="az-content-label mg-b-5"></div>
<p class="mg-b-20">Créer une nouvelle enquête</p> <p class="mg-b-20">Créer une nouvelle enquête</p>
{{ form_start(form) }} {{ form_start(form) }}
<div class="tab-vertical mb-3" id="investigation-information"> <div class="tab-vertical mb-3" id="investigation-information">
<ul class="nav nav-tabs" id="myTab3" role="tablist"> <ul class="nav nav-tabs" id="myTab3" role="tablist">
@@ -88,298 +90,255 @@
</div> </div>
<div id="questions-collection" data-prototype="{{ prototypeHtml|e('html_attr') }}" data-index="{{ form|length }}"> <div id="questions-collection" data-prototype="{{ prototypeHtml|e('html_attr') }}" data-index="{{ form|length }}">
{% for formQuestion in form.questions %} {% for formQuestion in form.questions %}
<div class="question-item"> <div class="question-item">
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="card border-left border-primary"> <div id="accordion">
<div class="card-body"> <div class="card border-top border-primary">
<div class="form-group row"> <div class="card-header" id="heading-{{ loop.index }}" data-toggle="collapse" data-target="#collapse-{{ loop.index }}" aria-expanded="true" aria-controls="collapse-{{ loop.index }}">
<div class="col-md-3"> <div class="d-flex align-items-center">
<h5 class="card-title mb-5 question-number">Question N: {{ loop.index }}</h5> <div style="flex: 1;">
</div> <h5 class="card-title mb-1">Question N: {{ loop.index }}</h5>
<div class="col-md-3 offset-2"> <p class="card-text mb-1">{{ formQuestion.title.vars.value }}</p>
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3"> </div>
<i class="fa fa-eye"></i>Afficher <i class="fas fa-chevron-down arrow"></i>
</button>
</div>
<div class="col-md-2 offset-2">
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.title.vars.id }}">{{ form_label(formQuestion.title) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_en.vars.id }}">{{ form_label(formQuestion.name_en) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_fr.vars.id }}">{{ form_label(formQuestion.name_fr) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_ar.vars.id }}">{{ form_label(formQuestion.name_ar) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQuestion.amount.vars.id }}">{{ form_label(formQuestion.amount) }}</label>
{{ form_widget(formQuestion.amount, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQuestion.max_participant.vars.id }}">{{ form_label(formQuestion.max_participant) }}</label>
{{ form_widget(formQuestion.max_participant, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
</div>
<h4 class="card-title mt-4">Modalité</h4>
<div class="row mt-3">
<div class="col-md-6">
<div class="form-group ">
<label>{{ form_label(formQuestion.type_modality) }}</label>
{{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
</div>
</div>
<div class="col-md-6 mt-4">
<div class="form-group">
{% for key,child in formQuestion.choice %}
<div class="custom-control-inline">
{{ form_widget(child) }}
</div>
{% endfor %}
</div>
</div>
</div>
{% set prototype %}
<div class="modality-item border rounded p-3 mt-3 mb-3">
{# EN #}
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(formQuestion.modalitys.vars.prototype.name_en, {
attr: {
class: 'form-control',
placeholder: 'Nom (EN)'
}
}) }}
</div>
{{ form_errors(formQuestion.modalitys.vars.prototype.name_en) }}
{# FR #}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(formQuestion.modalitys.vars.prototype.name_fr, {
attr: {
class: 'form-control',
placeholder: 'Nom (FR)'
}
}) }}
</div>
{{ form_errors(formQuestion.modalitys.vars.prototype.name_fr) }}
{# AR #}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(formQuestion.modalitys.vars.prototype.name_ar, {
attr: {
class: 'form-control',
placeholder: 'الاسم (AR)',
dir: 'rtl'
}
}) }}
</div>
{{ form_errors(formQuestion.modalitys.vars.prototype.name_ar) }}
</div>
{% endset %}
{# modalities #}
<div class="row mt-4">
<div class="col-md-8">
<div id="modalities" data-prototype="{{ prototype|e('html_attr') }}">
{% for modality in formQuestion.modalitys %}
<div class="modality-item border rounded p-3 mb-3">
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(modality.name_en, {
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
}) }}
</div>
{{ form_errors(modality.name_en) }}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(modality.name_fr, {
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
}) }}
</div>
{{ form_errors(modality.name_fr) }}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(modality.name_ar, {
attr: {
class: 'form-control',
placeholder: 'الاسم (AR)',
dir: 'rtl'
}
}) }}
</div>
{{ form_errors(modality.name_ar) }}
<button type="button" class="remove-modality btn btn-danger btn-sm"> Supprimer </button>
</div>
{% endfor %}
</div> </div>
</div> </div>
<div class="col-md-4"> <div id="collapse-{{ loop.index }}" class="collapse {% if app.request.attributes.get('_route') == 'app_investigation_add' %} show {% endif %}" aria-labelledby="heading-{{ loop.index }}" data-parent="#accordion">
<button type="button" id="add-modality" class="btn btn-primary">Ajouter une modalité</button> <div class="collapse-content">
</div> <div class="card-body">
<div class="form-group row">
<div class="col-md-3">
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
<i class="fa fa-eye"></i> Afficher
</button>
</div>
<div class="col-md-2 offset-7">
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.title.vars.id }}">{{ form_label(formQuestion.title) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_en.vars.id }}">{{ form_label(formQuestion.name_en) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_fr.vars.id }}">{{ form_label(formQuestion.name_fr) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQuestion.name_ar.vars.id }}">{{ form_label(formQuestion.name_ar) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQuestion.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQuestion.amount.vars.id }}">{{ form_label(formQuestion.amount) }}</label>
{{ form_widget(formQuestion.amount, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQuestion.max_participant.vars.id }}">{{ form_label(formQuestion.max_participant) }}</label>
{{ form_widget(formQuestion.max_participant, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
</div>
<h4 class="card-title mt-4">Modalité</h4>
<div class="row mt-3">
<div class="col-md-6">
<div class="form-group ">
<label>{{ form_label(formQuestion.type_modality) }}</label>
{{ form_widget(formQuestion.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3' }}) }}
</div>
</div>
<div class="col-md-6 mt-4">
<div class="form-group">
{% for key, child in formQuestion.choice %}
<div class="custom-control-inline">
{{ form_widget(child) }}
</div>
{% endfor %}
</div>
</div>
</div>
{% set prototype %}
<div class="modality-item border rounded p-3 mt-3 mb-3">
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(formQuestion.modalitys.vars.prototype.name_en, {
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
}) }}
</div>
{{ form_errors(formQuestion.modalitys.vars.prototype.name_en) }}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(formQuestion.modalitys.vars.prototype.name_fr, {
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
}) }}
</div>
{{ form_errors(formQuestion.modalitys.vars.prototype.name_fr) }}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(formQuestion.modalitys.vars.prototype.name_ar, {
attr: { class: 'form-control', placeholder: 'الاسم (AR)', dir: 'rtl' }
}) }}
</div>
{{ form_errors(formQuestion.modalitys.vars.prototype.name_ar) }}
</div>
{% endset %}
<div class="row mt-4">
<div class="col-md-8">
<div class="modalities-container" data-prototype="{{ prototype|e('html_attr') }}">
{% for modality in formQuestion.modalitys %}
<div class="modality-item border rounded p-3 mb-3">
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(modality.name_en, {
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
}) }}
</div>
{{ form_errors(modality.name_en) }}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(modality.name_fr, {
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
}) }}
</div>
{{ form_errors(modality.name_fr) }}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(modality.name_ar, {
attr: { class: 'form-control', placeholder: 'الاسم (AR)', dir: 'rtl' }
}) }}
</div>
{{ form_errors(modality.name_ar) }}
<button type="button" class="remove-modality btn btn-danger btn-sm"> Supprimer </button>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary add-modality">Ajouter une modalité</button>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"></div>
</div> </div>
</div> </div>
{% endfor %}
<div class="col-md-3"></div>
</div>
</div> </div>
{% endfor %}
<button type="button" class="btn btn-info rounded-pill add-question">
<i class="typcn typcn-folder"></i>
Ajouter un autre question
</button>
{{ form_row(form.save, {'attr': {'class': 'btn btn-success rounded-pill save-question' }}) }}
{{ form_end(form) }}
{% if app.request.attributes.get('_route') == 'app_investigation_edit' %}
<a href="{{ path('app_investigation_ready', {id: investigation.id}) }}" class="btn btn-secondary rounded-pill investigation-ready">
Enquête Prête
</a>
{% endif %}
</div> </div>
<button type="button" class="btn btn-info rounded-pill add-question">
<i class="typcn typcn-folder"></i>
Ajouter un autre question
</button>
{{ form_row(form.save, {'attr': {'class': 'btn btn-success rounded-pill save-question' }}) }}
{{ form_end(form) }}
{% if app.request.attributes.get('_route') == 'app_investigation_edit' %}
<a href="{{ path('app_investigation_ready', {id: investigation.id}) }}" class="btn btn-secondary rounded-pill investigation-ready">
Enquête Prête
</a>
{% endif %}
</div> </div>
</div> </div>
{% block javascripts %} {% block javascripts %}
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
var $collection = $('#questions-collection');
var $addButton = $('.add-question');
var $collection = $('#questions-collection'); $collection.data('index', $collection.find('.question-item').length);
var $addButton = $('.add-question');
// Compter les questions existantes $addButton.on('click', function() {
$collection.data('index', $collection.find('.question-item').length); var index = $collection.data('index');
var prototype = $collection.data('prototype');
var newForm = prototype.replace(/__name__/g, index + 1);
var $newElement = $('<div class="row question-item"></div>');
$newElement.append(newForm);
$collection.append($newElement);
$addButton.on('click', function() { $collection.data('index', index + 1);
var index = $collection.data('index'); $('.remove-question').show();
var prototype = $collection.data('prototype');
var newForm = prototype.replace(/__name__/g, index);
var $newElement = $('<div class="row question-item"></div>');
$newElement.append(newForm);
$collection.append($newElement);
// Mettre à jour l'index
$collection.data('index', index + 1);
// Afficher les boutons supprimer
$('.remove-question').show();
updateIndexes();
$("html, body").animate({
scrollTop: $(window).scrollTop() + 700
}, 400);
});
// Suppression des questions
$collection.on('click', '.remove-question', function() {
console.log($('.question-item').length);
if ($('.question-item').length > 1) {
$(this).closest('.question-item').remove();
console.log($(this).closest('.question-item').remove());
updateIndexes(); updateIndexes();
// Cacher le bouton supprimer s'il ne reste qu'une question $("html, body").animate({
if ($('.question-item').length === 1) { scrollTop: $(window).scrollTop() + 700
$('.remove-question').hide(); }, 400);
}
}
});
function updateIndexes() {
$('.question-item').each(function(index) {
$(this).find('h5').text('Question N: ' + (index + 1));
}); });
}
$collection.on('click', '.remove-question', function() {
if ($('.question-item').length > 1) {
$(this).closest('.question-item').remove();
updateIndexes();
if ($('.question-item').length === 1) {
$('.remove-question').hide();
}
}
});
//modalities add-modality function updateIndexes() {
const container = document.getElementById('modalities'); $('.question-item').each(function(index) {
const addButton = document.getElementById('add-modality'); $(this).find('h5').text('Question N: ' + (index + 1));
let index = container.children.length; });
addButton.addEventListener('click', () => {
const prototype = container.dataset.prototype;
const html = prototype.replace(/__name__/g, index);
index++;
const div = document.createElement('div');
div.classList.add('modality-item');
div.innerHTML = html +
'<button type="button" class="remove-modality btn btn-danger">Supprimer</button>';
container.appendChild(div);
});
container.addEventListener('click', (e) => {
if (e.target.classList.contains('remove-modality')) {
e.target.closest('.modality-item').remove();
} }
$(document).on('click', '.add-modality', function() {
var $container = $(this).closest('.row').find('.modalities-container');
var index = $container.find('.modality-item').length;
var prototype = $container.data('prototype');
var newForm = prototype.replace(/__name__/g, index);
var $newElement = $('<div class="modality-item border rounded p-3 mb-3"></div>').append(newForm);
if (!$newElement.find('.remove-modality').length) {
$newElement.append('<button type="button" class="remove-modality btn btn-danger btn-sm mt-2">Supprimer</button>');
}
$container.append($newElement);
});
$(document).on('click', '.remove-modality', function() {
$(this).closest('.modality-item').remove();
});
}); });
</script>
{% endblock %}
});
</script>
{% endblock %}
{% endblock %} {% endblock %}

View File

@@ -1,178 +1,183 @@
<div class="col-md-8">
<div class="card border-top border-primary">
<div class="col-md-8"> <div class="card-header" id="heading-__name__" data-toggle="collapse" data-target="#collapse-__name__" aria-expanded="true" aria-controls="collapse-__name__">
<div class="card border-left border-primary"> <div class="d-flex align-items-center">
<div class="card-body"> <div style="flex: 1;">
<div class="form-group row"> <h5 class="card-title mb-1 question-number">Question N: </h5>
<div class="col-md-3">
<h5 class="card-title mb-5 question-number">Question N: </h5>
</div>
<div class="col-md-3 offset-2">
<button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
<i class="fa fa-eye"></i>Afficher
</button>
</div>
<div class="col-md-2 offset-2">
<button type="button" class="btn btn-danger remove-question mb-3 float-right">
<i class="fa fa-trash"></i>
</button>
</div>
</div> </div>
<div class="form-group row"> <i class="fas fa-chevron-down arrow"></i>
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.title.vars.id }}">{{ form_label(formQtn.title) }}:</label> </div>
<div class="col-sm-8"> </div>
{{ form_widget(formQtn.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
</div> <div id="collapse-__name__" class="collapse show" aria-labelledby="heading-__name__" data-parent="#accordion">
</div> <div class="collapse-content">
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_en.vars.id }}">{{ form_label(formQtn.name_en) }}:</label> <div class="card-body">
<div class="col-sm-8"> <div class="form-group row">
{{ form_widget(formQtn.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }} <div class="col-md-3">
</div> <button type="button" class="btn btn-outline-secondary rounded-pill mb-3">
</div> <i class="fa fa-eye"></i> Afficher
<div class="form-group row"> </button>
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_fr.vars.id }}">{{ form_label(formQtn.name_fr) }}:</label> </div>
<div class="col-sm-8"> <div class="col-md-2 offset-7">
{{ form_widget(formQtn.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }} <button type="button" class="btn btn-danger remove-question mb-3 float-right">
</div> <i class="fa fa-trash"></i>
</div> </button>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_ar.vars.id }}">{{ form_label(formQtn.name_ar) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQtn.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQtn.amount.vars.id }}">{{ form_label(formQtn.amount) }}</label>
{{ form_widget(formQtn.amount, {'attr': {'class': 'form-control' }}) }}
</div> </div>
</div> </div>
<div class="col-md-6">
<div class="form-group col-sm-10"> <div class="form-group row">
<label for="{{ formQtn.max_participant.vars.id }}">{{ form_label(formQtn.max_participant) }}</label> <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.title.vars.id }}">{{ form_label(formQtn.title) }}:</label>
{{ form_widget(formQtn.max_participant, {'attr': {'class': 'form-control' }}) }} <div class="col-sm-8">
{{ form_widget(formQtn.title, {'attr': {'class': 'form-control', 'placeholder': 'Visible que pour la createur du question' }}) }}
</div> </div>
</div> </div>
</div>
<h4 class="card-title mt-4">Modalité</h4> <div class="form-group row">
<div class="row mt-3"> <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_en.vars.id }}">{{ form_label(formQtn.name_en) }}:</label>
<div class="col-md-6"> <div class="col-sm-8">
<div class="form-group "> {{ form_widget(formQtn.name_en, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
<label>{{ form_label(formQtn.type_modality) }}</label>
{{ form_widget(formQtn.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
</div> </div>
</div> </div>
<div class="col-md-6 mt-4">
<div class="form-group"> <div class="form-group row">
{% for key,child in formQtn.choice %} <label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_fr.vars.id }}">{{ form_label(formQtn.name_fr) }}:</label>
<div class="custom-control-inline"> <div class="col-sm-8">
{{ form_widget(child) }} {{ form_widget(formQtn.name_fr, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2 align-self-center mb-0" for="{{ formQtn.name_ar.vars.id }}">{{ form_label(formQtn.name_ar) }}:</label>
<div class="col-sm-8">
{{ form_widget(formQtn.name_ar, {'attr': {'class': 'form-control', 'placeholder': 'Visible pour les participants' }}) }}
</div>
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQtn.amount.vars.id }}">{{ form_label(formQtn.amount) }}</label>
{{ form_widget(formQtn.amount, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
<div class="col-md-6">
<div class="form-group col-sm-10">
<label for="{{ formQtn.max_participant.vars.id }}">{{ form_label(formQtn.max_participant) }}</label>
{{ form_widget(formQtn.max_participant, {'attr': {'class': 'form-control' }}) }}
</div>
</div>
</div>
<h4 class="card-title mt-4">Modalité</h4>
<div class="row mt-3">
<div class="col-md-6">
<div class="form-group ">
<label>{{ form_label(formQtn.type_modality) }}</label>
{{ form_widget(formQtn.type_modality, {'attr': {'class': 'form-control form-control-sm mb-3"' }}) }}
</div>
</div>
<div class="col-md-6 mt-4">
<div class="form-group">
{% for key,child in formQtn.choice %}
<div class="custom-control-inline">
{{ form_widget(child) }}
</div> </div>
{% endfor %} {% endfor %}
</div>
</div> </div>
</div> </div>
{% set prototype %}
<div class="modality-item border rounded p-3 mt-3 mb-3">
{# EN #}
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(formQtn.modalitys.vars.prototype.name_en, {
attr: {
class: 'form-control',
placeholder: 'Nom (EN)'
}
}) }}
</div>
{{ form_errors(formQtn.modalitys.vars.prototype.name_en) }}
{# FR #}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(formQtn.modalitys.vars.prototype.name_fr, {
attr: {
class: 'form-control',
placeholder: 'Nom (FR)'
}
}) }}
</div>
{{ form_errors(formQtn.modalitys.vars.prototype.name_fr) }}
{# AR #}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(formQtn.modalitys.vars.prototype.name_ar, {
attr: {
class: 'form-control',
placeholder: 'الاسم (AR)',
dir: 'rtl'
}
}) }}
</div>
{{ form_errors(formQtn.modalitys.vars.prototype.name_ar) }}
</div>
{% endset %}
{# modalities #}
<div class="row mt-4">
<div class="col-md-8">
<div class="modalities-container" data-prototype="{{ prototype|e('html_attr') }}">
{% for modality in formQtn.modalitys %}
<div class="modality-item border rounded p-3 mb-3">
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(modality.name_en, {
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
}) }}
</div>
{{ form_errors(modality.name_en) }}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(modality.name_fr, {
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
}) }}
</div>
{{ form_errors(modality.name_fr) }}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(modality.name_ar, {
attr: {
class: 'form-control',
placeholder: 'الاسم (AR)',
dir: 'rtl'
}
}) }}
</div>
{{ form_errors(modality.name_ar) }}
<button type="button" class="remove-modality btn btn-danger btn-sm"> Supprimer </button>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary add-modality">Ajouter une modalité</button>
</div>
</div>
</div> </div>
{% set prototype %}
<div class="modality-item border rounded p-3 mt-3 mb-3">
{# EN #}
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(formQtn.modalitys.vars.prototype.name_en, {
attr: {
class: 'form-control',
placeholder: 'Nom (EN)'
}
}) }}
</div>
{{ form_errors(formQtn.modalitys.vars.prototype.name_en) }}
{# FR #}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(formQtn.modalitys.vars.prototype.name_fr, {
attr: {
class: 'form-control',
placeholder: 'Nom (FR)'
}
}) }}
</div>
{{ form_errors(formQtn.modalitys.vars.prototype.name_fr) }}
{# AR #}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(formQtn.modalitys.vars.prototype.name_ar, {
attr: {
class: 'form-control',
placeholder: 'الاسم (AR)',
dir: 'rtl'
}
}) }}
</div>
{{ form_errors(formQtn.modalitys.vars.prototype.name_ar) }}
</div>
{% endset %}
{# modalities #}
<div class="row mt-4">
<div class="col-md-8">
<div id="modalities" data-prototype="{{ prototype|e('html_attr') }}">
{% for modality in formQtn.modalitys %}
<div class="modality-item border rounded p-3 mb-3">
<div class="input-group mb-3">
<span class="input-group-text">EN</span>
{{ form_widget(modality.name_en, {
attr: { class: 'form-control', placeholder: 'Nom (EN)' }
}) }}
</div>
{{ form_errors(modality.name_en) }}
<div class="input-group mb-3">
<span class="input-group-text">FR</span>
{{ form_widget(modality.name_fr, {
attr: { class: 'form-control', placeholder: 'Nom (FR)' }
}) }}
</div>
{{ form_errors(modality.name_fr) }}
<div class="input-group mb-3">
<span class="input-group-text">AR</span>
{{ form_widget(modality.name_ar, {
attr: {
class: 'form-control',
placeholder: 'الاسم (AR)',
dir: 'rtl'
}
}) }}
</div>
{{ form_errors(modality.name_ar) }}
<button type="button" class="remove-modality btn btn-danger btn-sm"> Supprimer </button>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-4">
<button type="button" id="add-modality" class="btn btn-primary">Ajouter une modalité</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-3"></div> </div>
<div class="col-md-3"></div>