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

maj

Browse Source
This commit is contained in:
anto
2025-01-12 15:55:26 +01:00
parent 28833a67f1
commit 188d7ac004
3 changed files with 99 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
css/style.css
View File

@@ -40,4 +40,56 @@ footer {
}
#addVideoHandler{
display: flex;
}
#show-form-button {
left: 20px;
}
.form-container {
z-index: 25;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.form-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
text-align: center;
}
.form-content h1 {
margin: 0;
}
#close-form-button {
margin-top: 20px;
}
.duration-input {
display: flex;
align-items: center;
}
.duration-input button {
width: 30px;
height: 30px;
margin: 0 5px;
}
.duration-input input {
width: 50px;
text-align: center;
}
#close-form-button {
margin-top: 20px;
}

25
html/projet_detail.html
View File

@@ -19,6 +19,26 @@
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<!-- formulaire -->
<div id="form-container" class="form-container">
<div class="form-content">
<form id="my-form">
<label for="name">Nom :</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="duration">Durée (en secondes) :</label>
<div class="duration-input">
<button type="button" id="decrement-button">-</button>
<input type="number" id="duration" name="duration" value="0" min="0" required>
<button type="button" id="increment-button">+</button>
</div>
<br><br>
<button class="btn btn-primary" type="submit">Soumettre</button>
</form>
<button class="btn btn-primary" id="close-form-button">Fermer</button>
</div>
</div>
<!-- page classique -->
<div id="section" class="container mt-5">
<div class="row">
<div class="col-md-12">
@@ -40,7 +60,7 @@
<select name="videos" id="video_selector" class="select2">
</select>
<div class="buttons-container">
<button class="btn btn-primary" id="projets">
<button class="btn btn-primary" id="show-form-button">
<span> + </span>
</button>
</div>
@@ -69,9 +89,6 @@
export images
</button></th>
</tr>
<tr>
<th colspan="3" scope="col">images</th>
</tr>
</thead>
<tbody id="imageSource"></tbody>
</table>

26
js/projet_detail.js
View File

@@ -15,6 +15,32 @@ document.addEventListener("DOMContentLoaded", () => {
generateViewMetric(projectId);
});
// button
document.getElementById('show-form-button').addEventListener('click', function() {
document.getElementById('form-container').style.display = 'flex';
});
document.getElementById('close-form-button').addEventListener('click', function() {
document.getElementById('form-container').style.display = 'none';
});
document.getElementById('increment-button').addEventListener('click', function() {
let durationInput = document.getElementById('duration');
durationInput.value = parseInt(durationInput.value) + 1;
});
document.getElementById('decrement-button').addEventListener('click', function() {
let durationInput = document.getElementById('duration');
if (parseInt(durationInput.value) > 0) {
durationInput.value = parseInt(durationInput.value) - 1;
}
});
document.getElementById('my-form').addEventListener('submit', function(event) {
event.preventDefault();
alert('Nouveau Projet enregistré :\nNom : ' + document.getElementById('name').value + '\nDurée : ' + document.getElementById('duration').value + ' secondes');
});
document.getElementById("projets").addEventListener("click", () => {
window.location.href = "../index.html";
current_project = "";