2017-12-20 17:46:52 +01:00
|
|
|
|
<div class="container">
|
2017-11-29 17:51:28 +01:00
|
|
|
|
<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
|
|
|
|
|
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
2017-12-07 14:57:20 +01:00
|
|
|
|
<div class="row">
|
2017-12-05 12:02:03 +01:00
|
|
|
|
<div class="form-group col-md-12">
|
|
|
|
|
<label>Label</label>
|
2018-01-03 10:06:13 +01:00
|
|
|
|
<input type="text" class="form-control" formControlName="label" id="label">
|
2018-01-02 17:29:27 +01:00
|
|
|
|
<!-- <div *ngIf="form.get('label').invalid && (form.get('label').dirty || form.get('label').touched)" class="alert alert-danger"> -->
|
|
|
|
|
<!-- <div *ngIf="form.get('label').errors.required" class="alert alert-danger">
|
|
|
|
|
Name is required.
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- </div> -->
|
2017-12-05 12:02:03 +01:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2017-12-07 14:57:20 +01:00
|
|
|
|
<div class="panel-group" style="margin-top:10px;">
|
|
|
|
|
<div *ngFor="let section of dataModel.sections; let i=index;" class="panel panel-default">
|
|
|
|
|
<div class="panel-heading clearfix">
|
|
|
|
|
<a *ngIf="form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
|
|
|
|
|
style="padding-top: 7.5px;">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</a>
|
|
|
|
|
<a *ngIf="!form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
|
|
|
|
|
style="padding-top: 7.5px;">{{i + 1}}. Section {{i + 1}}</a>
|
|
|
|
|
<div class="btn-group pull-right">
|
|
|
|
|
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
|
|
|
|
|
<span class="glyphicon glyphicon-erase"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="{{'s' + i}}" class="panel-collapse collapse in">
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<section-form [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"></section-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2017-11-29 17:51:28 +01:00
|
|
|
|
</div>
|
2017-12-05 12:02:03 +01:00
|
|
|
|
|
2017-12-20 17:46:52 +01:00
|
|
|
|
<div class="panel-group" style="margin-top:10px;">
|
|
|
|
|
<div *ngFor="let page of dataModel.pages; let i=index;" class="panel panel-default">
|
|
|
|
|
<div class="panel-heading clearfix">
|
|
|
|
|
<a *ngIf="form.get('pages').at(i).get('title').value" data-toggle="collapse" href="#{{'p' + i}}" class="panel-title pull-left"
|
|
|
|
|
style="padding-top: 7.5px;">{{i + 1}}.{{form.get('pages').at(i).get('title').value}}</a>
|
|
|
|
|
<a *ngIf="!form.get('pages').at(i).get('title').value" data-toggle="collapse" href="#{{'p' + i}}" class="panel-title pull-left"
|
|
|
|
|
style="padding-top: 7.5px;">{{i + 1}}. Page{{i + 1}}</a>
|
|
|
|
|
<div class="btn-group pull-right">
|
|
|
|
|
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeletePage(i);">
|
|
|
|
|
<span class="glyphicon glyphicon-erase"></span>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="{{'p' + i}}" class="panel-collapse collapse in">
|
|
|
|
|
<div class="panel-body">
|
|
|
|
|
<page-form [form]="form.get('pages').at(i)" [dataModel]="page"></page-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style="margin-top:20px; padding-left: 15px;" class="row">
|
2017-11-29 17:51:28 +01:00
|
|
|
|
<a (click)="addSection()" style="cursor: pointer">
|
2017-12-07 14:57:20 +01:00
|
|
|
|
Add Section +
|
2017-11-29 17:51:28 +01:00
|
|
|
|
</a>
|
|
|
|
|
</div>
|
2017-11-27 14:35:00 +01:00
|
|
|
|
|
2017-12-20 17:46:52 +01:00
|
|
|
|
<div style="margin-top:20px; padding-left: 15px;" class="row">
|
|
|
|
|
<a (click)="addPage()" style="cursor: pointer">
|
|
|
|
|
Add Page +
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-01-03 10:06:13 +01:00
|
|
|
|
<button class="btn btn-primary" style="margin-top:20px;" type="submit">Save</button>
|
|
|
|
|
<!-- [disabled]="!form.valid" -->
|
2017-11-29 17:51:28 +01:00
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2017-12-11 10:20:27 +01:00
|
|
|
|
<p>Form value: {{ form.value | json }}</p>
|
2017-11-27 14:35:00 +01:00
|
|
|
|
</div>
|