You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
657 lines
23 KiB
657 lines
23 KiB
import 'package:flutter/foundation.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:http/http.dart' as http;
|
|
import 'dart:convert';
|
|
|
|
import 'menu.dart'; // Assure-toi que ce fichier contient la page MenuPage
|
|
|
|
class TableData {
|
|
final int id;
|
|
final String nom;
|
|
final int capacity;
|
|
final String status;
|
|
|
|
TableData({
|
|
required this.id,
|
|
required this.nom,
|
|
required this.capacity,
|
|
required this.status,
|
|
});
|
|
|
|
factory TableData.fromJson(Map<String, dynamic> json) {
|
|
return TableData(
|
|
id: json['id'],
|
|
nom: json['nom'],
|
|
capacity: json['capacity'],
|
|
status: json['status'],
|
|
);
|
|
}
|
|
}
|
|
|
|
class TablesScreen extends StatefulWidget {
|
|
const TablesScreen({super.key});
|
|
|
|
@override
|
|
// ignore: library_private_types_in_public_api
|
|
_TablesScreenState createState() => _TablesScreenState();
|
|
}
|
|
|
|
class _TablesScreenState extends State<TablesScreen> {
|
|
List<TableData> tables = [];
|
|
bool isLoading = true;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
fetchTables();
|
|
}
|
|
|
|
Future<void> fetchTables() async {
|
|
try {
|
|
final url = Uri.parse("https://restaurant.careeracademy.mg/api/tables");
|
|
final response = await http.get(url);
|
|
|
|
if (response.statusCode == 200) {
|
|
final List<dynamic> data = json.decode(response.body)['data'];
|
|
setState(() {
|
|
tables = data.map((json) => TableData.fromJson(json)).toList();
|
|
isLoading = false;
|
|
});
|
|
} else {
|
|
setState(() => isLoading = false);
|
|
if (kDebugMode) {
|
|
print('Erreur API: ${response.statusCode}');
|
|
}
|
|
}
|
|
} catch (e) {
|
|
setState(() => isLoading = false);
|
|
if (kDebugMode) {
|
|
print('Erreur: $e');
|
|
}
|
|
}
|
|
}
|
|
|
|
Future<void> _addTable() async {
|
|
// Add table logic
|
|
final result = await showDialog<Map<String, dynamic>>(
|
|
context: context,
|
|
builder: (context) => const _AddEditTableDialog(),
|
|
);
|
|
|
|
if (result != null) {
|
|
// Call API to add table
|
|
_callAddTableAPI(result);
|
|
}
|
|
}
|
|
|
|
Future<void> _callAddTableAPI(Map<String, dynamic> tableData) async {
|
|
try {
|
|
final url = Uri.parse("https://restaurant.careeracademy.mg/api/tables");
|
|
final response = await http.post(
|
|
url,
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: json.encode(tableData),
|
|
);
|
|
|
|
if (response.statusCode == 201) {
|
|
fetchTables(); // Refresh the list
|
|
// ignore: use_build_context_synchronously
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Table ajoutée avec succès')),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
ScaffoldMessenger.of(
|
|
// ignore: use_build_context_synchronously
|
|
context,
|
|
).showSnackBar(SnackBar(content: Text('Erreur: $e')));
|
|
}
|
|
}
|
|
|
|
Future<void> _editTable(TableData table) async {
|
|
final result = await showDialog<Map<String, dynamic>>(
|
|
context: context,
|
|
builder: (context) => _AddEditTableDialog(table: table),
|
|
);
|
|
|
|
if (result != null) {
|
|
_callEditTableAPI(table.id, result);
|
|
}
|
|
}
|
|
|
|
Future<void> _callEditTableAPI(int id, Map<String, dynamic> tableData) async {
|
|
try {
|
|
final url = Uri.parse(
|
|
"https://restaurant.careeracademy.mg/api/tables/$id",
|
|
);
|
|
final response = await http.put(
|
|
url,
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: json.encode(tableData),
|
|
);
|
|
|
|
if (response.statusCode == 200) {
|
|
fetchTables();
|
|
// ignore: use_build_context_synchronously
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Table modifiée avec succès')),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
ScaffoldMessenger.of(
|
|
// ignore: use_build_context_synchronously
|
|
context,
|
|
).showSnackBar(SnackBar(content: Text('Erreur: $e')));
|
|
}
|
|
}
|
|
|
|
Future<void> _deleteTable(int id) async {
|
|
final confirm = await showDialog<bool>(
|
|
context: context,
|
|
builder:
|
|
(context) => AlertDialog(
|
|
title: const Text('Confirmer la suppression'),
|
|
content: const Text(
|
|
'Êtes-vous sûr de vouloir supprimer cette table?',
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context, false),
|
|
child: const Text('Annuler'),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: () => Navigator.pop(context, true),
|
|
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
|
|
child: const Text('Supprimer'),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
|
|
if (confirm == true) {
|
|
_callDeleteTableAPI(id);
|
|
}
|
|
}
|
|
|
|
Future<void> _callDeleteTableAPI(int id) async {
|
|
try {
|
|
final url = Uri.parse(
|
|
"https://restaurant.careeracademy.mg/api/tables/$id",
|
|
);
|
|
final response = await http.delete(url);
|
|
|
|
if (response.statusCode == 200) {
|
|
fetchTables();
|
|
// ignore: use_build_context_synchronously
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(content: Text('Table supprimée avec succès')),
|
|
);
|
|
}
|
|
} catch (e) {
|
|
ScaffoldMessenger.of(
|
|
// ignore: use_build_context_synchronously
|
|
context,
|
|
).showSnackBar(SnackBar(content: Text('Erreur: $e')));
|
|
}
|
|
}
|
|
|
|
Color getStatusColor(String status) {
|
|
switch (status) {
|
|
case 'available':
|
|
return Colors.green;
|
|
case 'occupied':
|
|
return Colors.orange;
|
|
case 'reserved':
|
|
return Colors.orange;
|
|
default:
|
|
return Colors.grey;
|
|
}
|
|
}
|
|
|
|
String getStatusLabel(String status) {
|
|
switch (status) {
|
|
case 'available':
|
|
return 'Disponible';
|
|
case 'occupied':
|
|
return 'Occupée';
|
|
case 'reserved':
|
|
return 'Réservée';
|
|
default:
|
|
return 'Indisponible';
|
|
}
|
|
}
|
|
|
|
bool isTableSelectable(String status) {
|
|
return status == 'available';
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final screenWidth = MediaQuery.of(context).size.width;
|
|
final isDesktop = screenWidth >= 768;
|
|
|
|
int crossAxisCount = 1;
|
|
if (screenWidth > 1200) {
|
|
crossAxisCount = 4;
|
|
} else if (screenWidth > 800) {
|
|
crossAxisCount = 3;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
|
|
return Column(
|
|
children: [
|
|
// Header
|
|
Container(
|
|
color: Colors.white,
|
|
padding: const EdgeInsets.all(20),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 30),
|
|
const Text(
|
|
'Sélectionner une table',
|
|
style: TextStyle(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'Choisissez une table pour commencer une nouvelle commande',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: Colors.grey.shade600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Add button (desktop only)
|
|
if (isDesktop)
|
|
ElevatedButton.icon(
|
|
onPressed: _addTable,
|
|
icon: const Icon(Icons.add, size: 20),
|
|
label: const Text('Ajouter'),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.green.shade700,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 12,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Content - Reduced height
|
|
Expanded(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(12.0),
|
|
child: Column(
|
|
children: [
|
|
// Tables Grid - Reduced flex
|
|
Expanded(
|
|
flex: isDesktop ? 2 : 4, // Reduced from 3/4 to 2/4
|
|
child: GridView.builder(
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: crossAxisCount,
|
|
crossAxisSpacing: 12,
|
|
mainAxisSpacing: 12,
|
|
childAspectRatio:
|
|
isDesktop
|
|
? 0.8
|
|
: 0.6, // Modifié ici pour diminuer la taille
|
|
),
|
|
itemCount: tables.length,
|
|
itemBuilder: (context, index) {
|
|
final table = tables[index];
|
|
final isSelectable = isTableSelectable(table.status);
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(color: Colors.grey.shade200),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.05),
|
|
blurRadius: 5,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
// Desktop CRUD menu
|
|
if (isDesktop)
|
|
Positioned(
|
|
top: 8,
|
|
right: 8,
|
|
child: PopupMenuButton<String>(
|
|
icon: Icon(
|
|
Icons.more_vert,
|
|
size: 16,
|
|
color: Colors.grey.shade600,
|
|
),
|
|
onSelected: (value) {
|
|
switch (value) {
|
|
case 'edit':
|
|
_editTable(table);
|
|
break;
|
|
case 'delete':
|
|
_deleteTable(table.id);
|
|
break;
|
|
}
|
|
},
|
|
itemBuilder:
|
|
(context) => [
|
|
const PopupMenuItem(
|
|
value: 'edit',
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.edit, size: 16),
|
|
SizedBox(width: 8),
|
|
Text('Modifier'),
|
|
],
|
|
),
|
|
),
|
|
const PopupMenuItem(
|
|
value: 'delete',
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
Icons.delete,
|
|
size: 16,
|
|
color: Colors.red,
|
|
),
|
|
SizedBox(width: 8),
|
|
Text(
|
|
'Supprimer',
|
|
style: TextStyle(
|
|
color: Colors.red,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.all(16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8,
|
|
vertical: 4,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: getStatusColor(table.status),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
getStatusLabel(table.status),
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 8,
|
|
fontWeight: FontWeight.w100,
|
|
),
|
|
),
|
|
),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
table.nom,
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 16,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
|
|
// const Spacer(),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.people_outline,
|
|
size: 16,
|
|
color: Colors.grey.shade600,
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
'Capacité: ${table.capacity} personnes',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: Colors.grey.shade600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
// const Spacer(),
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed:
|
|
isSelectable
|
|
? () {
|
|
// Redirection vers MenuPage avec paramètres
|
|
Navigator.push(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder:
|
|
(context) => MenuPage(
|
|
tableId: table.id,
|
|
personne:
|
|
table.capacity,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
: null,
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor:
|
|
isSelectable
|
|
? Colors.green.shade700
|
|
: Colors.grey.shade300,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 8,
|
|
),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(
|
|
8,
|
|
),
|
|
),
|
|
),
|
|
|
|
child: Text(
|
|
isSelectable
|
|
? 'Sélectionner'
|
|
: 'Indisponible',
|
|
style: const TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
|
|
// Legend - Compact
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 16),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
_buildLegendItem('Disponible', Colors.green),
|
|
const SizedBox(width: 20),
|
|
_buildLegendItem('Occupée', Colors.orange),
|
|
const SizedBox(width: 20),
|
|
_buildLegendItem('Réservée', Colors.orange),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildLegendItem(String label, Color color) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
label,
|
|
style: TextStyle(fontSize: 13, color: Colors.grey.shade700),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
// Add/Edit Table Dialog
|
|
class _AddEditTableDialog extends StatefulWidget {
|
|
final TableData? table;
|
|
|
|
const _AddEditTableDialog({this.table});
|
|
|
|
@override
|
|
_AddEditTableDialogState createState() => _AddEditTableDialogState();
|
|
}
|
|
|
|
class _AddEditTableDialogState extends State<_AddEditTableDialog> {
|
|
final _formKey = GlobalKey<FormState>();
|
|
late TextEditingController _nomController;
|
|
late TextEditingController _capacityController;
|
|
String _selectedStatus = 'available';
|
|
|
|
final List<Map<String, String>> _statusOptions = [
|
|
{'value': 'available', 'label': 'Disponible'},
|
|
{'value': 'occupied', 'label': 'Occupée'},
|
|
{'value': 'reserved', 'label': 'Réservée'},
|
|
];
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_nomController = TextEditingController(text: widget.table?.nom ?? '');
|
|
_capacityController = TextEditingController(
|
|
text: widget.table?.capacity.toString() ?? '',
|
|
);
|
|
_selectedStatus = widget.table?.status ?? 'available';
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_nomController.dispose();
|
|
_capacityController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isEditing = widget.table != null;
|
|
return AlertDialog(
|
|
title: Text(isEditing ? 'Modifier une table' : 'Ajouter une table'),
|
|
content: Form(
|
|
key: _formKey,
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
TextFormField(
|
|
controller: _nomController,
|
|
decoration: const InputDecoration(labelText: 'Nom'),
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return 'Veuillez entrer un nom';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
TextFormField(
|
|
controller: _capacityController,
|
|
decoration: const InputDecoration(labelText: 'Capacité'),
|
|
keyboardType: TextInputType.number,
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return 'Veuillez entrer la capacité';
|
|
}
|
|
if (int.tryParse(value) == null) {
|
|
return 'Veuillez entrer un nombre valide';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
DropdownButtonFormField<String>(
|
|
value: _selectedStatus,
|
|
decoration: const InputDecoration(labelText: 'Statut'),
|
|
items:
|
|
_statusOptions.map((status) {
|
|
return DropdownMenuItem<String>(
|
|
value: status['value'],
|
|
child: Text(status['label']!),
|
|
);
|
|
}).toList(),
|
|
onChanged: (value) {
|
|
if (value != null) {
|
|
setState(() {
|
|
_selectedStatus = value;
|
|
});
|
|
}
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () => Navigator.pop(context),
|
|
child: const Text('Annuler'),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
if (_formKey.currentState!.validate()) {
|
|
final tableData = {
|
|
'nom': _nomController.text,
|
|
'capacity': int.parse(_capacityController.text),
|
|
'status': _selectedStatus,
|
|
};
|
|
Navigator.pop(context, tableData);
|
|
}
|
|
},
|
|
child: Text(isEditing ? 'Modifier' : 'Ajouter'),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|