rating in history is shown by stars

controller/transactionController.php

@@ -30,7 +30,7 @@ if(isset($_GET['id']) && isset($_GET['driver']) && $_GET['driver']) {
     <div class='transaction-info'><div class='transaction-date'>" . date('l, F jS Y',strtotime($row['date'])) . " </div>
     <div class='user-name'>" . $username . "</div>
     <div class='transaction-city'>" . $row['pickup'] . " to " . $row['destination'] . "</div>
-    <div class='transaction-rating'>gave " . $row['rating'] . " star(s) for this order</div>
+    <div class='transaction-given-rating'>gave " . $row['rating'] . " star(s) for this order</div>
     <div class='transaction-comment'>and left comment:<blockquote>\"" . $row['comment'] . "\"</blockquote></div></div>
     <div class='hide-button'><div id='transaction-" . $row['transaction_id'] . "' onclick='hide(" . $row['transaction_id'] . ")'>HIDE</div></div>
     </div>";
@@ -59,7 +59,7 @@ if(isset($_GET['id']) && isset($_GET['driver']) && $_GET['driver']) {
     <div class='transaction-info'><div class='transaction-date'>" . date('l, F jS Y',strtotime($row['date'])) . " </div>
     <div class='user-name'>" . $fetched['name'] . "</div>
     <div class='transaction-city'>" . $row['pickup'] . " to " . $row['destination'] . "</div>
-    <div class='transaction-rating'>you rated: " . $row['rating'] . "</div>
+    <div class='transaction-rating' id='transaction-". $i ."-rating'>" . $row['rating'] . "</div>
     <div class='transaction-comment'>and left comment:<blockquote>\"" . $row['comment'] . "\"</blockquote></div></div>
     <div class='hide-button'><div id='transaction-" . $row['transaction_id'] . "' onclick='hide(" . $row['transaction_id'] . ")'>HIDE</div></div>
     </div>";

css/history.css

@@ -31,7 +31,7 @@
     font-size: 2rem;
     font-weight: bold;
 }
-.transaction-city, .transaction-rating, .transaction-comment {
+.transaction-city, .transaction-rating, .transaction-comment, .transaction-given-rating {
     font-size: 1.2rem;
     margin: 5px 0;
 }
@@ -49,4 +49,8 @@
     background: red;
     border: 1px solid #000;
     border-radius: 10px;
+}
+.small-rating-image {
+    display: inline-block;
+    width: 20px;
 }
\ No newline at end of file

js/history.js

@@ -4,7 +4,22 @@ function getAllTransaction(isDriver){
     xmlhttp.onreadystatechange = function () {
         if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
             document.getElementById('driver-info').innerHTML = xmlhttp.responseText;
-            //console.log(result.getElementById('transaction-id').innerHTML);
+            //Make it so the change is only for the user order, not driver orders
+            var rating = document.getElementsByClassName('transaction-rating');
+            for(i=0; i<rating.length; i++){
+                var iterate = rating[i].childNodes[0].nodeValue;
+                while(rating[i].hasChildNodes()){
+                    rating[i].removeChild(rating[i].lastChild);
+                }
+                rating[i].innerHTML = 'You rated: ';
+                for(j=0; j<iterate; j++){
+                    var ratingImage = document.createElement('img');
+                    ratingImage.setAttribute('src', '../img/rating.png');
+                    ratingImage.classList.add('small-rating-image');
+                    var idName = 'transaction-' + i + '-rating';
+                    document.getElementById(idName).appendChild(ratingImage);
+                }
+            }
         }
     };
     xmlhttp.open('GET', '../controller/transactionController.php?id=' + id + '&driver=' + isDriver,true);