Initial commit: Sistema Autoparts DB
- Base de datos SQLite con información de vehículos - Dashboard web con Flask y Bootstrap - Scripts de web scraping para RockAuto - Interfaz CLI para consultas - Documentación completa del proyecto Incluye: - 12 marcas de vehículos - 10,923 modelos - 10,919 especificaciones de motores - 12,075 combinaciones modelo-año-motor
This commit is contained in:
103
DASHBOARD_GUIDE.md
Normal file
103
DASHBOARD_GUIDE.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# Vehicle Database Dashboard - Complete Solution
|
||||
|
||||
## Overview
|
||||
|
||||
I have created a complete web-based dashboard for searching and filtering your vehicle database with the following components:
|
||||
|
||||
1. **Web Dashboard Interface** - A responsive, modern UI built with HTML, CSS, and JavaScript
|
||||
2. **Flask Backend** - API server that connects to your SQLite database
|
||||
3. **Filtering System** - Search by brand, model, year, and engine
|
||||
4. **Data Visualization** - Display vehicle details in an attractive card layout
|
||||
|
||||
## Features
|
||||
|
||||
- **Four-way Filtering**: Filter vehicles by brand, model, year, and engine type
|
||||
- **Responsive Design**: Works on desktop, tablet, and mobile devices
|
||||
- **Real-time Updates**: Filters update immediately when selections change
|
||||
- **Detailed Information**: Shows power, displacement, cylinders, fuel type, trim, drivetrain, and transmission
|
||||
- **Modern UI**: Bootstrap-based interface with cards, badges, and icons
|
||||
|
||||
## Architecture
|
||||
|
||||
### Frontend
|
||||
- `index.html`: Main dashboard page with Bootstrap styling
|
||||
- `dashboard.js`: JavaScript for UI interactions and API calls
|
||||
|
||||
### Backend
|
||||
- `server.py`: Flask application serving the dashboard and API
|
||||
- API endpoints for brands, models, years, engines, and vehicles
|
||||
|
||||
## How to Use
|
||||
|
||||
### Starting the Dashboard
|
||||
1. Navigate to the dashboard directory:
|
||||
```bash
|
||||
cd /home/Autopartes/dashboard
|
||||
```
|
||||
|
||||
2. Start the server:
|
||||
```bash
|
||||
python3 server.py
|
||||
```
|
||||
|
||||
3. Open your web browser and go to: `http://localhost:5000`
|
||||
|
||||
### Using the Dashboard
|
||||
1. On the left panel, use the dropdowns to select filters:
|
||||
- Brand: Select a vehicle manufacturer
|
||||
- Model: Select a model (updates based on selected brand)
|
||||
- Year: Select a production year
|
||||
- Engine: Select an engine type
|
||||
|
||||
2. Click "Search Vehicles" to apply filters
|
||||
|
||||
3. Results appear in the right panel with detailed information
|
||||
|
||||
4. Use "Reset Filters" to clear all selections
|
||||
|
||||
## API Endpoints
|
||||
|
||||
The dashboard uses these API endpoints:
|
||||
- `GET /api/brands` - Get all vehicle brands
|
||||
- `GET /api/models?brand=[brand]` - Get models for a specific brand
|
||||
- `GET /api/years` - Get all years
|
||||
- `GET /api/engines` - Get all engines
|
||||
- `GET /api/vehicles?[filters]` - Search vehicles with optional filters
|
||||
|
||||
## Files Created
|
||||
|
||||
```
|
||||
dashboard/
|
||||
├── index.html # Main dashboard page
|
||||
├── dashboard.js # Frontend JavaScript
|
||||
├── server.py # Flask backend
|
||||
├── requirements.txt # Python dependencies
|
||||
├── start_dashboard.sh # Startup script
|
||||
├── README.md # Documentation
|
||||
└── static/ # Static files directory (created by Flask)
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
You can customize the dashboard by:
|
||||
- Modifying the CSS styles in index.html
|
||||
- Adding more filters in the JavaScript
|
||||
- Changing the layout in index.html
|
||||
- Adding more vehicle details in the display
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- If the server won't start, ensure Flask is installed: `sudo apt-get install python3-flask`
|
||||
- If filters don't populate, check that your vehicle database has data
|
||||
- If the page doesn't load, verify that the database file exists at `../vehicle_database/vehicle_database.db`
|
||||
- Check the browser console for JavaScript errors
|
||||
- Check the terminal for server errors
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. Start the dashboard server
|
||||
2. Browse your vehicle data using the intuitive interface
|
||||
3. Add more data to your database using the manual input tools
|
||||
4. Customize the dashboard to meet your specific needs
|
||||
|
||||
The dashboard is now ready to use and provides a powerful interface for exploring your vehicle database!
|
||||
Reference in New Issue
Block a user