Merge branch 'rinda_book' into 'master'

Finish Order Book

See merge request !17

app/view/bookDetail.php

@@ -5,12 +5,25 @@
 <link rel="stylesheet" href="/static/css/base.css">
 <link rel="stylesheet" href="/static/css/book_detail.css">
 
+<input
+	type="hidden"
+	id="user_id"
+	value=<?=getJwtData($_COOKIE["Authorization"])->user_id?>
+>
+
+<input
+	type="hidden"
+	id="book_id"
+	value=<?=$books[0]->book_id?>
+>
+
+
 <div id="book-detail">
 	<div class="book">
 		<div class="kiri">
 			<div id="book-title">
 				<?php
-					echo($books[0]->title)
+					echo($books[0]->title);
 				?>
 			</div>
 			<div id="author">
@@ -60,21 +73,25 @@
 	<br><h2 id="subtitle">Order</h2>
 	Jumlah:		
 	<select id="banyak-jumlah">
-		<option value="1">1</option>
-		<option value="2">2</option>
-		<option value="3">3</option>
-		<option value="4">4</option>
-		<option value="5">5</option>
-		<option value="6">6</option>
-		<option value="7">7</option>
-		<option value="8">8</option>
-		<option value="9">9</option>
-		<option value="10">10</option>
+		<?php 
+			for ($i=1;$i<101;$i++){
+				echo("<option value=$i>$i</option>");
+			}
+		?>
 	</select>
 
 
-	<div class="submit-order">
-		<button class="submit-button">Order</button>
+	<button class="submit-button" id="submit-button")">Order</button>
+
+	<div class="submit-order" id="submit-order">
+		<div class="modal-content">
+			<span class="close">&times;</span>
+			<img src="/static/img/checklist.png" id="checklist" alt="photo">
+			<div id="tulisan">
+				<p id="berhasil">Pemesanan berhasil!</p>
+				<p>Nomor Transaksi : <span id="no-transaksi"></span></p>
+			</div>
+		</div>
 	</div><br>
 	<h2 id="subtitle">Reviews</h2>
 	

config/devel.php

@@ -3,7 +3,7 @@
         "db" => array(
             "host" => "localhost",
             "user" => "root",
-            "password" => "rahasiailahi",
+            "password" => "rinda123",
             "db_name" => "tayo_book_store"
         ),
         "base_url" => "http://localhost:4000/",

public/static/css/book_detail.css

@@ -54,7 +54,6 @@ body {
 .review-container{
 	display: flex;
 	justify-content: space-between;
-
 	margin-bottom: 20px;
 }
 
@@ -131,4 +130,56 @@ body {
 .star-rating {
 	display: flex;
 	flex-direction: row;
+}
+
+#submit-order {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	padding-top: 100px;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: rgb(0,0,0);
+	background-color: rgba(0,0,0,0.4);
+	padding-top: 35vh;
+}
+
+.modal-content {
+	background-color: #fefefe;
+	margin: auto;
+	padding: 20px;
+	border: 1px solid #888;
+    width: 80%;
+}
+
+.close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#checklist {
+	float: left;
+	width: 80;
+	margin-top: 10;
+	margin-right: 20;
+}
+
+#berhasil {
+	font-weight: bold;
+}
+
+#tulisan {
+	font-family: 'Arial Rounded MT Bold';
 }
\ No newline at end of file

public/static/js/book_detail.js

-const doOrder = function(user_id) {
-    let url_string = window.location.href;
-    let url = new URL(url_string);
-    let book_id = url.searchParams.get("book_id");
-
-    let item_count = document.getElementById("banyak-jumlah");
-
-    let orderPayload = {
-        "userid": user_id,
-        "bookid": book_id,
-        "itemcount": item_count,
-        "date": 0,
+doOrder();
+function doOrder() {
+    let book_id = document.getElementById("book_id").value;
+    let user_id = document.getElementById("user_id").value;
+
+    let orderModal = document.getElementById("submit-order");
+    let orderBtn = document.getElementById("submit-button");
+    let close = document.getElementsByClassName("close")[0];
+
+    orderBtn.onclick = function(){
+        let item_count = document.getElementById("banyak-jumlah").value;
+
+        var d = new Date();
+        let current_date = d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
+
+        let orderPayload = {
+            "userid": user_id,
+            "bookid": book_id,
+            "itemcount": item_count,
+            "date": current_date,
+        }
+        
+        doAjax('/api/order/', "POST", orderPayload, function(response){
+            document.getElementById("no-transaksi").innerHTML =response.data.order_id;
+        });
+        orderModal.style.display = "block";
+        close.onclick = function(){
+            orderModal.style.display = "none";
+        }
+        window.onclick = function(event){
+            if (event.target == orderModal) {
+                orderModal.style.display = "none";
+            }
+        }
     }
-}
\ No newline at end of file
+}
+