Styling and validation in edit location page

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

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 {

src/controller/OrderController.php

@@ -125,4 +125,5 @@ class OrderController {
 
     }
 
-}
+}
\ No newline at end of file
+

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";
+        }
+
+    }
 
 }

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');

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

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;?>