second commit

webshop_app/mvc-emne2/flow-diagram.md

@@ -0,0 +1,105 @@
+# MVC Webshop Application Flow Diagram
+
+```mermaid
+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