fsylvain/Exo-technique-VIE-Barcelone-SaaS-HRTech
1
0
Fork 0
mirror of https://github.com/Floriansylvain/Exo-technique-VIE-Barcelone-SaaS-HRTech.git synced 2026-08-19 11:43:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Floriansylvain
2025-12-16 21:09:53 +01:00
parent 9e00c10b9c
commit dbce932ce2
15 changed files with 501 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assessment/assets/css/styles.css
+49
View File
@@ -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
+33
View File
@@ -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
+25
View File
@@ -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
+19
View File
@@ -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
+44
View File
@@ -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
+64
View File
@@ -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
+34
View File
@@ -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
+31
View File
@@ -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
+23
View File
@@ -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
+31
View File
@@ -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
+20
View File
@@ -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
+31
View File
@@ -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
+5
View File
@@ -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
+48
View File
@@ -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
+37
View File
@@ -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;
}
}