Skip to content
Snippets Groups Projects
Commit 2d93e873 authored by Naufal-Nalendra's avatar Naufal-Nalendra
Browse files

feat: connect buttons with popup

parent 2dd367b9
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/views/bookmark/bookmark.php
+ 84
− 59
View file @ 2d93e873
<!DOCTYPE html> <!DOCTYPE html>
<?php <?php
include('connection.php'); include('connection.php');
include('popupEditDelete.php');
// SQL query to fetch book information // SQL query to fetch book information
$sql = "SELECT officeCode, country FROM offices LIMIT 10"; $sql = "SELECT officeCode, country FROM offices LIMIT 10";
$result = $conn->query($sql); $result = $conn->query($sql);
?> ?>
<?php
include('popupEditDelete.php');
?>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title> <title>My Web Page</title>
<link rel="stylesheet" type="text/css" href="../../public/style/bookmark.css"> <link rel="stylesheet" type="text/css" href="../style/bookmark.css">
<link rel="stylesheet" type="text/css" href="../../public/style/navBar.css"> <link rel="stylesheet" type="text/css" href="../style/navBar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h1>Bookmarks</h1> <h1>Bookmarks</h1>
</div> </div>
<?php <?php
$boxCount = 0; $boxCount = 0; // Initialize a variable to count the bookmark boxes
if ($result->num_rows > 0) { if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) { // Loop through the rows of data and create bookmark boxes
$officeCode = $row["officeCode"]; while ($row = $result->fetch_assoc()) {
$country = $row["country"]; $officeCode = $row["officeCode"];
$country = $row["country"];
if ($boxCount % 2 == 0) { // Check if it's time to create a new container
if ($boxCount > 0) { if ($boxCount % 2 == 0) {
echo '</div>'; if ($boxCount > 0) {
} echo '</div>'; // Close the previous container
echo '<div class="container">';
} }
$boxCount++; echo '<div class="container">'; // Open a new container
?> }
<div class="bookmark-box">
<div class="image-rectangle"> // Increment the box count
<img src="../pages/images/image 3.png" alt="Image Alt Text"> $boxCount++;
// Generate unique IDs for the elements based on boxCount
$paragraphId = 'paragraph' . $boxCount;
$editPopupId = 'editPopup' . $boxCount;
$editTextboxId = 'editTextbox' . $boxCount;
$continueButtonId = 'continueButtonEdit' . $boxCount;
?>
<div class="bookmark-box">
<div class="image-rectangle">
<img src="../pages/images/image 3.png" alt="Image Alt Text">
</div>
<div class="content-rectangle">
<div class="content-header">
<h1><?php echo $officeCode; ?></h1>
<ul class="star-list">
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
</div> </div>
<div class="content-rectangle"> <br>
<div class="content-header"> <h2><?php echo $country ?></h2>
<h1><?php echo $officeCode; ?></h1> <!-- Assign unique IDs to the paragraph and buttons -->
<p id="<?php echo $paragraphId; ?>"><br>Lorem ipsum dolor sit amet</p>
<ul class="star-list"> <hr class="bookmark-line">
<li><i class="fa fa-star checked"></i></li> <button class="edit-button" data-box-index="<?php echo $boxCount; ?>">Edit</button>
<li><i class="fa fa-star checked"></i></li> <!-- Add a unique delete button for each bookmark box -->
<li><i class="fa fa-star checked"></i></li> <button class="delete-button" id="<?php echo $deleteButtonId; ?>">Delete</button>
<li><i class="fa fa-star checked"></i></li> </div>
<li><i class="fa fa-star"></i></li> </div>
</ul>
</div> <!-- Create unique edit and delete popups for each bookmark box -->
<br> <div id="<?php echo $editPopupId; ?>" class="popup">
<h2><?php echo $country ?></h2> <div class="popup-content">
<p><br>Lorem ipsum dolor sit amet</p> <h1><?php echo $editPopupContentTitle; ?></h1>
<hr class="bookmark-line"> <input class="textbox" id="<?php echo $editTextboxId; ?>" type="text">
<button class="edit-button">Edit</button> <div class="button-container">
<button class="delete-button">Delete</button> <button class="continue-button" id="<?php echo $continueButtonId; ?>"><?php echo $continueButtonText; ?></button>
<button class="cancel-button" id="cancelButtonEdit<?php echo $boxCount; ?>"><?php echo $cancelButtonText; ?></button>
</div> </div>
</div> </div>
<?php </div>
if ($boxCount % 2 == 0) {
echo '</div>';
}
}
if ($boxCount % 2 != 0) { <?php
echo '</div>';
} // Check if it's time to create a new container
} else { if ($boxCount % 2 == 0) {
echo "No records found"; echo '</div>'; // Close the current container after two bookmark boxes
} }
}
$conn->close(); // Close the last container (if it doesn't have 2 bookmark boxes)
?> if ($boxCount % 2 != 0) {
<script src = "../../public/js/bookmark.js"></script> echo '</div>';
}
} else {
echo "No records found";
}
$conn->close();
?>
</body> </body>
</html> </html>
public/js/bookmark.js
+ 15
− 20
View file @ 2d93e873
// JavaScript code for handling bookmark popups and buttons
// Handle edit popups for each bookmark box
var editButtons = document.querySelectorAll('.edit-button'); var editButtons = document.querySelectorAll('.edit-button');
editButtons.forEach(function (button) { editButtons.forEach(function (button) {
button.addEventListener('click', function () { button.addEventListener('click', function () {
document.getElementById('editPopup').classList.add('show'); var boxIndex = button.getAttribute('data-box-index');
}); var editPopup = document.getElementById('editPopup' + boxIndex);
}); var editTextbox = document.getElementById('editTextbox' + boxIndex);
document.getElementById('continueButtonEdit').addEventListener('click', function () { editPopup.classList.add('show');
document.getElementById('editPopup').classList.remove('show');
});
document.getElementById('cancelButtonEdit').addEventListener('click', function () { document.getElementById('continueButtonEdit' + boxIndex).addEventListener('click', function () {
document.getElementById('editPopup').classList.remove('show'); var paragraph = document.getElementById('paragraph' + boxIndex);
}); paragraph.textContent = editTextbox.value;
editPopup.classList.remove('show');
});
var deleteButtons = document.querySelectorAll('.delete-button'); document.getElementById('cancelButtonEdit' + boxIndex).addEventListener('click', function () {
editPopup.classList.remove('show');
deleteButtons.forEach(function (button) { });
button.addEventListener('click', function () {
document.getElementById('deletePopup').classList.add('show');
}); });
}); });
document.getElementById('continueButtonDelete').addEventListener('click', function () {
document.getElementById('deletePopup').classList.remove('show');
});
document.getElementById('cancelButtonDelete').addEventListener('click', function () {
document.getElementById('deletePopup').classList.remove('show');
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment