manager de projet (create_delete)
This commit is contained in:
arussac
@@ -210,3 +210,50 @@ footer{
|
||||
#video-container{
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -12,6 +12,15 @@
|
||||
</head>
|
||||
|
||||
<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 class="form-content" id="place-of-form">
|
||||
<button id="close-form-button" class="close-button">×</button>
|
||||
|
||||
51
js/index.js
51
js/index.js
@@ -2,7 +2,8 @@
|
||||
function display_projects() {
|
||||
// Get data from API and then generate HTML code to display the data in a table
|
||||
const table = document.getElementById("table-projects");
|
||||
const formContainer=document.getElementById('form-container')
|
||||
const formContainer = document.getElementById('form-container');
|
||||
|
||||
function showForm() {
|
||||
formContainer.style.display = 'flex';
|
||||
}
|
||||
@@ -10,28 +11,28 @@ function display_projects() {
|
||||
function hideForm() {
|
||||
formContainer.style.display = 'none';
|
||||
}
|
||||
|
||||
document.getElementById('show-form-button').addEventListener('click', showForm);
|
||||
document.getElementById('close-form-button').addEventListener('click', hideForm);
|
||||
document.getElementById('submit').addEventListener('click', handleFormSubmit);
|
||||
|
||||
|
||||
async function handleFormSubmit() {
|
||||
const nameProject = document.getElementById('name').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' +
|
||||
'veuillez en trouver un autre');
|
||||
return 0;
|
||||
}
|
||||
PostNewProject(nameProject,description);
|
||||
PostNewProject(nameProject, description);
|
||||
}
|
||||
|
||||
function checkName(Projects, name) {
|
||||
let res = true;
|
||||
Projects.forEach(project => {
|
||||
const ProjectName = project.name;
|
||||
if(ProjectName==name)
|
||||
res=false;
|
||||
const ProjectName = project.name;
|
||||
if (ProjectName === name)
|
||||
res = false;
|
||||
});
|
||||
return res;
|
||||
}
|
||||
@@ -51,27 +52,47 @@ function display_projects() {
|
||||
<th>${formatDate(global_project_list[i].start_date)}</th>
|
||||
<th>${global_project_list[i].status}</th>
|
||||
<th><button class="project_detail btn btn-primary">détails de ${
|
||||
global_project_list[i].name
|
||||
}</button></th>
|
||||
<th>test</th>
|
||||
global_project_list[i].name
|
||||
}</button></th>
|
||||
<th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th>
|
||||
</tr>`;
|
||||
}
|
||||
table.innerHTML = datas;
|
||||
|
||||
// Select all the buttons with the class button_project
|
||||
const buttons = document.getElementsByClassName("project_detail");
|
||||
// Select all the buttons_access with the class button_project
|
||||
const buttons_access = document.getElementsByClassName("project_detail");
|
||||
const buttons_delete = document.getElementsByClassName("project_delete");
|
||||
// Add an event listener to each button
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
buttons[i].addEventListener("click", (event) => {
|
||||
for (let i = 0; i < buttons_access.length; i++) {
|
||||
buttons_access[i].addEventListener("click", (event) => {
|
||||
// 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}`;
|
||||
});
|
||||
buttons[i].addEventListener("onclick", (event) => {
|
||||
buttons_access[i].addEventListener("click", (event) => {
|
||||
// Send data to API and then navigate to projet_detail.html page
|
||||
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()
|
||||
.then((project_list) => {
|
||||
global_project_list = project_list;
|
||||
|
||||
@@ -99,6 +99,9 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
|
||||
}
|
||||
async function PostNewProject(nameProject, description){
|
||||
try {
|
||||
if(description.length==0){
|
||||
description="Non renseignée"
|
||||
}
|
||||
const mydata = JSON.stringify({
|
||||
name: nameProject,
|
||||
description: description
|
||||
@@ -117,3 +120,17 @@ async function PostNewProject(nameProject, description){
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user