arrow-admin
Version:
Arrow Admin Website
670 lines (592 loc) • 24.7 kB
HTML
<h1 class="build-h1">New Model</h1>
<div class="build-container">
<!-- MODEL WIZARD FORMS -->
<div class="wizard" data-initialize="wizard" id="myWizard">
<!-- WIZARD STEP NAV -->
<ul class="steps" style="margin-left: 0">
<li data-step="1" class="active">
<span class="badge badge-info">1</span>Model Type<span class="chevron"></span>
</li>
<li data-step="2">
<span class="badge">2</span>Model Fields<span class="chevron"></span>
</li>
<li data-step="3">
<span class="badge">3</span>Optional Properties<span class="chevron"></span>
</li>
<li data-step="4">
<span class="badge">4</span>Review & Test<span class="chevron"></span>
</li>
<!-- BUTTONS -->
<div class="actions pull-right">
<button type="button" class="btn btn-default btn-prev" id="prev_btn">
<span class="glyphicon glyphicon-arrow-left"></span>
Prev
</button>
<button type="button" class="btn btn-default btn-next disabled" id="next_btn">
Next
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
<button class="btn btn-success save_model_btn hide" style="margin-left:10px">Save Model</button>
</div>
</ul>
<!-- WIZARD CONTENT -->
<div class="step-content">
<!-- STEP 1 CONTENT -->
<div class="step-pane sample-pane active" data-step="1">
<form role="form">
<!-- MODEL NAME -->
<div class="form-group">
<label>Model Name</label>
<input type="text" aria-describedby="model_name_help" class="form-control" id="model_name"
placeholder="Enter model name" style="width:350px">
<span id="model_name_help" class="help-block"
default="The name of your model. This name must be unique across all of your models, start with a letter, and use only alphanumeric or -.">The
name of your model. This name must be unique across all of your models.
</span>
</div>
<!-- MODEL TYPE -->
<div class="form-group">
<label>Model Type</label>
<span class="fieldtip glyphicon glyphicon-question-sign" aria-hidden="true"
data-toggle="tooltip" data-placement="right"
title="A new model can be based on a single existing model (extend or reduce), or it can be used to represent a model in a schema-less data source like ArrowDB or MongoDB, or it can be based on multiple existing models (composite). Composite models can have no fields in common or can be joined together via a common field.">
</span>
<div class="input-group input-append dropdown combobox" placeholder="Select model type"
data-initialize="combobox" id="model_type">
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown"
style="width:350px">
<div class="input-group-btn " style="width:200px">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="3"><a href="#">Empty or Schema-less model</a></li>
<li data-value="1"><a href="#">Extend an existing model</a></li>
<li data-value="2"><a href="#">Reduce an existing model</a></li>
<li data-value="4"><a href="#">Composite model (no join)</a></li>
<li data-value="5"><a href="#">Composite model (join)</a></li>
</ul>
</div>
</div>
</div>
<!-- MODEL CONNECTOR -->
<div class="form-group" id="model_connector_container" style="display:none">
<label>Connector</label>
<span class="fieldtip glyphicon glyphicon-question-sign" aria-hidden="true"
data-toggle="tooltip" data-placement="right"
title="Schema-less models require you to choose a connector. Connectors work directly with a data source to create, read, update and delete data.">
</span>
<div class="input-group input-append dropdown combobox" placeholder="Select connector"
id="model_connector">
<input type="text" class="form-control" style="width:350px">
<div class="input-group-btn" style="width:200px">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" id="model_connector_dd">
</ul>
</div>
</div>
</div>
<!-- MODEL SOURCE -->
<div class="form-group" id="model_source_field_container" style="display:none">
<label>Source Model</label>
<span class="fieldtip glyphicon glyphicon-question-sign" aria-hidden="true"
data-toggle="tooltip" data-placement="right"
title="Models that extend or reduce an existing model must specify the model that they are extending or reducing. Extending a model gives you all of the source model's fields while reducing a model allows you to choose which fields to include in the new model.">
</span>
<div id="model_source_container">
<input class="typeahead form-control" id="model_source"
type="text" placeholder="Type name to search" style="width:350px">
</div>
</div>
</form>
</div>
<!-- STEP 2 CONTENT -->
<div class="step-pane sample-pane" data-step="2">
<!-- FIELD LIST AND DETAIL -->
<div class="row" id="add_inherited_fields_containter">
<!-- EDIT INHERITED FIELDS - FOR REDUCED ONLY -->
<div class="col-md-12">
<h4>Select Fields to Inherit</h4>
<div class="section-border"></div>
<button class="btn btn-default" id="select_inherited_fields_btn">View Fields</button>
</div>
</div>
<!-- ADD NEW FIELDS -->
<div class="row" style="margin-top:10px">
<!-- ADD NEW FIELDS HEADER -->
<div class="col-md-12">
<h4>Add New Field</h4>
<div class="section-border"></div>
</div>
</div>
<div class="row">
<!-- ADD FIELD SECTION FOR COMPOSITE MODELS -->
<div class="col-md-12" id="composite_select_rb_group" style="display:none">
<div class="form-group">
<label class="radio-custom radio-inline" data-initialize="radio" id="composite_rb_1">
<input class="sr-only" checked="checked" name="composite_rb_group" type="radio"
value="option1">
Select single field from existing model
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="composite_rb_2">
<input class="sr-only" name="composite_rb_group" type="radio" value="option2">
Map new field to entire model
</label>
<label class="radio-custom radio-inline" data-initialize="radio" id="composite_rb_3">
<input class="sr-only" name="composite_rb_group" type="radio" value="option2">
Create new field
</label>
</div>
</div>
</div>
<form>
<div class="row">
<!-- MODEL SOURCE FOR COMPOSITE CASES -->
<div class="col-md-3" id="field_model_source_field_container" style="display:none">
<div class="form-group">
<label>Field Source Model</label>
<div id="field_model_source_container">
<input class="typeahead form-control" id="field_model_source" type="text"
placeholder="Type name to search" style="width:250px">
</div>
</div>
</div>
<!-- MODEL FIELD SELECTOR -->
<div class="col-md-3" id="model_field_select_container" style="display:none">
<div class="form-group">
<label>Model Field:</label>
<div id="model_field_container">
<input class="typeahead form-control" id="model_field" type="text"
placeholder="Type name to search" style="width:250px">
</div>
</div>
</div>
<!-- FIELD NAME -->
<div class="col-md-3" id="field_name_container" style="display:none">
<div class="form-group">
<label>Field Name:</label>
<input type="text" class="form-control" id="field_name" placeholder="Enter field name"
style="width:250px"/>
</div>
</div>
<!-- DATA TYPE -->
<div class="col-md-3" id="data_type_container" style="display:none">
<div class="form-group">
<label>Data Type</label>
<div class="input-group input-append dropdown combobox" placeholder="Select data type"
data-initialize="combobox" id="data_type">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1" data-selected="true"><a href="#">String</a></li>
<li data-value="2"><a href="#">Number</a></li>
<li data-value="3"><a href="#">Boolean</a></li>
<li data-value="4"><a href="#">Object</a></li>
<li data-value="5"><a href="#">Array</a></li>
<li data-value="6"><a href="#">Date</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- ADD FIELD BUTTON -->
<div class="col-md-3 ">
<div class="form-group">
<!-- dummy label to get proper align in all screen sizes -->
<label style="color:#fff">f</label>
<div>
<input type="submit" value="Add Field" id="add_field_btn" class="btn btn-success disabled" />
</div>
</div>
</div>
</div>
</form>
<!-- MODEL FIELDS -->
<div class="row" style="margin-top:10px">
<!-- FIELD LIST FOR MODEL -->
<div class="col-md-12">
<h4>Model Fields
<span class="fieldtip glyphicon glyphicon-question-sign" aria-hidden="true"
data-toggle="tooltip" data-placement="right"
title="Click on a field below to edit its details. Note: extended fields and composite fields (fields based on an existing field or model) cannot be edited.">
</span>
</h4>
<div class="section-border"></div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<ul class="list-group" id="field_list" style="margin-top:5px">
<li class="list-group-item help-block">Model has no fields</li>
</ul>
<div id="composite_join_info_message" style="display:none">
<div class="alert alert-info" role="alert" style="margin-bottom:0px">
<b>Note:</b> Composite models with a join require at least two unique models in their
field list.
</div>
</div>
</div>
<!-- FIELD DETAIL -->
<div class="col-md-6" id="field_detail">
<div id="edit_field_detail_form" class="detail_form" style="display:none;margin-bottom:20px">
<form role="form">
<!-- FIELD DESCRIPTION -->
<div class="form-group">
<label>Field Description</label>
<input type="text" class="form-control" id="field_description"
placeholder="Enter field description (optional)">
</div>
<!-- FIELD DEFAULT VALUE -->
<div class="form-group">
<label>Field Default Value</label>
<input type="text" class="form-control" id="field_default_value"
placeholder="Enter default value (optional)">
</div>
<!-- CUSTOM FIELD CHECKBOX -->
<div class="checkbox" id="field_custom">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Custom Field </strong></span>
<span class="help-block" style="display:inline"><i>
<small>
field is derived and does not exist in data source
</i></small>
</span>
</label>
</div>
<!-- FIELD REQUIRED CHECKBOX -->
<div class="checkbox" id="field_required">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Field value is required</strong></span>
</label>
</div>
<!-- FIELD READONLY -->
<div class="checkbox" id="field_readonly">
<label class="checkbox-custom" data-initialize="checkbox">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Field value is readonly</strong></span>
</label>
</div>
<!-- CUSTOM FUNCTIONS -->
<div class="form-group" style="margin-top:20px">
<label>Add Field Functions</label>
<div>
<button id="validator_btn" class="btn btn-default validator-btns">
Custom Validation
</button>
<button id="set_btn" class="btn btn-default validator-btns">
Custom Request Value
</button>
<button id="get_btn" class="btn btn-default validator-btns">
Custom Response Value
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- STEP 3 CONTENT -->
<div class="step-pane sample-pane " data-step="3">
<!-- SINGULAR VALUE -->
<div class="form-group">
<label>Single Row Response Key (optional)</label>
<input type="text" class="form-control" id="singular_value" placeholder="Enter response key"
style="width:350px">
</div>
<!-- PLURAL VALUE -->
<div class="form-group">
<label>Multi-Row Response Key (optional)</label>
<input type="text" class="form-control" id="plural_value" placeholder="Enter response key"
style="width:350px">
</div>
<!-- API ACTIONS (CREATE, READ, UPDATE, DELETE) -->
<div>
<label>Generate API endpoints for these methods:</label>
</div>
<div class="checkbox detail_form" style="width:415px">
<label class="checkbox-custom" data-initialize="checkbox" id="action_create_chbx">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Create</strong></span>
</label>
<label class="checkbox-custom" data-initialize="checkbox" style="margin-left:10px"
id="action_read_chbx">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Read</strong></span>
</label>
<label class="checkbox-custom" data-initialize="checkbox" style="margin-left:10px"
id="action_update_chbx">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Update</strong></span>
</label>
<label class="checkbox-custom" data-initialize="checkbox" style="margin-left:10px"
id="action_delete_chbx">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Delete</strong></span>
</label>
<label class="checkbox-custom" data-initialize="checkbox" style="margin-left:10px"
id="action_deleteall_chbx">
<input class="sr-only" type="checkbox" value="">
<span style="color:#000"><strong>Delete All</strong></span>
</label>
</div>
</div>
<!-- STEP 4 CONTENT -->
<div class="step-pane sample-pane" data-step="4">
<h4>Here is the code that will be generated for your new model</h4>
<div id="review_editor" style="height:500px">
</div>
<div style="float:right;margin-top:10px;margin-bottom:10px">
<!-- <button class="btn btn-default" id="test_model_btn">Test Model</button> -->
<button class="btn btn-success" style="margin-left:10px">Save Model</button>
</div>
</div>
</div>
</div>
<!-- DYNAMIC STEP FOR JOINS -->
<div id="join_step" style="display:none">
<!-- MASTER MODEL TITLE -->
<div class="row">
<div class="col-md-12">
<h4>Define Parent Model</h4>
<div class="section-border"></div>
</div>
</div>
<div class="row">
<!-- MASTER MODEL -->
<div class="col-md-3">
<div class="form-group">
<label>Parent Model</label>
<span class="fieldtip glyphicon glyphicon-question-sign" aria-hidden="true"
data-toggle="tooltip" data-placement="right"
title="The parent model represents the main model of the join. It's similar to a master table in a master-detail relationship.">
</span>
<div id="master_join_model_container">
<input class="typeahead form-control" id="master_join_model"
type="text" placeholder="Type name to search" style="width:250px;background-color:#fff">
</div>
</div>
</div>
<!-- MASTER MODEL JOIN PROPERTY -->
<div class="col-md-3">
<div class="form-group">
<label>Join Field</label>
<span class="fieldtip glyphicon glyphicon-question-sign" aria-hidden="true"
data-toggle="tooltip" data-placement="right"
title="This is the field that will be joined with other models to create a common data set.">
</span>
<div id="master_join_property_container">
<input class="typeahead form-control" id="master_join_property"
type="text" placeholder="Type name to search" style="width:250px">
</div>
</div>
</div>
<!-- JOIN TYPE -->
<div class="col-md-3">
<label>Join Type</label>
<div class="input-group input-append dropdown combobox" placeholder="Select join type"
data-initialize="combobox" id="join_type">
<input type="text" class="form-control dropdown-toggle" data-toggle="dropdown" style="width:200px">
<div class="input-group-btn" style="width:200px">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li data-value="1" data-selected="true"><a href="#">Inner Join (all rows)</a></li>
<li data-value="2"><a href="#">Outer Join (matching rows only)</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- JOIN MODELS -->
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<h4>Add Child Models</h4>
<div class="section-border"></div>
</div>
</div>
<div class="row">
<div id="child_join_section">
<!-- MASTER MODEL -->
<div class="col-md-3">
<div class="form-group">
<label>Child Model</label>
<div id="child_join_model_container">
<input class="typeahead form-control" id="child_join_model"
type="text" placeholder="Type name to search" style="width:250px">
</div>
</div>
</div>
<!-- MASTER MODEL JOIN PROPERTY -->
<div class="col-md-3">
<div class="form-group">
<label>Join Property</label>
<div id="child_join_property_container">
<input class="typeahead form-control" id="child_join_property"
type="text" placeholder="Type name to search" style="width:250px">
</div>
</div>
</div>
<!-- ADD JOIN BUTTON -->
<div class="col-md-3 ">
<div class="form-group">
<!-- dummy label to get proper align in all screen sizes -->
<label style="color:#fff">f</label>
<div>
<button class="btn btn-success disabled" id="add_join_btn">Add Join</button>
</div>
</div>
</div>
</div>
<div id="child_no_more_join_section" style="display:none">
<div class="form-group">
<div class="alert alert-info" role="alert" style="margin-left:15px;margin-right:15px">
All join tables have been used. To edit or add a new join, remove one below.
</div>
</div>
</div>
</div>
<!-- MASTER MODEL TITLE -->
<div class="row" style="margin-top:10px">
<div class="col-md-12">
<h4>Joins</h4>
<div class="section-border"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="list-group" id="join_list" style="margin-top:5px">
<li class="list-group-item help-block">Model has no joins</li>
</ul>
</div>
</div>
</div>
<!-- MODALS -->
<!-- ERROR MODAL -->
<div class="modal fade" id="error_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="background-color:#d2382f;color:#fff;font-weight:bold">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="error_modal_title"></h4>
</div>
<div class="modal-body" id="error_modal_body" style="font-size:18px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- INHERITED FIELDS MODAL -->
<div class="modal fade" id="inherited_fields_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title" id="inherited_fields_modal_label">View Inherited Fields</h4>
</div>
<div class="modal-body" id="inherited_fields_modal_body" style="height:400px;overflow:scroll">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="add_inherited_fields_btn" data-dismiss="modal">Add
Fields
</button>
</div>
</div>
</div>
</div>
<!-- VALIDATOR MODAL -->
<div class="modal fade" id="validator_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Validator Function</h4>
</div>
<div class="modal-body" id="validator_editor" style="height:500px">function validate(value) {
// logic here
// return null or undefined if successful
// return an string (error message) if fails
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" style="margin-right:10px" data-dismiss="modal">Save
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- SET MODAL -->
<div class="modal fade" id="set_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Custom Response Value Function</h4>
</div>
<div class="modal-body" id="set_editor" style="height:500px">function set(value,key,model) {
// val is current value
// key is the property key
// model is the model instance
return value;
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" style="margin-right:10px" data-dismiss="modal">Save
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- GET MODAL -->
<div class="modal fade" id="get_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">Custom Request Value Function</h4>
</div>
<div class="modal-body" id="get_editor" style="height:500px">function get(value,key,model) {
// val is current value
// key is the property key
// model is the model instance
return value;
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" style="margin-right:10px" data-dismiss="modal">Save
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="save_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Saving Changes</h4>
</div>
<div class="modal-body" style="height:100px">
<i class="icon-spin5 animate-spin"></i>
Saving your model and restarting the server...
</div>
</div>
</div>
</div>
</div>