mason/stock/add_vector.mas

   1
   2 <%args>
   3 $stockref => undef
   4 $preferred_species => ""
   5 $editable_vector_props => {}
   6 $editable_stock_props_definitions => {}
   7
   8 </%args>
   9
  10 % my $stock_id = $stockref->{stock_id};
  11
  12 <& /util/import_javascript.mas, classes => [ 'bootstrap_min.js', 'jquery.iframe-post-form','CXGN.List','CXGN.BreedersToolbox.Vector'] &>
  13
  14 <& /page/page_title.mas, title=> 'Create a New Vector' &>
  15
  16
  17 <&| /page/info_section.mas, title=>"Vector details"  &>
  18
  19 <& /breeders_toolbox/add_vectors_dialogs.mas, preferred_species=>$preferred_species, editable_vector_props=>$editable_vector_props, editable_stock_props_definitions=>$editable_stock_props_definitions &>
  20
  21 <div class="infosectioncontent">
  22
  23 <p>Add new vector and details.</p>
  24 <div style="margin-bottom:10px"><button style="float:right" class="btn btn-default" name="add_vectors_link"> Upload Vectors</button></div>
  25 <div class="row">
  26   <div class="col-sm-12">
  27
  28
  29 <div class="container-fluid">
  30   <div class="well">
  31
  32   <form class="form-horizontal" id="newVectorForm" action="#" onsubmit="handleSubmit();return false">
  33
  34     <div class="form-group">
  35       <label class="col-sm-3 control-label">Uniquename <font color="red">*</font>
  36       </label>
  37       <div class="col-sm-6">
  38         <input type="text" class="form-control" value="" name="uniqueName" id="uniqueName" required>
  39       </div>
  40       <input class="col-sm-1" type="checkbox" id="uniqueNameAutoCheck" name="uniqueNameAutoCheck" value="uniqueNameAutoCheck" onclick="jqueryAutoUniqueName()">
  41       <label class="col-sm-2" for="uniqueNameAutoCheck"> Auto generate uniquename</label><br>
  42     </div>
  43     <div class="form-group">
  44       <label class="col-sm-3 control-label">Organism <font color="red">*</font>
  45       </label>
  46       <div class="col-sm-9">
  47         <input class="form-control ui-autocomplete-input" type="text" id="species_name" name="species_name" value="" size="" onclick="jqueryStuff()" autocomplete="off" required>
  48       </div>
  49     </div>
  50     <div class="form-group">
  51       <label class="col-sm-3 control-label">Cloning Organism Host</label>
  52       <div class="col-sm-9">
  53         <input type="text" class="form-control" value="" id="CloningOrganism" name="CloningOrganism">
  54       </div>
  55     </div>
  56
  57     <div class="form-group">
  58       <label class="col-sm-3 control-label">Strain </label>
  59       <div class="col-sm-9">
  60         <input type="text" class="form-control" value="" id="Strain" name="Strain">
  61       </div>
  62     </div>
  63     <div class="form-group">
  64       <label class="col-sm-3 control-label">Backbone </label>
  65       <div class="col-sm-9">
  66         <input type="text" class="form-control" value="" id="Backbone" name="Backbone">
  67       </div>
  68     </div>
  69     <div class="form-group">
  70       <label class="col-sm-3 control-label">Inherent Marker </label>
  71       <div class="col-sm-9">
  72         <input type="text" class="form-control" value="" id="InherentMarker" name="InherentMarker">
  73       </div>
  74     </div>
  75     <div class="form-group">
  76       <label class="col-sm-3 control-label">Selection Marker </label>
  77       <div class="col-sm-9">
  78         <input type="text" class="form-control" value="" id="SelectionMarker" name="SelectionMarker">
  79       </div>
  80     </div>
  81     <div class="form-group">
  82       <label class="col-sm-3 control-label">Host Antibiotic Resistant Marker </label>
  83       <div class="col-sm-9">
  84         <input type="text" class="form-control" value="" id="PlantAntibioticResistantMarker" name="PlantAntibioticResistantMarker">
  85       </div>
  86     </div>
  87     <div class="form-group">
  88       <label class="col-sm-3 control-label">Bacterial Resistant Marker </label>
  89       <div class="col-sm-9">
  90         <input type="text" class="form-control" value="" id="BacterialResistantMarker" name="BacterialResistantMarker">
  91       </div>
  92     </div>
  93     <div class="form-group">
  94       <label class="col-sm-3 control-label">Cassette Name </label>
  95       <div class="col-sm-9">
  96         <input type="text" class="form-control" value="" id="CassetteName" name="CassetteName">
  97       </div>
  98     </div>
  99     <div class="form-group">
 100       <label class="col-sm-3 control-label">Gene </label>
 101       <div class="col-sm-9">
 102         <input type="text" class="form-control" value="" id="Gene" name="Gene">
 103       </div>
 104     </div>
 105     <div class="form-group">
 106       <label class="col-sm-3 control-label">Promotors </label>
 107       <div class="col-sm-9">
 108         <input type="text" class="form-control" value="" id="Promotors" name="Promotors">
 109       </div>
 110     </div>
 111     <div class="form-group">
 112       <label class="col-sm-3 control-label">Terminators </label>
 113       <div class="col-sm-9">
 114         <input type="text" class="form-control" value="" id="Terminators" name="Terminators">
 115       </div>
 116     </div>
 117
 118
 119   <div class="form-group">
 120     <label class="col-sm-3 control-label"></label>
 121     <div class="col-sm-9">
 122       <h5 valign="middle" style="color:red; font-size:90%; font-style:italic;">Fields Marked With * Are Required.</h5>
 123     </div>
 124   </div>
 125   <hr>
 126   <button style="float:right" class="btn btn-primary btn-lg" id="contact_form_submit">Add new vector</button>
 127   <input type="reset" value="Reset" class="btn btn-primary btn-lg" style="float:right;background-color: white; color:black" />
 128   <br><br>
 129
 130 </form>
 131 </div>
 132
 133 <br>
 134
 135 </div>
 136
 137 <script language="javascript" type="text/javascript">
 138
 139 function handleSubmit() {
 140
 141   const form = document.getElementById('newVectorForm');
 142     const dataForm = new FormData(form);
 143
 144     const value = Object.fromEntries(dataForm.entries());
 145
 146     const data = {};
 147     dataForm.forEach((value, key) => (data[key] = value));
 148     console.log(data);
 149     jQuery.ajax({
 150         type: 'POST',
 151         data: {'data': JSON.stringify([data])},
 152         url: '/ajax/create_vector_construct',
 153         success: function(response) {
 154           if (response.error) { alert(response.error); }
 155           else { alert('Saved!'); }
 156         },
 157         error: function(response) {
 158           alert( 'An Error occured while storing vectors.');
 159         }
 160     });
 161 }
 162
 163 </script>
 164
 165 </&>
 166
 167 <script language="javascript">
 168     function jqueryStuff() {
 169         jQuery(function() {
 170             jQuery("#species_name").autocomplete({
 171                 source: '/organism/autocomplete'
 172             });
 173         });
 174     }
 175     function jqueryAutoUniqueName() {
 176         jQuery('#uniqueNameAutoCheck').on('change', function () {
 177             var checked = jQuery(this).prop('checked');
 178             jQuery('#uniqueName').prop('readonly', checked);
 179             if(checked){
 180                 jQuery.get('/ajax/get_new_vector_uniquename',
 181                     function (value) {
 182                         jQuery("#uniqueName").val(value);
 183                 });
 184             } else {
 185                 jQuery("#uniqueName").val("");
 186             }
 187         });
 188     }
 189 </script>