Skip to content
Snippets Groups Projects
Commit 848b10e8 authored by Syarifa Purnamasari's avatar Syarifa Purnamasari
Browse files

feat: connect voucher with rest backend

parent 9a4cd2e3
Branches
Tags
No related merge requests found
Pipeline #59675 failed with stages
Hide whitespace changes
Inline Side-by-side
api/listRestaurant.php 0 → 100644
+ 13
− 0
View file @ 848b10e8
<?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
app/views/addVoucher/index.php
+ 12
− 12
View file @ 848b10e8
<?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
app/views/addVoucher/voucherCard.php deleted 100644 → 0
+ 0
− 32
View file @ 9a4cd2e3
<?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
public/css/voucher.css
+ 15
− 9
View file @ 848b10e8
......@@ -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
public/js/voucher.js
+ 208
− 4
View file @ 848b10e8
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
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