Commit 2c00233c authored by Erma Safira Nurmasyita's avatar Erma Safira Nurmasyita
Browse files

[FIX] Book-Order Modal

parent 1e4ca2ec
<?php
class bookDetailViewer {
public const STAR_IMG = 'star.svg';
public const STAR_FULL_IMG = 'star-filled.svg';
public const STAR_IMG = 'star.png';
public const STAR_FULL_IMG = 'star-filled.png';
public static function viewBookDetail($params) {
$book_detail = $params['book_detail'];
......@@ -13,13 +13,14 @@
Header::headerLogin($params['username']).
Header::headerMenu(Header::BROWSE).
self::generateBookDetail($book_detail, $reviews, $book_rating).
self::showScript()
self::showScript().
self::showModal()
);
}
private function generateBookDetail($book_detail, $reviews, $book_rating) {
$str = '<body>
<div class="detail-container">'.
<div class="detail-container add-nunito-font">'.
self::showBookDesc($book_detail, $book_rating).
self::showOrder().
self::showReviews($reviews).
......@@ -32,11 +33,13 @@
$str = '
<div class="flex-container book-detail">
<div class="flex-1 book-desc">
<div class="orange-text text-size-50" >'.$book_detail['Judul'].'</div>
<div class="book-author">'.$book_detail['Pengarang'].'</div>
<div class="text-size-20">'.$book_detail['Deskripsi'].'</div>
<div class="title-author">
<div class="orange-text text-size-50" ><b>'.$book_detail['Judul'].'</b></div>
<div class="book-author">'.$book_detail['Pengarang'].'</div>
</div>
<div id="detail-paragraph">'.$book_detail['Deskripsi'].'</div>
</div>
<div class="add-flex-direction-column book-desc" align="center">
<div class="add-flex-direction-column" id="rightbar-pic" align="center">
<div class="flex-1">
<img id="book-pict" src="'.self::showPicture('books','../images/books_picture/4.jpg').'">
</div>
......@@ -75,10 +78,10 @@
private function showOrder() {
$str = '
<div class="book-detail">
<div class="text-size-30">Order</div>
<div class="head-title">Order</div>
<div class="order-select">
<label>Jumlah: </label>
<select id="order-qty">
<select id="dropdown-order">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
......@@ -87,7 +90,7 @@
</select>
</div>
<div align="right">
<button class="order-button light-blue" type="button" onclick="orderBook(1)">Order</button>
<button class="order-button c-button light-blue" type="button" onclick="orderBook(1)">Order</button>
</div>
</div>';
return $str;
......@@ -96,9 +99,11 @@
private function showReviews($reviews) {
$str = '
<div class="book-detail">
<div class="text-size-30">Reviews</div>'.
self::showPerReview($reviews).
'</div>';
<div class="head-title">Reviews</div>
<div class="reviews">'.
self::showPerReview($reviews).
'</div>
</div>';
return $str;
}
......@@ -110,12 +115,13 @@
<div>
<img id="profile_pict" src="'.self::showPicture('profiles',$review['profile_picture']).'">
</div>
<div class="book-desc">
<div class="text-size-20">@'.$review['username'].'</div>
<div class="text-size-20">'.$review['komentar'].'</div>
<div id="comment-user">
<div id="reviewer">@'.$review['username'].'</div>
<div id="detail-paragraph">'.$review['komentar'].'</div>
</div>
<div class="add-flex-direction-column">
<img id="star-icon" src="../svgIcon/star-filled.svg">
<div id="add-flex-direction-column">
<div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'">
</div>
<div class="text-size-20" align="center">'.round($review['rating'], 1).'/5.0</div>
</div>
</div>';
......@@ -125,7 +131,11 @@
}
private function showScript() {
return '<script type="text/javascript" src="../js/order-book.js"></script>';
return '<script type="text/javascript" src="../javascript/order-book.js"></script>';
}
private function showModal() {
return '<div id="modal-container"></div>';
}
}
?>
\ No newline at end of file
......@@ -11,7 +11,7 @@
$book_id = $_GET['book_id'];
$quantity = $_GET['qty'];
//$orderstatus = createNewOrder($book_id, $user_id, $quantity);
$order_id = 1;
$order_id = 100;
showOrderModal($order_id);
///}
......
......@@ -5,7 +5,7 @@
<div id="notification-modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" onclick="location.reload()">&times;</span>'.
<span class="close" onclick="closeModal(\'notification-modal\')">&times;</span>'.
showResult($order_id).
'</div>
</div>';
......
......@@ -164,4 +164,62 @@ a {
padding: 0 4px;
margin-top: 1px;
margin-bottom: 1px;
}
/*Book Detail*/
.head-title {
font: 45px 'Nunito Bold', sans-serif;
color: #00374C;
margin-block-end: 10px;
}
.book-title {
size: 50px;
}
.detail-container {
padding-left: 50px;
padding-right: 50px;
margin: 50px auto;
position: relative;
}
.detail-container > div {
margin-block-end: 40px;
width: 100%;
}
.title-author {
font-family: 'Nunito Bold', sans-serif;
}
.book-desc {
margin-right: 20px;
}
.book-desc > div {
width: 100%;
margin-block-end: 35px;
}
.book-author {
font-size: 27px;
opacity: 0.7;
}
#book-pict {
max-width: 170px;
max-height: 170px;
border: black;
border-style: solid;
border-width: 1px;
}
#rightbar-pic {
width: 200px;
}
#rightbar-pic > div {
margin-block-end: 10px;
}
\ No newline at end of file
.detail-container {
width: 80%;
margin: 50px auto;
margin-top: 30px;
margin-bottom: 30px;
position: relative;
font-family: 'Lucida Sans Regular';
}
.detail-container > div {
margin-block-end: 20px;
width: 100%;
}
.book-detail > div {
margin-right: 20px;
margin-block-end: 10px;
}
.book-desc > div {
width: 100%;
margin-block-end: 10px;
#detail-paragraph {
font-size: 23;
opacity: 0.8;
}
.book-author {
font-size: 25px;
}
#book-pict {
max-width: 180px;
max-height: 180px;
#comment-user > div{
margin-block-end: 5px;
}
#profile_pict {
max-width: 100px;
max-height: 100px;
border: black;
border-style: solid;
border-width: 2px;
}
.flex-review-tab {
......@@ -46,7 +25,7 @@
}
.rating {
max-width: 30px;
max-width: 40px;
}
#star-icon {
......@@ -54,7 +33,7 @@
}
.order-button {
border: none;
width: 100px;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
......@@ -62,7 +41,7 @@
cursor: pointer;
white-space: nowrap;
background-color: #fff;
font-size: 15px;
font-size: 20px;
}
.order-button:hover {background-color: #3e8e41}
......@@ -76,10 +55,15 @@
font-size: 20px;
}
#order-qty {
width: 100px;
label {
font-size: 20px;
}
#dropdown-order {
width: 70px;
height: 30px;
margin-left: 10px;
font-size: 20px;
}
#mark-icon {
......@@ -88,6 +72,16 @@
margin-right: 20px;
}
#reviewer {
font-size: 27;
font-weight: bold;
opacity: 0.7;
}
.reviews > div {
margin-block-end: 20px;
}
/* Notification Modal */
/* The Modal (background) */
.modal {
......@@ -109,17 +103,19 @@
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 15px;
padding: 30px;
border: 1px solid #888;
width: 30%;
font-size: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-size: 30px;
font-weight: bold;
}
......
#textarea-comment {
width: 100%;
resize: none;
font-size: 28px;
font-family: 'Nunito', sans-serif;
}
.fivestar-rating {
max-width: 60px;
max-height: 60px;
}
.rating-pict {
align-items: center;
text-align: center;
}
.submit-button {
float: right;
}
\ No newline at end of file
//AJAX Order Book
function orderBook(book_id) {
qty = document.getElementById('order-qty').value;
qty = document.getElementById('dropdown-order').value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
......@@ -10,4 +10,9 @@ function orderBook(book_id) {
};
xmlhttp.open("GET", "../book_order/transaction.php?book_id=" + book_id + "&qty=" + qty, true);
xmlhttp.send();
}
//Order Modal
function closeModal(elmtID) {
document.getElementById(elmtID).remove();
}
\ No newline at end of file
......@@ -32,7 +32,7 @@ function submitValidation() {
// AJAX Check availability
function checkUserAvailability(input, str) {
var inputID = 'validate_' + input;
if (str.length <= 1) {
if (str.length < 1) {
document.getElementById(inputID).innerHTML = "";
return;
} else {
......
......@@ -16,7 +16,7 @@
}
function printScript() {
echo '<script type="text/javascript" src="../js/validation.js"></script>';
echo '<script type="text/javascript" src="../javascript/validation.js"></script>';
}
function printBody() {
......
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Book Review</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../css/header.css">
<link rel="stylesheet" type="text/css" href="../css/color-lib.css">
<link rel="stylesheet" type="text/css" href="../css/basic.css">
<link rel="stylesheet" type="text/css" media="screen" href="../css/book_review.css" />
</head>
<body>
</body>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<polygon fill="#FFCA28" points="24,4.051 30.49,17.186 45,19.29 34.5,29.512 36.977,43.949 24,37.137 11.023,43.949 13.5,29.512
3,19.29 17.51,17.186 "/>
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<polygon style="fill:#FAC917;" points="213.333,10.441 279.249,144.017 426.667,165.436 320,269.41 345.173,416.226 213.333,346.91
81.485,416.226 106.667,269.41 0,165.436 147.409,144.017 "/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>
<!--
Font Awesome Free 5.4.1 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
-->
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve">
<polygon fill="#FFCA28" points="24,4.051 30.49,17.186 45,19.29 34.5,29.512 36.977,43.949 24,37.137 11.023,43.949 13.5,29.512
3,19.29 17.51,17.186 "/>
</svg>
Markdown is supported
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