templates/classroom/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/backEndLayout.html.twig' %}
  3. {% block stylesheets %}
  4. {{ parent() }}
  5. <style>
  6. /* ── Tokens locaux ─────────────────────────────────────────── */
  7. :root {
  8. --ci-bg : #f5f7fa;
  9. --ci-card : #ffffff;
  10. --ci-border : rgba(0,0,0,.08);
  11. --ci-border-hi: rgba(0,0,0,.16);
  12. --ci-ink : #111827;
  13. --ci-dim : #4b5563;
  14. --ci-muted : #9ca3af;
  15. --ci-blue : #1d4ed8;
  16. --ci-blue-lt : rgba(29,78,216,.1);
  17. --ci-teal : #0d9488;
  18. --ci-teal-lt : rgba(13,148,136,.1);
  19. --ci-amber : #b45309;
  20. --ci-amber-lt : rgba(180,83,9,.1);
  21. --ci-rose : #be123c;
  22. --ci-rose-lt : rgba(190,18,60,.1);
  23. --ci-r : 12px;
  24. --ci-rs : 8px;
  25. --ci-shadow : 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  26. }
  28. /* ── Layout page ───────────────────────────────────────────── */
  29. .ci-page { font-family:'DM Sans','Segoe UI',sans-serif; }
  31. /* ── Barre de tête ─────────────────────────────────────────── */
  32. .ci-topbar {
  33. display: flex;
  34. align-items: center;
  35. justify-content: space-between;
  36. flex-wrap: wrap;
  37. gap: 12px;
  38. margin-bottom: 24px;
  39. }
  40. .ci-topbar__title {
  41. font-size: 20px;
  42. font-weight: 700;
  43. color: var(--ci-ink);
  44. display: flex;
  45. align-items: center;
  46. gap: 10px;
  47. }
  48. .ci-topbar__title i { color: var(--ci-blue); font-size: 18px; }
  49. .ci-topbar__sub { font-size: 13px; color: var(--ci-muted); margin-top: 2px; }
  51. /* ── Statistiques globales ─────────────────────────────────── */
  52. .ci-stats {
  53. display: grid;
  54. grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  55. gap: 12px;
  56. margin-bottom: 24px;
  57. }
  58. .ci-stat {
  59. background: var(--ci-card);
  60. border: 1px solid var(--ci-border);
  61. border-radius: var(--ci-r);
  62. padding: 16px;
  63. display: flex;
  64. align-items: center;
  65. gap: 12px;
  66. transition: box-shadow .2s;
  67. }
  68. .ci-stat:hover { box-shadow: var(--ci-shadow); }
  69. .ci-stat__icon {
  70. width: 40px; height: 40px;
  71. border-radius: var(--ci-rs);
  72. display: flex; align-items: center; justify-content: center;
  73. font-size: 16px; flex-shrink: 0;
  74. }
  75. .ic-blue { background: var(--ci-blue-lt); color: var(--ci-blue); }
  76. .ic-teal { background: var(--ci-teal-lt); color: var(--ci-teal); }
  77. .ic-amber { background: var(--ci-amber-lt); color: var(--ci-amber); }
  78. .ic-rose { background: var(--ci-rose-lt); color: var(--ci-rose); }
  79. .ci-stat__val { font-size: 22px; font-weight: 700; color: var(--ci-ink); line-height: 1; }
  80. .ci-stat__lbl { font-size: 11.5px; color: var(--ci-muted); margin-top: 2px; }
  82. /* ── Tableau ───────────────────────────────────────────────── */
  83. .ci-table-card {
  84. background: var(--ci-card);
  85. border: 1px solid var(--ci-border);
  86. border-radius: var(--ci-r);
  87. overflow: hidden;
  88. box-shadow: var(--ci-shadow);
  89. }
  90. .ci-table-head {
  91. display: flex;
  92. align-items: center;
  93. justify-content: space-between;
  94. flex-wrap: wrap;
  95. gap: 10px;
  96. padding: 16px 20px;
  97. border-bottom: 1px solid var(--ci-border);
  98. background: #fafbfc;
  99. }
  100. .ci-table-head__title {
  101. font-size: 14px;
  102. font-weight: 600;
  103. color: var(--ci-ink);
  104. display: flex;
  105. align-items: center;
  106. gap: 8px;
  107. }
  108. .ci-table-head__dot {
  109. width: 8px; height: 8px;
  110. border-radius: 50%;
  111. background: var(--ci-blue);
  112. box-shadow: 0 0 6px var(--ci-blue);
  113. }
  115. /* Bouton ajouter */
  116. .btn-add {
  117. display: inline-flex;
  118. align-items: center;
  119. gap: 6px;
  120. padding: 8px 16px;
  121. background: var(--ci-blue);
  122. color: #fff;
  123. border-radius: var(--ci-rs);
  124. font-size: 13px;
  125. font-weight: 600;
  126. text-decoration: none;
  127. border: none;
  128. cursor: pointer;
  129. transition: background .18s, transform .14s;
  130. }
  131. .btn-add:hover { background: #1e40af; color: #fff; transform: translateY(-1px); }
  133. /* Table */
  134. table.ci-tbl {
  135. width: 100%;
  136. border-collapse: collapse;
  137. font-size: 13.5px;
  138. }
  139. table.ci-tbl thead th {
  140. padding: 10px 16px;
  141. color: var(--ci-muted);
  142. font-size: 11px;
  143. font-weight: 600;
  144. text-transform: uppercase;
  145. letter-spacing: .06em;
  146. background: #fafbfc;
  147. border-bottom: 1px solid var(--ci-border);
  148. white-space: nowrap;
  149. }
  150. table.ci-tbl tbody td {
  151. padding: 12px 16px;
  152. border-bottom: 1px solid rgba(0,0,0,.04);
  153. color: var(--ci-ink);
  154. vertical-align: middle;
  155. }
  156. table.ci-tbl tbody tr:last-child td { border-bottom: none; }
  157. table.ci-tbl tbody tr { transition: background .12s; }
  158. table.ci-tbl tbody tr:hover td { background: rgba(29,78,216,.03); }
  160. /* Nom de la classe */
  161. .room-name {
  162. font-weight: 700;
  163. font-size: 14px;
  164. color: var(--ci-ink);
  165. }
  166. .room-link {
  167. display: inline-flex;
  168. align-items: center;
  169. gap: 6px;
  170. color: var(--ci-ink);
  171. text-decoration: none;
  172. }
  173. .room-link:hover { color: var(--ci-blue); }
  174. .room-link:hover .room-name { text-decoration: underline; }
  176. /* Niveau badge */
  177. .level-badge {
  178. display: inline-block;
  179. padding: 3px 10px;
  180. border-radius: 20px;
  181. font-size: 11.5px;
  182. font-weight: 600;
  183. background: var(--ci-blue-lt);
  184. color: var(--ci-blue);
  185. border: 1px solid rgba(29,78,216,.2);
  186. }
  188. /* Séquence active */
  189. .seq-badge {
  190. display: inline-flex;
  191. align-items: center;
  192. gap: 5px;
  193. padding: 3px 10px;
  194. border-radius: 20px;
  195. font-size: 11px;
  196. font-weight: 500;
  197. background: var(--ci-teal-lt);
  198. color: var(--ci-teal);
  199. border: 1px solid rgba(13,148,136,.2);
  200. }
  201. .seq-dot {
  202. width: 6px; height: 6px;
  203. border-radius: 50%;
  204. background: var(--ci-teal);
  205. animation: pulse-dot 1.6s ease infinite;
  206. }
  207. @keyframes pulse-dot {
  208. 0%,100% { opacity:1; } 50% { opacity:.35; }
  209. }
  211. /* Prof titulaire */
  212. .main-teacher {
  213. display: flex;
  214. align-items: center;
  215. gap: 7px;
  216. font-size: 13px;
  217. }
  218. .teacher-avatar {
  219. width: 26px; height: 26px;
  220. border-radius: 50%;
  221. background: linear-gradient(135deg, #1d4ed8, #0d9488);
  222. color: #fff;
  223. font-size: 10px;
  224. font-weight: 700;
  225. display: flex;
  226. align-items: center;
  227. justify-content: center;
  228. flex-shrink: 0;
  229. }
  230. .no-teacher {
  231. font-size: 12px;
  232. color: var(--ci-rose);
  233. font-style: italic;
  234. }
  236. /* Boutons action ligne */
  237. .ci-actions {
  238. display: flex;
  239. align-items: center;
  240. gap: 4px;
  241. justify-content: flex-end;
  242. }
  243. .ci-btn {
  244. display: inline-flex;
  245. align-items: center;
  246. gap: 5px;
  247. padding: 5px 10px;
  248. border-radius: 7px;
  249. font-size: 11.5px;
  250. font-weight: 500;
  251. text-decoration: none;
  252. border: 1px solid var(--ci-border);
  253. cursor: pointer;
  254. background: #fff;
  255. color: var(--ci-dim);
  256. transition: background .15s, border-color .15s, color .15s;
  257. white-space: nowrap;
  258. }
  259. .ci-btn:hover { border-color: var(--ci-border-hi); color: var(--ci-ink); background: #f8f9fa; }
  260. .ci-btn-primary { background: var(--ci-blue-lt); color: var(--ci-blue); border-color: rgba(29,78,216,.25); }
  261. .ci-btn-primary:hover { background: #1d4ed8; color: #fff; }
  262. .ci-btn-warning { background: var(--ci-amber-lt); color: var(--ci-amber); border-color: rgba(180,83,9,.25); }
  263. .ci-btn-warning:hover { background: #b45309; color: #fff; }
  264. .ci-btn-danger { background: var(--ci-rose-lt); color: var(--ci-rose); border-color: rgba(190,18,60,.25); }
  265. .ci-btn-danger:hover { background: #be123c; color: #fff; }
  267. /* ── Pagination ────────────────────────────────────────────── */
  268. .ci-pagination {
  269. display: flex;
  270. align-items: center;
  271. justify-content: space-between;
  272. flex-wrap: wrap;
  273. gap: 10px;
  274. padding: 14px 20px;
  275. border-top: 1px solid var(--ci-border);
  276. background: #fafbfc;
  277. }
  278. .ci-pagination__info { font-size: 12.5px; color: var(--ci-muted); }
  279. .ci-pager {
  280. display: flex;
  281. align-items: center;
  282. gap: 4px;
  283. list-style: none;
  284. margin: 0; padding: 0;
  285. }
  286. .ci-pager li a,
  287. .ci-pager li span {
  288. display: inline-flex;
  289. align-items: center;
  290. justify-content: center;
  291. min-width: 34px;
  292. height: 34px;
  293. padding: 0 8px;
  294. border-radius: 8px;
  295. border: 1px solid var(--ci-border);
  296. font-size: 13px;
  297. font-weight: 500;
  298. color: var(--ci-dim);
  299. text-decoration: none;
  300. background: #fff;
  301. transition: background .15s, border-color .15s, color .15s;
  302. }
  303. .ci-pager li a:hover { border-color: var(--ci-blue); color: var(--ci-blue); }
  304. .ci-pager li.active span {
  305. background: var(--ci-blue);
  306. color: #fff;
  307. border-color: var(--ci-blue);
  308. font-weight: 700;
  309. }
  310. .ci-pager li.disabled span { opacity: .4; cursor: default; }
  312. /* ── Vide ──────────────────────────────────────────────────── */
  313. .ci-empty {
  314. text-align: center;
  315. padding: 64px 24px;
  316. color: var(--ci-muted);
  317. }
  318. .ci-empty i { font-size: 40px; margin-bottom: 12px; display: block; }
  319. .ci-empty strong { display: block; font-size: 15px; color: var(--ci-dim); margin-bottom: 4px; }
  321. /* ── Animation ─────────────────────────────────────────────── */
  322. @keyframes fadeUp {
  323. from { opacity:0; transform:translateY(10px); }
  324. to { opacity:1; transform:none; }
  325. }
  326. .ci-table-card { animation: fadeUp .4s ease both; }
  327. </style>
  328. {% endblock %}
  330. {% block content %}
  331. <div class="ci-page">
  333. {# ── Barre de tête ──────────────────────────────────────────── #}
  334. <div class="ci-topbar">
  335. <div>
  336. <div class="ci-topbar__title">
  337. <i class="fa fa-th-large"></i>
  338. Classes
  339. </div>
  340. <div class="ci-topbar__sub">
  341. Gestion des classes — {% if year %}Année scolaire {{ year.code }}{% endif %}
  342. {% if seq > 0 %} · Séquence active{% endif %}
  343. </div>
  344. </div>
  345. {% if is_granted('ROLE_ADMIN') %}
  346. <a href="{{ path('admin_classrooms_new') }}" class="btn-add">
  347. <i class="fa fa-plus"></i> Nouvelle classe
  348. </a>
  349. {% endif %}
  350. </div>
  352. {# ── KPIs globaux ───────────────────────────────────────────── #}
  353. <div class="ci-stats">
  354. <div class="ci-stat">
  355. <div class="ci-stat__icon ic-blue"><i class="fa fa-home"></i></div>
  356. <div>
  357. <div class="ci-stat__val">{{ classrooms|length }}</div>
  358. <div class="ci-stat__lbl">Classes</div>
  359. </div>
  360. </div>
  361. <div class="ci-stat">
  362. <div class="ci-stat__icon ic-teal"><i class="fa fa-graduation-cap"></i></div>
  363. <div>
  364. <div class="ci-stat__val">{{ students_count() }}</div>
  365. <div class="ci-stat__lbl">Élèves inscrits</div>
  366. </div>
  367. </div>
  368. <div class="ci-stat">
  369. <div class="ci-stat__icon ic-amber"><i class="fa fa-users"></i></div>
  370. <div>
  371. <div class="ci-stat__val">{{ teachers_count() }}</div>
  372. <div class="ci-stat__lbl">Enseignants</div>
  373. </div>
  374. </div>
  375. <div class="ci-stat">
  376. <div class="ci-stat__icon ic-rose"><i class="fa fa-book"></i></div>
  377. <div>
  378. <div class="ci-stat__val">{{ rooms_count() }}</div>
  379. <div class="ci-stat__lbl">Salles actives</div>
  380. </div>
  381. </div>
  382. </div>
  384. {# ── Tableau des classes ─────────────────────────────────────── #}
  385. {% set items_per_page = 12 %}
  386. {% set current_page = app.request.query.get('page', 1)|number_format %}
  387. {% set total_pages = (classrooms|length / items_per_page)|round(0, 'ceil') %}
  389. <div class="ci-table-card">
  390. <div class="ci-table-head">
  391. <div class="ci-table-head__title">
  392. <span class="ci-table-head__dot"></span>
  393. Liste des classes
  394. <span style="font-size:11.5px;color:var(--ci-muted);font-weight:400;">({{ classrooms|length }} au total)</span>
  395. </div>
  396. <div style="display:flex;gap:8px;align-items:center;">
  397. <span class="seq-badge">
  398. <span class="seq-dot"></span>
  399. {% if seq > 0 %}Séquence active{% else %}Aucune séquence active{% endif %}
  400. </span>
  401. </div>
  402. </div>
  404. {% if classrooms is empty %}
  405. <div class="ci-empty">
  406. <i class="fa fa-inbox"></i>
  407. <strong>Aucune classe enregistrée</strong>
  408. Commencez par créer une classe.
  409. </div>
  410. {% else %}
  411. <div style="overflow-x:auto;">
  412. <table class="ci-tbl">
  413. <thead>
  414. <tr>
  415. <th style="width:4%">#</th>
  416. <th style="width:18%">Classe</th>
  417. <th style="width:12%">Niveau</th>
  418. <th style="width:22%">Professeur titulaire</th>
  419. <th style="width:10%" class="text-center">Modules</th>
  420. <th style="width:10%" class="text-center">Matières</th>
  421. <th style="width:24%" class="text-right">Actions</th>
  422. </tr>
  423. </thead>
  424. <tbody>
  425. {% for classroom in classrooms %}
  426. {# ── Pagination côté Twig ── #}
  427. {% if loop.index > (current_page - 1) * items_per_page and loop.index <= current_page * items_per_page %}
  428. <tr>
  429. <td style="color:var(--ci-muted);font-size:12px">{{ (current_page - 1) * items_per_page + loop.index - ((current_page - 1) * items_per_page) }}</td>
  431. <td>
  432. <a href="{{ path('admin_classrooms_show', {id: classroom.id}) }}" class="room-link">
  433. <span class="room-name">{{ classroom.name }}</span>
  434. </a>
  435. </td>
  437. <td>
  438. <span class="level-badge">{{ classroom.level }}</span>
  439. </td>
  441. <td>
  442. {% if mainTeachers[classroom.id] is defined %}
  443. <div class="main-teacher">
  444. <div class="teacher-avatar">
  445. {{ mainTeachers[classroom.id].fullName|slice(0,1)|upper }}{{ mainTeachers[classroom.id].fullName|split(' ')|last|slice(0,1)|upper }}
  446. </div>
  447. {{ mainTeachers[classroom.id].fullName }}
  448. </div>
  449. {% else %}
  450. <span class="no-teacher"><i class="fa fa-exclamation-triangle"></i> Non assigné</span>
  451. {% endif %}
  452. </td>
  454. <td class="text-center">
  455. <span style="font-weight:600;color:var(--ci-blue)">{{ classroom.modules|length }}</span>
  456. </td>
  458. <td class="text-center">
  459. {% set total_courses = 0 %}
  460. {% for module in classroom.modules %}
  461. {% set total_courses = total_courses + module.courses|length %}
  462. {% endfor %}
  463. <span style="font-weight:600;color:var(--ci-teal)">{{ total_courses }}</span>
  464. </td>
  466. <td>
  467. <div class="ci-actions">
  468. <a class="ci-btn ci-btn-primary" href="{{ path('admin_classrooms_show', {id: classroom.id}) }}" title="Voir">
  469. <i class="fa fa-eye"></i> Voir
  470. </a>
  471. {% if is_granted('ROLE_ADMIN') %}
  472. <a class="ci-btn ci-btn-warning" href="{{ path('admin_classrooms_edit', {id: classroom.id}) }}" title="Modifier">
  473. <i class="fa fa-pencil"></i>
  474. </a>
  475. {% if seq > 0 %}
  476. <a class="ci-btn" href="{{ path('admin_classrooms_recapitulatif', {room: classroom.id, seq: seq}) }}" title="Récapitulatif PDF">
  477. <i class="fa fa-file-pdf-o"></i>
  478. </a>
  479. {% endif %}
  480. <form method="post" action="{{ path('admin_classrooms_delete', {id: classroom.id}) }}" onsubmit="return confirm('Supprimer cette classe ?')" style="display:inline">
  481. <input type="hidden" name="_method" value="DELETE">
  482. <button class="ci-btn ci-btn-danger" type="submit" title="Supprimer">
  483. <i class="fa fa-trash"></i>
  484. </button>
  485. </form>
  486. {% endif %}
  487. </div>
  488. </td>
  489. </tr>
  490. {% endif %}
  491. {% endfor %}
  492. </tbody>
  493. </table>
  494. </div>
  496. {# ── Pagination ────────────────────────────────────────────── #}
  497. {% if total_pages > 1 %}
  498. <div class="ci-pagination">
  499. <div class="ci-pagination__info">
  500. Page {{ current_page }} sur {{ total_pages }} — {{ classrooms|length }} classe{{ classrooms|length > 1 ? 's' : '' }}
  501. </div>
  502. <ul class="ci-pager">
  503. <li class="{{ current_page <= 1 ? 'disabled' : '' }}">
  504. {% if current_page > 1 %}
  505. <a href="?page={{ current_page - 1 }}"><i class="fa fa-chevron-left"></i></a>
  506. {% else %}
  507. <span><i class="fa fa-chevron-left"></i></span>
  508. {% endif %}
  509. </li>
  510. {% for p in 1..total_pages %}
  511. {% if p == current_page %}
  512. <li class="active"><span>{{ p }}</span></li>
  513. {% elseif p == 1 or p == total_pages or (p >= current_page - 2 and p <= current_page + 2) %}
  514. <li><a href="?page={{ p }}">{{ p }}</a></li>
  515. {% elseif p == current_page - 3 or p == current_page + 3 %}
  516. <li><span style="border:none;background:transparent">…</span></li>
  517. {% endif %}
  518. {% endfor %}
  519. <li class="{{ current_page >= total_pages ? 'disabled' : '' }}">
  520. {% if current_page < total_pages %}
  521. <a href="?page={{ current_page + 1 }}"><i class="fa fa-chevron-right"></i></a>
  522. {% else %}
  523. <span><i class="fa fa-chevron-right"></i></span>
  524. {% endif %}
  525. </li>
  526. </ul>
  527. </div>
  528. {% else %}
  529. <div class="ci-pagination">
  530. <div class="ci-pagination__info">{{ classrooms|length }} classe{{ classrooms|length > 1 ? 's' : '' }} au total</div>
  531. </div>
  532. {% endif %}
  534. {% endif %}
  535. </div>
  537. </div>
  538. {% endblock %}