FloatBackOfffice/application/views/scanned/extra/scanned_activity.php

<div class="panel panel-flat" style="background-color: aliceblue;">
    <div class="panel-body">


        <div class="row">
            <div class="col-lg-6">

                <div class="form-group">
                    <label for="comment">Raw Body:</label>
                    <textarea class="form-control" style="height: 500px;" rows="5" id="comment"><?=$selected_user['message']?></textarea>
                    <button id="process_button" type="button" class="btn btn-warning" onclick="return ProcessBody(<?=$selected_user['id']?>);">Process Body</button>
                </div> 


            </div>


      <div class="col-lg-6">

                <div class="form-group">
                    <label for="comment">Processed:</label>
                    
<div id="processed_body">                    
                    <table class="table">
    <thead>
      <tr>
        <th>Data Point</th>
        <th>Value</th>
        <th>Score</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Date of Travel</td>
        <td></td>
        <td></td>
      </tr>      
      <tr class="success">
        <td>Start Location</td>
        <td></td>
        <td></td>
      </tr>
      <tr class="danger">
        <td>End Location</td>
        <td></td>
        <td></td>
      </tr>
      <tr class="info">
        <td>Distance</td>
        <td></td>
        <td></td>
      </tr> 
      <tr class="warning">
        <td>Duration</td>
        <td></td>
        <td></td>
      </tr>
      <tr class="active">
        <td>Cost</td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
                    
                    
                </div> 


            </div>
        </div>
        <div class="table-responsive">
            <div id ="trackgroup_list">  </div>
        </div> 








    </div>
</div>




<script type="text/javascript">
<!--

function ProcessBody(id) {
        $('#processed_body').html('Processing...');
        $('#process_button').prop('disabled', true);
        $.ajax({
            url: "/scanners/processbody?id=" + id
        }).done(function (data) {
            $('#processed_body').html(data);
            $('#process_button').prop('disabled', false);
        });
 

	return false;
}

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 3.397, lng: 10.644},
            zoom: 3
        });
    }

    var loaded_data = new Array();
    function showTranspModal(service_request_id) {
        if (typeof event !== 'undefined') {
            event.preventDefault();
        }
        //  alert(service_request_id);
        // collect data - either from forms or from data variables
        var id = $(this).data('id');

        // load the modal content with a loader gif and message
        $('#modal-content').html('Loading...');

        // show modal window
        $('#modal_theme_primary').modal('show');
//alert(5);
        // do the ajax bit
        var post_data = {
            'interest_id': service_request_id,
        };
//alert(6);
        $.ajax({
            url: "/transp/transp_modal?service_request_id=" + service_request_id
        }).done(function (data) {
//alert(data);
//alert(7);
            $('#modal-content').html(data);
            //initialize_map();
            var myLatlng = new google.maps.LatLng(33.7489954, -84.3879824);
            var myOptions = {
                zoom: 13,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP};
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("directionsDiv"));

            fitMapToBounds_map();

            calcRoute(loaded_data[0], loaded_data[1]);
            //alert(loaded_data[0]);
        });
    }

   function viewTracked(traked_group) {

        $('#trackgroup_list').html('Processing...');
        $('#acc' + traked_group).prop('disabled', true);
        $.ajax({
            url: "/member/viewtrackedgroup?proc=PROCESS&traked_group=" + traked_group
        }).done(function (data) {
            //$('#trackgroup_list').html(data);
            $('#trackgroup_list').html('');
            plotMarkers(eval(data));
            $('#acc' + traked_group).prop('disabled', false);
        });
        return false;
    }


    function plotMarkers(locations) {
        var n = parseInt(''+locations.length/2,10)-1;
        if (n<0) n=0;
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 11,
            center: new google.maps.LatLng(locations[n].lat, locations[0].lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var flightPath = new google.maps.Polyline({
          path: locations,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 4
        });
        flightPath.setMap(map);
    }

//initMap();
// -->
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&callback=initMap"   async defer></script>
<?
/*
vi:ts=2
*/