get-frontend/webshop_app/mvc-emne2/flow-diagram.md

MVC Webshop Application Flow Diagram

graph TD
    A[App Start] --> B[DOMContentLoaded Event]
    B --> C[initializeCart()]
    C --> D[loadCartFromStorage()]
    D --> E[getAllProducts()]
    E --> F[updateView('products', products)]
    F --> G[generateProductsPage()]
    G --> H[attachEventListeners()]
    
    H --> I{User Action}
    
    I -->|Click Product| J[showProductDetail(id)]
    I -->|Add to Cart| K[handleAddToCart(id)]
    I -->|Navigate to Cart| L[navigateToCart()]
    I -->|Navigate to Products| M[navigateToProducts()]
    
    J --> N[getProductById(id)]
    N --> O[updateView('product-detail', product)]
    O --> P[generateProductDetailPage()]
    P --> Q[attachEventListeners()]
    Q --> I
    
    K --> R[addToCart(id)]
    R --> S[saveCartToStorage()]
    S --> T[updateCartDisplay()]
    T --> U[updateView('cart', cartData)]
    U --> V[updateView('cart-count', count)]
    V --> W[showNotification()]
    W --> I
    
    L --> X[getCart() + getCartTotal() + getCartItemCount()]
    X --> Y[updateView('cart', cartData)]
    Y --> Z[generateCartPage()]
    Z --> AA[attachEventListeners()]
    AA --> I
    
    M --> BB[getAllProducts()]
    BB --> CC[updateView('products', products)]
    CC --> DD[generateProductsPage()]
    DD --> EE[attachEventListeners()]
    EE --> I
    
    I -->|Change Quantity| FF[changeQuantity(id, change)]
    FF --> GG[updateCartQuantity(id, newQty)]
    GG --> HH[saveCartToStorage()]
    HH --> T
    
    I -->|Remove from Cart| II[handleRemoveFromCart(id)]
    II --> JJ[removeFromCart(id)]
    JJ --> KK[saveCartToStorage()]
    KK --> T
    
    I -->|Clear Cart| LL[handleClearCart()]
    LL --> MM{Confirm?}
    MM -->|Yes| NN[clearCart()]
    MM -->|No| I
    NN --> OO[saveCartToStorage()]
    OO --> T

    style A fill:#e1f5fe
    style F fill:#f3e5f5
    style O fill:#f3e5f5
    style U fill:#f3e5f5
    style Y fill:#f3e5f5
    style CC fill:#f3e5f5
    
    classDef modelClass fill:#e8f5e8
    classDef viewClass fill:#fff3e0
    classDef controllerClass fill:#fce4ec
    
    class C,D,E,N,R,S,X,BB,GG,HH,JJ,KK,NN,OO modelClass
    class F,G,O,P,U,Y,Z,CC,DD viewClass
    class J,K,L,M,FF,II,LL,T controllerClass

Component Responsibilities

Model (Green)

• Data storage and retrieval
• Cart management
• LocalStorage operations
• Product data

View (Orange)

• HTML generation
• DOM manipulation
• Event listener attachment
• User interface rendering

Controller (Pink)

• User interaction handling
• Business logic
• Coordination between Model and View
• Navigation management

Data Flow Summary

1. Initialization: App loads, initializes cart from localStorage, renders products
2. User Interactions: Click events trigger controller functions
3. Model Updates: Controller modifies data through model functions
4. View Updates: Model changes trigger view re-rendering via updateView()
5. Persistence: Cart changes are automatically saved to localStorage