mason/image/compare_images.mas

   1
   2 <%args>
   3 $stock_id
   4 </%args>
   5
   6 <div class="modal fade" id="stock_detail_page_compare_images_dialog" name="stock_detail_page_compare_images_dialog" tabindex="-1" role="dialog" aria-labelledby="stockDetailPageCompareImagesDialog" data-backdrop="static">
   7   <div class="modal-dialog modal-xl" role="document">
   8     <div class="modal-content">
   9       <div class="modal-header">
  10         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  11         <h4 class="modal-title" id="stockDetailPageCompareImagesDialog">Compare Images</h4>
  12       </div>
  13       <div class="modal-body">
  14         <div class="container-fluid">
  15
  16             <&| /util/workflow.mas, id=> "stock_detail_page_compare_images_workflow" &>
  17                 <&| /util/workflow.mas:step, title=> "Comparison" &>
  18                     <& /page/page_title.mas, title=>"Select the comparison you are interested in" &>
  19                     <form class="form-horizontal">
  20                         <div class="form-group">
  21                             <label class="col-sm-3 control-label">Comparison: </label>
  22                             <div class="col-sm-9" >
  23                                 <select id="stock_detail_page_compare_images_comparison_select" class="form-control">
  24                                     <option value="compare_pixel_values_two_images">Compare pixel values for two different images</option>
  25                                 </select>
  26                             </div>
  27                         </div>
  28                     </form>
  29                     <center>
  30                     <button class="btn btn-primary" id="stock_detail_page_compare_images_comparison_select_step">Go to Next Step</button>
  31                     </center>
  32                 </&>
  33                 <&| /util/workflow.mas:step, title=> "Image Selection" &>
  34                     <& /page/page_title.mas, title=>"Select the images you are interested in comparing" &>
  35
  36                     <table class="table table-bordered table-hover" id="stock_detail_page_compare_images_images_type_table">
  37                         <thead>
  38                             <tr>
  39                                 <th>Select</th>
  40                                 <th>Image</th>
  41                                 <th>Field Trial</th>
  42                                 <th>Drone Run Name</th>
  43                                 <th>Drone Run Band Name</th>
  44                                 <th>Drone Run Band Type</th>
  45                                 <th>Plot Polygon Type</th>
  46                             </tr>
  47                         </thead>
  48                     </table>
  49
  50                     <br/><br/>
  51
  52                     <center>
  53                     <button class="btn btn-primary" id="stock_detail_page_compare_images_images_select_step">Go to Next Step</button>
  54                     </center>
  55                 </&>
  56                 <&| /util/workflow.mas:step, title=> "Result" &>
  57                     <& /page/page_title.mas, title=>"Image comparison results" &>
  58
  59                     <div id="stock_detail_page_compare_images_result_div"></div>
  60                 </&>
  61             </&>
  62
  63         </div>
  64
  65       </div>
  66       <div class="modal-footer">
  67         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  68       </div>
  69     </div>
  70   </div>
  71 </div>
  72
  73 <script>
  74 jQuery(document).ready(function() {
  75
  76     jQuery('#stock_images_section_compare_images_button').click(function() {
  77         jQuery('#stock_detail_page_compare_images_dialog').modal('show');
  78     });
  79
  80     jQuery('#stock_detail_page_compare_images_comparison_select_step').click(function(){
  81
  82         jQuery('#stock_detail_page_compare_images_images_type_table').DataTable({
  83             destroy : true,
  84             paging : false,
  85             ajax : '/api/drone_imagery/plot_polygon_types_images?select_checkbox_name=stock_detail_page_compare_images_plot_polygon_type_select&stock_ids=<% $stock_id %>'
  86         });
  87
  88         Workflow.complete("#stock_detail_page_compare_images_comparison_select_step");
  89         Workflow.focus('#stock_detail_page_compare_images_workflow', 1);
  90     });
  91
  92     jQuery('#stock_detail_page_compare_images_images_select_step').click(function(){
  93         var compare_images_selected_image_ids = []
  94         jQuery('input[name="stock_detail_page_compare_images_plot_polygon_type_select"]:checked').each(function() {
  95             compare_images_selected_image_ids.push(jQuery(this).val());
  96         });
  97         if (compare_images_selected_image_ids.length != 2){
  98             alert('Please select two image types!');
  99             return false;
 100         } else {
 101
 102             jQuery.ajax({
 103                 url : '/api/drone_imagery/compare_images?stock_id=<% $stock_id %>&image_ids='+JSON.stringify(compare_images_selected_image_ids)+'&comparison_type='+jQuery('#stock_detail_page_compare_images_comparison_select').val(),
 104                 beforeSend: function() {
 105                     jQuery("#working_modal").modal("show");
 106                 },
 107                 success: function(response){
 108                     console.log(response);
 109                     jQuery("#working_modal").modal("hide");
 110
 111                     var html = '<a target=_blank href="'+response.result+'">File</a>';
 112                     jQuery('#stock_detail_page_compare_images_result_div').html(html);
 113
 114                     Workflow.complete("#stock_detail_page_compare_images_images_select_step");
 115                     Workflow.focus('#stock_detail_page_compare_images_workflow', 2);
 116                 },
 117                 error: function(response){
 118                     jQuery("#working_modal").modal("hide");
 119                     alert('Error comparing images!')
 120                 }
 121             });
 122         }
 123     });
 124
 125 });
 126 </script>