index.php 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. <?php
  2. /**
  3. * Vue de la liste des projets (cartes)
  4. */
  5. include __DIR__ . '/../partials/header.php';
  6. ?>
  7. <main class="main-content">
  8. <div class="container-fluid">
  9. <div class="row">
  10. <div class="col-12">
  11. <!-- En-tête de la page -->
  12. <div class="d-flex align-items-center justify-content-between mb-4">
  13. <div>
  14. <h1 class="h3 mb-0">
  15. <i class="bi bi-folder me-2"></i>Mes projets
  16. </h1>
  17. <p class="text-muted mb-0">Gérez vos cartes et projets</p>
  18. </div>
  19. <div>
  20. <a href="/projects/new" class="btn btn-primary">
  21. <i class="bi bi-plus-circle me-1"></i>Nouveau projet
  22. </a>
  23. </div>
  24. </div>
  25. <!-- Statistiques globales -->
  26. <div class="row mb-4">
  27. <div class="col-md-3">
  28. <div class="card bg-primary text-white">
  29. <div class="card-body">
  30. <div class="d-flex align-items-center">
  31. <div class="flex-grow-1">
  32. <h6 class="card-title mb-1">Total cartes</h6>
  33. <h4 class="mb-0"><?php echo $stats['total_maps']; ?></h4>
  34. </div>
  35. <div>
  36. <i class="bi bi-map h1 mb-0 opacity-75"></i>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="col-md-3">
  43. <div class="card bg-success text-white">
  44. <div class="card-body">
  45. <div class="d-flex align-items-center">
  46. <div class="flex-grow-1">
  47. <h6 class="card-title mb-1">Dimensions moyennes</h6>
  48. <h4 class="mb-0"><?php echo $stats['average_width']; ?> × <?php echo $stats['average_height']; ?></h4>
  49. </div>
  50. <div>
  51. <i class="bi bi-aspect-ratio h1 mb-0 opacity-75"></i>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="col-md-6">
  58. <div class="card bg-info text-white">
  59. <div class="card-body">
  60. <div class="d-flex align-items-center">
  61. <div class="flex-grow-1">
  62. <h6 class="card-title mb-1">Dernière carte créée</h6>
  63. <?php if ($stats['latest_map']): ?>
  64. <h5 class="mb-0"><?php echo htmlspecialchars($stats['latest_map']['name']); ?></h5>
  65. <small><?php echo date('d/m/Y H:i', strtotime($stats['latest_map']['created_at'])); ?></small>
  66. <?php else: ?>
  67. <h5 class="mb-0">Aucune carte</h5>
  68. <?php endif; ?>
  69. </div>
  70. <div>
  71. <i class="bi bi-clock-history h1 mb-0 opacity-75"></i>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <!-- Liste des cartes -->
  79. <div class="card">
  80. <div class="card-header">
  81. <h5 class="card-title mb-0">
  82. <i class="bi bi-grid me-2"></i>Vos cartes
  83. </h5>
  84. </div>
  85. <div class="card-body">
  86. <?php if (empty($maps)): ?>
  87. <!-- Aucune carte -->
  88. <div class="text-center py-5">
  89. <i class="bi bi-folder-x display-1 text-muted mb-3"></i>
  90. <h5 class="text-muted">Aucune carte trouvée</h5>
  91. <p class="text-muted">Vous n'avez encore créé aucune carte. Commencez par créer votre premier projet !</p>
  92. <a href="/projects/new" class="btn btn-primary">
  93. <i class="bi bi-plus-circle me-1"></i>Créer ma première carte
  94. </a>
  95. </div>
  96. <?php else: ?>
  97. <!-- Grille des cartes -->
  98. <div class="row g-4">
  99. <?php foreach ($maps as $map): ?>
  100. <div class="col-lg-4 col-md-6">
  101. <div class="card h-100 map-card" data-map-id="<?php echo $map['id']; ?>">
  102. <div class="card-body d-flex flex-column">
  103. <!-- En-tête de la carte -->
  104. <div class="d-flex align-items-start justify-content-between mb-3">
  105. <div class="flex-grow-1">
  106. <h6 class="card-title mb-1">
  107. <?php echo htmlspecialchars($map['name']); ?>
  108. <small class="text-muted fw-normal">(ID: <?php echo $map['id']; ?>)</small>
  109. </h6>
  110. <small class="text-muted">
  111. <i class="bi bi-calendar me-1"></i>
  112. <?php echo date('d/m/Y H:i', strtotime($map['created_at'])); ?>
  113. </small>
  114. </div>
  115. <div class="dropdown">
  116. <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown">
  117. <i class="bi bi-three-dots-vertical"></i>
  118. </button>
  119. <ul class="dropdown-menu">
  120. <li>
  121. <a class="dropdown-item load-map-btn" href="#" data-map-id="<?php echo $map['id']; ?>">
  122. <i class="bi bi-folder-open me-2"></i>Charger
  123. </a>
  124. </li>
  125. <li>
  126. <a class="dropdown-item" href="#" onclick="duplicateMap(<?php echo $map['id']; ?>)">
  127. <i class="bi bi-copy me-2"></i>Dupliquer
  128. </a>
  129. </li>
  130. <li>
  131. <a class="dropdown-item" href="#" onclick="exportMap(<?php echo $map['id']; ?>)">
  132. <i class="bi bi-download me-2"></i>Exporter
  133. </a>
  134. </li>
  135. <li><hr class="dropdown-divider"></li>
  136. <li>
  137. <a class="dropdown-item text-danger" href="#" onclick="deleteMap(<?php echo $map['id']; ?>, '<?php echo htmlspecialchars($map['name']); ?>')">
  138. <i class="bi bi-trash me-2"></i>Supprimer
  139. </a>
  140. </li>
  141. </ul>
  142. </div>
  143. </div>
  144. <!-- Informations de la carte -->
  145. <div class="mb-3">
  146. <div class="row text-center">
  147. <div class="col-6">
  148. <small class="text-muted d-block">Dimensions</small>
  149. <strong><?php echo $map['width']; ?> × <?php echo $map['height']; ?></strong>
  150. </div>
  151. <div class="col-6">
  152. <small class="text-muted d-block">Taille</small>
  153. <strong><?php echo number_format($map['width'] * $map['height']); ?> cases</strong>
  154. </div>
  155. </div>
  156. </div>
  157. <!-- Description -->
  158. <?php if (!empty($map['description'])): ?>
  159. <p class="card-text small text-muted mb-3">
  160. <?php echo htmlspecialchars(substr($map['description'], 0, 100)); ?>
  161. <?php if (strlen($map['description']) > 100): ?>...<?php endif; ?>
  162. </p>
  163. <?php endif; ?>
  164. <!-- Actions principales -->
  165. <div class="mt-auto">
  166. <div class="d-grid gap-2">
  167. <button class="btn btn-primary btn-sm load-map-btn" data-map-id="<?php echo $map['id']; ?>">
  168. <i class="bi bi-folder-open me-1"></i>Charger cette carte
  169. </button>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. <?php endforeach; ?>
  176. </div>
  177. <!-- Pagination -->
  178. <div class="d-flex justify-content-center mt-4">
  179. <nav aria-label="Navigation des cartes">
  180. <ul class="pagination">
  181. <li class="page-item disabled">
  182. <span class="page-link">Précédent</span>
  183. </li>
  184. <li class="page-item active">
  185. <span class="page-link">1</span>
  186. </li>
  187. <li class="page-item disabled">
  188. <span class="page-link">Suivant</span>
  189. </li>
  190. </ul>
  191. </nav>
  192. </div>
  193. <?php endif; ?>
  194. </div>
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </main>
  200. <!-- Modal de confirmation de suppression -->
  201. <div class="modal fade" id="deleteModal" tabindex="-1">
  202. <div class="modal-dialog">
  203. <div class="modal-content">
  204. <div class="modal-header">
  205. <h5 class="modal-title">
  206. <i class="bi bi-exclamation-triangle text-warning me-2"></i>Confirmer la suppression
  207. </h5>
  208. <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
  209. </div>
  210. <div class="modal-body">
  211. <p>Êtes-vous sûr de vouloir supprimer la carte <strong id="deleteMapName"></strong> ?</p>
  212. <p class="text-muted small">Cette action est irréversible.</p>
  213. </div>
  214. <div class="modal-footer">
  215. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
  216. <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
  217. </div>
  218. </div>
  219. </div>
  220. </div>
  221. <script>
  222. // Gestionnaire pour charger une carte
  223. document.addEventListener('DOMContentLoaded', function() {
  224. // Gestionnaire pour les boutons "Charger cette carte"
  225. document.querySelectorAll('.load-map-btn').forEach(button => {
  226. button.addEventListener('click', function(e) {
  227. e.preventDefault();
  228. const mapId = this.getAttribute('data-map-id');
  229. // Redirection vers l'accueil avec l'ID de la carte à charger
  230. window.location.href = '/?load=' + mapId;
  231. });
  232. });
  233. });
  234. // Fonction pour dupliquer une carte
  235. function duplicateMap(mapId) {
  236. if (confirm('Voulez-vous créer une copie de cette carte ?')) {
  237. // TODO: Implémenter la duplication via AJAX
  238. alert('Fonction de duplication à implémenter');
  239. }
  240. }
  241. // Fonction pour exporter une carte
  242. function exportMap(mapId) {
  243. // TODO: Implémenter l'export
  244. alert('Fonction d\'export à implémenter');
  245. }
  246. // Fonction pour supprimer une carte
  247. function deleteMap(mapId, mapName) {
  248. document.getElementById('deleteMapName').textContent = mapName;
  249. document.getElementById('confirmDeleteBtn').onclick = function() {
  250. // TODO: Implémenter la suppression via AJAX
  251. alert('Fonction de suppression à implémenter');
  252. document.getElementById('deleteModal').querySelector('[data-bs-dismiss="modal"]').click();
  253. };
  254. const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
  255. modal.show();
  256. }
  257. </script>
  258. <?php
  259. include __DIR__ . '/../partials/footer.php';
  260. ?>