add: added projectsHEADmain

1 files changed, 568 insertions, 0 deletions

diff --git a/ping/frontend/src/routes/dashboard/models/+page.svelte b/ping/frontend/src/routes/dashboard/models/+page.svelte
new file mode 100644
index 0000000..3be6f00
--- /dev/null
+++ b/ping/frontend/src/routes/dashboard/models/+page.svelte
@@ -0,0 +1,568 @@
+<script lang="ts">
+	import Avatar from '$lib/components/Avatar.svelte';
+	import UserSelector from '$lib/components/input/UserSelector.svelte';
+	import { authFetch, getUser, type IUser } from '$lib/stores/auth';
+	import { addToast } from '$lib/stores/toast';
+	import { onMount } from 'svelte';
+	import { get } from 'svelte/store';
+
+	interface IModel {
+		id: string;
+		members: IUser[];
+		name: string;
+		owner: IUser;
+	}
+
+	let modelName = $state('');
+	let sources = $state([]);
+	let models = $state<IModel[]>([]);
+	let modelToEdit = $state<number | null>(null);
+	let modelOwner = $state<IUser | null>(null);
+
+	let users = $state<IUser[]>([]);
+
+	function addSource() {
+		sources = [...sources, ''];
+	}
+
+	function removeSource(index: number) {
+		sources = sources.filter((_, i) => i !== index);
+	}
+
+	function handleSubmit(e: SubmitEvent) {
+		e.preventDefault();
+		if (modelToEdit === null) {
+			createModel();
+		} else {
+			updateModel();
+		}
+	}
+
+	async function createModel() {
+		try {
+			const response = await authFetch('/api/projects', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					accept: 'application/json'
+				},
+				body: JSON.stringify({
+					name: modelName
+				})
+			});
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+			const data = await response.json();
+			models = [...models, data];
+			await Promise.all(
+				users.map((user) =>
+					authFetch(`/api/projects/${data.id}/add-user`, {
+						method: 'POST',
+						headers: {
+							'Content-Type': 'application/json',
+							accept: '*/*'
+						},
+						body: JSON.stringify({ userId: user.id })
+					})
+						.then((res) => {
+							if (!res.ok) {
+								addToast({
+									color: 'red',
+									title: 'Erreur',
+									message: `Impossible d'ajouter l'utilisateur ${user.displayName} au modèle "${modelName}".`
+								});
+								console.error(`HTTP error! status: ${res.status}`);
+							}
+							return res.json().catch(() => null);
+						})
+						.then((memberData) => {
+							console.log('Member added:', memberData);
+						})
+						.catch((err) => {
+							console.error('Error adding member:', err);
+						})
+				)
+			);
+			addToast({
+				color: 'green',
+				title: 'Modèle créé',
+				message: `Le modèle "${modelName}" a été créé avec succès.`
+			});
+			modelName = '';
+			return data;
+		} catch (error) {
+			console.error('Error creating model:', error);
+			addToast({
+				color: 'red',
+				title: 'Erreur',
+				message: `Une erreur est survenue lors de la création du modèle "${modelName}".`
+			});
+			throw error;
+		}
+	}
+
+	async function updateModel() {
+		try {
+			if (modelToEdit === null || models.length <= modelToEdit) {
+				addToast({
+					color: 'red',
+					title: 'Erreur',
+					message: 'Aucun modèle sélectionné pour la mise à jour.'
+				});
+				return;
+			}
+			const model = models[modelToEdit];
+			console.log('Updating model:', model);
+			const response = await authFetch(`/api/projects/${model.id}`, {
+				method: 'PUT',
+				headers: {
+					'Content-Type': 'application/json',
+					accept: 'application/json'
+				},
+				body: JSON.stringify({
+					name: modelName
+				})
+			});
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+			const updatedModel = await response.json();
+			models = models.map((m, i) => (i === modelToEdit ? updatedModel : m));
+			modelToEdit = null;
+			modelName = '';
+			addToast({
+				color: 'green',
+				title: 'Modèle mis à jour',
+				message: `Le modèle "${updatedModel.name}" a été mis à jour avec succès.`
+			});
+		} catch (error) {
+			console.error('Error updating model:', error);
+			addToast({
+				color: 'red',
+				title: 'Erreur',
+				message: `Une erreur est survenue lors de la mise à jour du modèle "${modelName}".`
+			});
+			throw error;
+		}
+	}
+
+	async function getMyModels() {
+		try {
+			const response = await authFetch('/api/projects', {
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+					accept: 'application/json'
+				}
+			});
+			const data = await response.json();
+			console.log('My models:', data);
+			return data;
+		} catch (error) {
+			console.error('Error fetching models:', error);
+			addToast({
+				color: 'red',
+				title: 'Erreur',
+				message: 'Impossible de charger les modèles.'
+			});
+			throw error;
+		}
+	}
+
+	function deleteModel(i: number) {
+		if (models.length <= i || i < 0) {
+			addToast({
+				color: 'red',
+				title: 'Erreur',
+				message: 'Modèle introuvable.'
+			});
+			return;
+		}
+
+		modelToEdit = null;
+
+		const modelToDelete = models[i];
+		authFetch(`/api/projects/${modelToDelete.id}`, {
+			method: 'DELETE',
+			headers: {
+				'Content-Type': 'application/json',
+				accept: 'application/json'
+			}
+		})
+			.then(() => {
+				models = models.filter((_, index) => index !== i);
+				addToast({
+					color: 'green',
+					title: 'Modèle supprimé',
+					message: `Le modèle "${modelToDelete.name}" a été supprimé avec succès.`
+				});
+			})
+			.catch((err) => {
+				console.error('Error deleting model:', err);
+				addToast({
+					color: 'red',
+					title: 'Erreur',
+					message: `Impossible de supprimer le modèle "${modelToDelete.name}".`
+				});
+			});
+	}
+
+	function onEditButtonPressed(i: number) {
+		if (modelToEdit === i) {
+			modelToEdit = null;
+			modelName = '';
+			users = [];
+			modelOwner = null;
+		} else {
+			modelToEdit = i;
+			modelName = models[i].name;
+			users = models[i].members || [];
+			modelOwner = models[i].owner || null;
+		}
+	}
+
+	let currentUser = $state<IUser | null>(null);
+
+	onMount(() => {
+		getMyModels()
+			.then((lsModels) => {
+				models = lsModels;
+				console.log('Models loaded:', models);
+			})
+			.catch((err) => {
+				console.error('Error loading models:', err);
+			});
+		getUser()
+			.then((user) => {
+				currentUser = user;
+				console.log('Current user:', currentUser);
+			})
+			.catch((err) => {
+				console.error('Error fetching current user:', err);
+			});
+	});
+</script>
+
+<section id="models">
+	<div class="models-container">
+		<div class="active-models">
+			<h2>Modèles actifs</h2>
+			<div class="models-list">
+				{#each models as m, i}
+					<div class="model-item" class:selected={modelToEdit === i}>
+						<div class="model-name">
+							<span>{m.name}</span><br />
+							<code style="font-size:8px">{m.id}</code>
+						</div>
+						<div class="model-metrics">
+							<div class="metric">
+								<span class="metric-label">Eco score</span>
+								<span class="metric-value green">{69} %</span>
+							</div>
+							<div class="metric">
+								<span class="metric-label">Efficacité</span>
+								<span class="metric-value green">{69} %</span>
+							</div>
+						</div>
+						<button class="modify-btn" onclick={() => onEditButtonPressed(i)}>✏️</button>
+						<button class="delete-btn btn" onclick={() => deleteModel(i)}>🗑️</button>
+					</div>
+				{/each}
+			</div>
+		</div>
+
+		<div class="new-model">
+			<form onsubmit={handleSubmit}>
+				<div class="new-model-header">
+					{#if modelToEdit !== null}
+						<h2>Modifier un modèle</h2>
+					{:else}
+						<h2>Nouveau modèle</h2>
+					{/if}
+					<button class="register-btn" type="submit">📁 Enregistrer</button>
+				</div>
+				<div class="form-group">
+					<label for="name">Nom du modèle</label>
+					<input type="text" id="name" bind:value={modelName} placeholder="Modèle X" />
+					<div class="flex gap-2 p-2">
+						{#if modelToEdit !== null}
+							<Avatar username={modelOwner?.displayName} url={modelOwner?.avatar} />
+						{:else if currentUser}
+							<Avatar username={currentUser.displayName} url={currentUser.avatar} />
+						{:else}
+							Chargement en cours...
+						{/if}
+						<UserSelector bind:users />
+					</div>
+				</div>
+
+				<div class="sources-section">
+					<div class="sources-header">
+						<span>Sources de données</span>
+						<button type="button" class="add-source-btn" onclick={addSource}>
+							➕ Ajouter une source de données
+						</button>
+					</div>
+
+					{#each sources as source, index}
+						<div class="source-item">
+							<!-- svelte-ignore a11y_label_has_associated_control -->
+							<label>Source {index + 1}</label>
+							<div class="source-input-group">
+								<input type="text" bind:value={sources[index]} placeholder="Source" />
+								<button type="button" class="remove-source-btn" onclick={() => removeSource(index)}>
+									🗑️
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</form>
+		</div>
+	</div>
+</section>
+
+<style>
+	#models {
+		padding: 16px;
+		background-color: var(--bg-secondary);
+		color: white;
+		min-height: calc(100vh - 72px);
+	}
+
+	.models-container {
+		display: flex;
+		gap: 16px;
+		max-width: 1400px;
+	}
+
+	h2 {
+		color: var(--text-lime);
+		font-size: 24px;
+		margin: 0 0 16px 0;
+		font-weight: 600;
+	}
+
+	/* Modèles actifs */
+	.active-models {
+		flex: 1;
+		background-color: var(--bg-primary);
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		padding: 16px;
+		margin: 16px;
+		color: white;
+	}
+
+	.models-list {
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+	}
+
+	.model-item {
+		background-color: var(--bg-secondary);
+		padding: 16px;
+		border-radius: 8px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border: 2px solid transparent;
+	}
+
+	.model-item.selected {
+		border: 2px solid var(--text-lime);
+	}
+
+	.model-name {
+		font-weight: 500;
+		font-size: 16px;
+		color: white;
+	}
+
+	.model-metrics {
+		display: flex;
+		gap: 30px;
+	}
+
+	.metric {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 5px;
+	}
+
+	.metric-label {
+		font-size: 12px;
+		color: #888888;
+	}
+
+	.metric-value {
+		font-size: 18px;
+		font-weight: bold;
+	}
+
+	.metric-value.green {
+		color: var(--text-lime);
+	}
+
+	.modify-btn {
+		background-color: var(--btn-primary);
+		color: white;
+		border: none;
+		padding: 8px 16px;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 14px;
+		font-weight: 600;
+		transition-duration: 0.2s;
+	}
+
+	.modify-btn:hover {
+		background-color: var(--btn-primary-hover);
+		transform: scale(1.025);
+	}
+
+	/* Nouveau modèle */
+	.new-model {
+		flex: 1;
+		background-color: var(--bg-primary);
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		padding: 16px;
+		margin: 16px;
+		color: white;
+	}
+
+	.new-model-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 16px;
+	}
+
+	.register-btn {
+		background-color: var(--btn-primary);
+		color: white;
+		border: none;
+		padding: 8px 16px;
+		border-radius: 4px;
+		cursor: pointer;
+		font-weight: 600;
+		font-size: 14px;
+		transition-duration: 0.2s;
+	}
+
+	.register-btn:hover {
+		background-color: var(--btn-primary-hover);
+		transform: scale(1.025);
+	}
+
+	.form-group {
+		margin-bottom: 16px;
+	}
+
+	label {
+		display: block;
+		margin-bottom: 8px;
+		font-size: 14px;
+		color: white;
+		font-weight: 500;
+	}
+
+	input[type='text'] {
+		width: 100%;
+		background-color: var(--bg-secondary);
+		border: none;
+		border-bottom: 2px solid var(--text-lime);
+		padding: 8px;
+		border-radius: 8px 8px 0 0;
+		color: white;
+		font-size: 14px;
+		box-sizing: border-box;
+	}
+
+	input[type='text']:focus {
+		outline: none;
+		border-bottom-color: var(--text-lime);
+	}
+
+	input[type='text']::placeholder {
+		color: #888888;
+	}
+
+	/* Sources section */
+	.sources-section {
+		margin-top: 16px;
+	}
+
+	.sources-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 15px;
+	}
+
+	.sources-header span {
+		font-size: 14px;
+		font-weight: 500;
+		color: white;
+	}
+
+	.add-source-btn {
+		background-color: var(--btn-secondary);
+		color: var(--text-lime);
+		border: 1px solid var(--text-lime);
+		padding: 8px 16px;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 12px;
+		font-weight: 600;
+		transition-duration: 0.2s;
+	}
+
+	.add-source-btn:hover {
+		background-color: var(--text-lime);
+		color: var(--bg-primary);
+		transform: scale(1.025);
+	}
+
+	.source-item {
+		margin-bottom: 15px;
+	}
+
+	.source-item label {
+		margin-bottom: 6px;
+		font-size: 12px;
+		color: #888888;
+	}
+
+	.source-input-group {
+		display: flex;
+		gap: 10px;
+		align-items: center;
+	}
+
+	.source-input-group input {
+		flex: 1;
+	}
+
+	.remove-source-btn {
+		background-color: var(--btn-secondary);
+		color: #888888;
+		border: none;
+		padding: 8px;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 16px;
+		transition-duration: 0.2s;
+		min-width: 40px;
+	}
+
+	.remove-source-btn:hover {
+		color: #ef4444;
+		background-color: var(--btn-primary);
+		transform: scale(1.025);
+	}
+</style>