fix: index of zoneList, ... (31435457) · Commits · Victor Friboulet / nautilus

public/js/Palanque/manualPalanque.js

+151 −69

Original line number	Diff line number	Diff line
		@@ -35,12 +35,12 @@ let countDiver = 0;
		let zoneList = [];
		let counterCheck = 0;
		let disableVal = true;

		getDiver("DS1").then(data => fillZoneWithAlreadyExistingPalanque(data));
		let ds_code = document.getElementById("ds_code").textContent;
		getDiver(ds_code).then((data) => fillZoneWithAlreadyExistingPalanque(data));

		window.onload = () => {
		setZoneSize(DropZone.childNodes);
		}
		};

		function allowDrop(event) {
		event.preventDefault();
		@@ -52,22 +52,41 @@ function drag(event) {

		function drop(event) {
		event.preventDefault();
		let index = event.target.id.split('zone')[1];
		if(isElementInList('item', event.target.id.split(',')))
		return;
		let index = event.target.id.split("zone")[1];
		if (isElementInList("item", event.target.id.split(","))) return;

		let data = event.dataTransfer.getData("draggable");
		let draggedItem = document.getElementById(data);
		if (event.target === zoneStart) {
		zoneList[draggedItem.parentElement.id.split('zone')[1]].updateCounterNeg(setDropZoneSize(draggedItem));
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === draggedItem.parentElement.id.split('zone')[1]) {
		element.updateCounterNeg(setDropZoneSize(draggedItem));
		}
		});
		//console.log("Count" + zoneList[draggedItem.parentElement.id.split('zone')[1]].getCounter());
		zoneStart.appendChild(draggedItem);
		}else
		if(zoneList[index].getCounter() <= 3 && zoneList[index].getCounter() + setDropZoneSize(draggedItem) <= 3){
		if(draggedItem.parentElement !== zoneStart && draggedItem.parentElement !== undefined
		&& draggedItem.parentElement !== zoneList[index])
		zoneList[draggedItem.parentElement.id.split('zone')[1]].updateCounterNeg(setDropZoneSize(draggedItem));
		zoneList[index].updateCounterPos(setDropZoneSize(draggedItem));
		} else zoneA = zoneList[0];
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === index) {
		zoneA = element;
		}
		});
		if (
		zoneA.getCounter() <= 3 &&
		zoneA.getCounter() + setDropZoneSize(draggedItem) <= 3
		) {
		if (
		draggedItem.parentElement !== zoneStart &&
		draggedItem.parentElement !== undefined &&
		draggedItem.parentElement !== zoneA
		) {
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === draggedItem.parentElement.id.split('zone')[1]) {
		element.updateCounterNeg(setDropZoneSize(draggedItem));
		}
		});
		}
		zoneA.updateCounterPos(setDropZoneSize(draggedItem));
		//console.log("Count" + zoneList[index].getCounter());
		event.target.appendChild(draggedItem);
		}
		@@ -79,48 +98,59 @@ function drop(event) {
		}

		function setZoneSize(zone) {
		zone.forEach(element => {
		element.childNodes.forEach(elements => {
		zone.forEach((element) => {
		element.childNodes.forEach((elements) => {
		//console.log(elements);
		if(elements.id.split(',')[1] === 'PB')
		zoneList[element.id.split('zone')[1] ].updateCounterPos(2);
		else
		zoneList[element.id.split('zone')[1] ].updateCounterPos(1);
		if (elements.id.split(",")[1] === "PB") {
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === elements.parentElement.id.split('zone')[1]) {
		element.updateCounterPos(2);
		}
		});
		} else {
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === elements.parentElement.id.split('zone')[1]) {
		element.updateCounterPos(1);
		}
		});
		}
		});
		});
		}

		function setDropZoneSize(element) {
		let targetItemsSplit = element.id.split(',');
		let targetItemsSplit = element.id.split(",");
		for (let i = 0; i < targetItemsSplit.length; i++) {
		if(targetItemsSplit[i] === 'PB')
		return 2;
		if (targetItemsSplit[i] === "PB") return 2;
		}
		return 1;
		}

		function isElementInList(element, list) {
		for (let i = 0; i < list.length; i++) {
		if(element == list[i])
		return true;
		if (element == list[i]) return true;
		}
		return false;
		}

		addPalanque.addEventListener("click", function () {
		let palanque = document.createElement("div");
		palanque.setAttribute("class", "border text-center bg-gray-200 rounded-lg p-3 pb-20 zone");
		palanque.setAttribute(
		"class",
		"border text-center bg-gray-200 rounded-lg p-3 pb-20 zone"
		);
		palanque.setAttribute("id", "zone" + countZone);
		palanque.setAttribute("ondrop", "drop(event)");
		palanque.setAttribute("ondragover", "allowDrop(event)");
		zoneList.push(new DropZoneClass(countZone));
		DropZone.appendChild(palanque);
		countZone++;
		//console.log(zoneList);
		console.log(zoneList);
		});

		removePalanque.addEventListener("click", function () {
		let nbZone = prompt("Veuillez entrer le numéro de la palanque à supprimer", "1") - 1;
		let nbZone =
		prompt("Veuillez entrer le numéro de la palanque à supprimer", "1") - 1;
		removePalanqueZone(nbZone);
		});

		@@ -136,16 +166,16 @@ function removePalanqueZone(nbZone){
		zoneList.splice(zoneList.length - 1, 1);
		palanque.parentElement.removeChild(palanque);
		let dropZones = document.querySelectorAll("div.zone");
		dropZones.forEach(element => {
		if(element.id.split('zone')[1] > nbZone){
		element.id = "zone" + (element.id.split('zone')[1] - 1);
		dropZones.forEach((element) => {
		if (element.id.split("zone")[1] > nbZone) {
		element.id = "zone" + (element.id.split("zone")[1] - 1);
		}
		})
		});
		}

		async function getDiver(ds_code) {
		let response = await fetch(`/api/dives/${ds_code}/divers`);
		let data = await response.json().then(data => proccessDiverData(data));
		let data = await response.json().then((data) => proccessDiverData(data));
		return data;
		}

		@@ -155,63 +185,88 @@ function proccessDiverData(data){
		countDiver++;
		let diver = document.createElement("div");
		diver.setAttribute("class", "h-8 border rounded p-1 m-1 bg-gray-300");
		diver.setAttribute("id", 'item' + data[i].US_ID +',' + data[i].PRE_CODE + ',E' + data[i].US_TEACHING_LEVEL + ',' + data[i].US_ID);
		diver.setAttribute(
		"id",
		"item" +
		data[i].US_ID +
		"," +
		data[i].PRE_CODE +
		",E" +
		data[i].US_TEACHING_LEVEL +
		"," +
		data[i].US_ID
		);
		diver.setAttribute("draggable", "true");
		diver.setAttribute("ondragstart", "drag(event)");
		diver.innerHTML = data[i].US_FIRST_NAME + " " + data[i].US_NAME.toUpperCase() + " - " + data[i].PRE_CODE + " - E" + data[i].US_TEACHING_LEVEL;
		diver.innerHTML =
		data[i].US_FIRST_NAME +
		" " +
		data[i].US_NAME.toUpperCase() +
		" - " +
		data[i].PRE_CODE +
		" - E" +
		data[i].US_TEACHING_LEVEL;
		zoneStart.appendChild(diver);
		}
		return data;
		}

		let validatePalanqueCombinate = {
		'PB': ['E1', 'E2', 'E3', 'E4', 'PA-60-GP'],
		'PA': ['E1', 'E2', 'E3', 'E4', 'PA-60-GP'],
		'PO': ['E1', 'E2', 'E3', 'E4', 'PA-60-GP'],
		'PE-12': ['E2', 'E3', 'E4', 'PA-60-GP'],
		'PE-20': ['E2', 'E3', 'E4', 'PA-60-GP'],
		'PE-40': ['E2', 'E3', 'E4', 'PA-60-GP']
		PB: ["E1", "E2", "E3", "E4", "PA-60-GP"],
		PA: ["E1", "E2", "E3", "E4", "PA-60-GP"],
		PO: ["E1", "E2", "E3", "E4", "PA-60-GP"],
		"PE-12": ["E2", "E3", "E4", "PA-60-GP"],
		"PE-20": ["E2", "E3", "E4", "PA-60-GP"],
		"PE-40": ["E2", "E3", "E4", "PA-60-GP"],
		};

		function validateAllCombination() {
		let counterCheck = 0;
		zoneList.forEach(element => {
		zoneList.forEach((element) => {
		element = document.getElementById("zone" + element.getZoneNumber());
		if (element.hasChildNodes()) {
		if(element.childElementCount < 2 \|\| element.childElementCount > 3){
		element.style.backgroundColor = 'rgb(254 202 202)';
		if (
		element.childElementCount < 2 \|\|
		element.childElementCount > 3
		) {
		element.style.backgroundColor = "rgb(254 202 202)";
		return false;
		}
		let children = element.childNodes;
		for (let i = 0; i < children.length; i++) {
		for (let j = 0; j < children.length; j++) {
		if(children[j].id.split(',')[1] === 'PA-60-GP'){
		if (children[j].id.split(",")[1] === "PA-60-GP") {
		counterCheck++;
		element.style.backgroundColor = 'rgb(229 231 235)';
		element.style.backgroundColor = "rgb(229 231 235)";
		return true;
		}
		}
		}
		for (let i = 0; i < children.length; i++) {
		{
		let targetItemsSplit = children[i].id.split(',')[2];
		let targetItemsSplit = children[i].id.split(",")[2];
		for (targetItemsSplit in validatePalanqueCombinate) {
		for (let j = 0; j < children.length; j++) {
		let targetItemsSplit2 = children[j].id.split(',')[2];
		if(validatePalanqueCombinate[targetItemsSplit].includes(targetItemsSplit2)){
		let targetItemsSplit2 =
		children[j].id.split(",")[2];
		if (
		validatePalanqueCombinate[
		targetItemsSplit
		].includes(targetItemsSplit2)
		) {
		counterCheck++;
		element.style.backgroundColor = 'rgb(229 231 235)';
		element.style.backgroundColor =
		"rgb(229 231 235)";
		return true;
		}
		}
		element.style.backgroundColor = 'rgb(254 202 202)';
		element.style.backgroundColor = "rgb(254 202 202)";
		return false;
		}
		}

		}
		} else {
		element.style.backgroundColor = 'rgb(229 231 235)';
		element.style.backgroundColor = "rgb(229 231 235)";
		return false;
		}
		});
		@@ -224,8 +279,6 @@ function validateAllCombination(){
		}
		}



		let interval = setInterval(function () {
		validateAllCombination();
		}, 250);
		@@ -235,7 +288,6 @@ validatePalanque.addEventListener("click", function(){
		sendPalanque();
		clearInterval(interval);
		}

		});

		function returnValueToPhp(ds_code) {
		@@ -245,7 +297,7 @@ function returnValueToPhp(ds_code) {
		let zoneList = [];
		for (let j = 0; j < palanque[i].childElementCount; j++) {
		let item = palanque[i].childNodes[j];
		zoneList.push(item.id.split(',')[3]);
		zoneList.push(item.id.split(",")[3]);
		}
		palanqueList.push(zoneList);
		}
		@@ -254,25 +306,35 @@ function returnValueToPhp(ds_code) {
		}

		function sendPalanque() {
		let palanqueList = returnValueToPhp("DS1");
		let palanqueList = returnValueToPhp(ds_code);
		let palanqueListJson = JSON.stringify(palanqueList);
		let csrfToken = document.getElementById('csrfToken').textContent;
		let csrfToken = document.getElementById("csrfToken").textContent;

		let xhr = new XMLHttpRequest();
		xhr.open('POST', '/api/palanques', true);
		xhr.open("POST", "/api/palanques", true);
		xhr.setRequestHeader("Content-Type", "application/json");
		xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
		xhr.setRequestHeader("X-CSRF-TOKEN", csrfToken);
		xhr.onreadystatechange = function () {
		if (xhr.readyState === XMLHttpRequest.DONE) {
		if (xhr.status === 200) {
		console.log("Request successful");
		const responseData = JSON.parse(xhr.responseText);
		console.log("Additional Data:", responseData.additionalData);
		document.getElementById(("toast-success")).classList.remove("hidden");
		document.getElementById(("toast-success")).classList.remove("opacity-0");
		document
		.getElementById("toast-success")
		.classList.remove("hidden");
		document
		.getElementById("toast-success")
		.classList.remove("opacity-0");
		} else {
		const responseData = JSON.parse(xhr.responseText);
		console.error("Request failed", responseData.errData);
		document
		.getElementById("toast-danger")
		.classList.remove("hidden");
		document
		.getElementById("toast-danger")
		.classList.remove("opacity-0");
		}
		}
		};
		@@ -280,24 +342,44 @@ function sendPalanque() {
		console.log("send");
		}
		function fillZoneWithAlreadyExistingPalanque(diverList) {
		diverList.forEach(element => {
		let diver = document.getElementById('item' + element.US_ID + ',' + element.PRE_CODE + ',E' + element.US_TEACHING_LEVEL + ',' + element.US_ID);
		diverList.forEach((element) => {
		let diver = document.getElementById(
		"item" +
		element.US_ID +
		"," +
		element.PRE_CODE +
		",E" +
		element.US_TEACHING_LEVEL +
		"," +
		element.US_ID
		);
		if (element.DG_NUMBER !== 0 && element.DG_NUMBER !== null) {
		let dgNumber = element.DG_NUMBER - 1;
		let zone = document.getElementById("zone" + dgNumber);
		if (zone) {
		zone.appendChild(diver);
		zoneList[dgNumber].updateCounterPos(setDropZoneSize(diver));
		if(zoneStart.contains(diver))
		zoneStart.removeChild(diver);
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === dgNumber) {
		element.updateCounterPos(setDropZoneSize(diver));
		}
		});
		if (zoneStart.contains(diver)) zoneStart.removeChild(diver);
		} else {
		let palanque = document.createElement("div");
		palanque.setAttribute("class", "border text-center bg-gray-200 rounded-lg p-3 pb-20 zone");
		palanque.setAttribute(
		"class",
		"border text-center bg-gray-200 rounded-lg p-3 pb-20 zone"
		);
		palanque.setAttribute("id", "zone" + dgNumber);
		palanque.setAttribute("ondrop", "drop(event)");
		palanque.setAttribute("ondragover", "allowDrop(event)");
		zoneList.push(new DropZoneClass(dgNumber));
		zoneList[dgNumber].updateCounterPos(setDropZoneSize(diver));
		console.log(zoneList);
		zoneList.forEach((element) => {
		if (element.getZoneNumber() === dgNumber) {
		element.updateCounterPos(setDropZoneSize(diver));
		}
		});
		DropZone.appendChild(palanque);
		palanque.appendChild(diver);
		if (zoneStart.contains(diver)) {

resources/views/components/footer.blade.php

+1 −1

Original line number	Diff line number	Diff line
		<footer class="w-full flex flex-row sm:grid sm:grid-cols-3 bg-[#002550] h-36 items-center">
		<div class='w-full bg-blue-700 h-full flex flex-row items-center px-4'>
		<img src='{{ asset("/images/logo-cn.png") }}' class="w-full" alt=''>
		<img src='{{ asset("/images/logo-cn.png") }}' class="w-full max-w-[429px]" alt=''>
		</div>
		<div class='text-white bg-blue-700 h-full w-1/2 justify-end'
		style="clip-path: ellipse(75% 75% at 0 33%);">

resources/views/dive_infos_palanque.blade.php

+50 −12

Original line number	Diff line number	Diff line
		<x-layout>
		<link href='https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css' rel='stylesheet' />
		<textarea name="csrfToken" id="csrfToken" class="hidden">@csrf</textarea>
		<textarea name="ds_code" id="ds_code" class="hidden">{{ $dive->DS_CODE }}</textarea>
		<x-page-title>Plongée du {{ $dive->DS_DATE }} - {{ $dive->DL_NAME }}</x-page-title>
		<div class="text-right mb-4">
		<a href="javascript:history. back()"
		@@ -61,7 +62,8 @@ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		<h3 class="text-xl font-bold mb-2">Plongeurs</h3>
		<div class="sticky top-6">
		<p class="text-center italic">Déplacez les plongeurs vers les palanquées correspondantes</p>
		<div id="zoneStart" ondrop="drop(event)" ondragover="allowDrop(event)" class="text-center w-full p-4 pb-20 min-h-16 border rounded-lg bg-gray-200">
		<div id="zoneStart" ondrop="drop(event)" ondragover="allowDrop(event)"
		class="text-center w-full p-4 pb-20 min-h-16 border rounded-lg bg-gray-200">

		</div>
		</div>
		@@ -74,14 +76,19 @@ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		</div>

		<div class="my-3 flex justify-center gap-2">
		<button type='button' id="removePal" class="mt-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
		<button type='button' id="removePal"
		class="mt-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
		stroke="currentColor" class="w-6 h-6">
		<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" />
		</svg>
		</button>
		<button type='button' id="validatePal" class="mt-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Valider</button>
		<button type='button' id="addPal" class="mt-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
		<button type='button' id="validatePal"
		class="mt-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Valider</button>
		<button type='button' id="addPal"
		class="mt-1 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
		stroke="currentColor" class="w-6 h-6">
		<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
		</svg>
		</button>
		@@ -89,18 +96,49 @@ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
		</div>
		</div>

		<div id="toast-success" class="hidden fixed right-8 bottom-8 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow" role="alert">
		<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
		<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
		<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
		<div id="toast-success"
		class="hidden fixed right-8 bottom-8 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow"
		role="alert">
		<div
		class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
		<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
		viewBox="0 0 20 20">
		<path
		d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
		</svg>
		<span class="sr-only">Check icon</span>
		</div>
		<div class="ms-3 text-sm font-normal">Enregistrement de la palanquée effectué</div>
		<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8" data-dismiss-target="#toast-success" aria-label="Close">
		<button type="button"
		class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8"
		data-dismiss-target="#toast-success" aria-label="Close">
		<span class="sr-only">Close</span>
		<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
		<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
		<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
		d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
		</svg>
		</button>
		</div>
		<div id="toast-danger"
		class="hidden fixed right-8 bottom-8 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
		role="alert">
		<div
		class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
		<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
		viewBox="0 0 20 20">
		<path
		d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z" />
		</svg>
		<span class="sr-only">Error icon</span>
		</div>
		<div class="ms-3 text-sm font-normal">Une erreur s'est produite lors de la sauvegarde.</div>
		<button type="button"
		class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
		data-dismiss-target="#toast-danger" aria-label="Close">
		<span class="sr-only">Close</span>
		<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
		<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
		d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
		</svg>
		</button>
		</div>