Skip to content

QUICKSTART.md

Latest commit

 

History

History
197 lines (143 loc) · 5.4 KB

QUICKSTART.md

File metadata and controls

197 lines (143 loc) · 5.4 KB

ShipCES Micro-Widget Quick Start Guide

🚀 Get Started in 3 Steps

1. Start the Server

cd gridstack.js
python3 -m http.server 8080

2. Open in Browser

http://localhost:8080/demo/shipces-micro.html

3. Load RFQ Cards

Click the "📋 Load RFQ Cards" button

📊 What You'll See

5 RFQ Cards Loaded:

  1. Larkinexpress - Standard, Straight Truck, 1547 mi (Lynchburg → Laredo)
  2. Chrobinson - Standard, Cargo Van, HAZMAT, Unknown distance (Jamestown → Laredo) [FLAGGED]
  3. Easyflyers - Expedite, Sprinter, 850 mi (Aguascalientes → El Paso)
  4. XPO - Hot Shot, Cargo Van, 239 mi (Dallas → Houston) [FLAGGED]
  5. TQL - Team, Tractor, Temperature Control, 2789 mi (Los Angeles → New York)

Statistics:

  • Total RFQs: 5
  • Flagged: 2
  • Expired: 0
  • Total Widgets: 90 (18 per card)

🎮 Interactive Features

Click These Widgets:

Widget What Happens
⚐ Flag Toggles to 🚩, count increases
<|> Move Opens workflow menu (7 states)
📝 Feedback Opens feedback modal (demo)
➕ Add RFQ Card Adds new card to grid
🔓 Lock Toggles micro-widget dragging
💾 Save Saves layout to localStorage
📂 Load Saved Restores saved layout

Drag These Widgets:

  • RFQ Cards: Drag entire card
  • Micro-Widgets: Drag individual elements (company name, flags, timers, etc.)
  • Lock/Unlock: Use 🔓 button to enable/disable micro-widget dragging

📋 14 Micro-Widget Types

Header Row (6)

  1. 🏢 Company Name - Purple badge
  2. 🕐 Timestamp - "2h ago" format
  3. 🚩 Flag - Toggle button
  4. <|> Move Icon - Workflow menu
  5. 📝 Feedback - Iteration count
  6. ⏱️ Expiry Timer - Phase-based countdown

Route Row (4)

  1. 📍 Origin - City, State
  2. → Arrow - Direction indicator
  3. 📍 Destination - City, State
  4. 📏 Distance - Miles

Service Row (4)

  1. 🚚 Service Type - Expedite/Hot Shot/Standard/Scheduled/Team
  2. 🚛 Vehicle Type - Cargo Van/Sprinter/Cube/Straight Truck/Flatbed/Tractor
  3. ☢️ Special Instructions - HAZMAT/Temperature badges
  4. 🎯 Confidence - AI recommendation %

🎨 Color Coding

Service Types:

  • ⚡ Expedite: Red (#dc2626)
  • 🔥 Hot Shot: Orange (#f97316)
  • 🚚 Standard: Gray (#6b7280)
  • 📅 Scheduled: Teal (#0d9488)
  • 👥 Team: Purple (#9333ea)

Timer Phases:

  • 🟢 Normal: Green (> 50% time remaining)
  • 🟡 Warning: Yellow (30-50%)
  • 🟠 Urgent: Orange (15-30%)
  • 🔴 Critical: Red (5-15%)
  • 🔴 Final: Dark Red (0-5%)
  • ⚫ Expired: Gray (0%)

🧪 Run Tests

# Install Playwright (if not installed)
npm install -D @playwright/test

# Run all tests
npx playwright test tests/shipces-micro.spec.js

# Run in headed mode (see browser)
npx playwright test tests/shipces-micro.spec.js --headed

# Run specific test
npx playwright test tests/shipces-micro.spec.js -g "flag toggle"

📁 Files Created

Core Implementation (4 files):

  • gridstack.js/demo/shipces-data.js - Mock RFQ data
  • gridstack.js/demo/shipces-micro-widgets.js - Widget renderers
  • gridstack.js/demo/shipces-micro.css - Micro-widget styles
  • gridstack.js/demo/shipces-micro.html - Main demo page

Testing (1 file):

  • tests/shipces-micro.spec.js - Playwright E2E tests

Documentation (4 files):

  • MICRO_WIDGET_ARCHITECTURE.md - Complete architecture docs
  • MICRO_WIDGET_TESTING.md - Testing strategy
  • IMPLEMENTATION_COMPLETE.md - Implementation summary
  • QUICKSTART.md - This file

🐛 Troubleshooting

Issue: Cards don't load

Solution: Click "📋 Load RFQ Cards" button

Issue: Console shows CSS 404 error

Solution: Ignore - using CDN version instead

Issue: Widgets not draggable

Solution: Click "🔓 Lock Micro-Widgets" to unlock

Issue: Layout not saving

Solution: Check browser console, localStorage may be disabled

Issue: Page blank

Solution:

  1. Check server is running (python3 -m http.server 8080)
  2. Navigate to correct URL (http://localhost:8080/demo/shipces-micro.html)
  3. Check browser console for errors

📞 Support

✅ Quick Verification

Run this checklist to verify everything works:

  • Server starts on port 8080
  • Page loads with title "ShipCES Micro-Widgets"
  • "Load RFQ Cards" button loads 5 cards
  • Statistics show: 5 RFQs, 2 flagged, 90 widgets
  • Clicking flag toggles icon and increases count
  • Clicking move icon shows workflow menu
  • "Add RFQ Card" increases total to 6 RFQs
  • All widgets have correct data (company names, cities, etc.)
  • Timer shows phase colors
  • HAZMAT badge visible on Chrobinson card
  • AI badges visible on recommended vehicles
  • Save/Load layout works

Ready? Let's Go! 🚀

  1. Start server: python3 -m http.server 8080
  2. Open: http://localhost:8080/demo/shipces-micro.html
  3. Click: 📋 Load RFQ Cards
  4. Enjoy exploring the micro-widget architecture!