add.pt 4.8 KB
<html metal:use-macro="load: ../base.pt">
<!-- <div metal:fill-slot="content"> -->
<div metal:fill-slot="scripts">
<div class="panel panel-default">
  <div class="panel-heading">
      <h3 class="panel-title">${request.title}</h3>
  </div>
  <div class="panel-body">
    <form id="deform" method="POST" enctype="multipart/form-data" accept-charset="utf-8" 
      class="form-horizontal">
        <div class="alert alert-danger" tal:condition="form and form.error and True or False">
          <div class="error-msg-lbl">Kesalahan Pengisian Form</div>
          <p class="error-msg">${form.errormsg}</p>
        </div>
        <div class="form-group" tal:repeat="f form" id="group-${f.oid}">
          <div id="item-${f.oid}" style="${f.widget.hidden and 'display:none;' or 'display:block;'}">
              <label for="${f.oid}" class="control-label col-md-2 ${f.required and 'required' or ''} " id="req-${f.oid}">
                      ${f.title}</label>
             
              <div class="col-md-3">
                  ${structure:f.serialize()}
                  <p id="error-${f.oid}" class="help-block" tal:condition="f.error"
                     tal:repeat="error f.error.messages()">
                     ${error}</p>
              </div>
          </div>
        </div>
        <div class="col-md-4"> 
          <label class="control-label col-md-3"></label>
          <button type="submit" class="btn btn-primary" id="simpan" name="simpan">Simpan</button>
          <button type="submit" class="btn btn-warning" id="batal"  name="batal">Tutup</button>
        </div>
    </form>
  </div>
</div>
<style>
  .red-border {   
      border-color: rgba(255, 0, 0, 0.2);
      box-shadow: 0 1px 1px rgba(255, 0, 0, 0.2); inset, 0 0 8px rgba(255, 0, 0, 0.2);
      outline: 0 none;
  }
</style>
<!-- </div> -->

<script>
$(document).ready(function(){
  show_type();

  function show_type(){
    type_id = $('#source_type').val();
    if (type_id == 'grid'){
      //$('#grid_nm').prop('readonly', false);
      //$('#grid_nm').prop('enabled', true);
      $('#grid_nm').typeahead({"minLength": 1, 
          "remote": "/eis/carousel/hon/act?term=%QUERY", 
          "limit": 8});
      $('#group-grid_nm').css("display","block");
      }
    else{
      $('#grid_nm').typeahead('destroy');
      //$('#grid_nm').prop('readonly', true);
      //$('#grid_nm').prop('enabled', false);
      $('#grid_nm').val("");
      $('#group-grid_nm').css("display","none");
      }
      
    if (type_id == 'chart-pie'){
      $('#pie_nm').typeahead('destroy');
      //$('#pie_nm').prop('readonly', false);
      //$('#pie_nm').prop('enabled', true);
      $('#pie_nm').typeahead({"minLength": 1, 
          "remote": "/eis/chart/hon/act?term=%QUERY&chart_type=pie", 
          "limit": 8});
      $('#group-pie_nm').css("display","block");
      }
    else{
      $('#pie_nm').typeahead('destroy');
      //$('#pie_nm').prop('readonly', true);
      //$('#pie_nm').prop('enabled', false);
      $('#pie_nm').val("");
      $('#group-pie_nm').css("display","none");
      }
    if (type_id == 'chart-bar'){
      //$('#bar_nm').prop('readonly', false);
      //$('#bar_nm').prop('enabled', true);
      $('#bar_nm').typeahead({"minLength": 1, 
          "remote": "/eis/chart/hon/act?term=%QUERY&chart_type=bar", 
          "limit": 8});
      $('#group-bar_nm').css("display","block");
      }
    else{
      $('#bar_nm').typeahead('destroy');
      //$('#bar_nm').prop('readonly', true);
      //$('#bar_nm').prop('enabled', false);
      $('#bar_nm').val("");
      $('#group-bar_nm').css("display","none");
      }
      
    if (type_id == 'chart-line'){
      //$('#line_nm').prop('readonly', false);
      //$('#line_nm').prop('enabled', true);
      $('#line_nm').typeahead({"minLength": 1, 
          "remote": "/eis/chart/hon/act?term=%QUERY&chart_type=line", 
          "limit": 8});
      $('#group-line_nm').css("display","block");
      }
    else{
      $('#line_nm').typeahead('destroy');
      //$('#line_nm').prop('readonly', true);
      //$('#line_nm').prop('enabled', false);
      $('#line_nm').val("");
      $('#group-line_nm').css("display","none");
      }
    if (type_id == 'image'){
      $('#source_id').prop('readonly', false);
      $('#source_id').prop('enabled', true);
      $('#group-upload').css("display","block");
      }
    else{
      $('#source_id').prop('readonly', true);
      $('#source_id').prop('enabled', false);
      $('#group-upload').css("display","none");
      }
    }
  $('#source_type').change( function(){
    $('#source_id').val("");
    show_type();
    });
  
  $('#grid_nm, #line_nm, #bar_nm, #pie_nm').on(
    'typeahead:selected', 
    function(obj, datum, name) {   
      $('#source_id').val(datum.id);
      }
    );
    $('#upload').change( function(){
        $('#source_id').val($('#upload').val());
        });    
});
  
</script>

</div>
</html>