Show request details in popup modal

Author: shanavas786

mainapp/templates/mainapp/request_list.html

@@ -3,16 +3,18 @@
 
 {% block css %}
 <style>
-    .table{
-      table-layout: fixed;
-    }
+  .table{
+    table-layout: fixed;
+  }
 
-    .table td{
-      word-wrap: break-word;
-    }
+  .table td{
+    word-wrap: break-word;
+  }
+  #req-summary { margin-top: 15px; }
+  .modal-body .row { padding: 5px 0 }
 </style>
 <style>
-@media only screen and (max-width: 800px)  {
+  @media only screen and (max-width: 800px)  {
 
 		#requests-table table, thead, tbody, th, td, tr {
 			display: block;
@@ -56,13 +58,14 @@
     #requests-table td:nth-of-type(4):before { content: "Requestee - അപേക്ഷകന്‍റെ പേര്"; }
     #requests-table td:nth-of-type(5):before { content: "Phone - ഫോണ്‍ നമ്പര്‍"; }
     #requests-table td:nth-of-type(6):before { content: "Date - തീയതി"; }
-    #requests-table td:nth-of-type(7):before { content: "More details - കൂടുതൽ വിശദാംശങ്ങൾ"; }
+    #requests-table td:nth-of-type(9):before { content: "More details - കൂടുതൽ വിശദാംശങ്ങൾ"; }
   }
-@media only screen and (max-width: 420px)  {
+  @media only screen and (max-width: 420px)  {
 		#requests-table td {
-            min-height: 60px;
+      min-height: 60px;
 		}
-    }
+  }
+
 </style>
 {% endblock %}
 
@@ -95,7 +98,17 @@ <h2 class="text-center">ഇതു വരെ ആവശ്യപ്പെട്ട
           <td>{{ req.requestee }}</td>
           <td><a href="tel:{{ req.requestee_phone }}" >{{ req.requestee_phone }}</a></td>
           <td>{{ req.dateadded }}</td>
-          <td><a class="btn btn-sm btn-success" href="{%url 'requestdetailsview' req.id %}" target="_blank">More details</a>
+          <td class="hide">
+            {% if req.latlng %}
+            <a class="btn btn-sm btn-success" href="https://maps.google.com/?q={{ req.latlng }}" target="_blank">Open in maps</a>
+            <br>
+            Accuracy: {{ req.latlng_accuracy }}
+            {% else %}
+            NA
+            {% endif %}
+          </td>
+          <td class="hide">{{ req.summarise | linebreaks }} </td>
+          <td><button class="show-details btn btn-sm btn-success">More details</button>
         </tr>
     {% endfor %}
   </tbody>
@@ -125,9 +138,79 @@ <h2 class="text-center">ഇതു വരെ ആവശ്യപ്പെട്ട
 
  </div>
 
+ <!-- Modal -->
+ <div id="req-details" class="modal fade" role="dialog">
+   <div class="modal-dialog">
+
+     <!-- Modal content-->
+     <div class="modal-content">
+       <div class="modal-header">
+         <button type="button" class="close" data-dismiss="modal">&times;</button>
+         <h4 class="modal-title">Request Details</h4>
+       </div>
+       <div class="modal-body">
+         <div class="container">
+           <div class="row">
+             <span class="col-xs-6">District: <span id="req-dist"></span></span>
+             <span class="col-xs-6">Requestee: <span id="req-requestee"></span></span>
+           </div>
+           <div class="row">
+             <span class="col-xs-6">Contact: <span id="req-contact"></span></span>
+             <span class="col-xs-6">Date: <span id="req-date"></span></span>
+           </div>
+           <div class="row">
+             <span class="col-xs-6">Location: <span id="req-loc"></span></span>
+             <span class="col-xs-6">GPS Location: <span id="req-gps"></span></span>
+           </div>
+           <div class="row">
+             <div class="col-xs-12">
+               <h3>Summary</h3>
+               <p id="req-summary"></p>
+             </div>
+           </div>
+         </div>
+       </div>
+       <div class="modal-footer">
+         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+       </div>
+     </div>
+
+   </div>
+ </div>
+
  <script>
+   const iDist = 1
+   const iLoc = 2
+   const iRequestee = 3
+   const iContact = 4
+   const iDate = 5
+   const iGps = 6
+   const iSummary = 7
+
    window.onload = function() {
      $("input.search").keyup(search);
+     $(".show-details").click(showDetails);
+   }
+
+   function showDetails(evt) {
+     var tds = $(evt.target).parent().siblings()
+     var dist = tds.eq(iDist).text().toLowerCase()
+     var loc = tds.eq(iLoc).text().toLowerCase()
+     var requestee = tds.eq(iRequestee).text().toLowerCase()
+     var phone = tds.eq(iContact).html()
+     var date = tds.eq(iDate).text()
+     var gps = tds.eq(iGps).html()
+     var summary = tds.eq(iSummary).html()
+
+     $("#req-dist").text(dist)
+     $("#req-loc").text(loc)
+     $("#req-requestee").text(requestee)
+     $("#req-contact").html(phone)
+     $("#req-date").text(date)
+     $("#req-gps").html(gps)
+     $("#req-summary").html(summary)
+
+     $("#req-details").modal("show")
    }
 
    function search() {
@@ -136,9 +219,9 @@ <h2 class="text-center">ഇതു വരെ ആവശ്യപ്പെട്ട
        if (i == 0) return
        el = $(el)
        var tds = el.find("td")
-       var loc = tds.eq(1).text().toLowerCase()
-       var requestee = tds.eq(2).text().toLowerCase()
-       var phone = tds.eq(3).text()
+       var loc = tds.eq(iLoc).text().toLowerCase()
+       var requestee = tds.eq(iRequestee).text().toLowerCase()
+       var phone = tds.eq(iContact).text()
        var locKey = $("#search-loc").val().toLowerCase()
        var reqKey = $("#search-requestee").val().toLowerCase()
        var phoneKey = $("#search-phone").val()