demo/app/views/sample-edit.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="../assets/css/lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../assets/css/app.min.css">
</head>

<body class="view view_edit">
<h1 id="view-title" class="page-header">Items</h1>
<h2 id="section-title" class="sub-header"></h2>


<div id="section-actions-top" class="section-actions section-actions-top">
  <div>
    <a class="btn btn-sm btn-gray-lighter" href="../index.html?sample" target="_parent">&laquo; Return Back</a>
  </div>
</div>

<form id="form-data" class="form form-data" autocomplete="off" validate>
<fieldset>
<legend>Entry</legend>

<div class="row">
<div class="form-group col-6 col-lg-4">
  <label for="sample_title">Model</label>
  <select id="sample_title" name="title" class="form-control" required></select>
</div>

<div class="clearfix visible-lg-block"></div>

<div class="form-group col-5 col-lg-3">
  <label for="sample_type">Type</label>
  <select id="sample_type" name="type" class="form-control">
    <option value="Microcar">Microcar</option>
    <option value="Berline">Berline</option>
    <option value="Station wagon">Station wagon</option>
    <option value="Coupé">Coupé</option>
    <option value="Sports car">Sports car</option>
    <option value="MPV">MPV</option>
    <option value="SUV">SUV</option>
    <option value="Van">Van</option>
    <option value="Pickup">Pickup</option>
    <option value="Truck">Truck</option>
    <option value="other">other</option>
  </select>
</div>

<div class="clearfix visible-lg-block"></div>

<div class="form-group col-12 col-lg-3">
  <label for="sample_date">Manufactured</label>
  <input type="date" id="sample_date" name="date" class="form-control" value="" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" data-sanitize="date" required>
</div>
</div>
</fieldset>


<fieldset>
<legend>Details</legend>

<div class="row">
<div class="form-group col-12 col-lg-2">
  <label for="sample_amount">Value Price</label>
  <div class="input-group">
    <input type="text" id="sample_amount" name="amount" class="form-control" value="0.00" data-transform="numeric" required>
    <div class="input-group-addon">
      <span class="input-group-text">coin</span>
    </div>
  </div>
</div>
</div>
</fieldset>


<fieldset class="form-submit">
  <input type="hidden" id="index" name="id" value="{id}" data-transform="integer">
  <input type="submit" id="real-submit" class="hide" hidden>
  <button type="button" id="submit" class="btn btn-primary btn-lg" onclick="control.action(this, '{action_event}')">{action_label}</button>
</fieldset>
</form>


<script type="text/javascript" src="../assets/js/app.min.js"></script>

<script type="text/javascript" src="../config.js"></script>
<script type="text/javascript" src="../locale.min.js"></script>


<script type="text/javascript">
var control = appe__control = {};


control.handle = function(data) {
  var data_sample = data['sample'];

  var form = document.getElementById('form-data');

  if (! data_sample) {
    return app.error('control.handle', 'data*');
  }


  var _control = app.view.control([ 'add', 'edit' ], data_sample, form);

  _control.begin();

  
  var event = _control.getEvent();
  var id = _control.getID();


  var _events = {};


  _events.add = function() {
    _control.setTitle('Add New Vehicle');

    _control.setActionHandler('Add Vehicle');
  }


  _events.edit = function() {
    _control.setTitle('Edit Vehicle');

    _control.setActionHandler('Update Vehicle');


    control.fillForm(data_sample[id]);
  }


  var model_selection = [
    {'FAN': [ 'Fan Saké 1.2 hybrid' ]},
    {'SOUPE': [ 'Soupe Chapelure 1.9 gasoline', 'Soupe Bouillie 1.9 gasoline', 'Soupe Crème 1.2 gasoline' ]},
    {'PFEIL': [ 'Pfeil Bach 1.6 hybrid', 'Pfeil Beethoven VAN 1.6 diesel' ]},
    {'GALA': [ 'Gala Rook 1.0 electric', 'Gala Rook 2.0 gasoline' ]},
    {'OTTO': [ 'Otto Gogh VAN 2.0 diesel' ]},
  ];
  var model_selected = (event === 'edit' ? data_sample[id].title : '');

  var select_model = document.getElementById('sample_title');
  select_model.innerHTML = app.layout.renderSelectOptions('sample_title', model_selection, model_selected);
  select_model.value = model_selected;


  _events[event]();


  _control.end();
}


control.fillForm = function(data_field) {
  if (! data_field) {
    return app.error('control.fillForm', arguments);
  }

  document.querySelector('#sample_type > option[value="' + data_field.type + '"]').setAttribute('selected', '');
  document.getElementById('sample_date').setAttribute('value', data_field.date);
  document.getElementById('sample_amount').setAttribute('value', data_field.amount);
}


control.action = function(element, event, extra) {
  var form = document.getElementById('form-data');

  if (! element || typeof event !== 'string') {
    return app.error('control.action', arguments);
  }


  var _action = app.view.action([ 'add', 'edit' ], event, element, form);

  _action.begin();


  if (_action.validateForm()) {
    return;
  }


  var id = _action.getID();


  var _data_updated = {};


  var _events = {};


  _events._prepare = function() {
    var _ext_data = app.utils.extendObject(true, _data_updated['sample'][id], app.view.getFormData(form.elements));

    _data_updated['sample'][id] = _ext_data;
  }


  _events.add = function() {
    var data_sample = app.data('sample');

    if (! data_sample) {
      return app.error('control.action().add', 'data*');
    }

    _data_updated['sample'] = data_sample;

    _events._prepare();

    return _action.add(_data_updated, true);
  }


  _events.edit = function() {
    var data_sample = app.data('sample');

    if (! data_sample) {
      return app.error('control.action().edit', 'data*');
    }

    _data_updated['sample'] = data_sample;

    _events._prepare();

    return _action.edit(_data_updated, true);
  }


  var ctl = _events[event](extra);

  app.view.send(ctl);

  _action.end();
}


app.load(app.view.load);
app.beforeunload(app.view.beforeunload);
</script>
</body>
</html>