uchaindb/UClient

<database-nav current="{{ 'db.add.Title' | translate }}"></database-nav>
<div class="help-block"></div>
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="input-group input-group-sm">
            <span class="input-group-addon glyphicon glyphicon-search"></span>
            <input type="text" class="form-control" placeholder="{{ 'db.add.SearchPlaceholder' | translate }}" [(ngModel)]="searchText" (input)="updateSearchList($event.target.value)">
        </div>
    </div>
    <div class="list-group">
        <ng-container *ngFor="let item of searchList">
            <ng-container *ngTemplateOutlet="dbTemplate; context: {item:item}">
            </ng-container>
        </ng-container>
        <div *ngIf="searchText && (!searchList || searchList.length == 0)" class="list-group-item">
            {{ 'db.add.SearchNoResultText' | translate }}
        </div>
        <button type="button" class="list-group-item" data-toggle="modal" data-target="#manualAddModal">
            <h4>
                <span class="glyphicon glyphicon-plus"></span>
                {{ 'db.add.manual.ConnectDatabaseButtonText' | translate }}
            </h4>
        </button>
    </div>
</div>

<hr />
<div class="panel panel-default">
    <div class="panel-heading">{{ 'db.add.RecommendTitle' | translate }}</div>
    <div class="list-group">
        <ng-container *ngFor="let item of recommendList">
            <ng-container *ngTemplateOutlet="dbTemplate; context: {item:item}">
            </ng-container>
        </ng-container>
    </div>
</div>

<ng-template #dbTemplate let-item="item">
    <button type="button" (click)="select(item)" class="list-group-item">
        <div class="media-left">
            <img class="media-object chaindb-image" [src]="item.image">
        </div>
        <div class="media-body">
            <h4 class="list-group-item-heading">{{item.name}}</h4>
            <p class="list-group-item-text">{{item.description}}</p>
        </div>
    </button>
</ng-template>

<!-- Modal -->
<div class="modal fade" id="manualAddModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">{{ 'db.add.manual.AddModalTitle' | translate }}</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="inputAddress">{{ 'db.add.manual.AddressLabel' | translate }}</label>
                    <input type="text" class="form-control" id="inputAddress" [(ngModel)]="manualAddress"
                           placeholder="{{ 'db.add.manual.AddressPlaceholder' | translate }}">
                </div>
                <div class="form-group">
                    <label for="inputName">{{ 'db.add.manual.NameLabel' | translate }}</label>
                    <input type="text" class="form-control" id="inputName" [(ngModel)]="manualName"
                           placeholder="{{ 'db.add.manual.NamePlaceholder' | translate }}">
                </div>
                <div class="form-group">
                    <label for="inputDesc">{{ 'db.add.manual.DescLabel' | translate }}</label>
                    <input type="text" class="form-control" id="inputDesc" [(ngModel)]="manualDesc"
                           placeholder="{{ 'db.add.manual.DescPlaceholder' | translate }}">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{ 'db.add.manual.CloseButtonText' | translate }}</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="saveManual()">{{ 'db.add.manual.SaveButtonText' | translate }}</button>
            </div>
        </div>
    </div>
</div>