feat: initial impl w/ styles, scripts, & server-side logic (steps 1, 2, 3)

assessment/assets/css/styles.css

@@ -0,0 +1,49 @@
+html {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.dynamic-div ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.dynamic-div li {
+    margin: 6px 0;
+}
+
+.garage-bullet {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.garage-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    display: inline-block;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.car-item {
+    cursor: pointer;
+}
+.dynamic-div .car-item:hover {
+    background-color: rgba(59, 130, 246, 0.06);
+}
+.car-item:focus {
+    outline: 2px solid rgba(59,130,246,0.18);
+    outline-offset: 2px;
+}
+
+.error-message {
+    color: crimson;
+}

assessment/assets/css/toolbar.css

@@ -0,0 +1,33 @@
+.toolbar {
+    background: #1f2937;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    font-family: Inter, system-ui, Arial, sans-serif
+}
+
+.toolbar button {
+    background: #fff;
+    color: #111;
+    border: 0;
+    padding: 8px 12px;
+    border-radius: 6px;
+    cursor: pointer
+}
+
+.toolbar button.active {
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15)
+}
+
+.toolbar button.toolbar-close {
+    margin-left: auto;
+    background: transparent;
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.08)
+}
+
+.error-message {
+    color: crimson;
+}

assessment/assets/js/apiClient.js

@@ -0,0 +1,25 @@
+export async function fetchHtml(moduleName, scriptName, clientName = '', extraParams = {}) {
+	if (!moduleName || !scriptName) throw new Error('module/script required');
+
+	const params = new URLSearchParams({ module: moduleName, script: scriptName });
+
+	if (clientName) params.set('client', clientName);
+
+	Object.keys(extraParams || {}).forEach(k => {
+		if (extraParams[k] !== undefined && extraParams[k] !== null) params.set(k, String(extraParams[k]));
+	});
+
+	const url = 'src/ajax_handler.php?' + params.toString();
+	const response = await fetch(url, { method: 'GET', credentials: 'same-origin' });
+
+	if (!response.ok) {
+		const text = await response.text();
+		const message = text || `Request failed: ${response.status}`;
+		const err = new Error(message);
+		err.httpStatus = response.status;
+		throw err;
+	}
+
+	return response.text();
+}
+

assessment/assets/js/domModule.js

@@ -0,0 +1,19 @@
+export function renderError(container, message) {
+    if (!container) return;
+    try {
+        const $c = (container.jquery) ? container : (typeof container === 'string' ? $(container) : $(container));
+        $c.html(`<div class="error-message">${String(message)}</div>`);
+    } catch (e) {
+        if (container instanceof Element) container.innerHTML = `<div class="error-message">${String(message)}</div>`;
+    }
+}
+
+export function insertHtml(container, html) {
+    if (!container) return;
+    try {
+        const $c = (container.jquery) ? container : (typeof container === 'string' ? $(container) : $(container));
+        $c.html(html);
+    } catch (e) {
+        if (container instanceof Element) container.innerHTML = html;
+    }
+}

assessment/assets/js/main.js

@@ -0,0 +1,44 @@
+import { fetchHtml } from './apiClient.js';
+import { renderError, insertHtml } from './domModule.js';
+
+function getCookie(name) {
+    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+    return match ? decodeURIComponent(match[2]) : null;
+}
+
+async function loadDynamic() {
+    const $container = $('.dynamic-div').first();
+    if (!$container.length) return;
+    const moduleName = $container.data('module') || '';
+    const scriptName = $container.data('script') || '';
+    const clientName = getCookie('client') || '';
+    if (!moduleName || !scriptName) return renderError($container, 'Missing data-module or data-script.');
+    try {
+        const html = await fetchHtml(moduleName, scriptName, clientName);
+        insertHtml($container, html);
+        attachCarClickHandlers($container, clientName);
+    } catch (err) {
+        renderError($container, err.message || 'Network error while loading dynamic content.');
+    }
+}
+
+$(document).ready(loadDynamic);
+
+window.loadDynamic = loadDynamic;
+
+function attachCarClickHandlers($container, clientName) {
+    if (!$container || !$container.length) return;
+    if ($container.data('_carHandlerAttached')) return;
+    $container.on('click', '.car-item', async function (ev) {
+        const $el = $(this);
+        const id = $el.data('car-id') || $el.attr('data-car-id');
+        if (!id) return;
+        try {
+            const html = await fetchHtml('cars', 'edit', clientName, { id });
+            insertHtml($container, html);
+        } catch (err) {
+            renderError($container, err.message || 'Network error while loading details.');
+        }
+    });
+    $container.data('_carHandlerAttached', '1');
+}

assessment/assets/js/toolbar.js

@@ -0,0 +1,64 @@
+class Toolbar {
+    constructor(containerClass = 'toolbar') {
+        this.$container = $('<div>').addClass(containerClass);
+        this.clientMapping = [
+            { label: 'Client A', value: 'clienta' },
+            { label: 'Client B', value: 'clientb' },
+            { label: 'Client C', value: 'clientc' }
+        ];
+        this.injectStylesheet('assets/css/toolbar.css');
+        this.render();
+        this.activateExistingClient();
+    }
+
+    injectStylesheet(href) {
+        const $link = $('<link>', { rel: 'stylesheet', href });
+        $('head').append($link);
+    }
+
+    setCookieValue(name, value, maxAgeSeconds = 86400) {
+        document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAgeSeconds}; SameSite=Lax`;
+    }
+
+    markActiveButton($button) {
+        this.$container.find('button').removeClass('active');
+        if ($button && $button.length) $button.addClass('active');
+    }
+
+    render() {
+        this.clientMapping.forEach(mapping => {
+            const $button = $('<button>').text(`Simuler ${mapping.label}`).attr('data-client', mapping.value);
+            $button.on('click', () => {
+                this.setCookieValue('client', mapping.value);
+                this.markActiveButton($button);
+                if (window.loadDynamic && typeof window.loadDynamic === 'function') window.loadDynamic();
+            });
+            this.$container.append($button);
+        });
+
+        const $closeButton = $('<button>').text('Fermer').addClass('toolbar-close');
+        $closeButton.on('click', () => {
+            this.$container.remove();
+            document.body.style.paddingTop = null;
+        });
+        this.$container.append($closeButton);
+
+        $('body').prepend(this.$container);
+    }
+
+    getCookieValue(name) {
+        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
+        return match ? decodeURIComponent(match[2]) : null;
+    }
+
+    activateExistingClient() {
+        const existingClient = this.getCookieValue('client');
+        if (!existingClient) return;
+        const $btn = this.$container.find(`button[data-client="${existingClient}"]`);
+        if ($btn.length) this.markActiveButton($btn);
+    }
+}
+
+new Toolbar();
+
+export default Toolbar;

assessment/customs/clienta/modules/cars/ajax.php

@@ -1 +1,35 @@
+<?php
+require_once __DIR__ . '/../../../../src/utils.php';
+$cars = DataManager::getCars('clienta');
+?>
 <h1>Voitures Client A</h1>
+<?php if (empty($cars)): ?>
+	<p>Aucune voiture trouvée.</p>
+<?php else: ?>
+	<ul>
+		<?php foreach ($cars as $car): ?>
+			<?php
+				$yearRaw = $car['year'] ?? null;
+				$date = '-';
+				if ($yearRaw !== null && $yearRaw !== '') {
+					$yr = (int)$yearRaw;
+					$currentYear = (int)date('Y');
+					if ($yr >= 1900 && $yr <= $currentYear + 1) {
+						$date = (string)$yr;
+					} else {
+						$ts = (int)$yearRaw;
+						if ($ts > 0) $date = date('d/m/Y', $ts);
+						else $date = (string)$yearRaw;
+					}
+				}
+			?>
+
+			<li class="car-item" data-car-id="<?php echo htmlspecialchars($car['id'] ?? ''); ?>">
+				<strong><?php echo htmlspecialchars($car['modelName'] ?? '-'); ?></strong>
+				- <?php echo htmlspecialchars($car['brand'] ?? '-'); ?>
+				(<?php echo $date; ?>)
+				- <?php echo htmlspecialchars((string)($car['power'] ?? '-')); ?> ch
+			</li>
+		<?php endforeach; ?>
+	</ul>
+<?php endif; ?>

assessment/customs/clienta/modules/cars/edit.php

@@ -0,0 +1,31 @@
+<?php
+require_once __DIR__ . '/../../../../src/utils.php';
+$id = $_GET['id'] ?? null;
+$carFound = null;
+$cars = DataManager::getCars('clienta');
+if ($id !== null) {
+	foreach ($cars as $c) {
+		if (isset($c['id']) && (string)$c['id'] === (string)$id) {
+			$carFound = $c;
+			break;
+		}
+	}
+}
+?>
+<?php if (!$carFound): ?>
+	<div>Voiture non trouvée.</div>
+<?php else: ?>
+	<h1>Détails: <?php echo htmlspecialchars($carFound['modelName'] ?? '-'); ?></h1>
+	<ul>
+		<li>Marque: <?php echo htmlspecialchars($carFound['brand'] ?? '-'); ?></li>
+		<li>Année: <?php echo htmlspecialchars($carFound['year'] ?? '-'); ?></li>
+		<li>Puissance: <?php echo htmlspecialchars((string)($carFound['power'] ?? '-')); ?> ch</li>
+		<?php if (isset($carFound['garageId'])):
+			$garage = DataManager::getGarageById($carFound['garageId']); ?>
+			<li>Garage: <?php echo htmlspecialchars($garage['title'] ?? '-'); ?></li>
+		<?php endif; ?>
+		<?php if (!empty($carFound['colorHex'])): ?>
+			<li>Couleur: <span class="garage-color" style="background-color:<?php echo htmlspecialchars($carFound['colorHex']); ?>; width:12px; height:12px; display:inline-block; border-radius:50%;"></span></li>
+		<?php endif; ?>
+	</ul>
+<?php endif; ?>

assessment/customs/clientb/modules/cars/ajax.php

@@ -1 +1,24 @@
+<?php
+require_once __DIR__ . '/../../../../src/utils.php';
+$cars = DataManager::getCars('clientb');
+?>
 <h1>Voitures Client B</h1>
+<?php if (empty($cars)): ?>
+	<p>Aucune voiture trouvée.</p>
+<?php else: ?>
+	<ul>
+		<?php foreach ($cars as $car): ?>
+			<?php
+				$model = isset($car['modelName']) ? strtolower($car['modelName']) : '-';
+				$brand = $car['brand'] ?? '-';
+				$garage = DataManager::getGarageById($car['garageId'] ?? null);
+				$garageTitle = $garage['title'] ?? '-';
+			?>
+			<li class="car-item" data-car-id="<?php echo htmlspecialchars($car['id'] ?? ''); ?>">
+				<strong><?php echo htmlspecialchars($model); ?></strong>
+				- <?php echo htmlspecialchars($brand); ?>
+				- Garage: <?php echo htmlspecialchars($garageTitle); ?>
+			</li>
+		<?php endforeach; ?>
+	</ul>
+<?php endif; ?>

assessment/customs/clientb/modules/cars/edit.php

@@ -0,0 +1,31 @@
+<?php
+require_once __DIR__ . '/../../../../src/utils.php';
+$id = $_GET['id'] ?? null;
+$carFound = null;
+$cars = DataManager::getCars('clientb');
+if ($id !== null) {
+	foreach ($cars as $c) {
+		if (isset($c['id']) && (string)$c['id'] === (string)$id) {
+			$carFound = $c;
+			break;
+		}
+	}
+}
+?>
+<?php if (!$carFound): ?>
+	<div>Voiture non trouvée.</div>
+<?php else: ?>
+	<h1>Détails: <?php echo htmlspecialchars($carFound['modelName'] ?? '-'); ?></h1>
+	<ul>
+		<li>Marque: <?php echo htmlspecialchars($carFound['brand'] ?? '-'); ?></li>
+		<li>Année: <?php echo htmlspecialchars($carFound['year'] ?? '-'); ?></li>
+		<li>Puissance: <?php echo htmlspecialchars((string)($carFound['power'] ?? '-')); ?> ch</li>
+		<?php if (isset($carFound['garageId'])):
+			$garage = DataManager::getGarageById($carFound['garageId']); ?>
+			<li>Garage: <?php echo htmlspecialchars($garage['title'] ?? '-'); ?></li>
+		<?php endif; ?>
+		<?php if (!empty($carFound['colorHex'])): ?>
+			<li>Couleur: <span class="garage-color" style="background-color:<?php echo htmlspecialchars($carFound['colorHex']); ?>;"></span></li>
+		<?php endif; ?>
+	</ul>
+<?php endif; ?>

assessment/customs/clientc/modules/cars/ajax.php

@@ -1 +1,21 @@
+<?php
+require_once __DIR__ . '/../../../../src/utils.php';
+$cars = DataManager::getCars('clientc');
+?>
 <h1>Voitures Client C</h1>
+<?php if (empty($cars)): ?>
+	<p>Aucune voiture trouvée.</p>
+<?php else: ?>
+	<ul>
+		<?php foreach ($cars as $car): ?>
+			<?php $color = isset($car['colorHex']) ? $car['colorHex'] : '#ccc'; ?>
+			<li class="garage-bullet car-item" data-car-id="<?php echo htmlspecialchars($car['id'] ?? ''); ?>">
+				<span class="garage-color" style="background-color:<?php echo htmlspecialchars($color); ?>"></span>
+				<span>
+					<strong><?php echo htmlspecialchars($car['modelName'] ?? '-'); ?></strong>
+					- <?php echo htmlspecialchars($car['brand'] ?? '-'); ?>
+				</span>
+			</li>
+		<?php endforeach; ?>
+	</ul>
+<?php endif; ?>

assessment/customs/clientc/modules/cars/edit.php

@@ -0,0 +1,31 @@
+<?php
+require_once __DIR__ . '/../../../../src/utils.php';
+$id = $_GET['id'] ?? null;
+$carFound = null;
+$cars = DataManager::getCars('clientc');
+if ($id !== null) {
+	foreach ($cars as $c) {
+		if (isset($c['id']) && (string)$c['id'] === (string)$id) {
+			$carFound = $c;
+			break;
+		}
+	}
+}
+?>
+<?php if (!$carFound): ?>
+	<div>Voiture non trouvée.</div>
+<?php else: ?>
+	<h1>Détails: <?php echo htmlspecialchars($carFound['modelName'] ?? '-'); ?></h1>
+	<ul>
+		<li>Marque: <?php echo htmlspecialchars($carFound['brand'] ?? '-'); ?></li>
+		<li>Année: <?php echo htmlspecialchars($carFound['year'] ?? '-'); ?></li>
+		<li>Puissance: <?php echo htmlspecialchars((string)($carFound['power'] ?? '-')); ?> ch</li>
+		<?php if (isset($carFound['garageId'])):
+			$garage = DataManager::getGarageById($carFound['garageId']); ?>
+			<li>Garage: <?php echo htmlspecialchars($garage['title'] ?? '-'); ?></li>
+		<?php endif; ?>
+		<?php if (!empty($carFound['colorHex'])): ?>
+			<li>Couleur: <span class="garage-color" style="background-color:<?php echo htmlspecialchars($carFound['colorHex']); ?>;"></span></li>
+		<?php endif; ?>
+	</ul>
+<?php endif; ?>

assessment/index.php

@@ -4,8 +4,13 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Tool4cars</title>
+	<link rel="stylesheet" href="assets/css/styles.css">
 </head>
 <body>
 	<div class="dynamic-div" data-module="cars" data-script="ajax"></div>
+
+	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+	<script type="module" src="assets/js/toolbar.js"></script>
+	<script type="module" src="assets/js/main.js"></script>
 </body>
 </html>

assessment/src/ajax_handler.php

@@ -0,0 +1,48 @@
+<?php
+header('X-Robots-Tag: noindex');
+header('Content-Type: text/html; charset=utf-8');
+
+$client = null;
+if (!empty($_GET['client'])) $client = $_GET['client'];
+elseif (!empty($_COOKIE['client'])) $client = $_COOKIE['client'];
+
+if (empty($client)) {
+    http_response_code(400);
+    echo 'Client not selected';
+    exit;
+}
+
+if (!preg_match('/^[a-z0-9_-]+$/i', $client)) {
+    http_response_code(400);
+    echo 'Invalid client identifier';
+    exit;
+}
+
+$module = isset($_GET['module']) ? $_GET['module'] : '';
+$script = isset($_GET['script']) ? $_GET['script'] : '';
+
+if (!preg_match('/^[a-z0-9_-]+$/i', $module) || !preg_match('/^[a-z0-9_-]+$/i', $script)) {
+    http_response_code(400);
+    echo 'Invalid module or script name';
+    exit;
+}
+
+$baseDir = dirname(__DIR__) . '/customs/' . $client . '/modules/';
+$targetPath = $baseDir . $module . '/' . $script . '.php';
+
+$realBase = realpath(dirname(__DIR__) . '/customs/' . $client . '/modules/');
+$realTarget = realpath($targetPath);
+
+if ($realBase === false || $realTarget === false) {
+    http_response_code(404);
+    echo 'Not found';
+    exit;
+}
+
+if (strpos($realTarget, $realBase) !== 0) {
+    http_response_code(400);
+    echo 'Invalid path';
+    exit;
+}
+
+include $realTarget;

assessment/src/utils.php

@@ -0,0 +1,37 @@
+<?php
+class DataManager
+{
+    private static function readJsonFile(string $filename): array
+    {
+        $path = __DIR__ . '/../data/' . $filename;
+        if (!file_exists($path)) {
+            return [];
+        }
+        $content = file_get_contents($path);
+        $data = json_decode($content, true);
+        return is_array($data) ? $data : [];
+    }
+
+    public static function getCars(string $clientId): array
+    {
+        $cars = self::readJsonFile('cars.json');
+        return array_values(array_filter($cars, fn($c) => isset($c['customer']) && $c['customer'] === $clientId));
+    }
+
+    public static function getGarages(string $clientId): array
+    {
+        $garages = self::readJsonFile('garages.json');
+        return array_values(array_filter($garages, fn($g) => isset($g['customer']) && $g['customer'] === $clientId));
+    }
+
+    public static function getGarageById($id): ?array
+    {
+        $garages = self::readJsonFile('garages.json');
+        foreach ($garages as $g) {
+            if (isset($g['id']) && $g['id'] == $id) {
+                return $g;
+            }
+        }
+        return null;
+    }
+}