diff --git a/public/img/ic_save.png b/public/img/ic_save.png
new file mode 100644
index 0000000000000000000000000000000000000000..55ead9ac0a77a54f715f6bfab3776ea5cee0d1bb
Binary files /dev/null and b/public/img/ic_save.png differ
diff --git a/public/img/ic_triangle.png b/public/img/ic_triangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e84cea68c7ac33d6738314c5d65a5c3af040469
Binary files /dev/null and b/public/img/ic_triangle.png differ
diff --git a/public/profil_edit.js b/public/profil_edit.js
new file mode 100644
index 0000000000000000000000000000000000000000..66c774a3ceb0d9c6bb9bc459db370a18031da2df
--- /dev/null
+++ b/public/profil_edit.js
@@ -0,0 +1,95 @@
+function validateProfileEdit() {
+ var inputName = document.getElementById('inputName').value;
+ var inputPhone = document.getElementById('inputPhone').value;
+
+ if (inputName.trim() == "" || inputPhone.trim() == "") {
+ alert("Name and Phone can't empty!");
+ return false;
+ }
+
+ return true;
+}
+
+function validateLocationEdit() {
+ var input = document.getElementById('locationInput').value;
+ if (input.trim() == "") {
+ alert('Location is empty!');
+ return false;
+ }
+ return true;
+}
+
+var inputs = document.querySelectorAll( '.input-photo' );
+Array.prototype.forEach.call( inputs, function( input ) {
+ var label = input.nextElementSibling,
+ labelVal = label.innerHTML;
+
+ input.addEventListener( 'change', function( e ) {
+ var fileName = '';
+ if( this.files && this.files.length > 1 )
+ fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+ else
+ fileName = e.target.value.split( '\\' ).pop();
+
+ if( fileName )
+ label.querySelector( '.input-photo-result' ).innerHTML = fileName;
+ else
+ label.innerHTML = labelVal;
+ });
+});
+
+
+function editLocation(id) {
+
+ var inputs = document.getElementsByClassName('input-location');
+ for (var i = 0; i < inputs.length; i++) {
+ inputs[i].style.display = 'none';
+ inputs[i].previousElementSibling.style.display = 'inline';
+ }
+ var buttons = document.getElementsByClassName('action-edit');
+ for (var i = 0; i < buttons.length; i++) {
+ buttons[i].style.backgroundImage = 'url(\'/img/ic_edit.jpg\')';
+ buttons[i].setAttribute( "onClick", "javascript: editLocation("+buttons[i].getAttribute("data")+");" );
+ }
+
+ var locationSpan = document.getElementById('location-'+id);
+ var locationInput = document.getElementById('input-location-'+id);
+ var actionEdit = document.getElementById('action-edit-'+id);
+
+ locationInput.value = locationSpan.innerHTML;
+ locationSpan.style.display = 'none';
+
+ // change action Edit icon
+ actionEdit.style.backgroundImage = 'url(\'/img/ic_save.png\')';
+ actionEdit.style.backgroundSize = '20px 20px';
+ actionEdit.style.width = '20px';
+ actionEdit.style.height = '20px';
+ actionEdit.onclick = function () {
+ if (locationInput.value.trim() == "") {
+ alert("Location can not empty!");
+ return;
+ }
+ saveLocation(locationSpan.innerHTML, locationInput.value);
+ }
+
+ locationInput.style.display = 'block';
+ locationInput.focus();
+}
+
+function saveLocation(location, newlocation) {
+ var id = document.getElementById('driver-id').innerHTML;
+ var data = 'id='+id+'&location='+location+'&newlocation='+newlocation;
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ if (this.responseText == "Success") {
+ window.location.href = "/main/profil/location/edit?u="+id;
+ } else {
+ alert(this.responseText);
+ }
+ }
+ };
+ xhttp.open("POST", "/main/profil/location/edit/data", true);
+ xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+ xhttp.send(data);
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 683b3811a4c9156b1e5a951feb762128d991472f..9ab45e6ec603423392c3987cb56bcb100bb362dc 100755
--- a/public/style.css
+++ b/public/style.css
@@ -192,6 +192,11 @@ body {
line-height: 50%;
}
+.location-list {
+ line-height: 1.9em;
+ list-style-image: url('/img/ic_triangle.png');
+}
+
.edit:after {
background-image: url('/img/ic_edit.jpg');
background-size: 45px 45px;
@@ -221,6 +226,18 @@ table, th, td {
height: 20px;
content: "";
margin-right: 10px;
+ cursor: pointer;
+}
+
+.action-save {
+ background-image: url('/img/ic_edit.jpg');
+ background-size: 25px 25px;
+ display: inline-block;
+ width: 25px;
+ height: 20px;
+ content: "";
+ margin-right: 10px;
+ cursor: pointer;
}
.action-delete {
@@ -232,6 +249,108 @@ table, th, td {
content: "";
}
+/* The switch - the box around the slider */
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 40px;
+ height: 22px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 15px;
+ width: 15px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #008C14;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #008C14;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(17px);
+ -ms-transform: translateX(17px);
+ transform: translateX(17px);
+}
+
+.slider.round {
+ border-radius: 22px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
+
+.input-photo {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+}
+
+.input-photo + label {
+ display: inline-block;
+ cursor: pointer;
+ width: 100%;
+ line-height: 33px;
+}
+
+.input-photo + label > .input-photo-button {
+ color: black;
+ float: right;
+ font-size: 0.75em;
+ width: 27%;
+ background-color: #ccc;
+ text-align: center;
+}
+
+.input-photo + label > .input-photo-result {
+ float: left;
+ font-size: 0.75em;
+ width: 70%;
+ height: 32px;
+ padding-left: 5px;
+ border: solid 1px black;
+ margin-right: 2px;
+}
+
+.input-photo:focus + label > .input-photo-button,
+.input-photo + label > .input-photo-button:hover {
+ background-color: #999aa3;
+}
+
+.input-photo:focus + label > .input-photo-button {
+ outline: 1px dotted #000;
+ outline: -webkit-focus-ring-color auto 5px;
+}
+
/* ------------------------- ORDER -------------------------*/
.small-circle {
diff --git a/src/controller/OrderController.php b/src/controller/OrderController.php
index 846c6b30dfbafe7a97ff7872b9096976ff78b7c1..aaa2aeb777e20c07d79f1730c58e78ee1fa98e64 100644
--- a/src/controller/OrderController.php
+++ b/src/controller/OrderController.php
@@ -125,4 +125,5 @@ class OrderController {
}
-}
\ No newline at end of file
+}
+
diff --git a/src/controller/ProfilController.php b/src/controller/ProfilController.php
index 4a931895c240f08311091250b689c142334622c0..9187b2064ab2ad30e0ca80c01a8e2d39e12036c4 100644
--- a/src/controller/ProfilController.php
+++ b/src/controller/ProfilController.php
@@ -74,7 +74,7 @@ class ProfilController {
public static function SaveProfil() {
// Check sending data
- if (!isset($_POST["name"]) || !isset($_POST["phone"]) || !isset($_POST["isDriver"]) || !isset($_GET['u'])) {
+ if (!isset($_POST["name"]) || !isset($_POST["phone"]) || !isset($_GET['u'])) {
echo "Invalid data";
return;
}
@@ -90,10 +90,12 @@ class ProfilController {
$conn = DB::getInstance();
+ var_dump($_POST);
+
$user_id = simpleCrypt($_GET['u'], 'd');
$user_name = $_POST["name"];
$user_phone = $_POST["phone"];
- $user_driver = $_POST["isDriver"] == "yes" ? 1 : 0;
+ $user_driver = isset($_POST["isDriver"]) ? 1 : 0;
$user_photo = isset($_FILES["photo"]) ? $_FILES["photo"]["name"] : null;
// Saving image if available
@@ -248,5 +250,36 @@ class ProfilController {
}
}
+ public static function EditDataLocationHandler() {
+ if (!isset($_POST['id']) || !isset($_POST['location']) || !isset($_POST['newlocation'])) {
+ echo "Invalid parameter!";
+ return;
+ }
+
+ $uid = simpleCrypt($_POST['id'], 'd');
+ $location = $_POST['location'];
+ $newlocation = $_POST['newlocation'];
+
+ // Access database
+ $dbconn = DB::getInstance();
+ $stmt = $dbconn->prepare(
+ 'UPDATE prefered_location
+ SET
+ location = :newlocation
+ WHERE
+ id_driver = :id AND location = :location'
+ );
+ $stmt->bindParam(":newlocation", $newlocation, PDO::PARAM_STR);
+ $stmt->bindParam(":id", $uid, PDO::PARAM_INT);
+ $stmt->bindParam(":location", $location, PDO::PARAM_STR);
+ $stmt->execute();
+ if (!$stmt->rowCount()) {
+ echo "Fail :";
+ echo $stmt->errorInfo();
+ } else {
+ echo "Success";
+ }
+
+ }
}
diff --git a/src/route.php b/src/route.php
index a2e6864c48853be106194e11d15761b6390fdc09..05cc2b2bafccec2ab95a4780579b991b50c6a8b3 100644
--- a/src/route.php
+++ b/src/route.php
@@ -12,6 +12,7 @@ $AppInstance->addRoute("/main/profil", 'ProfilController::P
$AppInstance->addRoute("/main/profil/edit", 'ProfilController::EditHandler');
$AppInstance->addRoute("/main/profil/edit/save", 'ProfilController::SaveProfil');
$AppInstance->addRoute("/main/profil/location/edit", 'ProfilController::EditLocationHandler');
+$AppInstance->addRoute("/main/profil/location/edit/data", 'ProfilController::EditDataLocationHandler');
$AppInstance->addRoute("/main/profil/location/edit/save", 'ProfilController::SaveProfil');
$AppInstance->addRoute("/main/profil/location/delete", 'ProfilController::DeleteLocationHandler');
$AppInstance->addRoute("/main/profil/location/add", 'ProfilController::AddLocationHandler');
diff --git a/src/view/profil.php b/src/view/profil.php
index 08bd7a96351a094b0ccf0fcdd181bc6e4f5e6f72..7e1204240af893ebedb2165ddec6538f0d171604 100644
--- a/src/view/profil.php
+++ b/src/view/profil.php
@@ -35,6 +35,7 @@
<p><i class="icon icon-mail"></i> <?=$user->email?></p>
<p><i class="icon icon-phone"></i> <?=$user->phone?></p>
</div>
+ <?php if ($user->isDriver) : ?>
<div class="row">
<div class="col-5"><h2>PREFERED LOCATIONS</h2></div>
<div class="col-1 text-right"><a class="edit" href="/main/profil/location/edit?u=<?=$id?>"></a></div>
@@ -43,13 +44,15 @@
<?php if ($location_count == 0): ?>
<h4 class="text-center">Tidak ada data lokasi :(</h4>
<?php else:?>
- <ul>
+ <ul class="location-list">
+ <?php $no = 0 ?>
<?php foreach ($location as $data) : ?>
- <li><?=$data['location']?></li>
+ <li style="margin-left: <?=$no++*35?>px"><b><?=$data['location']?></b></li>
<?php endforeach;?>
</ul>
<?php endif;?>
</div>
+ <?php endif;?>
</div>
</body>
</html>
\ No newline at end of file
diff --git a/src/view/profil_edit.php b/src/view/profil_edit.php
index 0b790460857bfdbb377b5a28dc1624e655aa739f..12da5e7900f74b4121f40adf01aab02b5a63d803 100644
--- a/src/view/profil_edit.php
+++ b/src/view/profil_edit.php
@@ -15,59 +15,74 @@
</div>
</div>
<div class="row">
- <form action="/main/profil/edit/save?u=<?=$id?>" method="post" enctype="multipart/form-data">
- <div class="container">
+ <form action="/main/profil/edit/save?u=<?=$id?>" method="post" enctype="multipart/form-data" onsubmit="return validateProfileEdit()">
+ <div class="container" style="width: 65%">
<div class="row">
- <div class="col-1 text-left"></div>
- <div class="col-4 text-left">
+ <div class="col-6 text-left">
<h2>EDIT PROFILE INFORMATION</h2>
</div>
- <div class="col-1 text-left"></div>
</div>
<div class="row">
- <div class="col-1 text-left"></div>
<div class="col-2 text-left">
<img class="img-profile" src="<?=$user->photo?>">
</div>
- <div class="col-2">
+ <div class="col-4">
<h3>Update profile picture</h3>
<form action="#">
- <input type="file" name="photo" accept="image/*">
+ <input id="photo" type="file" name="photo" accept="image/*" class="input-photo">
+ <label for="photo">
+ <div class="input-photo-result">
+
+ </div>
+ <div class="input-photo-button">
+ Browse...
+ </div>
+ </label>
</form>
</div>
- <div class="col-1 text-left"></div>
</div>
<br>
<div class="row">
- <div class="col-1 text-left"></div>
- <div class="col-2 text-left">
- Your Name<br>
- Phone<br>
+ <div class="col-2 text-left" style="line-height: 35px">
+ Your Name
+ </div>
+ <div class="col-4 line-height-medium">
+ <input id="inputName" style="width: 100%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="name" value="<?=$user->name?>">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-2 text-left" style="line-height: 35px">
+ Phone
+ </div>
+ <div class="col-4 line-height-medium">
+ <input id="inputPhone" style="width: 100%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="phone" value="<?=$user->phone?>"><br>
+ </div>
+ </div>
+ <div class="row" style="margin-top: 5px">
+ <div class="col-2 text-left" style="line-height: 30px">
Driver Status
</div>
- <div class="col-2 line-height-medium">
- <input style="width: 100%" type="text" name="name" value="<?=$user->name?>"><br>
- <input style="width: 100%" type="text" name="phone" value="<?=$user->phone?>"><br>
- <input style="width: 20%" type="radio" name="isDriver" value="yes" <?=$user->isDriver? 'checked':''?>>Yes
- <input style="width: 20%" type="radio" name="isDriver" value="no" <?=$user->isDriver? '':'checked'?>>No<br>
+ <div class="col-4 line-height-medium text-right">
+ <label class="switch">
+ <input id="inputDriver" type="checkbox" name="isDriver" <?=$user->isDriver ? 'checked' : ''?>>
+ <span class="slider round"></span>
+ </label>
</div>
- <div class="col-1 text-left"></div>
</div>
<br>
<br>
<div class="row">
- <div class="col-1 text-left"></div>
- <div class="col-2 text-left">
+ <div class="col-3 text-left">
<a class="btn red" href="/main/profil?u=<?=$id?>">BACK</a>
</div>
- <div class="col-2 text-right">
+ <div class="col-3 text-right">
<input class="btn green" type="submit" value="SAVE">
</div>
- <div class="col-1 text-left"></div>
</div>
</div>
</form>
</div>
</div>
+<script type="text/javascript" src="/profil_edit.js"></script>
</body>
</html>
\ No newline at end of file
diff --git a/src/view/profil_edit_location.php b/src/view/profil_edit_location.php
index c7038f276fd0a2177e85f7f19387bd4d1ca6a79c..9a21605a4e0e7ecf95faaa23d93194d7a14701e9 100644
--- a/src/view/profil_edit_location.php
+++ b/src/view/profil_edit_location.php
@@ -20,6 +20,7 @@
<div class="col-1 text-left"></div>
<div class="col-4 text-left">
<h2>EDIT PREFERED LOCATION</h2>
+ <span id="driver-id" style="display: none"><?=$id?></span>
</div>
<div class="col-1 text-left"></div>
</div>
@@ -36,10 +37,12 @@
<?php foreach ($location as $data) : ?>
<tr>
<td><b><?=$no++?></b></td>
- <td><b><?=$data['location']?></b></td>
+ <td style="padding-left: 4px">
+ <span id="location-<?=$no-1?>" style="font-weight: bold"><?=$data['location']?></span>
+ <input id="input-location-<?=$no-1?>" class="input-location" type="text" style="width: 100%; line-height: 24px; padding-left:3px; font-size: medium; display: none;"></td>
<td style="text-align: center">
- <a class="action-edit" href="#"></a>
- <a class="action-delete" href="/main/profil/location/delete?u=<?=$id?>&name=<?=$data['location']?>"></a>
+ <a id="action-edit-<?=$no-1?>" class="action-edit" onclick="editLocation(<?=$no-1?>)" data="<?=$no-1?>"></a>
+ <a class="action-delete" href="/main/profil/location/delete?u=<?=$id?>&name=<?=$data['location']?>" onclick="return confirm('Are you sure want to delete?')"></a>
</td>
</tr>
<?php endforeach;?>
@@ -58,8 +61,8 @@
<div class="row">
<div class="col-1"></div>
<div class="col-4">
- <form action="/main/profil/location/add?u=<?=$id?>" method="post">
- <input type="text" name="location" style="width:76%;height: 30px; font-size: medium">
+ <form action="/main/profil/location/add?u=<?=$id?>" method="post" onsubmit="return validateLocationEdit()">
+ <input id="locationInput" type="text" name="location" style="width:76%;height: 30px; font-size: medium">
<input class="btn green" type="submit" value="ADD" style="width:20%;margin-left: 10px">
</form>
</div>
@@ -76,5 +79,6 @@
</div>
</div>
</div>
+<script type="text/javascript" src="/profil_edit.js"></script>
</body>
</html>
\ No newline at end of file