From 666eea665974d7f4a3edf40a4ddc7f82cda8eba5 Mon Sep 17 00:00:00 2001
From: Fadhil Imam Kurnia <fadhilimamk@gmail.com>
Date: Sat, 7 Oct 2017 19:12:25 +0700
Subject: [PATCH] Styling and validation in edit location page
---
public/img/ic_save.png | Bin 0 -> 2438 bytes
public/img/ic_triangle.png | Bin 0 -> 395 bytes
public/profil_edit.js | 58 +++++++++++++++++++++++++++-
public/style.css | 17 ++++++++
src/controller/OrderController.php | 3 +-
src/controller/ProfilController.php | 31 +++++++++++++++
src/route.php | 1 +
src/view/profil.php | 7 +++-
src/view/profil_edit_location.php | 10 +++--
9 files changed, 119 insertions(+), 8 deletions(-)
create mode 100644 public/img/ic_save.png
create mode 100644 public/img/ic_triangle.png
diff --git a/public/img/ic_save.png b/public/img/ic_save.png
new file mode 100644
index 0000000000000000000000000000000000000000..55ead9ac0a77a54f715f6bfab3776ea5cee0d1bb
GIT binary patch
literal 2438
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
Ef@11#qyPW_
literal 0
HcmV?d00001
diff --git a/public/img/ic_triangle.png b/public/img/ic_triangle.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e84cea68c7ac33d6738314c5d65a5c3af040469
GIT binary patch
literal 395
zcmeAS@N?(olHy`uVBq!ia0vp@Ak4u6ByT*@`3|I5(j9#r85lP9bN@+X1@aY=J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-G$+Qd;gjJKptm-
zM`SV3zyl!6c-Sy_B2X~L)5S4F;_}oB3k44)@UUGdXZP@#x$woKnG3ZIyw|TTY3mDU
zPi*+7oZxVvP`t*Ibz<eC-;;QyCZD=``}`c+y*#ga<eYY7<`#36?{)Tjm|Sv7v*qSd
zz2yNiy2*|gHS1H>n)$qs`s<c_?WX?qc#*RX5t{cR&jIaKEpd$~Nl7e8wMs5Z1yT$~
z28QOkh6cI@<{^g0RwkxaM&{ZEMpgy}cN)@mp=ij>PsvQH#I0fN-Fs|64U!-mg7ec#
p$`gxH8OqDc^)mCai<1)zQuXqS(r3T3kpe1W@O1TaS?83{1OPiIfS3RP
literal 0
HcmV?d00001
diff --git a/public/profil_edit.js b/public/profil_edit.js
index bd0396f..66c774a 100644
--- a/public/profil_edit.js
+++ b/public/profil_edit.js
@@ -36,4 +36,60 @@ Array.prototype.forEach.call( inputs, function( input ) {
else
label.innerHTML = labelVal;
});
-});
\ No newline at end of file
+});
+
+
+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 fc9630d..9ab45e6 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 {
diff --git a/src/controller/OrderController.php b/src/controller/OrderController.php
index 846c6b3..aaa2aeb 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 6a39d3b..9187b20 100644
--- a/src/controller/ProfilController.php
+++ b/src/controller/ProfilController.php
@@ -250,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 a2e6864..05cc2b2 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 08bd7a9..7e12042 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_location.php b/src/view/profil_edit_location.php
index 3188b2a..9a21605 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,11 +37,12 @@
<?php foreach ($location as $data) : ?>
<tr>
<td><b><?=$no++?></b></td>
- <td><b><?=$data['location']?></b><br>
- <input type="text" style="width: 100%; line-height: 30px; font-size: medium; display: block;"></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;?>
--
GitLab