Skip to content
Snippets Groups Projects
Commit 19f5fadf authored by Nigel Sahl's avatar Nigel Sahl
Browse files

update: finish application in admin page

parent e4d246ec
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 231 additions and 37 deletions
src/admin/gym/application/index.php
+ 44
− 8
View file @ 19f5fadf
......@@ -13,6 +13,7 @@ AuthMiddleware::getInstance()->secureRoute(true);
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/public/css/style.css">
<link rel="stylesheet" href="/public/css/application.css">
<title>Gym Finder App</title>
</head>
......@@ -20,25 +21,60 @@ AuthMiddleware::getInstance()->secureRoute(true);
<div class="app">
<script>
const apikey = <?php echo json_encode($_ENV['API_KEY']) ?>;
const urlParams = new URLSearchParams(window.location.search);
const gymId = urlParams.get("gym_id");
const username = urlParams.get("trainer_username");
</script>
<?php
echo NavbarAdmin();
?>
<div class="space"></div>
<div class="application-container" id="application-trainer">
</div>
<div class="space"></div>
<div class="first-line-button">
<button class="button-filter" id="accept-trainer" onclick="showPopupAcc();">
Accept Trainer
</button>
<div class="popup" id="pop-up-accept" onclick="hidePopupAcc();">
<div class="popup-content" onclick="event.stopPropagation();">
<div class="popup-title acc" id="pop-up-title-edit-delete">
Do you want to accept this trainer?
</div>
<div class="space2"></div>
<button class="search-filter" onclick="acceptApplication(gymId, username);">Yes</button>
<div class="space3"></div>
<button class="cancel-filter"onclick="hidePopupAcc();">Cancel</button>
</div>
</div>
<div class="gym-page-content">
<div class="gym-content" id="gym-content">
<div class="popup" id="pop-up-reject" onclick="hidePopupRej();">
<div class="popup-content" onclick="event.stopPropagation();">
<div class="popup-title" id="pop-up-title-edit-delete">
Do you want to reject this trainer?
</div>
<div class="space2"></div>
<button class="search-filter" onclick="rejectApplication(gymId, username);">Yes</button>
<div class="space3"></div>
<button class="cancel-filter"onclick="hidePopupRej();">Cancel</button>
</div>
</div>
<div class="space"></div>
<div class="space"></div>
<button class="button-filter reject" id="reject-trainer" onclick="showPopupRej();">
Reject Trainer
</button>
</div>
</div>
<script src="/public/javascript/gym/format_card.js"></script>
<script src="/public/javascript/gym/trainer_card.js"></script>
<script src="/public/javascript/gym/application.js"></script>
<script>
getApplication(gymId, username);
</script>
</body>
</html>
\ No newline at end of file
</html>
src/admin/gym/index.php
+ 10
− 0
View file @ 19f5fadf
......@@ -73,6 +73,13 @@ AuthMiddleware::getInstance()->secureRoute(true);
</div>
<div class="space"></div>
<div class="gym-attribute">Trainer List</div>
<div class="gym-card-container" id="gym-trainer-list">
<div class="space"></div>
Loading...
</div>
<div class="space"></div>
<div class="gym-attribute">Application List</div>
<div class="gym-card-container" id="gym-application-list">
<div class="space"></div>
......@@ -109,6 +116,9 @@ AuthMiddleware::getInstance()->secureRoute(true);
<script src="/public/javascript/gym/format_card.js"></script>
<script src="/public/javascript/gym/trainer_card.js"></script>
<script src="/public/javascript/gym/application.js"></script>
<script>
getGymApplication(<?php echo $gym_id ?>);
</script>
</body>
</html>
\ No newline at end of file
src/admin/gym/trainer/index.php 0 → 100644
+ 0
− 0
View file @ 19f5fadf
src/public/css/application.css 0 → 100644
+ 52
− 0
View file @ 19f5fadf
.application-container {
max-width: 80%;
margin: 0 auto;
margin-top: 2%;
margin-bottom: 2%;
padding: 2%;
padding-top: 1%;
border: 1px solid #ccc;
border-radius: 10px;
font-size: var(--font-size-medium);
/* color: var(--text-standard); */
font-family: var(--font-standard);
font-weight: 400;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 10px;
text-align: left;
}
.first-line-button {
gap: 5%;
}
.reject {
background-color: rgb(238, 61, 61);
color: #e7faff;
}
.reject:hover, .reject:focus {
background-color: #b10000;
color: #e7faff;
}
.acc {
color: var(--text-standard);
}
@media screen and (min-width: 1440px){
.application-container {
max-width: 70%;
font-size: var(--font-size-standard);
}
}
\ No newline at end of file
src/public/css/gym.css
+ 6
− 2
View file @ 19f5fadf
......@@ -30,8 +30,8 @@
}
.loading, .gym-name, .gym-attribute, .nama-kota, .gym-description, .gym-price, .rate-button, .gym-card-text, .trainer-card-text {
color: var(--text-standard);
text-align: center;
font-family: var(--font-standard);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
......@@ -80,7 +80,11 @@
}
.gym-card-text-bottom {
width: 100%;
font-weight: 400;
font-weight: 500;
font-family: var(--font-standard);
}
.bold {
font-weight: 600;
}
.gym-card {
margin-top: 10px;
......
src/public/css/style.css
+ 1
− 1
View file @ 19f5fadf
......@@ -16,7 +16,7 @@
--button-standard: #f0f9ff;
--button-active-standard: #bee1f8;
--red-color: #cb0000;
--cancel-filter-color: #b1cad1;
--cancel-filter-color: #b1cad1;
--filter-option: #d9e8ed;
--filter-option-stroke: #b3c7d2;
--filter-option-hover: #c6e1eb;
......
src/public/javascript/gym/application.js
+ 94
− 22
View file @ 19f5fadf
function modifyGymApplicationList(data) {
const gymApplicationList = document.getElementById("gym-application-list");
gymApplicationList.innerHTML = "";
data.forEach((trainer) => {
gymApplicationList.innerHTML += TrainerCard(trainer);
});
}
function hidePopupAcc() { document.querySelector(`#pop-up-accept`).style.display = "none";}
function showPopupAcc() { document.querySelector(`#pop-up-accept`).style.display = "flex";}
function hidePopupRej() { document.querySelector(`#pop-up-reject`).style.display = "none";}
function showPopupRej() { document.querySelector(`#pop-up-reject`).style.display = "flex";}
// dummy data
let trainer = {
name: "John Doe",
username: "johndoe",
acceptance: 0,
gym_id: 43
username: "johndoe",
gym_id: 43,
acceptance: 0,
trainer_name: "John Doe",
trainer_description: "Aku ingin bekerja",
application_description: "Aku ingin bekerja di sebuah gym, aku memiliki semangat di gym 43 ini semoga bisa keterima. Sekian dan terima kasih atas perhatian dan kesan dan pesannya",
}
let trainer2 = {
name: "Jane Doe",
username: "janedoe",
acceptance: 1,
gym_id: 43
username: "johndoedfdf",
gym_id: 43,
acceptance: 0,
trainer_name: "John Doe",
trainer_description: "Aku ingin bekerja",
application_description: "Aku ingin bekerja",
}
let data = [trainer, trainer2];
modifyGymApplicationList(data);
function getApplication(gymId, username) {
function modifyGymApplicationList(data) {
const gymApplicationList = document.getElementById("gym-application-list");
gymApplicationList.innerHTML = "";
if (data.length == 0) {
gymApplicationList.innerHTML = `
<div class="space"></div>
<div class="gym-card-text"> No Aplication found </div>
`;
}
data.forEach((trainer) => {
gymApplicationList.innerHTML += ApplicationCard(trainer);
});
}
function getGymApplication(gymId) {
modifyGymApplicationList(data);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
// modifyGymRateList(JSON.parse(this.responseText)["ratings"], username);
modifyGymApplicationList(JSON.parse(this.responseText)["trainers"]);
} else {
const json = JSON.parse(this.responseText);
......@@ -40,11 +56,19 @@ function getApplication(gymId, username) {
xhr.send();
}
function getApplication(username, gymId) {
// alert("get application with username: " + username + " and gym id: " + gymId);
modifyApplication(trainer);
}
function acceptApplication(username, gymId) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
alert("ajax : accept with username: " + username + " and gym id: " + gymId);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
alert("accept with username: " + username + " and gym id: " + gymId);
} else {
const json = JSON.parse(this.responseText);
......@@ -56,4 +80,52 @@ function acceptApplication(username, gymId) {
// xhr.open("GET", `/api/gym/rating?gym_id=${gymId}`, true);
// xhr.setRequestHeader("X-API-KEY", apikey);
xhr.send();
}
function rejectApplication(username, gymId) {
alert("ajax : reject with username: " + username + " and gym id: " + gymId);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status === 200) {
alert("reject with username: " + username + " and gym id: " + gymId);
} else {
const json = JSON.parse(this.responseText);
alert(json["error"]);
}
}
};
// xhr.open("GET", `/api/gym/rating?gym_id=${gymId}`, true);
// xhr.setRequestHeader("X-API-KEY", apikey);
xhr.send();
}
function modifyApplication(trainer) {
const gymApplicationList = document.getElementById("application-trainer");
gymApplicationList.innerHTML = `
<h2>Trainer Application</h2>
<table>
<tr>
<td><strong>Username</strong></td>
<td>${trainer.username}</td>
</tr>
<tr>
<td><strong>Gym ID</strong></td>
<td>${trainer.gym_id}</td>
</tr>
<tr>
<td><strong>Trainer Name</strong></td>
<td>${trainer.trainer_name}</td>
</tr>
<tr>
<td><strong>Trainer Description</strong></td>
<td>${trainer.trainer_description}</td>
</tr>
<tr>
<td><strong>Application Description</strong></td>
<td>${trainer.application_description}</td>
</tr>
</table>
`
}
\ No newline at end of file
src/public/javascript/gym/trainer_card.js
+ 24
− 4
View file @ 19f5fadf
......@@ -10,15 +10,15 @@ function acceptance(acc_code){
}
}
function TrainerCard(trainer){
let truncated_name = truncateText(trainer.name, 16);
function ApplicationCard(trainer){
let truncated_name = truncateText(trainer.trainer_name, 16);
let acceptance_status = acceptance(trainer.acceptance);
let tname = "trainer name : " + truncated_name;
let tusername = "username : " + trainer.username;
let trainer_card = `
let application_card = `
<a class="gym-card" id="gym-card-${trainer.username}" href="./application/?gym_id=${trainer.gym_id}&trainer_username=${trainer.username}">
<div class="trainer-card-text">
<div class="gym-card-name"> ${tname} </div>
<div class="gym-card-text-bottom"> ${tname} </div>
<div class="space3"></div>
<div class="gym-card-text-bottom">
<div class="gym-card-text-bottom-left">
......@@ -31,5 +31,25 @@ function TrainerCard(trainer){
</div>
</a>
`;
return application_card;
}
function TrainerCard(trainer){
let truncated_name = truncateText(trainer.trainer_name, 16);
let tname = "trainer name : " + truncated_name;
let tusername = "username : " + trainer.username;
let trainer_card = `
<a class="gym-card" id="gym-card-${trainer.username}" href="./application/?gym_id=${trainer.gym_id}&trainer_username=${trainer.username}">
<div class="trainer-card-text bold">
<div class="gym-card-text-bottom"> ${tname} </div>
<div class="space3"></div>
<div class="gym-card-text-bottom">
<div class="gym-card-text-bottom-left">
${tusername}
</div>
</div>
</div>
</a>
`;
return trainer_card;
}
\ 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