mason/breeders_toolbox/location.mas

   1
   2 <%args>
   3 $user_id => undef
   4 $locations => ()
   5 </%args>
   6
   7 <& /util/import_javascript.mas, classes => [ ] &>
   8
   9 <%perl>
  10
  11   if (!$locations) {
  12     print "<tr><td>No locations have been added yet.</td></tr>";
  13   }
  14
  15 print "<table class=\"table table-striped table-hover table-condensed\">";
  16
  17 foreach my $prog (sort keys %$locations) {
  18
  19   print "<thead><tr class=\"success\"><td colspan=\"2\"><h4>$prog</h4></td></tr>
  20          <tr><th>Location</th><th>Count</th></tr>
  21          </thead>
  22          <tbody>";
  23
  24   foreach my $loc (@{$locations->{$prog}}) {
  25
  26     my $delete_link = "";
  27     if (!$loc->[2] && $user_id) {
  28       $delete_link = "&nbsp;&nbsp;&nbsp;<a href=\"javascript:delete_location($loc->[0])\"><font style=\"color: red; font-weight: bold\">X</a>";
  29     }
  30
  31     print "<tr><td>".$loc->[1]."</td><td>(<a href=\"\">".$loc->[2]." trials</a>) $delete_link</td></tr>";
  32    }
  33
  34    print "</tbody><thead><tr style=\"height:30px\"><td colspan=\"2\"></td></tr></thead>";
  35 }
  36
  37 print "</table>";
  38
  39 </%perl>
  40
  41 <div class="modal fade" id="add_location_dialog" name="add_location_dialog" tabindex="-1" role="dialog" aria-labelledby="addLocationDialog">
  42   <div class="modal-dialog" role="document">
  43     <div class="modal-content">
  44       <div class="modal-header">
  45         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  46         <h4 class="modal-title" id="addLocationDialog">Add New Location</h4>
  47       </div>
  48       <div class="modal-body">
  49         <div class="container-fluid">
  50           <form class="form-horizontal" role="form" name="new_location_form" id="new_location_form">
  51             <div class="form-group">
  52               <label class="col-sm-2 control-label">Name: </label>
  53               <div class="col-sm-10">
  54                 <input class="form-control" name="location_description" id="location_description" type="text" />
  55               </div>
  56             </div>
  57             <div class="form-group">
  58               <label class="col-sm-2 control-label">Longitude: </label>
  59               <div class="col-sm-10">
  60                 <input class="form-control" name="longitude" id="longitude" type="text" size="4"/>
  61               </div>
  62             </div>
  63             <div class="form-group">
  64               <label class="col-sm-2 control-label">Latitude: </label>
  65               <div class="col-sm-10">
  66                 <input class="form-control" name="latitude" id="latitude" type="text" size="4"/>
  67               </div>
  68             </div>
  69             <div class="form-group">
  70               <label class="col-sm-2 control-label">Altitude: </label>
  71               <div class="col-sm-10">
  72                 <input class="form-control" name="altitude" id="altitude" type="text" size="4"/>
  73               </div>
  74             </div>
  75           </form>
  76         </div>
  77       </div>
  78       <div class="modal-footer">
  79         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  80         <button type="button" class="btn btn-primary" name="new_location_submit" id="new_location_submit">Add Location</button>
  81       </div>
  82     </div>
  83   </div>
  84 </div>
  85
  86 <!--
  87 <div id="add_location_dialog"  class="ui-widget" >
  88
  89 Name <input id="location_description" size="20" /><br /><br />
  90 Longitude <input id="longitude" name="longitude" size="4" />
  91 &nbsp;&nbsp;Latitude <input id="latitude" name="latitude" size="4" />
  92 &nbsp;&nbsp;Altitude [m]<input id="altitude" name="altitude" size="4" />
  93
  94 </div>
  95 -->
  96
  97 <script defer="defer">
  98
  99 jQuery(document).ready(function() {
 100
 101   //jQuery('#add_location_dialog').dialog( {
 102   //   autoOpen: false,
 103   //   buttons:  { "Cancel" : { text: "Cancel",
 104   //                            id: "cancel_new_location_button",
 105   //                            click: function() { jQuery('#add_location_dialog').dialog("close"); }
 106   //                          },
 107   //                   "Add": { text: "Add",
 108   //                            id: "add_new_location_button",
 109   //                            click: function() { save_location_info(); }
 110   //                           }
 111   //             },
 112   //   modal: true,
 113   //   width: 500,
 114   //   height: 200,
 115   //   title: "Add new location"
 116   //
 117  // });
 118
 119   $('#add_location_link').click( function() {
 120       $('#add_location_dialog').modal("show");
 121    });
 122
 123   $('button#new_location_submit').click( function(event) {
 124       event.preventDefault();
 125       var desc = $('#location_description').val();
 126       var longitude = $('#longitude').val();
 127       var latitude = $('#latitude').val();
 128       var altitude = $('#altitude').val();
 129
 130       if (desc == '') { alert('Description is required.');  return; }
 131
 132       $.ajax({
 133         type: 'POST',
 134         url: '/ajax/breeders/location/insert',
 135         data: { 'description': desc,  'longitude':longitude, 'latitude':latitude, 'altitude': altitude },
 136         success: function(response) {
 137                  if (response.error) { alert(response.error); }
 138                  else {
 139                      alert('The new location was saved.');
 140                      $('#add_location_dialog').modal("hide");
 141                      location.reload();
 142                  }
 143                 },
 144         error: function() { alert('An error occurred. Please try again later.'); }
 145       });
 146   });
 147
 148
 149   //function save_location_info() {
 150   //   var desc = jQuery('#location_description').val();
 151   //   var longitude = jQuery('#longitude').val();
 152   //   var latitude = jQuery('#latitude').val();
 153   //   var altitude = jQuery('#altitude').val();
 154   //
 155   //   if (desc == '') { alert('Description is required.');  return; }
 156   //
 157   //   new jQuery.ajax( {
 158   //     type: 'POST',
 159   //     url: '/ajax/breeders/location/insert',
 160   //     data: { 'description': desc,  'longitude':longitude, 'latitude':latitude, 'altitude': altitude },
 161   //     success: function(response) {
 162   //                if (response.error) { alert(response.error); }
 163   //                else {
 164   //                   alert('The new location was saved.');
 165   //                   jQuery('#add_location_dialog').dialog("close");
 166  //                    location.reload();
 167   //                }
 168   //              },
 169    //    error: function() { alert('An error occurred. Please try again later.'); }
 170   //   });
 171  // }
 172
 173 });
 174
 175
 176   function delete_location(location_id) {
 177
 178     var yes = confirm('Are you sure you want to delete location with id '+location_id+'? ');
 179
 180     if (! yes) { return; }
 181
 182     new jQuery.ajax( {
 183       type: 'POST',
 184       url: '/ajax/breeders/location/delete/'+location_id,
 185       success: function(response) {
 186                   if (response.error) { alert(response.error); }
 187                   else {
 188                     alert("The location was deleted.");
 189                     location.reload();
 190                   }
 191                },
 192       error: function(response) {
 193                  alert("An error occurred");
 194              }
 195       });
 196    }
 197
 198
 199 </script>
 200
 201