From 9f9617ca455603690ff8b00db84a4fb5e0ceb8a4 Mon Sep 17 00:00:00 2001 From: Edwin Noorlander Date: Wed, 12 Nov 2025 09:51:01 +0100 Subject: [PATCH] Add development documentation and enhance SPA navigation with category/item detail views - Add DEVELOPMENT.md with complete LXC environment setup guide - Implement dynamic category tree with item navigation in sidebar - Add category detail view with items list via AJAX - Add item edit form with delete functionality - Enhance SPA routing to support query parameters for categories/items - Update Bootstrap styling with icons and improved navigation - Include SQLite database in repository for development --- DEVELOPMENT.md | 203 ++++++++++++++++++++++++ collections.sqlite | Bin 0 -> 20480 bytes config.php | 4 +- public/index.php | 74 +++++++-- public/js/app.js | 64 ++++++-- public/style.css | 32 ++++ src/Controllers/CategoryController.php | 24 +++ src/Controllers/ItemController.php | 24 +++ templates/layout.twig | 2 + templates/partials/category_detail.twig | 39 +++++ templates/partials/item_edit.twig | 58 +++++++ 11 files changed, 499 insertions(+), 25 deletions(-) create mode 100644 DEVELOPMENT.md create mode 100755 collections.sqlite create mode 100644 templates/partials/category_detail.twig create mode 100644 templates/partials/item_edit.twig diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md new file mode 100644 index 0000000..f3cf7ab --- /dev/null +++ b/DEVELOPMENT.md @@ -0,0 +1,203 @@ +# LocalWeb Development Environment Guide + +## Overview + +This document describes the LocalWeb Collections PHP MVC application development environment setup using LXC containers. + +## Architecture + +### Host Environment +- **Location**: `/home/edwin/Documents/Projects/localweb/` +- **User**: `edwin` +- **Container Runtime**: Incus/LXC +- **Container Name**: `www` + +### LXC Container `www` +- **OS**: Linux distribution with Apache2 + PHP +- **Web Root**: `/var/www/localhost/` (mounted from host project directory) +- **Service**: `apache2.service` (running as systemd service) +- **Database**: SQLite (`collections.sqlite`) +- **PHP Version**: Compatible with Composer dependencies + +### Network Setup +- **LXC Proxy**: Container port 80 → Host port 80 +- **Access**: `http://localhost` on host serves the webapp +- **Internal**: Apache binds to `127.0.0.1:80` inside container + +## Project Structure + +``` +/home/edwin/Documents/Projects/localweb/ +├── src/ # PHP MVC source code +│ ├── Controllers/ # Route handlers +│ ├── Models/ # Data models +│ └── Services/ # Business logic +├── templates/ # Twig templates +├── public/ # Web root (entry point) +├── vendor/ # Composer dependencies +├── collections.sqlite # SQLite database +└── config.php # Configuration +``` + +## Development Workflow + +### 1. Local Development +- Edit files in `/home/edwin/Documents/Projects/localweb/` +- Changes are immediately reflected in the container via shared mount +- Test via `curl localhost` or browser at `http://localhost` + +### 2. Container Management +```bash +# Execute commands in container +incus exec www -- + +# Check Apache status +incus exec www -- systemctl status apache2 + +# View Apache logs +incus exec www -- tail -f /var/log/apache2/error.log + +# Reload Apache +incus exec www -- systemctl reload apache2 + +# Check PHP version +incus exec www -- php -v +``` + +### 3. Database Operations +```bash +# Access database in container +incus exec www -- sqlite3 /var/www/localhost/collections.sqlite + +# Check database permissions +incus exec www -- ls -la /var/www/localhost/collections.sqlite +``` + +## Application Details + +### Technology Stack +- **PHP**: MVC application with PSR-4 autoloading +- **Framework**: Custom MVC with FastRoute routing +- **Templating**: Twig templates +- **Database**: SQLite with PDO +- **Frontend**: Bootstrap 5 + vanilla JavaScript (SPA-like) +- **Dependencies**: Managed via Composer + +### Key Features +- **Collections Management**: CRUD operations for items +- **Categories**: Hierarchical category structure +- **QR Codes**: Automatic generation for items +- **Multi-language**: Dutch/English support +- **Search & Filter**: Dynamic content loading + +### Routing +- **Web Routes**: Full page loads (`/`, `/categories`, `/parts`) +- **API Routes**: AJAX endpoints (`/api/items`, `/api/categories`) +- **Entry Point**: `public/index.php` + +## Development Commands + +### Dependencies +```bash +# Install/update dependencies +composer install +composer update + +# Check for security issues +composer audit +``` + +### Testing +```bash +# Manual testing via curl +curl localhost +curl -s localhost | grep -i "collections" + +# Test specific endpoints +curl localhost/api/items +curl localhost/api/categories +``` + +### Debugging +```bash +# Check Apache error logs +incus exec www -- tail -f /var/log/apache2/error.log + +# Check access logs +incus exec www -- tail -f /var/log/apache2/access.log + +# Verify file permissions +incus exec www -- ls -la /var/www/localhost/ +``` + +## File Permissions + +### Container Permissions +- **Project files**: `ubuntu:www-data` ownership +- **Database**: `ubuntu:ubuntu` ownership +- **Apache**: Runs as `www-data` user (group access) + +### Common Issues +- Database permission errors: Check `collections.sqlite` ownership +- 403 errors: Verify file permissions in container +- 500 errors: Check Apache error logs + +## Environment Variables & Configuration + +### PHP Configuration +- Located in container PHP configuration +- Error reporting configured for development +- SQLite extension enabled + +### Application Config +- `config.php`: Database path and constants +- `SUPPORTED_LOCALES`: ['en', 'nl'] for i18n +- `DB_PATH`: Points to SQLite database file + +## Deployment Notes + +### Container Persistence +- Data persists in container filesystem +- Database file stored in project directory +- No external database dependencies + +### Backup Strategy +- Git repository for code +- SQLite database backup: `collections.sqlite.backup` +- Regular snapshots of LXC container recommended + +## Troubleshooting + +### Common Issues +1. **Apache not responding**: Check service status in container +2. **Database errors**: Verify SQLite file permissions +3. **404 errors**: Check `.htaccess` and routing configuration +4. **Permission denied**: Ensure `www-data` can read project files + +### Recovery Commands +```bash +# Restart Apache +incus exec www -- systemctl restart apache2 + +# Fix permissions (if needed) +incus exec www -- chown -R ubuntu:www-data /var/www/localhost/ +incus exec www -- chmod -R 755 /var/www/localhost/ + +# Check container status +incus list +incus info www +``` + +## Security Considerations + +- Container isolation via LXC +- No direct database access from host +- Apache runs with limited privileges +- SQLite database in project directory (not web-exposed) + +## Performance Notes + +- Lightweight SQLite database +- Minimal PHP dependencies +- Efficient routing with FastRoute +- Client-side caching for static assets \ No newline at end of file diff --git a/collections.sqlite b/collections.sqlite new file mode 100755 index 0000000000000000000000000000000000000000..348bd4b5b82afbaec35a4aeeca648bc192ce281b GIT binary patch literal 20480 zcmeI(Z%f-i90%~bq-yJ^84M{hgsU*HDE_N!l`&Yg*RHHqtu0LUAjIZcqiI^3*liCd zd$Kn&*z4F!@D1#Nd$0$CJs87>yQXSe*&Ys7{2smZce&gpzfZ`63uJFMZ+U`M8?CzG zu{gO;C?(GrBZSPzIwI?J>BNEShWw{}@!!H3ve5nz)-FjP?2(B}?eoM(8K6J_0uX=z z1Rwwb2tWV=5V#`(XN!TcNF+kvKlO|QTgdfS-Ssykn?;@~aaKxg+qvDtCfS1gm| z3MHQ9MYdDSZKaC)>;>Ovsd8yMSCFH(c%d{uFv2nFf|dBo5-V)WTF&PO`%U3iT2|Au z8jgS1U~k3nM6JfxkcGS_x+#KEaz1$O9(&(-@ITcPt+-e2}3~zPLb~NVY$k@B* zbSx5$(z93ooV^qGB4uEv-u{1ZOIW#(+b#1!`=-$nj@Kv8(mazY=eu{YhZ9#uBiSe= zmSc)HR|y-ZUc+zez3bMOd$B4XwP5FQ3u|A9s+}v^x%N%_c}E^VqzM5CKmY;|fB*y_ z009U<00Iyget~;5K&EKjXf}_8BGU=^DTR~(nWUa@JvFGxkXXWV2^p82s&+xN3+eO$-c6xI?xspf^Op-8- dHSu_TIiYj&wdLqpaddGlobal('app_name', APP_NAME); $twig->addGlobal('delete_part_confirm', $translator->trans('Are you sure you want to delete this part?')); $twig->addGlobal('delete_category_confirm', $translator->trans('Are you sure you want to delete this category?')); -// Build category tree for sidebar -$sidebarHtml = ''; +// Sidebar will be built dynamically via AJAX +$sidebarHtml = ''; $twig->addGlobal('sidebar_html', $sidebarHtml); diff --git a/public/index.php b/public/index.php index 624f94e..4436344 100755 --- a/public/index.php +++ b/public/index.php @@ -13,6 +13,7 @@ use App\Router; use App\Controllers\ItemController; use App\Controllers\CategoryController; use App\Database; +use App\Models\Category; // Initialize Database (ensures tables exist) Database::getInstance(); @@ -40,25 +41,58 @@ $router->addRoute('GET', '/print/{id:\d+}', [ItemController::class, 'printQR']); // These routes return only the Twig block content, not the full layout. $router->addRoute('GET', '/api/items', [ItemController::class, 'listItems']); $router->addRoute('GET', '/api/items/{id:\d+}', [ItemController::class, 'getItem']); -$router->addRoute('GET', '/api/categories', [CategoryController::class, 'listCategories']); $router->addRoute('GET', '/api/categories/list', [CategoryController::class, 'listCategoriesJson']); $router->addRoute('GET', '/api/categories/{id}', [CategoryController::class, 'getCategory']); -$router->addRoute('GET', '/api/parts', [ItemController::class, 'renderAddForm']); + +// Categories with optional filter +$router->addRoute('GET', '/api/categories', function() { + $categoryId = $_GET['category'] ?? null; + if ($categoryId) { + // Show category details with items + $controller = new CategoryController(); + $controller->showCategory($categoryId); + } else { + // Show all categories + $controller = new CategoryController(); + $controller->listCategories(); + } +}); + +// Parts with optional item filter +$router->addRoute('GET', '/api/parts', function() { + $itemId = $_GET['item'] ?? null; + if ($itemId) { + // Show item details/edit form + $controller = new ItemController(); + $controller->editItem($itemId); + } else { + // Show add form + $controller = new ItemController(); + $controller->renderAddForm(); + } +}); $router->addRoute('GET', '/api/tree', function() { try { - $db = App\Database\Database::getInstance(); - $categories = App\Models\Category::getAll($db); + $db = Database::getInstance(); + $categories = Category::getAll($db); - function build_category_tree($categories, $parentId = null, &$visited = [], $depth = 0, &$nodeCount = 0) { + function build_category_tree($categories, $db, $parentId = null, $visited = [], $depth = 0, $nodeCount = 0) { if ($depth > 5 || $nodeCount > 100) return []; $tree = []; foreach ($categories as $cat) { if ($cat['parent_id'] == $parentId && !in_array($cat['id'], $visited)) { $visited[] = $cat['id']; + + // Get items for this category + $itemsStmt = $db->prepare('SELECT id, name FROM items WHERE category_id = :category_id ORDER BY name'); + $itemsStmt->execute([':category_id' => $cat['id']]); + $items = $itemsStmt->fetchAll(PDO::FETCH_ASSOC); + $node = [ 'id' => $cat['id'], 'name' => $cat['name'], - 'children' => build_category_tree($categories, $cat['id'], $visited, $depth + 1, $nodeCount) + 'items' => $items, + 'children' => build_category_tree($categories, $db, $cat['id'], $visited, $depth + 1, $nodeCount) ]; $tree[] = $node; $nodeCount++; @@ -72,21 +106,39 @@ $router->addRoute('GET', '/api/tree', function() { if ($depth > 5) return ''; $html = ''; foreach ($nodes as $node) { - $html .= '
  • '; - $html .= '' . htmlspecialchars($node['name']) . ''; + $html .= '
  • '; + $html .= ''; + $html .= ' ' . htmlspecialchars($node['name']); + $html .= ''; + + // Add items as sub-items + if (!empty($node['items'])) { + $html .= ''; + } + + // Add subcategories if (!empty($node['children'])) { - $html .= '
      '; + $html .= '
        '; $html .= render_category_tree($node['children'], $depth + 1); $html .= '
      '; } + $html .= ''; } return $html; } $nodeCount = 0; - $categoryTree = build_category_tree($categories, null, $visited = [], 0, $nodeCount); - $html = '
        ' . render_category_tree($categoryTree) . '
      '; + $categoryTree = build_category_tree($categories, $db, null, [], 0, $nodeCount); + $html = '
        ' . render_category_tree($categoryTree) . '
      '; if (strlen($html) > 10000) { $html = ''; } diff --git a/public/js/app.js b/public/js/app.js index b1f247c..990f628 100755 --- a/public/js/app.js +++ b/public/js/app.js @@ -40,12 +40,24 @@ document.addEventListener('DOMContentLoaded', function() { apiPath = '/api/items'; pageTitle = 'Overview'; routePath = '/'; - } else if (path === '/categories') { - apiPath = '/api/categories'; - pageTitle = 'Categories'; - } else if (path === '/parts') { - apiPath = '/api/parts'; - pageTitle = 'Parts'; + } else if (path.startsWith('/categories')) { + if (path.includes('?category=')) { + const categoryId = path.split('?category=')[1]; + apiPath = '/api/categories?category=' + categoryId; + pageTitle = 'Category Details'; + } else { + apiPath = '/api/categories'; + pageTitle = 'Categories'; + } + } else if (path.startsWith('/parts')) { + if (path.includes('?item=')) { + const itemId = path.split('?item=')[1]; + apiPath = '/api/parts?item=' + itemId; + pageTitle = 'Part Details'; + } else { + apiPath = '/api/parts'; + pageTitle = 'Parts'; + } } else { // Fallback apiPath = '/api/items'; @@ -111,20 +123,23 @@ document.addEventListener('DOMContentLoaded', function() { } }); - // Initial page load - const initialPath = window.location.pathname === '/' ? '/items' : window.location.pathname; - fetchContent(initialPath, false); - - // Load category tree + // Load category tree first fetch('/api/tree') .then(response => response.text()) .then(html => { - document.querySelector('.sidebar').innerHTML = html; + const sidebarTree = document.getElementById('sidebar-tree'); + if (sidebarTree) { + sidebarTree.innerHTML = html; + } }) .catch(error => { console.error('Error loading tree:', error); }); + // Initial page load + const initialPath = window.location.pathname === '/' ? '/items' : window.location.pathname; + fetchContent(initialPath, false); + // Page-specific scripts (e.g., form submissions) function initPageSpecificScripts() { // Overview page: filter form @@ -172,6 +187,31 @@ document.addEventListener('DOMContentLoaded', function() { document.querySelectorAll('.delete-category-btn').forEach(btn => { btn.addEventListener('click', handleDeleteCategory); }); + + // Item edit page: delete button + const deleteItemBtn = document.getElementById('deleteItemBtn'); + if (deleteItemBtn) { + deleteItemBtn.addEventListener('click', function() { + const itemId = document.getElementById('edit_item_id').value; + if (confirm(window.translations.deletePartConfirm)) { + fetch('/api/items/' + itemId, { + method: 'DELETE' + }) + .then(response => response.json()) + .then(data => { + if (data.success) { + fetchContent('/', false); + } else { + alert(data.error || 'Error deleting item'); + } + }) + .catch(error => { + console.error('Error:', error); + alert('Error deleting item'); + }); + } + }); + } } // Handler functions diff --git a/public/style.css b/public/style.css index 1a5efcb..7207508 100755 --- a/public/style.css +++ b/public/style.css @@ -23,4 +23,36 @@ .item-link:hover { text-decoration: underline; +} + +/* Tree structure styling */ +.category-link { + font-weight: 600; + color: #495057 !important; + background-color: #f8f9fa !important; + border: 1px solid #dee2e6; + border-radius: 4px; + margin: 2px 0; +} + +.category-link:hover { + background-color: #e9ecef !important; + color: #212529 !important; +} + +.item-link { + font-weight: 400; + color: #6c757d !important; + background-color: transparent !important; + border-left: 3px solid #007bff; + margin-left: 8px; +} + +.item-link:hover { + background-color: #f8f9fa !important; + color: #007bff !important; +} + +.bi { + margin-right: 5px; } \ No newline at end of file diff --git a/src/Controllers/CategoryController.php b/src/Controllers/CategoryController.php index f47c8cf..e24d05e 100755 --- a/src/Controllers/CategoryController.php +++ b/src/Controllers/CategoryController.php @@ -14,6 +14,30 @@ class CategoryController echo $twig->render('layout.twig', ['active_page' => 'categories']); } + // Show category with items (AJAX) + public function showCategory($categoryId) + { + global $twig; + try { + $db = Database::getInstance(); + $category = Category::getById($db, $categoryId); + if (!$category) { + echo '
      Category not found
      '; + return; + } + + // Get items in this category + $items = \App\Models\Item::getAllFiltered($db, '', $categoryId); + + echo $twig->render('partials/category_detail.twig', [ + 'category' => $category, + 'items' => $items + ]); + } catch (Exception $e) { + echo '
      Error loading category: ' . htmlspecialchars($e->getMessage()) . '
      '; + } + } + // Get single category (JSON) diff --git a/src/Controllers/ItemController.php b/src/Controllers/ItemController.php index 89db4cc..aa38d24 100755 --- a/src/Controllers/ItemController.php +++ b/src/Controllers/ItemController.php @@ -21,6 +21,30 @@ class ItemController } } + // Edit item form (AJAX) + public function editItem($itemId) + { + global $twig; + try { + $db = Database::getInstance(); + $item = Item::getById($db, $itemId); + if (!$item) { + echo '
      Item not found
      '; + return; + } + + // Get all categories for the dropdown + $categories = Category::getAll($db); + + echo $twig->render('partials/item_edit.twig', [ + 'item' => $item, + 'categories' => $categories + ]); + } catch (Exception $e) { + echo '
      Error loading item: ' . htmlspecialchars($e->getMessage()) . '
      '; + } + } + // Renders the full layout for add parts page public static function addForm() { diff --git a/templates/layout.twig b/templates/layout.twig index 439dd63..a26ce56 100755 --- a/templates/layout.twig +++ b/templates/layout.twig @@ -7,6 +7,8 @@ {{ app_name }} + + diff --git a/templates/partials/category_detail.twig b/templates/partials/category_detail.twig new file mode 100644 index 0000000..1e38b20 --- /dev/null +++ b/templates/partials/category_detail.twig @@ -0,0 +1,39 @@ +
      +

      {{ category.name }}

      + +
      + +
      +
      +
      Items in this Category
      +
      +
      + {% if items|length > 0 %} +
      + {% for item in items %} +
      +
      +
      {{ item.name }}
      + {% if item.description %} +

      {{ item.description }}

      + {% endif %} + {% if item.location %} + 📍 {{ item.location }} + {% endif %} +
      +
      + + + {% if item.id_code %} + QR + {% endif %} +
      +
      + {% endfor %} +
      + {% else %} +

      No items in this category yet.

      + + {% endif %} +
      +
      \ No newline at end of file diff --git a/templates/partials/item_edit.twig b/templates/partials/item_edit.twig new file mode 100644 index 0000000..fce6670 --- /dev/null +++ b/templates/partials/item_edit.twig @@ -0,0 +1,58 @@ +
      +

      Edit Item: {{ item.name }}

      + +
      + +
      + + +
      +
      +
      + + +
      + +
      + + +
      + +
      + + +
      +
      + +
      +
      + + +
      + +
      + + +
      + {% if item.image %} +

      Current image:

      + + {% else %} +

      No image

      + {% endif %} +
      +
      +
      +
      + +
      + + + +
      +
      \ No newline at end of file