From b1b76b16775c27d9b42f1a31c93394a6ede04d88 Mon Sep 17 00:00:00 2001
From: Habibi <muhhabibih@gmail.com>
Date: Mon, 22 Oct 2018 00:02:03 +0700
Subject: [PATCH] Add star gimmick in review
---
app/view/review.php | 7 +++++
public/index.php | 1 +
public/static/css/base.css | 5 ++++
public/static/css/review.css | 28 +++++++++++++++++
public/static/html/review.html | 50 +++++++++++++++++++++++++++++++
public/static/img/empty_star.png | Bin 0 -> 3012 bytes
public/static/img/full_star.png | Bin 0 -> 2098 bytes
public/static/js/header.js | 4 +--
public/static/js/review.js | 44 +++++++++++++++++++++++++++
9 files changed, 137 insertions(+), 2 deletions(-)
create mode 100644 app/view/review.php
create mode 100644 public/static/css/review.css
create mode 100644 public/static/html/review.html
create mode 100644 public/static/img/empty_star.png
create mode 100644 public/static/img/full_star.png
create mode 100644 public/static/js/review.js
diff --git a/app/view/review.php b/app/view/review.php
new file mode 100644
index 0000000..1326bba
--- /dev/null
+++ b/app/view/review.php
@@ -0,0 +1,7 @@
+<?php
+ include __STATIC__.'/html/header.html';
+ include __STATIC__.'/html/review.html';
+ // Include content here;
+ include __STATIC__.'/html/footer.html';
+ // echo $_COOKIE["user"];
+?>
\ No newline at end of file
diff --git a/public/index.php b/public/index.php
index 660a71f..1198f25 100644
--- a/public/index.php
+++ b/public/index.php
@@ -47,6 +47,7 @@
$router->add("/history/", "GET", 'render', $authMiddleware, 'history.php');
$router->add("/profile/", "GET", 'render', $authMiddleware, 'profile.php');
$router->add("/logout/", "GET", 'render', $authMiddleware, 'logout.php');
+ $router->add("/review/", "GET", "render", $authMiddleware, "review.php");
// TODO: Add Order Routes
$errorCallback = function(){
diff --git a/public/static/css/base.css b/public/static/css/base.css
index 52e1e11..c7e1e45 100644
--- a/public/static/css/base.css
+++ b/public/static/css/base.css
@@ -22,6 +22,11 @@ body {
padding-right: 20px;
}
+.justify-content-center {
+ display: flex;
+ justify-content: center;
+}
+
.justify-content-end {
display: flex;
justify-content: flex-end;
diff --git a/public/static/css/review.css b/public/static/css/review.css
new file mode 100644
index 0000000..ea04f23
--- /dev/null
+++ b/public/static/css/review.css
@@ -0,0 +1,28 @@
+.review-container {
+ padding-top: 80px;
+ padding-left: 40px;
+ padding-right: 40px;
+}
+
+.review-title h1 {
+ margin-bottom: 0px;
+}
+
+.review-title h2 {
+ margin-top: 0px;
+ font-size: 40px;
+ color: #4d4d4d;
+}
+
+.review-header h1 {
+ font-size: 60px;
+ color: #00374c;
+}
+
+.review-rating img {
+ width: 110px;
+ height: 110px;
+
+ margin-left: 5px;
+ margin-right: 5px;
+}
\ No newline at end of file
diff --git a/public/static/html/review.html b/public/static/html/review.html
new file mode 100644
index 0000000..daf349a
--- /dev/null
+++ b/public/static/html/review.html
@@ -0,0 +1,50 @@
+<link rel="stylesheet" href="/static/css/base.css">
+<link rel="stylesheet" href="/static/css/review.css">
+<div class="review-container">
+ <div class="row justify-content-between">
+ <div class="review-title">
+ <div class="title">
+ <h1>Nota Hidup</h1>
+ </div>
+ <h2>Light R.D.B</h2>
+ </div>
+ <img
+ src="/static/img/contoh_buku.png"
+ />
+ </div>
+ <div class="review-header">
+ <h1>Add Rating</h1>
+ <div class="row justify-content-center review-rating">
+ <img
+ id=star-0
+ key=0
+ src="/static/img/empty_star.png"
+ />
+ <img
+ id=star-1
+ key=1
+ src="/static/img/empty_star.png"
+ />
+ <img
+ id=star-2
+ key=2
+ src="/static/img/empty_star.png"
+ />
+ <img
+ id=star-3
+ key=3
+ src="/static/img/empty_star.png"
+ />
+ <img
+ id=star-4
+ key=4
+ src="/static/img/empty_star.png"
+ />
+ </div>
+ </div>
+ <div class="review-header">
+ <h1>Add Comment</h1>
+ </div>
+</div>
+
+<script src="/static/js/review.js"></script>
\ No newline at end of file
diff --git a/public/static/img/empty_star.png b/public/static/img/empty_star.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c6dfde1f2cc2617183f0769bc3a2d786cd09f23
GIT binary patch
literal 3012
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
Zi*NMhOh%5iZhztk8>@4c1PiaE{{SXIWJ3S|
literal 0
HcmV?d00001
diff --git a/public/static/img/full_star.png b/public/static/img/full_star.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca06016c44ba7fc801479a95aa699e2406472bfd
GIT binary patch
literal 2098
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
literal 0
HcmV?d00001
diff --git a/public/static/js/header.js b/public/static/js/header.js
index 0158f65..653d5ff 100644
--- a/public/static/js/header.js
+++ b/public/static/js/header.js
@@ -7,10 +7,10 @@ const enableTabColor = function(){
const urlPath = window.location.pathname;
- if (urlPath === "/browse/"){
+ if (urlPath === "/browse/" || urlPath.includes("/results")){
browseTab.style.backgroundColor = orangeColor;
}
- if (urlPath === "/history/"){
+ if (urlPath === "/history/" || urlPath.includes("/review")){
historyTab.style.backgroundColor = orangeColor;
}
if (urlPath === "/profile/"){
diff --git a/public/static/js/review.js b/public/static/js/review.js
new file mode 100644
index 0000000..57c8839
--- /dev/null
+++ b/public/static/js/review.js
@@ -0,0 +1,44 @@
+var rating = 0;
+
+var stars = [];
+for(i = 0; i < 5; i++) {
+ let star = document.getElementById(`star-${i}`);
+ stars.push(star);
+}
+
+const onRatingMouseOver = function() {
+ const key = this.getAttribute("key")
+
+ for(i = 0; i < parseInt(key) + 1; i++) {
+ console.log(i);
+ stars[i].src="/static/img/full_star.png";
+ }
+ for(i = parseInt(key) + 1; i< 5; i++) {
+ stars[i].src="/static/img/empty_star.png";
+ }
+}
+
+const onRatingMouseOut = function() {
+ for (i = 0; i < rating; i++) {
+ stars[i].src="/static/img/full_star.png";
+ }
+ for(i = rating; i < 5; i++) {
+ stars[i].src="/static/img/empty_star.png";
+ }
+}
+
+const onRatingClick = function() {
+ if (rating == parseInt(this.getAttribute("key")) + 1) {
+ rating = 0;
+ } else {
+ rating = parseInt(this.getAttribute("key")) + 1;
+ }
+}
+
+window.onload = function() {
+ for (i = 0; i < 5; i++) {
+ stars[i].onmouseover = onRatingMouseOver;
+ stars[i].onmouseout = onRatingMouseOut;
+ stars[i].onclick = onRatingClick;
+ }
+}
\ No newline at end of file
--
GitLab