Commit a6eec917 authored by Ranindya Paramitha's avatar Ranindya Paramitha

[FIXING] search_result make border

parents 2946fc9c 89bd9fb8
......@@ -18,6 +18,7 @@ class Header {
<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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/'.$cssName.'.css">
</head>
';
......@@ -31,6 +32,7 @@ class Header {
<link rel="stylesheet" type="text/css" href="../css/color-lib.css">
<link rel="stylesheet" type="text/css" href="../css/basic.css">
<link rel="stylesheet" href="../css/'.$cssName.'.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../javascript/'.$jsName.'.js"></script>
</head>
';
......
......@@ -78,7 +78,7 @@
}
$this->book_rating = round($sum/$count, 1);
} else {
$this->book_rating = (float) 0;
$this->book_rating = 0;
}
}
}
......
......@@ -41,12 +41,12 @@
</div>
<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/default.jpg').'">
<img id="book-pict" src="'.self::showPicture('book', $book_detail['ID']).'">
</div>
<div class="rating-pict">'.
self::drawRating($book_rating).
'</div>
<div class="text-size-20"><b>'.$book_rating.'/5.0</b></div>
<div class="text-size-20"><b>'.self::floatRating($book_rating).'/5.0</b></div>
</div>
</div>';
return $str;
......@@ -67,11 +67,19 @@
return $str . '</div>';
}
private function showPicture($obj, $picSrc) {
if ($picSrc == NULL) {
return '../images/'. $obj .'_picture/default.jpg';
private function showPicture($obj, $input) {
if ($obj == "book") {
if (fileProcessing::isExistBookImage($input)) {
return fileProcessing::getImageBookPathFromRoot($input);
} else {
return $picSrc;
return '/images/books_picture/default.jpg';
}
} else {
if (fileProcessing::isExistProfileImage($input)) {
return fileProcessing::getImageProfilePathFromRoot($input);
} else {
return '/images/profiles_picture/default.jpg';
}
}
}
......@@ -110,7 +118,7 @@
<div class="flex-container align-items-flex-start">
<div class="flex-1 flex-review-tab">
<div class="reviewer-profile">
<img id="profile_pict" src="'.self::showPicture('profiles',$review['profile_picture']).'">
<img id="profile_pict" src="'.self::showPicture('user', $review['username']).'">
</div>
<div id="comment-user">
<div id="reviewer">@'.$review['username'].'</div>
......@@ -120,7 +128,7 @@
<div class="add-flex-direction-column">
<div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'">
</div>
<div class="text-size-20" align="center"><b>'.round($review['rating'], 1).'/5.0</b></div>
<div class="text-size-20" align="center"><b>'.self::floatRating($review['rating']).'/5.0</b></div>
</div>
</div>';
$str = $str . $str_review;
......@@ -143,5 +151,9 @@
}
return $str;
}
private function floatRating($rate) {
return number_format((float)$rate, 1, '.', '');
}
}
?>
\ No newline at end of file
......@@ -226,3 +226,16 @@ a {
#rightbar-pic > div {
margin-block-end: 10px;
}
.dont-break-out {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
\ No newline at end of file
......@@ -117,7 +117,7 @@ label {
.modal-message {
display: flex;
height: 15%;
height: 10%;
margin-top: 40px;
margin-bottom: 40px;
margin-left: 40px;
......
......@@ -8,6 +8,10 @@
padding-top: 2.5%;
}
h1 {
font-family: "Nunito Bold" !important;
}
.right{
flex-basis: 90%;
width: fit-content;
......@@ -83,7 +87,7 @@
position: relative;
margin-left: 10px;
display: inline-block;
width: 2px;
overflow: hidden;
}
.btn {
......@@ -93,12 +97,13 @@
padding: 8px 10px;
border-radius: 8px;
font-size: 20px;
width: fit-content;
}
.upload-btn-wrapper input[type=file] {
font-size: 50px;
position: absolute;
width:100px;
width: fit-content;
left: 0;
top: 0;
opacity: 00;
......@@ -131,6 +136,7 @@ input[type=file]{
width: 500px;
margin-left: 0;
}
input[type=text]{
width: 625px;
font-family: 'Arial';
......
......@@ -66,6 +66,7 @@ input, textarea {
border-width: 2px;
border-radius: 5px;
font-family: 'Lucida Sans Regular';
font-size: 20px;
color: orange;
font-weight: bold;
letter-spacing: 2px;
......
......@@ -12,6 +12,19 @@ td {
margin-right: 5px;
}
textarea {
#validate_username {
margin-top: 5px;
display: inline-block;
}
.form-input textarea {
width: 100%;
}
.form-input input {
width: 100%;
}
a {
color: #000000;
}
\ No newline at end of file
#textarea-comment {
.textarea-comment {
width: 100%;
resize: none;
font-size: 28px;
font-family: 'Nunito', sans-serif;
padding: 5px;
resize: none;
}
.warning-empty-inputs {
position: relative;
}
.comment-bar {
margin-block-end: 50px;
}
.fivestar-rating {
......
......@@ -53,6 +53,7 @@ h1{
img{
height: 150px;
width: 150px;
border: 2px solid black;
}
h3{
color: #F16303;
......
......@@ -43,11 +43,17 @@
echo "<div class=\"right\">" ;
echo "<p>Update profile picture</p>" ;
echo "<input id=\"profpict_dummy\" class=\"profpict_dummy\"type=\"text\" name=\"profile_picture2\" readonly>" ;
echo "<div class=\"upload-btn-wrapper\">" ;
echo "<button class=\"btn\">Browse</button>" ;
echo "<input id=\"profpict\" type=\"file\" name=\"profile_picture\" accept=\"image/png, image/jpg, image/jpeg\" onchange=\"showname()\" >" ;
echo "</div>" ;
echo '
<div class="flex-container">
<input id="profpict_dummy" class="profpict_dummy"type="text" name="profile_picture2" readonly>
<div class="upload-btn-wrapper">
<button class="btn">Browse ...</button>
<input id="profpict" type="file" name="profile_picture" accept="image/png, image/jpg, image/jpeg" onchange="showname()" >
</div>
</div>
';
echo "</div>" ;
echo "</div>" ;
......
......@@ -53,7 +53,7 @@ class historyView {
<div class="font-weight-bold text-size-20 gray-text">Nomor Order : #'.$data['orderNumber'].'</div>
</div>
<div class="flex-container add-flex-end-justify ">
<a href="'.$data['reviewUrl'].'" class="c-button light-blue c-round">Review</a>
<a href="review?id='.$data['orderNumber'].'" class="c-button light-blue c-round">Review</a>
</div>
</div>
</div>
......
function validateForm(){
// alert('Here 2');
//alert('Here 2');
pp = document.getElementById("profpict").value;
name = document.getElementById("name").value;
address = document.getElementById("address").value;
......
......@@ -30,3 +30,25 @@ function noHoverStar(starValue) {
}
}
}
function IsEmptyCommentBar() {
return document.getElementById('comment').value === "";
}
function trySubmitSearch() {
if (IsEmptyCommentBar()) {
document.getElementById("warning-empty-input").style.display = 'table';
} else {
document.getElementById('book-review').submit();
}
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('comment').addEventListener('keypress', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
trySubmitSearch();
}
});
}, false);
\ No newline at end of file
const BLANK_FIELD = "field must be filled.";
const INVALID_EMAIL_FORMAT = "invalid email format.";
const INVALID_NAME_LENGTH = "name exceeded 20 characters.";
const INVALID_PHONENUMBER_FORMAT = "please enter numbers only.";
const INVALID_PHONENUMBER_LENGTH = "please enter valid phone number (9 - 12 digits).";
const UNMATCHED_PASSWORD = "unmatched password and confirmed password.";
const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
const BLANK_SPACE_REGEX = /^\s*$/
const NUMBER_REGEX = /^[0-9]*$/
function getFieldValue(inputID) {
return document.getElementById(inputID).value;
}
function validateBlankInput(inputID) {
var value = getFieldValue(inputID);
if (value == "" || BLANK_SPACE_REGEX.test(value)) {
showInvalidInput(inputID + BLANK_FIELD, inputID);
return false;
} else {
hideInvalidInput(inputID);
return true;
}
}
function validateBlankPassword() {
var validation = true;
validation &= validateBlankInput("password-input");
validation &= validateBlankInput("confpassword-input");
return validation == 1;
}
//Match password and confirmed password
function validatePassword() {
function validateAllPasswords() {
var pass = document.forms["registrationform"]["password"].value;
var conf_pass = document.forms["registrationform"]["conf_password"].value;
if (validateBlankPassword()) {
if (pass != conf_pass) {
alert("Unmatched password and confirmed password");
alert(UNMATCHED_PASSWORD);
highlightInvalidInput("password-input");
highlightInvalidInput("confpassword-input");
return false;
} else {
hideInvalidInput("password-input");
hideInvalidInput("confpassword-input");
return true;
}
} else {
return false;
}
}
function validateName() {
if (validateBlankInput("name-input")) {
if (getFieldValue("name-input").length > 20) {
showInvalidInput(INVALID_NAME_LENGTH, "name-input");
return false;
} else {
hideInvalidInput("name-input");
return true;
}
} else {
return false;
}
}
function validateAccount($input) {
var checkTick = document.getElementById("validate_" + $input).innerHTML;
function validatePhoneNumber() {
if (validateBlankInput("phonenumber-input")) {
if (NUMBER_REGEX.test(getFieldValue("phonenumber-input"))) {
var getLength = getFieldValue("phonenumber-input").length;
if (getLength >= 9 && getLength <= 12) {
hideInvalidInput("phonenumber-input");
return true;
} else {
showInvalidInput(INVALID_PHONENUMBER_LENGTH, "phonenumber-input");
return false;
}
} else {
showInvalidInput(INVALID_PHONENUMBER_FORMAT, "phonenumber-input")
}
} else {
return false;
}
}
function validateUsername() {
if (validateBlankInput("username-input")) {
return validateAvailability("username");
} else {
return false;
}
}
function validateEmail() {
if (validateBlankInput("email-input")) {
re = EMAIL_REGEX;
var checkFormat = re.test(String(getFieldValue("email-input")).toLowerCase());
if (!checkFormat) {
showInvalidInput(INVALID_EMAIL_FORMAT, "email-input");
return false;
}
else {
return validateAvailability("email");
}
} else {
return false;
}
}
function validateAddress() {
if (validateBlankInput("address-input")) {
return true;
} else {
return false;
}
}
function validateAvailability(input) {
var checkTick = document.getElementById("validate_" + input).innerHTML;
if (checkTick == "") {
alert($input + " is unavailable!");
showInvalidInput(input + " is unavailable!", input+"-input");
return false;
} else {
hideInvalidInput(input+"-input");
return true;
}
}
function submitValidation() {
var validation = true;
validation &= validateAccount("username");
validation &= validateAccount("email");
validation &= validatePassword();
validation &= validateName();
validation &= validateUsername();
validation &= validateEmail();
validation &= validateAllPasswords();
validation &= validateAddress();
validation &= validatePhoneNumber();
return validation == 1;
}
......@@ -46,3 +155,25 @@ function checkUserAvailability(input, str) {
xmlhttp.send();
}
}
function showInvalidInput(message, inputID) {
var message = message.replace(/-input/, " ");
var message = message.replace(/conf/, "confirmed ");
alert(message);
highlightInvalidInput(inputID);
}
function highlightInvalidInput(inputID) {
var border = document.getElementById(inputID).style.border;
if (border == "") {
document.getElementById(inputID).style.border = "2px solid red";
}
}
function hideInvalidInput(inputID) {
//document.getElementById("address-input").style.visibility = "hidden";
var border = document.getElementById(inputID).style.border;
if (border == "2px solid red") {
document.getElementById(inputID).style.border = "";
}
}
\ No newline at end of file
......@@ -26,28 +26,28 @@ function viewProfile (array $params) {
Your browser does not support SVG
</object>
<div class="flex-1">Username</div>
<div class="flex-2">@'.$params['username'].'</div>
<div class="dont-break-out flex-2">@'.$params['username'].'</div>
</div>
<div class="flex-container align-items-flex-center">
<object class="icon-profile" type="image/svg+xml" data="../svgIcon/mail.svg">
Your browser does not support SVG
</object>
<div class="flex-1">Email</div>
<div class="flex-2">'.$params['email'].'</div>
<div class="dont-break-out flex-2">'.$params['email'].'</div>
</div>
<div class="flex-container align-items-flex-center">
<object class="icon-profile" type="image/svg+xml" data="../svgIcon/home.svg">
Your browser does not support SVG
</object>
<div class="flex-1">Address</div>
<div class="flex-2">'.$params['address'].'</div>
<div class="dont-break-out flex-2">'.$params['address'].'</div>
</div>
<div class="flex-container align-items-flex-center">
<object class="icon-profile" type="image/svg+xml" data="../svgIcon/phone.svg">
Your browser does not support SVG
</object>
<div class="flex-1">Phone Number</div>
<div class="flex-2">'.$params['phone'].'</div>
<div class="dont-break-out flex-2">'.$params['phone'].'</div>
</div>
</div>
';
......
......@@ -45,15 +45,15 @@
return $form;
}
function getTable() {
return '<table align="center">
return '<table class="form-input" align="center">
<tr>
<td>Name</td>
<td><input type="text" size="25" name="name" required ></td>
<td><input id="name-input" type="text" size="25" name="name"></td>
</tr>
<tr>
<td>Username</td>
<td>
<div id="validate_form"><input type="text" size="21" name="username" onkeyup="checkUserAvailability(\'username\', this.value)" required > </div>
<div id="validate_form"><input id="username-input" type="text" size="21" name="username" onkeyup="checkUserAvailability(\'username\', this.value)"> </div>
<!--<div id="validate_icon"><img src="../svgIcon/tick.png"></div>-->
<span id="validate_username"></div>
</td>
......@@ -61,25 +61,26 @@
<tr>
<td>Email</td>
<td>
<div id="validate_form"><input type="email" size="21" name="email" onkeyup="checkUserAvailability(\'email\', this.value)" required ></div>
<div id="validate_form"><input id="email-input" type="text" size="21" name="email" onkeyup="checkUserAvailability(\'email\', this.value)"></div>
<span id="validate_email"></div>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" size="25" maxlength="16" name="password" required ></td>
<td><input id="password-input" type="password" size="25" name="password">
</td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type="password" size="25" maxlength="16" name="conf_password" required ></td>
<td><input id="confpassword-input" type="password" size="25" name="conf_password"></td>
</tr>
<tr>
<td>Address</td>
<td><textarea name="address" rows="3" cols="28" required ></textarea></td>
<td><textarea id="address-input" name="address" rows="3" cols="28"></textarea></td>
</tr>
<tr>
<td>Phone Number</td>
<td><input type="text" size="25" name="phonenumber" required ></td>
<td><input id="phonenumber-input" type="text" size="25" name="phonenumber"></td>
</tr>
</table>';
}
\ No newline at end of file
......@@ -41,7 +41,7 @@
}
public static function validateOrderHistory($order_id, $user_id) {
$listOfHistoryID = selectFromWhere('Nomor_Order', 'book_order', 'user_id='.$user_id.' AND has_reviewed=0');
$listOfHistoryID = selectFromWhere('Nomor_Order', 'book_order', 'user_id='.$user_id);
foreach ($listOfHistoryID as $hist) {
if ($hist == $order_id) {
return TRUE;
......
<?php
class reviewFormViewer {
public static function viewReviewForm($params) {
$ordered_book = $params['ordered_book'];
......@@ -36,16 +35,24 @@
</div>
<div class="add-flex-direction-column" id="rightbar-pic" align="center">
<div class="flex-1">
<img id="book-pict" src="../images/books_picture/default.jpg">
<img id="book-pict" src="'.self::showPicture($ordered_book['book_id']).'">
</div>
</div>
</div>';
return $str;
}
private function showPicture($input) {
if (fileProcessing::isExistBookImage($input)) {
return fileProcessing::getImageBookPathFromRoot($input);
} else {
return '/images/books_picture/default.jpg';
}
}
private function showReviewForm($order_id, $book_id) {
$str = '
<form action="review/submit_review.php" method="POST">
<form id="book-review" action="review/submit_review.php" method="POST">
<div class="book-detail">
<div class="head-title">Add Rating</div>
<div class="order-select">'.
......@@ -57,8 +64,9 @@
<div class="head-title">Add Comment</div>
<div class="flex-review-tab">
<div class="comment-bar">
<textarea id="textarea-comment" name="comment" cols="180" rows="5"></textarea>
<p id="warning-empty-input" class="red-theme alert-box text-size-20 add-nunito-font c-round">Input can\'t be empty</p>
<textarea id="comment" class="textarea-comment" name="comment" cols="180" rows="5"></textarea>
<span id="warning-empty-input" class="red-theme alert-box text-size-20 add-nunito-font c-round">
Input can\'t be empty</span>
</div>
</div>
</div>
......