timelapse/timelapse-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

manager de projet (create_delete)

Browse Source
This commit is contained in:
arussac
2025-02-15 17:45:30 +01:00
parent 29b75ecc6c
commit 7660d59b24
4 changed files with 110 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
css/style.css
View File

@@ -209,4 +209,51 @@ footer{
} }
#video-container{ #video-container{
margin-bottom: 15px; margin-bottom: 15px;
} }
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.6); /* Darker background */
}
.modal-content {
background-color: #fff;
padding: 20px;
border: 2px solid #ff0000; /* Red border */
width: 40% !important; /* Fixed width for a smaller modal */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add shadow for emphasis */
border-radius: 8px; /* Rounded corners */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center the modal */
}
.modal-buttons {
text-align: center; /* Center buttons */
margin-top: 20px;
}
.modal-buttons button {
background-color: #ff0000; /* Red buttons */
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
.modal-buttons button:hover {
background-color: #cc0000; /* Darker red on hover */
}
#alertMessage {
color: #ff0000; /* Red text */
font-size: 18px;
text-align: center;
}

9
index.html
View File

@@ -12,6 +12,15 @@
</head> </head>
<body> <body>
<div id="customAlert" class="modal">
<div class="modal-content">
<p id="alertMessage">This is a custom alert!</p>
<div class="modal-buttons">
<button class="btn btn-primary"id="cancelBtn">Cancel</button>
<button class="btn btn-primary"id="okBtn">OK</button>
</div>
</div>
</div>
<div id="form-container" class="form-container" style="display: none"> <div id="form-container" class="form-container" style="display: none">
<div class="form-content" id="place-of-form"> <div class="form-content" id="place-of-form">
<button id="close-form-button" class="close-button">&times;</button> <button id="close-form-button" class="close-button">&times;</button>

51
js/index.js
View File

@@ -2,7 +2,8 @@
function display_projects() { function display_projects() {
// Get data from API and then generate HTML code to display the data in a table // Get data from API and then generate HTML code to display the data in a table
const table = document.getElementById("table-projects"); const table = document.getElementById("table-projects");
const formContainer=document.getElementById('form-container') const formContainer = document.getElementById('form-container');
function showForm() { function showForm() {
formContainer.style.display = 'flex'; formContainer.style.display = 'flex';
} }
@@ -10,28 +11,28 @@ function display_projects() {
function hideForm() { function hideForm() {
formContainer.style.display = 'none'; formContainer.style.display = 'none';
} }
document.getElementById('show-form-button').addEventListener('click', showForm); document.getElementById('show-form-button').addEventListener('click', showForm);
document.getElementById('close-form-button').addEventListener('click', hideForm); document.getElementById('close-form-button').addEventListener('click', hideForm);
document.getElementById('submit').addEventListener('click', handleFormSubmit); document.getElementById('submit').addEventListener('click', handleFormSubmit);
async function handleFormSubmit() { async function handleFormSubmit() {
const nameProject = document.getElementById('name').value; const nameProject = document.getElementById('name').value;
const description = document.getElementById('description').value; const description = document.getElementById('description').value;
if(nameProject.length==0 || !checkName(global_project_list, nameProject)){ if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' + alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
'veuillez en trouver un autre'); 'veuillez en trouver un autre');
return 0; return 0;
} }
PostNewProject(nameProject,description); PostNewProject(nameProject, description);
} }
function checkName(Projects, name) { function checkName(Projects, name) {
let res = true; let res = true;
Projects.forEach(project => { Projects.forEach(project => {
const ProjectName = project.name; const ProjectName = project.name;
if(ProjectName==name) if (ProjectName === name)
res=false; res = false;
}); });
return res; return res;
} }
@@ -51,27 +52,47 @@ function display_projects() {
<th>${formatDate(global_project_list[i].start_date)}</th> <th>${formatDate(global_project_list[i].start_date)}</th>
<th>${global_project_list[i].status}</th> <th>${global_project_list[i].status}</th>
<th><button class="project_detail btn btn-primary">détails de ${ <th><button class="project_detail btn btn-primary">détails de ${
global_project_list[i].name global_project_list[i].name
}</button></th> }</button></th>
<th>test</th> <th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th>
</tr>`; </tr>`;
} }
table.innerHTML = datas; table.innerHTML = datas;
// Select all the buttons with the class button_project // Select all the buttons_access with the class button_project
const buttons = document.getElementsByClassName("project_detail"); const buttons_access = document.getElementsByClassName("project_detail");
const buttons_delete = document.getElementsByClassName("project_delete");
// Add an event listener to each button // Add an event listener to each button
for (let i = 0; i < buttons.length; i++) { for (let i = 0; i < buttons_access.length; i++) {
buttons[i].addEventListener("click", (event) => { buttons_access[i].addEventListener("click", (event) => {
// Send data to API and then navigate to projet_detail.html page // Send data to API and then navigate to projet_detail.html page
window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`; window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
}); });
buttons[i].addEventListener("onclick", (event) => { buttons_access[i].addEventListener("click", (event) => {
// Send data to API and then navigate to projet_detail.html page // Send data to API and then navigate to projet_detail.html page
current_project = change_current_project(i); current_project = change_current_project(i);
}); });
} }
for (let i = 0; i < buttons_delete.length; i++) {
buttons_delete[i].addEventListener("click", (event) => {
const projectName = global_project_list[i].name;
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
document.getElementById('customAlert').style.display = 'block';
document.getElementById('okBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
// Call your delete function here
deleteProject(global_project_list[i].id);
};
document.getElementById('cancelBtn').onclick = function() {
document.getElementById('customAlert').style.display = 'none';
};
});
}
} }
getAllProject() getAllProject()
.then((project_list) => { .then((project_list) => {
global_project_list = project_list; global_project_list = project_list;

17
js/utilities/routes.js
View File

@@ -99,6 +99,9 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
} }
async function PostNewProject(nameProject, description){ async function PostNewProject(nameProject, description){
try { try {
if(description.length==0){
description="Non renseignée"
}
const mydata = JSON.stringify({ const mydata = JSON.stringify({
name: nameProject, name: nameProject,
description: description description: description
@@ -116,4 +119,18 @@ async function PostNewProject(nameProject, description){
console.error("Error posting video:", error); console.error("Error posting video:", error);
throw error; throw error;
} }
}
async function deleteProject(id){
try {
const response = await $.ajax({
url: api_url.concat(`/projects/${id}`),
method: "DELETE",
}).then(()=>{
alert("Projet supprimé avec succès")
})
} catch (error) {
console.error("Error deleting project, project id :"+ id+"\n error :"+error);
throw error;
}
} }