diff --git a/api/listRestaurant.php b/api/listRestaurant.php
new file mode 100644
index 0000000000000000000000000000000000000000..97ca4bb17087dc4d2b7e84e313b1e9e2bd290049
--- /dev/null
+++ b/api/listRestaurant.php
@@ -0,0 +1,13 @@
+<?php
+require_once '../app/core/db.php';
+
+$conn = new Database;
+$sql = "SELECT * FROM restaurant";
+$result = $conn->execute($sql);
+$data = [];
+while($row = mysqli_fetch_assoc($result)){
+ $data[] = $row;
+}
+header('Content-Type: application/json');
+echo json_encode($data);
+?>
\ No newline at end of file
diff --git a/app/views/addVoucher/index.php b/app/views/addVoucher/index.php
index 2640959e0e7a20a7eeb0c0d69c0f34c7b7392854..bb525be7b0e995d386b97565af17ae7163ad2613 100644
--- a/app/views/addVoucher/index.php
+++ b/app/views/addVoucher/index.php
@@ -1,5 +1,4 @@
<?php
-include_once 'voucherCard.php';
$title = "EatsNow";
$page = "Add Voucher";
?>
@@ -16,7 +15,7 @@ $page = "Add Voucher";
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
-<section class="sidebar">
+ <section class="sidebar">
<a href="/Home" class="logo">
<img src="../../../public/assets/img/logo1.png"/>
</a>
@@ -25,20 +24,21 @@ $page = "Add Voucher";
<section class="content">
<div id ="menu-btn" class="fas fa-bars"></div>
<div class="voucher-list">
- <?php
- echo generateVoucherCard(
- "Voucher 1",
- 100 );
- echo generateVoucherCard(
- "Voucher 2",
- 200
- );
- ?>
+ <!-- <?php
+ // echo generateVoucherCard(
+ // "Voucher 1",
+ // 100 );
+ // echo generateVoucherCard(
+ // "Voucher 2",
+ // 200
+ // );
+ ?> -->
</div>
</section>
- <a href="AddVoucher/Add" id="add-btn">
+ <a id="add-btn">
<img src="../../../public/assets/img/add.png" alt="img">
</a>
+ <div class="dialog-overlay"></div>
<script src="../../../public/js/sidebar.js"></script>
<script src="../../../public/js/voucher.js"></script>
</body>
\ No newline at end of file
diff --git a/app/views/addVoucher/voucherCard.php b/app/views/addVoucher/voucherCard.php
deleted file mode 100644
index 625636f0d6a4f93260d8775db9aae76632dbf4ef..0000000000000000000000000000000000000000
--- a/app/views/addVoucher/voucherCard.php
+++ /dev/null
@@ -1,32 +0,0 @@
-<?php
-function generateVoucherCard($title, $desc) {
- $id = str_replace(' ', '', $title);
- $card = <<<EOT
- <div class="voucher">
- <label class="voucher-title">$title</label>
- <label class="voucher-desc">Redeem voucher with $desc points</label>
- <div class="voucher-btn">
- <button id="voucher-edit" onclick="on('$title', '$desc')">Edit</button>
- <button id="voucher-delete">Delete</button>
- </div>
- <div class="voucher-edit" id="voucher-edit-$id">
- <div class="body-text" id="body-text">
- <div class="voucher-container">
- <label>Voucher Name</label>
- <input type="text" value="$title" id="edit-title">
- </div>
- <div class="voucher-container">
- <label>Voucher Description</label>
- <input type="number" value="$desc" id="edit-desc">
- </div>
- </div>
- <div class="voucher-btn">
- <button id="voucher-save" onclick="saveEdit()">Save</button>
- <button id="voucher-cancel" onclick="off()">Cancel</button>
- </div>
- </div>
- </div>
- EOT;
- return $card;
-}
-?>
\ No newline at end of file
diff --git a/public/css/voucher.css b/public/css/voucher.css
index b3514f2ef1aa9e77a93a06e78fbf2c34edfb132b..5b9a3868618666eb995b38c4d326325cab8fa06b 100644
--- a/public/css/voucher.css
+++ b/public/css/voucher.css
@@ -70,7 +70,7 @@
overflow: auto;
border-radius: 30px;
}
-.voucher-edit .body-text{
+.body-text{
margin-top:20px;
}
.voucher-edit .body-text img{
@@ -88,11 +88,17 @@ text-align:justify;
align-items: center;
justify-content: space-around;
}
-@keyframes slide_up{
- 0%{
- transform: translateY(500px);
- }
- 100%{
- transform: translateY(0px);
- }
-}
+.dialog-overlay{
+ position: fixed;
+ display: none;
+ top: 50%;
+ left: 50%;
+ width: 50%;
+ overflow: auto;
+ transform: translate(-50%,-50%);
+ background-color: white;
+ z-index: 3;
+ box-shadow: 0 0 10px black;
+ overflow: auto;
+ border-radius: 30px;
+}
\ No newline at end of file
diff --git a/public/js/voucher.js b/public/js/voucher.js
index 1a50c1adae6c459eb03ce9ca3860d1a268960223..412dc4902f09ea8b6bd9e0af4df8550cd0ed5541 100644
--- a/public/js/voucher.js
+++ b/public/js/voucher.js
@@ -1,5 +1,5 @@
-function on(title, desc) {
- var modalId = "voucher-edit-" + title.replace(/\s/g, ""); // Create a unique ID for the modal
+function on(id, title, desc) {
+ var modalId = "voucher-edit-" + id; // Create a unique ID for the modal
console.log(modalId);
var modal = document.getElementById(modalId);
modal.style.display = "block";
@@ -7,6 +7,29 @@ function on(title, desc) {
document.getElementById("edit-desc").value = desc;
}
+function handleVoucherDeletion() {
+ console.log('Voucher deleted successfully!');
+ location.reload();
+}
+
+function deleteVoucher(id, callback) {
+ var xhr = new XMLHttpRequest();
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 204) {
+ // Call the callback function after successful deletion
+ callback();
+ } else {
+ console.error("Error deleting voucher. Status:", xhr.status);
+ }
+ }
+ };
+
+ // TODO: Change the URL
+ xhr.open("DELETE", "http://localhost:8000/api/voucher/" + id, true);
+ xhr.send();
+}
+
function off() {
var modals = document.getElementsByClassName("voucher-edit");
for (var i = 0; i < modals.length; i++) {
@@ -14,7 +37,188 @@ function off() {
}
}
+function save(id) {
+ // Get the updated values from the input fields
+ var updatedTitle = document.querySelector("#voucher-edit-" + id + " #edit-title").value;
+ var updatedDescString = document.querySelector("#voucher-edit-" + id + " #edit-desc").value;
+
+ // Validate input fields
+ if (!updatedTitle || !updatedDescString) {
+ alert("Please fill in all fields.");
+ return;
+ }
+
+ var updatedDesc = parseInt(updatedDescString, 10);
+ // Create an object with the updated data
+ var updatedData = {
+ title: updatedTitle,
+ desc: updatedDesc
+ };
+
+ // Convert the object to JSON
+ var jsonData = JSON.stringify(updatedData);
+
+ var xhr = new XMLHttpRequest();
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ console.log('Voucher updated successfully!');
+ off(); // Close the modal after saving
+ // Assuming you want to refresh the page after updating
+ location.reload();
+ } else if (xhr.status === 500) {
+ alert("Voucher name should be unique.");
+ } else {
+ console.error("Error updating voucher. Status:", xhr.status);
+ }
+ }
+ };
+
+ // TODO: Change the URL
+ xhr.open("PUT", "http://localhost:8000/api/voucher/" + id, true);
+ xhr.setRequestHeader("Content-Type", "application/json");
+ xhr.send(jsonData);
+ console.log(id);
+ console.log(jsonData);
+}
+
+function generateVoucherCard(id, title, desc) {
+ console.log(id);
+ console.log(title);
+ console.log(desc);
+ const card = document.createElement("div");
+ card.className = "voucher";
+ // Add your modal content here (file upload, input fields, buttons, etc.)
+ var voucher = `
+ <label class="voucher-title">${title}</label>
+ <label class="voucher-desc">Redeem voucher with ${desc} points</label>
+ <div class="voucher-btn">
+ <button id="voucher-edit" onclick="on('${id}', '${title}', '${desc}')">Edit</button>
+ <button id="voucher-delete" onclick="deleteVoucher(${id}, handleVoucherDeletion)">Delete</button> <div class="voucher-edit" id="voucher-edit-${id}">
+ <div class="body-text" id="body-text">
+ <div class="voucher-container">
+ <label>Voucher Name</label>
+ <input type="text" value="${title}" id="edit-title">
+ </div>
+ <div class="voucher-container">
+ <label>Voucher Description</label>
+ <input type="number" value="${desc}" id="edit-desc">
+ </div>
+ </div>
+ <div class="voucher-btn">
+ <button id="voucher-save" onclick="save(${id})">Save</button>
+ <button id="voucher-cancel" onclick="off()">Cancel</button>
+ </div>
+ </div>
+ `;
+ card.innerHTML = voucher;
+ return card;
+}
+
function saveEdit() {
- // Add code to save the edited values
- off(); // Close the modal after saving
+ var updatedTitle = document.querySelector("#add-title").value;
+ var updatedDescString = document.querySelector("#add-desc").value;
+
+ // Validate input fields
+ if (!updatedTitle || !updatedDescString) {
+ alert("Please fill in all fields.");
+ return;
+ }
+
+ var updatedDesc = parseInt(updatedDescString, 10);
+ // Create an object with the updated data
+ var updatedData = {
+ title: updatedTitle,
+ desc: updatedDesc
+ };
+
+ // Convert the object to JSON
+ var jsonData = JSON.stringify(updatedData);
+
+ var xhr = new XMLHttpRequest();
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 201) {
+ console.log('Voucher updated successfully!');
+ location.reload();
+ } else if (xhr.status === 500) {
+ alert("Voucher name should be unique.");
+ } else {
+ console.error("Error updating voucher. Status:", xhr.status);
+ }
+ }
+ };
+
+ // TODO: Change the URL
+ xhr.open("POST", "http://localhost:8000/api/voucher", true);
+ xhr.setRequestHeader("Content-Type", "application/json");
+ xhr.send(jsonData);
+ console.log(jsonData);
+}
+
+function addNewVoucherCard() {
+ const card = document.createElement("div");
+ card.className = "body-text";
+ // Add your modal content here (file upload, input fields, buttons, etc.)
+ var voucher = `
+ <div class="body-text" id="body-text">
+ <div class="voucher-container">
+ <label>Voucher Name</label>
+ <input type="text" id="add-title">
+ </div>
+ <div class="voucher-container">
+ <label>Voucher Description</label>
+ <input type="number" id="add-desc">
+ </div>
+ </div>
+ <div class="voucher-btn">
+ <button type="submit" id="voucher-save" onclick="saveEdit()">Save</button>
+ <button id="voucher-cancel" onclick="cancelEdit()">Cancel</button>
+ </div>
+ `;
+ card.innerHTML = voucher;
+ var overlay = document.querySelector(".dialog-overlay");
+ overlay.appendChild(card);
+ overlay.style.display = "block";
+ console.log("kepencet");
}
+
+function cancelEdit() {
+ var overlay = document.querySelector(".dialog-overlay");
+ overlay.style.display = "none";
+ // remove the card from the overlay
+ overlay.removeChild(overlay.lastChild);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+ function fetchData(callback) {
+ var xhr = new XMLHttpRequest();
+ xhr.onreadystatechange = function () {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ var data = JSON.parse(xhr.responseText);
+ callback(data);
+ } else {
+ console.error("Error fetching data from the server");
+ }
+ }
+ };
+ // TODO: Change the URL
+ xhr.open("GET", "http://localhost:8000/api/voucher", true);
+ xhr.send();
+ }
+
+ fetchData(function (data) {
+ var voucherList = document.querySelector(".voucher-list");
+
+ data.forEach(function (voucher) {
+ var card = generateVoucherCard(voucher.id, voucher.title, voucher.desc);
+ console.log(voucher.id)
+ console.log(voucher.title);
+ console.log(voucher.desc);
+ voucherList.appendChild(card);
+ });
+ });
+});
+
+document.getElementById("add-btn").addEventListener("click", addNewVoucherCard);
\ No newline at end of file