diff options
Diffstat (limited to 'vnfmarket/src/main/webapp/app/modules/home/marketplace.html')
| -rw-r--r-- | vnfmarket/src/main/webapp/app/modules/home/marketplace.html | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/vnfmarket/src/main/webapp/app/modules/home/marketplace.html b/vnfmarket/src/main/webapp/app/modules/home/marketplace.html new file mode 100644 index 00000000..5e2916ac --- /dev/null +++ b/vnfmarket/src/main/webapp/app/modules/home/marketplace.html @@ -0,0 +1,228 @@ +<!-- + Copyright 2017 Huawei Technologies Co., Ltd. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +--> +<div class="md-padding" flex layout-sm="column"> + <md-card> + <md-card-content> + <p> </p> + <h4>{{'module.marketplace.main.description' | translate }}</h4> + <ul id="description"> + <li>{{'module.marketplace.main.pointOne' | translate }}</li> + <li>{{'module.marketplace.main.pointTwo' | translate }}</li> + </ul> + </md-card-content> + </md-card> + <!-- Start About Page --> + <md-card> + <md-toolbar id="homeToolbar" class="md-hue-2"> + <div class="md-toolbar-tools"> + <md-select ng-model="sortBy" placeholder="{{'module.marketplace.main.sortBy.title'| translate}}" class="md-no-underline noMargin iconMargin fontSize" id="sortByLabel"> + <md-option class="fontSize" value="">{{'module.marketplace.main.sortBy.title' | translate}}</md-option> + <md-option class="fontSize" value="{{'module.marketplace.main.sortBy.options.name.value' | translate}}">{{'module.marketplace.main.sortBy.options.name.key' | translate}}</md-option> + <md-option class="fontSize" value="{{'module.marketplace.main.sortBy.options.dateModified.value' | translate}}">{{'module.marketplace.main.sortBy.options.dateModified.key' | translate}}</md-option> + <md-option class="fontSize" value="{{'module.marketplace.main.sortBy.options.downloads.value' | translate}}">{{'module.marketplace.main.sortBy.options.downloads.key' | translate}}</md-option> + </md-select> + + <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.search.label' | translate}}" ng-if="!vm.showSearch"> + <i class="fa fa-search" aria-hidden="true"></i> + </md-icon> + <form flex name="vm.filter.name"> + <md-input-container md-no-float class="md-block" id="searchFieldContainer" ng-if="!vm.showSearch"> + <input class="fontSize" ng-model="vm.filter.search" type="text" id="searchField" placeholder="{{'module.marketplace.main.search.placeholder' | translate}}" autofocus> + </md-input-container> + </form> + + <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'common.actions.close' | translate}}" ng-click="vm.showSearch = !vm.showSearch; vm.filter.search = '';" ng-if="!vm.showSearch"> + <md-tooltip md-direction="top">{{'common.actions.close' | translate}}</md-tooltip> + <i class="fa fa-close" aria-hidden="true"></i> + </md-icon> + <md-icon class="md-icon iconMargin iconAlignment defaultColor" aria-label="{{'common.actions.search' | translate}}" ng-if="vm.showSearch" ng-click="vm.showSearch = !vm.showSearch;"> + + <md-tooltip md-direction="top">{{'common.actions.search' | translate}}</md-tooltip> + <i class="fa fa-search" aria-hidden="true"></i> + </md-icon> + + <button id="serviceUpload" type="button" class="btn btnDefault iconMargin" ng-click="vm.serviceUpload()">{{'module.marketplace.main.upload.label' | translate}}</button> + + <span ng-if="vm.services.length > 0" class="iconMargin"> + <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.gridView.label' | translate}}" ng-if="!vm.hasGridView" ng-click="vm.changeView('grid')"> + <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.label' | translate}}</md-tooltip> + <i class="fa fa-th" aria-hidden="true"></i> + </md-icon> + <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.listView.label' | translate}}" ng-if="vm.hasGridView" ng-click="vm.changeView('list')"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.label' | translate}}</md-tooltip> + <i class="fa fa-list" aria-hidden="true"></i> + </md-icon> + </span> + <md-icon class="md-icon iconAlignment defaultColor" aria-label="{{'module.marketplace.main.refresh.label' | translate}}" ng-click="vm.getFeatureList()"> + <md-tooltip md-direction="top">{{'module.marketplace.main.refresh.label' | translate}}</md-tooltip> + <i class="fa fa-refresh" ng-class="vm.SpinClass" aria-hidden="true"></i> + </md-icon> + + </div> + </md-toolbar> + </md-card> + <div class="md-padding" layout-xs="column" layout="row" layout-wrap ng-if="vm.hasGridView && vm.services.length > 0" id="gridView"> + <md-card class="gridViewMargin md-padding" flex-xs="50" flex-gt-xs="30" ng-repeat="service in vm.services | filter: vm.filter.search| orderBy:sortBy" layout-wrap> + <md-card-header> + <md-card-header-text> + <span class="md-headline"><a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a></span> + </md-card-header-text> + <span class="mdl-layout-spacer"></span> + <span id="service-type-name" class="mdl-chip mdl-chip--contact service-detail-tags" data-toggle="tooltip"> + + <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.serviceType.label' | translate}}</md-tooltip> + <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white"><i class="material-icons service-details-icon">{{'module.marketplace.main.gridView.serviceType.value' | translate}}</i></span> + <span class="mdl-chip__text">{{service.type}}</span> + </span> + <span id="service-downloads-count" class="mdl-chip mdl-chip--contact service-detail-tags" data-toggle="tooltip"> + <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.downloads.label' | translate}}</md-tooltip> + <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white"><i class="material-icons service-details-icon">{{'module.marketplace.main.gridView.downloads.value' | translate}}</i></span> + <span class="mdl-chip__text">{{service.downloads ?service.downloads : 0 }}</span> + </span> + </md-card-header> + <div class="mdl-card__supporting-text service-desc"> + {{service.shortDesc}} + </div> + <md-card-actions layout="row" layout-align="start center" class="mdl-card__actions service-actions"> + <div class="col-sm-12 no-padding"> + <div class="col-md-8 no-padding"> + <div class="pull-left"> + <div class="btn-group btn-group-xs" role="group"> + <button class="show-deploy btn btn-default btnDefault" data-toggle="modal" data-target="#service-update-history-modal" data-tooltip="tooltip"> + + <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.upload.tooltip' | translate}}</md-tooltip> + <i class="fa fa-history" aria-hidden="true"></i> + {{'module.marketplace.main.gridView.upload.buttonLabel' | translate}} + </button> + <button id="delete-service-button" class="show-deploy btn btn-default btnDefault" data-toggle="modal" data-target="#service-download-history-modal" data-tooltip="tooltip"> + <md-tooltip md-direction="top">{{'module.marketplace.main.gridView.downloads.tooltip' | translate}}</md-tooltip> + <i class="fa fa-history fa-flip-horizontal"></i> + {{'module.marketplace.main.gridView.downloads.buttonLabel' | translate}} + </button> + </div> + </div> + </div> + <div class="col-md-4 no-padding"> + <div class="pull-right"> + <div class="btn-group btn-group-xs" role="group"> + <button class="show-deploy btn btn-default btnDefault actionBtnHeight"> + <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip> + <i class="material-icons materialIconAdjustment">{{'common.actions.fileUpload' | translate}}</i> + </button> + <button class="show-deploy btn btn-default btnDefault actionBtnHeight" ng-click="vm.downloadService(service.csarId)"> + <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip> + <i class="material-icons materialIconAdjustment">{{'common.actions.getApp' | translate}}</i> + </button> + <button id="delete-service-button" class="show-deploy btn btn-default btnDefault" ng-click="vm.serviceDelete(service)"> + <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip> + <i class="fa fa-times icon-red fa-lg"></i> + </button> + </div> + </div> + </div> + </div> + </md-card-actions> + </md-card> + </div> + <md-card flex="100" ng-if="!vm.hasGridView && vm.services.length > 0" id="listView"> + <md-table-container> + <table md-table> + <thead md-head md-order="sortBy"> + <tr md-row> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.name' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.name' | translate}} + </th> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.provider' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.provider' | translate}}</th> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.description' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.description' | translate}}</th> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.type' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.type' | translate}}</th> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.size' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.size' | translate}}</th> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.createdAt' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.createdAt' | translate}}</th> + <th md-column class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.lastModified' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.lastModified' | translate}}</th> + <th md-column md-numeric class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.donwloads' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.donwloads' | translate}}</th> + <th md-column md-numeric class="text-center fontSize"> + <md-tooltip md-direction="top">{{'module.marketplace.main.listView.headers.actions' | translate}}</md-tooltip>{{'module.marketplace.main.listView.headers.actions' | translate}}</th> + </tr> + </thead> + <tbody md-body> + <tr md-row md-select="dessert" md-select-id="name" md-auto-select ng-repeat="service in vm.services | filter: vm.filter.search | orderBy:sortBy | limitTo: vm.paginationQuery.limit: (vm.paginationQuery.page - 1) * vm.paginationQuery.limit"> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.name}}</md-tooltip> + <a class="pointerClick" ng-click="vm.showDetails(service)">{{service.name}}</a></td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.provider}}</md-tooltip> + {{service.provider}}</td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.shortDesc}}</md-tooltip> + {{service.shortDesc | limitTo:50 }}<span ng-if="service.shortDesc.length > 50">...<span></td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.type}}</md-tooltip> + {{service.type}}</td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.size}}</md-tooltip> + {{service.size}}</td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.createTime | date:'yyyy-MM-dd h:mm a'}}</md-tooltip> + {{service.createTime | date:'yyyy-MM-dd h:mm a'}}</td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.modifyTime | date:'yyyy-MM-dd h:mm a'}}</md-tooltip> + {{service.modifyTime | date:'yyyy-MM-dd h:mm a'}}</td> + <td md-cell class="text-center"> + <md-tooltip md-direction="top">{{service.downloads ?service.downloads : 0 }}</md-tooltip> + {{service.downloads ?service.downloads : 0 }}</td> + <td md-cell> + <span class="pull-right"> + <md-icon class="md-icon" aria-label="{{'common.actions.update' | translate}}"> + <md-tooltip md-direction="top">{{'common.actions.update' | translate}}</md-tooltip> + <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.fileUpload' | translate}}</i> + </md-icon> + <md-icon class="md-icon" aria-label="{{'common.actions.download' | translate}}" ng-click="vm.downloadService(service.csarId)"> + <md-tooltip md-direction="top">{{'common.actions.download' | translate}}</md-tooltip> + <i class="material-icons materialIconAdjustment" aria-hidden="true">{{'common.actions.getApp' | translate}}</i> + </md-icon> + <md-icon class="md-icon" aria-label="{{'common.actions.delete' | translate}}" ng-click="vm.serviceDelete(service)"> + <md-tooltip md-direction="top">{{'common.actions.delete' | translate}}</md-tooltip> + <i class="fa fa-times icon-red fa-sm" aria-hidden="true"></i> + </md-icon> + <md-icon class="md-icon" aria-label="Delete service" > + </span> + </td> + </tr> + </tbody> + </table> + </md-table-container> + <md-table-pagination class="pagination-class" md-limit="vm.paginationQuery.limit" md-limit-options="vm.pagination" md-page="vm.paginationQuery.page" md-total="{{vm.services.length}}" md-page-select="vm.paginationOptions.pageSelect" md-boundary-links="vm.paginationOptions.boundaryLink" md-label="{ page : 'Page', RowPerPage:'row per page', of:'of'}"></md-table-pagination> + </md-card> + + <md-card ng-if=" vm.services.length == 0"> + <div flex layout="row"> + <div flex="25" layout="column"> + </div> + <div flex="50" layout="column" id="emptyList"> + <h4 class="text-center">{{'module.marketplace.main.emptyList.label' | translate}} <a ng-click="vm.serviceUpload()">{{'module.marketplace.main.emptyList.anchor' | translate}}</a> {{'module.marketplace.main.emptyList.labelContinued' | translate}} </h4> + </div> + <div flex="25" layout="column"> + </div> + </div> + </md-card> +</div> +</div>
\ No newline at end of file |