fix readme
This commit is contained in:
C committed
1 parent
d6e2b497fa
commit
a7620903da
2 files changed
+148
-163
No files matched your search
+141
@@ -0,0 +1,141 @@
|
|||||||
|
## 📦 Installation
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
- Node.js (v16 or higher)
|
||||||
|
- pnpm (recommended) or npm
|
||||||
|
- SQL database connection
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
1. Clone the repository:
|
||||||
|
```bash
|
||||||
|
git clone <repository-url>
|
||||||
|
cd studspider-status
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Configure environment variables:
|
||||||
|
Create a `.env` file in the root directory:
|
||||||
|
```env
|
||||||
|
VITE_DATABASE_URL=your_database_connection_string
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Start the development server:
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Build for production:
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 Usage
|
||||||
|
|
||||||
|
### Development
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
Access the application at `http://localhost:5173`
|
||||||
|
|
||||||
|
### Production Build
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
pnpm preview
|
||||||
|
```
|
||||||
|
|
||||||
|
### Linting
|
||||||
|
```bash
|
||||||
|
pnpm lint
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📊 Features Breakdown
|
||||||
|
|
||||||
|
### Dashboard View
|
||||||
|
- **Recent Changes Panel**: Real-time list of inventory modifications with timestamps
|
||||||
|
- **Statistics Cards**: Quick metrics showing total sets, total themes, and weekly changes
|
||||||
|
- **Theme Distribution Chart**: Visual pie chart displaying inventory breakdown by LEGO theme
|
||||||
|
|
||||||
|
### Navigation
|
||||||
|
- **Dashboard**: Main inventory overview
|
||||||
|
- **Review**: Inventory review and reconciliation
|
||||||
|
- **Statistics**: Detailed analytics and reporting
|
||||||
|
|
||||||
|
## 📁 Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
studspider-status/
|
||||||
|
├── src/
|
||||||
|
│ ├── assets/ # Static assets
|
||||||
|
│ ├── components/ # Reusable Vue components
|
||||||
|
│ │ ├── AppFooter.vue
|
||||||
|
│ │ ├── HelloWorld.vue
|
||||||
|
│ │ └── DynamicPieChart.vue
|
||||||
|
│ ├── layouts/ # Page layout templates
|
||||||
|
│ │ └── default.vue
|
||||||
|
│ ├── pages/ # Application pages (auto-routed)
|
||||||
|
│ │ ├── index.vue # Dashboard home page
|
||||||
|
│ │ ├── demo.vue # Component demo page
|
||||||
|
│ │ ├── stats.vue # Statistics page
|
||||||
|
│ │ └── review.vue # Review page
|
||||||
|
│ ├── plugins/ # Vue plugins (Vuetify, Router, etc.)
|
||||||
|
│ │ ├── index.js
|
||||||
|
│ │ └── vuetify.js
|
||||||
|
│ ├── router/ # Vue Router configuration
|
||||||
|
│ │ └── index.js
|
||||||
|
│ ├── stores/ # Pinia state management
|
||||||
|
│ │ ├── app.js
|
||||||
|
│ │ └── index.js
|
||||||
|
│ ├── styles/ # Global styles and SCSS
|
||||||
|
│ │ └── settings.scss
|
||||||
|
│ ├── App.vue # Root application component
|
||||||
|
│ └── main.js # Application entry point
|
||||||
|
├── public/ # Public static files
|
||||||
|
├── .env # Environment variables (not committed)
|
||||||
|
├── package.json # Project dependencies
|
||||||
|
├── vite.config.mjs # Vite configuration
|
||||||
|
└── README.md # This file
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Adding New Pages
|
||||||
|
1. Create a new `.vue` file in `src/pages/`
|
||||||
|
2. Add route metadata at the bottom:
|
||||||
|
```vue
|
||||||
|
<route lang="yaml">
|
||||||
|
name: yourpage
|
||||||
|
layout: default
|
||||||
|
</route>
|
||||||
|
```
|
||||||
|
3. Add navigation item in `App.vue`:
|
||||||
|
```vue
|
||||||
|
<v-list-item
|
||||||
|
prepend-icon="mdi-your-icon"
|
||||||
|
title="Your Page"
|
||||||
|
value="yourpage"
|
||||||
|
to="/yourpage"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Modifying Themes
|
||||||
|
Edit the color palette in component files or update Vuetify theme settings in `src/plugins/vuetify.js`.
|
||||||
|
|
||||||
|
|
||||||
|
### Development Server Won't Start
|
||||||
|
```bash
|
||||||
|
# Clear node modules and reinstall
|
||||||
|
rm -rf node_modules
|
||||||
|
pnpm install
|
||||||
|
|
||||||
|
# Clear Vite cache
|
||||||
|
rm -rf .vite
|
||||||
|
```
|
||||||
|
|
||||||
|
### Routing Not Working
|
||||||
|
- Ensure all pages have proper route metadata
|
||||||
|
- Check that `unplugin-vue-router` is configured in `vite.config.mjs`
|
||||||
|
- Verify the layout system is properly set up
|
||||||
@@ -1,170 +1,14 @@
|
|||||||
# studspider-status
|
# studspider-status
|
||||||
|
|
||||||
`studspider-status` is the frontend of `studspider`. An application used to track a square inventory and display changes over time, Brickset.com, and a SQL database to track and visualize LEGO inventory changes.
|
`studspider-status` is the frontend of `studspider`.
|
||||||
|
|
||||||
## 🛠️ Technology Stack
|
|
||||||
|
|
||||||
### Frontend
|
|
||||||
- **Vue 3**: Modern reactive JavaScript framework with Composition API
|
|
||||||
- **Vuetify 3**: Material Design component library
|
|
||||||
- **Vue Router**: Client-side routing for single-page application
|
|
||||||
- **Pinia**: State management solution
|
|
||||||
- **Vite**: Next-generation frontend build tool
|
|
||||||
- **ApexCharts/Vuetify Charts**: Data visualization
|
|
||||||
|
|
||||||
### Backend Integration
|
|
||||||
- **Studspider**: Python
|
|
||||||
|
|
||||||
## 📦 Installation
|
|
||||||
|
|
||||||
### Prerequisites
|
|
||||||
- Node.js (v16 or higher)
|
|
||||||
- pnpm (recommended) or npm
|
|
||||||
- SQL database connection
|
|
||||||
|
|
||||||
### Setup
|
|
||||||
|
|
||||||
1. Clone the repository:
|
|
||||||
```bash
|
|
||||||
git clone <repository-url>
|
|
||||||
cd studspider-status
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Install dependencies:
|
|
||||||
```bash
|
|
||||||
pnpm install
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Configure environment variables:
|
|
||||||
Create a `.env` file in the root directory:
|
|
||||||
```env
|
|
||||||
VITE_DATABASE_URL=your_database_connection_string
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Start the development server:
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
|
|
||||||
5. Build for production:
|
|
||||||
```bash
|
|
||||||
pnpm build
|
|
||||||
```
|
|
||||||
|
|
||||||
## 🚀 Usage
|
|
||||||
|
|
||||||
### Development
|
|
||||||
```bash
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
Access the application at `http://localhost:5173`
|
|
||||||
|
|
||||||
### Production Build
|
|
||||||
```bash
|
|
||||||
pnpm build
|
|
||||||
pnpm preview
|
|
||||||
```
|
|
||||||
|
|
||||||
### Linting
|
|
||||||
```bash
|
|
||||||
pnpm lint
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📊 Features Breakdown
|
|
||||||
|
|
||||||
### Dashboard View
|
|
||||||
- **Recent Changes Panel**: Real-time list of inventory modifications with timestamps
|
|
||||||
- **Statistics Cards**: Quick metrics showing total sets, total themes, and weekly changes
|
|
||||||
- **Theme Distribution Chart**: Visual pie chart displaying inventory breakdown by LEGO theme
|
|
||||||
|
|
||||||
### Navigation
|
|
||||||
- **Dashboard**: Main inventory overview
|
|
||||||
- **Review**: Inventory review and reconciliation
|
|
||||||
- **Statistics**: Detailed analytics and reporting
|
|
||||||
|
|
||||||
## 📁 Project Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
studspider-status/
|
|
||||||
├── src/
|
|
||||||
│ ├── assets/ # Static assets
|
|
||||||
│ ├── components/ # Reusable Vue components
|
|
||||||
│ │ ├── AppFooter.vue
|
|
||||||
│ │ ├── HelloWorld.vue
|
|
||||||
│ │ └── DynamicPieChart.vue
|
|
||||||
│ ├── layouts/ # Page layout templates
|
|
||||||
│ │ └── default.vue
|
|
||||||
│ ├── pages/ # Application pages (auto-routed)
|
|
||||||
│ │ ├── index.vue # Dashboard home page
|
|
||||||
│ │ ├── demo.vue # Component demo page
|
|
||||||
│ │ ├── stats.vue # Statistics page
|
|
||||||
│ │ └── review.vue # Review page
|
|
||||||
│ ├── plugins/ # Vue plugins (Vuetify, Router, etc.)
|
|
||||||
│ │ ├── index.js
|
|
||||||
│ │ └── vuetify.js
|
|
||||||
│ ├── router/ # Vue Router configuration
|
|
||||||
│ │ └── index.js
|
|
||||||
│ ├── stores/ # Pinia state management
|
|
||||||
│ │ ├── app.js
|
|
||||||
│ │ └── index.js
|
|
||||||
│ ├── styles/ # Global styles and SCSS
|
|
||||||
│ │ └── settings.scss
|
|
||||||
│ ├── App.vue # Root application component
|
|
||||||
│ └── main.js # Application entry point
|
|
||||||
├── public/ # Public static files
|
|
||||||
├── .env # Environment variables (not committed)
|
|
||||||
├── package.json # Project dependencies
|
|
||||||
├── vite.config.mjs # Vite configuration
|
|
||||||
└── README.md # This file
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
### Adding New Pages
|
built with
|
||||||
1. Create a new `.vue` file in `src/pages/`
|
|
||||||
2. Add route metadata at the bottom:
|
|
||||||
```vue
|
|
||||||
<route lang="yaml">
|
|
||||||
name: yourpage
|
|
||||||
layout: default
|
|
||||||
</route>
|
|
||||||
```
|
|
||||||
3. Add navigation item in `App.vue`:
|
|
||||||
```vue
|
|
||||||
<v-list-item
|
|
||||||
prepend-icon="mdi-your-icon"
|
|
||||||
title="Your Page"
|
|
||||||
value="yourpage"
|
|
||||||
to="/yourpage"
|
|
||||||
/>
|
|
||||||
```
|
|
||||||
|
|
||||||
### Modifying Themes
|
- vue 3
|
||||||
Edit the color palette in component files or update Vuetify theme settings in `src/plugins/vuetify.js`.
|
- vuetify
|
||||||
|
- apexcharts
|
||||||
|
|
||||||
|
license
|
||||||
|
|
||||||
### Development Server Won't Start
|
- MPL 2.0
|
||||||
```bash
|
|
||||||
# Clear node modules and reinstall
|
|
||||||
rm -rf node_modules
|
|
||||||
pnpm install
|
|
||||||
|
|
||||||
# Clear Vite cache
|
|
||||||
rm -rf .vite
|
|
||||||
```
|
|
||||||
|
|
||||||
### Routing Not Working
|
|
||||||
- Ensure all pages have proper route metadata
|
|
||||||
- Check that `unplugin-vue-router` is configured in `vite.config.mjs`
|
|
||||||
- Verify the layout system is properly set up
|
|
||||||
|
|
||||||
## 📝 License
|
|
||||||
|
|
||||||
Mozilla Public License 2.0
|
|
||||||
|
|
||||||
## 📧 Support
|
|
||||||
|
|
||||||
For issues and questions, please open an issue on the GitHub repository.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Built with ❤️ using Vue 3 and Vuetify 3
|
|
||||||
Reference in new issue
Block a user