Commit a6eec917 authored by Ranindya Paramitha's avatar Ranindya Paramitha

[FIXING] search_result make border

parents 2946fc9c 89bd9fb8
...@@ -18,6 +18,7 @@ class Header { ...@@ -18,6 +18,7 @@ class Header {
<link rel="stylesheet" type="text/css" href="../css/header.css"> <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/color-lib.css">
<link rel="stylesheet" type="text/css" href="../css/basic.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"> <link rel="stylesheet" href="../css/'.$cssName.'.css">
</head> </head>
'; ';
...@@ -31,6 +32,7 @@ class Header { ...@@ -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/color-lib.css">
<link rel="stylesheet" type="text/css" href="../css/basic.css"> <link rel="stylesheet" type="text/css" href="../css/basic.css">
<link rel="stylesheet" href="../css/'.$cssName.'.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> <script src="../javascript/'.$jsName.'.js"></script>
</head> </head>
'; ';
......
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
} }
$this->book_rating = round($sum/$count, 1); $this->book_rating = round($sum/$count, 1);
} else { } else {
$this->book_rating = (float) 0; $this->book_rating = 0;
} }
} }
} }
......
...@@ -41,12 +41,12 @@ ...@@ -41,12 +41,12 @@
</div> </div>
<div class="add-flex-direction-column" id="rightbar-pic" align="center"> <div class="add-flex-direction-column" id="rightbar-pic" align="center">
<div class="flex-1"> <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>
<div class="rating-pict">'. <div class="rating-pict">'.
self::drawRating($book_rating). self::drawRating($book_rating).
'</div> '</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>
</div>'; </div>';
return $str; return $str;
...@@ -67,11 +67,19 @@ ...@@ -67,11 +67,19 @@
return $str . '</div>'; return $str . '</div>';
} }
private function showPicture($obj, $picSrc) { private function showPicture($obj, $input) {
if ($picSrc == NULL) { if ($obj == "book") {
return '../images/'. $obj .'_picture/default.jpg'; if (fileProcessing::isExistBookImage($input)) {
return fileProcessing::getImageBookPathFromRoot($input);
} else {
return '/images/books_picture/default.jpg';
}
} else { } else {
return $picSrc; if (fileProcessing::isExistProfileImage($input)) {
return fileProcessing::getImageProfilePathFromRoot($input);
} else {
return '/images/profiles_picture/default.jpg';
}
} }
} }
...@@ -110,7 +118,7 @@ ...@@ -110,7 +118,7 @@
<div class="flex-container align-items-flex-start"> <div class="flex-container align-items-flex-start">
<div class="flex-1 flex-review-tab"> <div class="flex-1 flex-review-tab">
<div class="reviewer-profile"> <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>
<div id="comment-user"> <div id="comment-user">
<div id="reviewer">@'.$review['username'].'</div> <div id="reviewer">@'.$review['username'].'</div>
...@@ -120,7 +128,7 @@ ...@@ -120,7 +128,7 @@
<div class="add-flex-direction-column"> <div class="add-flex-direction-column">
<div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'"> <div> <img id="star-icon" src="../svgIcon/'.self::STAR_FULL_IMG.'">
</div> </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>
</div>'; </div>';
$str = $str . $str_review; $str = $str . $str_review;
...@@ -143,5 +151,9 @@ ...@@ -143,5 +151,9 @@
} }
return $str; return $str;
} }
private function floatRating($rate) {
return number_format((float)$rate, 1, '.', '');
}
} }
?> ?>
\ No newline at end of file
...@@ -225,4 +225,17 @@ a { ...@@ -225,4 +225,17 @@ a {
#rightbar-pic > div { #rightbar-pic > div {
margin-block-end: 10px; 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 { ...@@ -117,7 +117,7 @@ label {
.modal-message { .modal-message {
display: flex; display: flex;
height: 15%; height: 10%;
margin-top: 40px; margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
margin-left: 40px; margin-left: 40px;
......
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
padding-top: 2.5%; padding-top: 2.5%;
} }
h1 {
font-family: "Nunito Bold" !important;
}
.right{ .right{
flex-basis: 90%; flex-basis: 90%;
width: fit-content; width: fit-content;
...@@ -83,7 +87,7 @@ ...@@ -83,7 +87,7 @@
position: relative; position: relative;
margin-left: 10px; margin-left: 10px;
display: inline-block; display: inline-block;
width: 2px; overflow: hidden;
} }
.btn { .btn {
...@@ -93,12 +97,13 @@ ...@@ -93,12 +97,13 @@
padding: 8px 10px; padding: 8px 10px;
border-radius: 8px; border-radius: 8px;
font-size: 20px; font-size: 20px;
width: fit-content;
} }
.upload-btn-wrapper input[type=file] { .upload-btn-wrapper input[type=file] {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
width:100px; width: fit-content;
left: 0; left: 0;
top: 0; top: 0;
opacity: 00; opacity: 00;
...@@ -131,6 +136,7 @@ input[type=file]{ ...@@ -131,6 +136,7 @@ input[type=file]{
width: 500px; width: 500px;
margin-left: 0; margin-left: 0;
} }
input[type=text]{ input[type=text]{
width: 625px; width: 625px;
font-family: 'Arial'; font-family: 'Arial';
......
...@@ -66,6 +66,7 @@ input, textarea { ...@@ -66,6 +66,7 @@ input, textarea {
border-width: 2px; border-width: 2px;
border-radius: 5px; border-radius: 5px;
font-family: 'Lucida Sans Regular'; font-family: 'Lucida Sans Regular';
font-size: 20px;
color: orange; color: orange;
font-weight: bold; font-weight: bold;
letter-spacing: 2px; letter-spacing: 2px;
......
...@@ -12,6 +12,19 @@ td { ...@@ -12,6 +12,19 @@ td {
margin-right: 5px; margin-right: 5px;
} }
textarea { #validate_username {
margin-top: 5px;
display: inline-block;
}
.form-input textarea {
width: 100%; width: 100%;
}
.form-input input {
width: 100%;
}
a {
color: #000000;
} }
\ No newline at end of file
#textarea-comment { .textarea-comment {
width: 100%; width: 100%;
resize: none;
font-size: 28px; font-size: 28px;
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
padding: 5px; padding: 5px;
resize: none;
}
.warning-empty-inputs {
position: relative;
}
.comment-bar {
margin-block-end: 50px;
} }
.fivestar-rating { .fivestar-rating {
......
...@@ -53,6 +53,7 @@ h1{ ...@@ -53,6 +53,7 @@ h1{
img{ img{
height: 150px; height: 150px;
width: 150px; width: 150px;
border: 2px solid black;
} }
h3{ h3{
color: #F16303; color: #F16303;
......
...@@ -43,11 +43,17 @@ ...@@ -43,11 +43,17 @@
echo "<div class=\"right\">" ; echo "<div class=\"right\">" ;
echo "<p>Update profile picture</p>" ; 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 '
echo "<button class=\"btn\">Browse</button>" ; <div class="flex-container">
echo "<input id=\"profpict\" type=\"file\" name=\"profile_picture\" accept=\"image/png, image/jpg, image/jpeg\" onchange=\"showname()\" >" ; <input id="profpict_dummy" class="profpict_dummy"type="text" name="profile_picture2" readonly>
echo "</div>" ; <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>" ;
echo "</div>" ; echo "</div>" ;
......
...@@ -53,7 +53,7 @@ class historyView { ...@@ -53,7 +53,7 @@ class historyView {
<div class="font-weight-bold text-size-20 gray-text">Nomor Order : #'.$data['orderNumber'].'</div> <div class="font-weight-bold text-size-20 gray-text">Nomor Order : #'.$data['orderNumber'].'</div>
</div> </div>
<div class="flex-container add-flex-end-justify "> <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> </div>
</div> </div>
......
function validateForm(){ function validateForm(){
// alert('Here 2'); //alert('Here 2');
pp = document.getElementById("profpict").value; pp = document.getElementById("profpict").value;
name = document.getElementById("name").value; name = document.getElementById("name").value;
address = document.getElementById("address").value; address = document.getElementById("address").value;
......
...@@ -29,4 +29,26 @@ function noHoverStar(starValue) { ...@@ -29,4 +29,26 @@ function noHoverStar(starValue) {
document.getElementById("star"+idx).src = STAR; document.getElementById("star"+idx).src = STAR;
} }
} }
} }
\ No newline at end of file
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 //Match password and confirmed password
function validatePassword() { function validateAllPasswords() {
var pass = document.forms["registrationform"]["password"].value; var pass = document.forms["registrationform"]["password"].value;
var conf_pass = document.forms["registrationform"]["conf_password"].value; var conf_pass = document.forms["registrationform"]["conf_password"].value;
if (pass != conf_pass) { if (validateBlankPassword()) {
alert("Unmatched password and confirmed password"); if (pass != conf_pass) {
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; return false;
}
}
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 { } 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; return true;
} else {
return false;
} }
} }
function validateAccount($input) { function validateAvailability(input) {
var checkTick = document.getElementById("validate_" + $input).innerHTML; var checkTick = document.getElementById("validate_" + input).innerHTML;
if (checkTick == "") { if (checkTick == "") {
alert($input + " is unavailable!"); showInvalidInput(input + " is unavailable!", input+"-input");
return false; return false;
} else { } else {
hideInvalidInput(input+"-input");
return true; return true;
} }
} }
function submitValidation() { function submitValidation() {
var validation = true; var validation = true;
validation &= validateAccount("username"); validation &= validateName();
validation &= validateAccount("email"); validation &= validateUsername();
validation &= validatePassword(); validation &= validateEmail();
validation &= validateAllPasswords();
validation &= validateAddress();
validation &= validatePhoneNumber();
return validation == 1; return validation == 1;
} }
...@@ -45,4 +154,26 @@ function checkUserAvailability(input, str) { ...@@ -45,4 +154,26 @@ function checkUserAvailability(input, str) {
xmlhttp.open("GET", "registration/checkaccount.php?type=" + input + "&q=" + str, true); xmlhttp.open("GET", "registration/checkaccount.php?type=" + input + "&q=" + str, true);
xmlhttp.send(); 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) { ...@@ -26,28 +26,28 @@ function viewProfile (array $params) {
Your browser does not support SVG Your browser does not support SVG
</object> </object>
<div class="flex-1">Username</div> <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>
<div class="flex-container align-items-flex-center"> <div class="flex-container align-items-flex-center">
<object class="icon-profile" type="image/svg+xml" data="../svgIcon/mail.svg"> <object class="icon-profile" type="image/svg+xml" data="../svgIcon/mail.svg">
Your browser does not support SVG Your browser does not support SVG
</object> </object>
<div class="flex-1">Email</div> <div class="flex-1">Email</div>
<div class="flex-2">'.$params['email'].'</div>