|
@@ -1,327 +1,160 @@
|
|
|
import 'package:flutter/material.dart';
|
|
|
-import 'package:provider/provider.dart';
|
|
|
-import 'package:turquessa_mesas_hoster/core/models/mesa_model.dart';
|
|
|
import 'package:turquessa_mesas_hoster/utils/widgets/custom_appbar.dart';
|
|
|
-import 'package:turquessa_mesas_hoster/utils/widgets/navigation_rail.dart';
|
|
|
-
|
|
|
-import '../../../utils/widgets/ordenes_card.dart';
|
|
|
-import '../../viewmodels/viewmodels.dart';
|
|
|
+import 'package:turquessa_mesas_hoster/mvvm/views/home/categorias_navbar.dart';
|
|
|
|
|
|
class HomeScreen extends StatefulWidget {
|
|
|
const HomeScreen({super.key});
|
|
|
|
|
|
@override
|
|
|
- Formulario createState() => Formulario();
|
|
|
+ State<HomeScreen> createState() => _HomeScreenState();
|
|
|
}
|
|
|
|
|
|
-class Formulario extends State<HomeScreen> {
|
|
|
- int _selectedIndex = 0;
|
|
|
+class _HomeScreenState extends State<HomeScreen> {
|
|
|
@override
|
|
|
void initState() {
|
|
|
super.initState();
|
|
|
- final mesaViewModel = Provider.of<MesaViewModel>(context, listen: false);
|
|
|
-
|
|
|
- WidgetsBinding.instance.addPostFrameCallback((_) async {
|
|
|
- Provider.of<ProductoViewModel>(context, listen: false)
|
|
|
- .sincronizarProductosYCategorias();
|
|
|
+ }
|
|
|
|
|
|
- await mesaViewModel.sincronizarMesas();
|
|
|
- await mesaViewModel.fetchLocal();
|
|
|
- });
|
|
|
+ handleTap() {
|
|
|
+ print('Tapped');
|
|
|
}
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context) {
|
|
|
- final mesaViewModel = Provider.of<MesaViewModel>(context);
|
|
|
- final loginViewModel = Provider.of<LoginViewModel>(context);
|
|
|
- var _selectedIndex;
|
|
|
return Scaffold(
|
|
|
- backgroundColor: Colors.grey.shade200,
|
|
|
- appBar: AppBar(
|
|
|
- title: const CustomAppbar(),
|
|
|
- ),
|
|
|
- body: Container(
|
|
|
- decoration: const BoxDecoration(
|
|
|
- gradient: LinearGradient(
|
|
|
- begin: Alignment.topCenter,
|
|
|
- end: Alignment.bottomCenter,
|
|
|
- colors: [
|
|
|
- Color(0xFFE0F7FA),
|
|
|
- Color(0xFFB2EBF2),
|
|
|
- Color(0xFF80DEEA),
|
|
|
- Color(0xFF4DD0E1),
|
|
|
- ],
|
|
|
- ),
|
|
|
- ),
|
|
|
- child: Row(
|
|
|
+ backgroundColor: Colors.white,
|
|
|
+ body: Column(
|
|
|
children: [
|
|
|
- CustomNavigationRail(selectedIndex: _selectedIndex),
|
|
|
- Expanded(
|
|
|
- child: Center(
|
|
|
- child: Container(
|
|
|
- decoration: const BoxDecoration(
|
|
|
- color: Colors.white,
|
|
|
- ),
|
|
|
- child: GridView.builder(
|
|
|
- gridDelegate:
|
|
|
- const SliverGridDelegateWithFixedCrossAxisCount(
|
|
|
- crossAxisCount: 4,
|
|
|
- childAspectRatio: 1.0,
|
|
|
- crossAxisSpacing: 10.0,
|
|
|
- mainAxisSpacing: 10.0,
|
|
|
- ),
|
|
|
- padding: const EdgeInsets.all(10),
|
|
|
- itemCount: mesaViewModel.mesas.length,
|
|
|
- itemBuilder: (context, index) {
|
|
|
- final mesa = mesaViewModel.mesas[index];
|
|
|
- return GestureDetector(
|
|
|
- onTap: () {
|
|
|
- setState(() {
|
|
|
- mesaViewModel.selectMesa(mesa);
|
|
|
- });
|
|
|
- },
|
|
|
- child: TableCard(
|
|
|
- mesa: mesa,
|
|
|
- ),
|
|
|
- );
|
|
|
- },
|
|
|
- ),
|
|
|
+ Container(
|
|
|
+ height: 120,
|
|
|
+ width: double.infinity,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ image: DecorationImage(
|
|
|
+ image: Image.asset('assets/Turquessa.png').image,
|
|
|
+ fit: BoxFit.cover,
|
|
|
),
|
|
|
),
|
|
|
),
|
|
|
- if (mesaViewModel.selectedMesa != null)
|
|
|
- Expanded(
|
|
|
- child: Container(
|
|
|
- margin: const EdgeInsets.symmetric(horizontal: 10),
|
|
|
- decoration: BoxDecoration(
|
|
|
- color: Colors.white,
|
|
|
- borderRadius: BorderRadius.circular(10),
|
|
|
- boxShadow: [
|
|
|
- BoxShadow(
|
|
|
- color: Colors.grey.withOpacity(0.2),
|
|
|
- blurRadius: 5,
|
|
|
- spreadRadius: 1,
|
|
|
- )
|
|
|
- ],
|
|
|
- ),
|
|
|
- child: TablaDetalles(
|
|
|
- status: EstadoPedido.disponible,
|
|
|
- table: mesaViewModel.selectedMesa ??
|
|
|
- Mesa(
|
|
|
- activa: false,
|
|
|
- id: 0,
|
|
|
- nombre: 'Mesa sin nombre',
|
|
|
- estado: EstadoPedido.disponible)),
|
|
|
- )),
|
|
|
- ],
|
|
|
- ),
|
|
|
- ),
|
|
|
- );
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-class TablaDetalles extends StatelessWidget {
|
|
|
- final Mesa table;
|
|
|
- final EstadoPedido status;
|
|
|
-
|
|
|
- const TablaDetalles({
|
|
|
- Key? key,
|
|
|
- required this.table,
|
|
|
- required this.status,
|
|
|
- }) : super(key: key);
|
|
|
-
|
|
|
- @override
|
|
|
- Widget build(BuildContext context) {
|
|
|
- return Container(
|
|
|
- padding: const EdgeInsets.all(10),
|
|
|
- decoration: BoxDecoration(
|
|
|
- color: Colors.white,
|
|
|
- boxShadow: [
|
|
|
- BoxShadow(
|
|
|
- color: Colors.grey.withOpacity(0.2),
|
|
|
- blurRadius: 5,
|
|
|
- spreadRadius: 1,
|
|
|
- )
|
|
|
- ],
|
|
|
- ),
|
|
|
- child: Column(
|
|
|
- children: [
|
|
|
- // Header
|
|
|
- Container(
|
|
|
- padding: const EdgeInsets.all(16),
|
|
|
- decoration: BoxDecoration(
|
|
|
- color: table.activa! ? Colors.blue : Colors.grey,
|
|
|
- borderRadius:
|
|
|
- const BorderRadius.vertical(top: Radius.circular(10)),
|
|
|
- ),
|
|
|
- child: Row(
|
|
|
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
|
- children: [
|
|
|
- Row(
|
|
|
- children: [
|
|
|
- const Icon(Icons.table_restaurant,
|
|
|
- color: Colors.white, size: 24),
|
|
|
- const SizedBox(width: 8),
|
|
|
- Text(
|
|
|
- table.nombre ?? 'Mesa sin nombre',
|
|
|
- style: const TextStyle(
|
|
|
- color: Colors.white,
|
|
|
- fontSize: 20,
|
|
|
- fontWeight: FontWeight.bold,
|
|
|
- ),
|
|
|
+ Container(
|
|
|
+ color: Color.fromARGB(255, 47, 208, 229),
|
|
|
+ padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Container(
|
|
|
+ width: 80,
|
|
|
+ height: 80,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: Colors.white,
|
|
|
+ borderRadius: BorderRadius.circular(12),
|
|
|
+ ),
|
|
|
+ child: Center(
|
|
|
+ child: Image.asset('assets/Turquessa.png'),
|
|
|
),
|
|
|
- ],
|
|
|
- ),
|
|
|
- Container(
|
|
|
- padding:
|
|
|
- const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
|
- decoration: BoxDecoration(
|
|
|
- color: Colors.white.withOpacity(0.2),
|
|
|
- borderRadius: BorderRadius.circular(20),
|
|
|
),
|
|
|
- child: Text(
|
|
|
- table.activa! ? 'Activa' : 'Inactiva',
|
|
|
- style: const TextStyle(
|
|
|
- color: Colors.white,
|
|
|
+ const SizedBox(width: 20),
|
|
|
+ const Text(
|
|
|
+ 'Turquessa',
|
|
|
+ style: TextStyle(
|
|
|
+ color: Colors.black,
|
|
|
+ fontSize: 26,
|
|
|
fontWeight: FontWeight.bold,
|
|
|
),
|
|
|
),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
- ),
|
|
|
- // Contenido scrolleable
|
|
|
- Expanded(
|
|
|
- child: SingleChildScrollView(
|
|
|
- child: Padding(
|
|
|
- padding: const EdgeInsets.symmetric(horizontal: 10),
|
|
|
- child: Column(
|
|
|
- crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
- children: [
|
|
|
- Text(
|
|
|
- 'ID: ${table.id}',
|
|
|
- style: const TextStyle(fontSize: 16),
|
|
|
+ const SizedBox(width: 15),
|
|
|
+ Container(
|
|
|
+ padding: const EdgeInsets.all(8),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ shape: BoxShape.circle,
|
|
|
+ border: Border.all(color: Colors.white, width: 2),
|
|
|
),
|
|
|
- const SizedBox(height: 16),
|
|
|
- Row(
|
|
|
- children: [
|
|
|
- const Text('Estado: '),
|
|
|
- Text(
|
|
|
- status.toString().split('.').last,
|
|
|
- style: const TextStyle(
|
|
|
- fontWeight: FontWeight.bold,
|
|
|
- color: Colors.blue,
|
|
|
- ),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
- // const SizedBox(height: 16),
|
|
|
- // IconDataByStatus(status: status),
|
|
|
- const SizedBox(height: 16),
|
|
|
- IconButton.outlined(
|
|
|
- style: const ButtonStyle(
|
|
|
- backgroundColor:
|
|
|
- MaterialStatePropertyAll(Colors.lightGreen)),
|
|
|
- onPressed: () {
|
|
|
- Navigator.of(context).pushNamed('creacion-pedido');
|
|
|
- },
|
|
|
- icon: const Icon(
|
|
|
- Icons.start_rounded,
|
|
|
- color: Colors.white,
|
|
|
- ))
|
|
|
- // const OrdenesScreen(),
|
|
|
- ],
|
|
|
- ),
|
|
|
+ child:
|
|
|
+ const Icon(Icons.info, color: Colors.white, size: 20),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
),
|
|
|
),
|
|
|
- ),
|
|
|
- ],
|
|
|
- ),
|
|
|
- );
|
|
|
+ const CategoriasNavBar(),
|
|
|
+ // Burger menu items
|
|
|
+ Expanded(
|
|
|
+ child: ListView(
|
|
|
+ children: [
|
|
|
+ _buildBurgerItem(
|
|
|
+ "1. HAMBURGUESA SENCILLA",
|
|
|
+ "QUESO, LECHUGA, TOMATE, CEBOLLA, PEPINILLO, MAYONESA, KETCHUP Y ...",
|
|
|
+ "MXN 115.00",
|
|
|
+ "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/iwf7MocBl2Kb5Wzzl7xHjPyQ99OljQH.jpg"),
|
|
|
+ const Divider(color: Colors.grey, height: 1),
|
|
|
+ _buildBurgerItem(
|
|
|
+ "2. SINGLE BURGER",
|
|
|
+ "HAMBURGUESA SOLA",
|
|
|
+ "MXN 90.00",
|
|
|
+ "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/qgoqrqz8pO9UBN7P412Cxtz_2n2LQy_O.jpg"),
|
|
|
+ const Divider(color: Colors.grey, height: 1),
|
|
|
+ _buildBurgerItem(
|
|
|
+ "3. BACON BURGER",
|
|
|
+ "HAMBURGUESA SENCILLA MÁS TOCINO. PAPAS Y SODA",
|
|
|
+ "MXN 130.00",
|
|
|
+ "https://pos.api.turquessacoffee.com/assets/recurso/2024/10/Z6GgNgittxZpqN7qj6ub9_sKHZxUn8i0.png"),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ));
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-class TableCard extends StatelessWidget {
|
|
|
- final Mesa mesa;
|
|
|
- const TableCard({
|
|
|
- super.key,
|
|
|
- required this.mesa,
|
|
|
- });
|
|
|
-
|
|
|
- @override
|
|
|
- Widget build(BuildContext context) {
|
|
|
- final status = mesa.estado ?? EstadoPedido.disponible;
|
|
|
-
|
|
|
- Color backgroundColor;
|
|
|
- Color iconColor;
|
|
|
- IconData icon;
|
|
|
- Color cardColor;
|
|
|
-
|
|
|
- switch (status) {
|
|
|
- case EstadoPedido.disponible:
|
|
|
- backgroundColor = const Color.fromARGB(255, 220, 252, 232);
|
|
|
- iconColor = Colors.green;
|
|
|
- icon = Icons.table_restaurant_rounded;
|
|
|
- cardColor = const Color.fromARGB(255, 220, 252, 232);
|
|
|
- break;
|
|
|
- case EstadoPedido.surtida:
|
|
|
- backgroundColor = const Color.fromARGB(255, 220, 234, 254);
|
|
|
- iconColor = Colors.blue;
|
|
|
- icon = Icons.coffee_rounded;
|
|
|
- cardColor = const Color.fromARGB(255, 220, 234, 254);
|
|
|
- break;
|
|
|
- case EstadoPedido.preparacion:
|
|
|
- backgroundColor = const Color.fromARGB(255, 243, 232, 255);
|
|
|
- iconColor = Colors.deepPurple;
|
|
|
- icon = Icons.kitchen_rounded;
|
|
|
- cardColor = const Color.fromARGB(255, 243, 232, 255);
|
|
|
- break;
|
|
|
- case EstadoPedido.cobrado:
|
|
|
- backgroundColor = const Color.fromARGB(255, 255, 238, 213);
|
|
|
- iconColor = Colors.amber;
|
|
|
- icon = Icons.attach_money_rounded;
|
|
|
- cardColor = const Color.fromARGB(255, 255, 238, 213);
|
|
|
- break;
|
|
|
- default:
|
|
|
- backgroundColor = Colors.grey.shade200;
|
|
|
- iconColor = Colors.grey;
|
|
|
- icon = Icons.settings;
|
|
|
- cardColor = Colors.white;
|
|
|
- break;
|
|
|
- }
|
|
|
-
|
|
|
- return Card(
|
|
|
- color: cardColor,
|
|
|
- child: Column(
|
|
|
- mainAxisAlignment: MainAxisAlignment.center,
|
|
|
- children: [
|
|
|
- IconButton(
|
|
|
- onPressed: () {
|
|
|
- if (status == EstadoPedido.disponible) {
|
|
|
- final mesaViewModel =
|
|
|
- Provider.of<MesaViewModel>(context, listen: false);
|
|
|
- mesaViewModel.CambiarEstadoPedidoMesa(EstadoPedido.preparacion);
|
|
|
- }
|
|
|
- },
|
|
|
- iconSize: 48,
|
|
|
- style: ButtonStyle(
|
|
|
- backgroundColor: MaterialStateProperty.all(backgroundColor),
|
|
|
- ),
|
|
|
- icon: Icon(icon, color: iconColor),
|
|
|
+Widget _buildBurgerItem(
|
|
|
+ String title, String description, String price, String imageUrl) {
|
|
|
+ return Padding(
|
|
|
+ padding: const EdgeInsets.symmetric(vertical: 20),
|
|
|
+ child: Row(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ const SizedBox(width: 20),
|
|
|
+ ClipRRect(
|
|
|
+ borderRadius: BorderRadius.circular(8),
|
|
|
+ child: Image.network(
|
|
|
+ imageUrl,
|
|
|
+ width: 120,
|
|
|
+ height: 120,
|
|
|
+ fit: BoxFit.cover,
|
|
|
),
|
|
|
- const SizedBox(height: 8),
|
|
|
- Text(
|
|
|
- mesa.nombre ?? 'Mesa sin nombre',
|
|
|
- style: TextStyle(
|
|
|
- color: status == EstadoPedido.disponible
|
|
|
- ? Colors.black
|
|
|
- : Colors.black87,
|
|
|
- fontSize: 20,
|
|
|
- fontWeight: FontWeight.w500,
|
|
|
- ),
|
|
|
- )
|
|
|
- ],
|
|
|
- ),
|
|
|
- );
|
|
|
- }
|
|
|
+ ),
|
|
|
+ const SizedBox(width: 20),
|
|
|
+ Expanded(
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ Text(
|
|
|
+ title,
|
|
|
+ style: const TextStyle(
|
|
|
+ color: Colors.black,
|
|
|
+ fontSize: 22,
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 10),
|
|
|
+ Text(
|
|
|
+ description,
|
|
|
+ style: const TextStyle(
|
|
|
+ color: Colors.grey,
|
|
|
+ fontSize: 16,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ const SizedBox(height: 20),
|
|
|
+ Text(
|
|
|
+ price,
|
|
|
+ style: const TextStyle(
|
|
|
+ color: Colors.black,
|
|
|
+ fontSize: 24,
|
|
|
+ fontWeight: FontWeight.bold,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ const SizedBox(width: 20),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
}
|