design
This commit is contained in:
sunny
parent
e3013e95a6
commit
fafee4071e
|
|
@ -1,9 +1,7 @@
|
|||
<div class="ui-fluid">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<div class="card no-margin">
|
||||
<of-target-list></of-target-list>
|
||||
</div>
|
||||
<of-target-list></of-target-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -22,74 +22,79 @@
|
|||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP">
|
||||
<label for="float-input">Start Ip</label>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP">
|
||||
<label for="float-input">End Ip</label>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="ui-g" style="width:250px;margin-bottom:10px">
|
||||
<div class="ui-g-12">
|
||||
<p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
|
||||
</div>
|
||||
TCP
|
||||
<p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
|
||||
UDP
|
||||
<p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
|
||||
|
||||
<div class="ui-g-12">
|
||||
<p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="ui-g form-group">
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort">
|
||||
<label for="float-input">Start Port</label>
|
||||
</span>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g-4">
|
||||
TCP
|
||||
<p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort">
|
||||
<label for="float-input">End Port</label>
|
||||
</span>
|
||||
<div class="ui-g-4">
|
||||
UDP
|
||||
<p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
|
||||
<p-header>
|
||||
<i class="fa fa-car"></i>
|
||||
Cars
|
||||
</p-header>
|
||||
</p-listbox> -->
|
||||
<div>
|
||||
<div class="ui-g-12">
|
||||
<p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
|
||||
</div>
|
||||
<div class="ui-g form-group">
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort">
|
||||
<label for="float-input">Start Port</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort">
|
||||
<label for="float-input">End Port</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
|
||||
<p-header>
|
||||
<i class="fa fa-car"></i>
|
||||
Cars
|
||||
</p-header>
|
||||
</p-listbox> -->
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g-12">
|
||||
<p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="ui-g-12">
|
||||
<p-pickList [source]="serviceItems" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
|
||||
filterBy="brand" dragdrop="true" dragdropScope="services" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand"
|
||||
[sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
|
||||
[sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" class="ui-picklist-buttons-unvisible">
|
||||
<ng-template let-service pTemplate="item">
|
||||
<div class="ui-helper-clearfix">
|
||||
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{service.name}}</div>
|
||||
<div style="font-size:14px;float:right;margin:0;padding: 0;">{{service.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-pickList>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<p-footer>
|
||||
<button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="closeDialog()"></button>
|
||||
<button pButton type="button" label="Start" icon="fa-check" (click)="discovery()"></button>
|
||||
<div dir="rtl">
|
||||
<button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
|
||||
<button pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit" (click)="discovery()"></button>
|
||||
</div>
|
||||
</p-footer>
|
||||
</p-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@
|
|||
</p-dialog>
|
||||
<div class="ui-g-12 ui-g-nopad">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-6 ui-g-nopad" style="padding-bottom:10px;">
|
||||
<button pButton type="button" class="ui-button-large" icon="ui-icon-play-arrow" label="Discovery" style="width:auto" (click)="showDialog()"></button>
|
||||
<div class="ui-g-6 ui-g-nopad ui-bottom-space-10">
|
||||
<button pButton type="button" class="ui-button-large ui-button-width-fit" icon="ui-icon-play-arrow" label="Discovery" (click)="showDialog()"></button>
|
||||
</div>
|
||||
<div class="ui-g-6 ui-g-nopad ui-rtl" dir="rtl">
|
||||
<button pButton type="button" class="ui-button-secondary" label="Expand all" style="width:auto; margin-top: 16px;" (click)="expandAll()"></button>
|
||||
<button pButton type="button" class="ui-button-secondary" label="Collapse all" style="width:auto;" (click)="collapseAll()"></button>
|
||||
<div class="ui-g-6 ui-g-nopad" dir="rtl">
|
||||
<button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Expand all" style="margin-top: 16px;" (click)="expandAll()"></button>
|
||||
<button pButton type="button" class="ui-button-secondary ui-button-width-fit" label="Collapse all" style="margin-top: 16px;" (click)="collapseAll()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<ng-template pTemplate="header" let-columns>
|
||||
<tr>
|
||||
<th style="width: 3.25em" pResizableColumn></th>
|
||||
<th>Probe Key</th>
|
||||
<th style="width: 20em">Probe Key</th>
|
||||
<th>Description</th>
|
||||
<th>Created at</th>
|
||||
<th style="width: 7em">Created at</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-probe>
|
||||
|
|
@ -14,19 +14,15 @@
|
|||
<p-tableRadioButton [value]="probe"></p-tableRadioButton>
|
||||
</td>
|
||||
<td>{{probe.tempProbeKey}}</td>
|
||||
<td>{{probe.description}}</td>
|
||||
<td style="overflow: auto;">{{probe.description}}</td>
|
||||
<td>{{probe.createDate | date: 'dd/MM/yyyy'}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="footer" let-columns>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<button [disabled]="!selected" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
|
||||
<button [disabled]="!selected" class="ui-button-danger" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
<div class="ui-top-space-10" dir="rtl">
|
||||
<button [disabled]="!selected" class="ui-button-danger ui-button-width-fit" type="button" label="Deny" icon="ui-icon-close" pButton (click)="onAcceptOrDeny(false)"></button>
|
||||
<button [disabled]="!selected" class=" ui-button-width-fit" type="button" label="Accept" icon="fa-check" pButton (click)="onAcceptOrDeny(true)"></button>
|
||||
</div>
|
||||
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
<p-growl [(value)]="msgs"></p-growl>
|
||||
|
|
@ -1,44 +1,45 @@
|
|||
<h1>Info</h1>
|
||||
<div *ngIf="probe">
|
||||
<div class="ui-g form-group">
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{probe.displayName}}">
|
||||
<label>Alias</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{probe.cidr}}">
|
||||
<label>CIDR</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{probe.description}}">
|
||||
<label>Description</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{probe.probeKey}}">
|
||||
<label>Key</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{probe.authorizeDate | date: 'dd/MM/yyyy'}}">
|
||||
<label>Authrozied at</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6 ui-lg-4">
|
||||
<span class="md-inputfield">
|
||||
<input type="text" pInputText readonly value="{{probe.authorizeMember.name}}">
|
||||
<label>Authrozied by</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
|
||||
<button class="ui-button-danger" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
<div class="ui-bottom-space-10" dir="rtl">
|
||||
<button class="ui-button-danger ui-button-width-fit" type="button" label="Remove this Probe" icon="ui-icon-close" pButton (click)="onRemoveClick()"></button>
|
||||
<button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton (click)="onDiscoveryClick()"></button>
|
||||
</div>
|
||||
<p-confirmDialog header="Confirmation" icon="fa ui-icon-warning" width="425"></p-confirmDialog>
|
||||
|
|
@ -3,12 +3,12 @@
|
|||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Probe Name</th>
|
||||
<th>IP</th>
|
||||
<th>OS</th>
|
||||
<th>CIDR</th>
|
||||
<th style="width:10em">IP</th>
|
||||
<th style="width:8em">OS</th>
|
||||
<th style="width:10em">CIDR</th>
|
||||
<th pResizableColumn>Targets</th>
|
||||
<th>Authroized at</th>
|
||||
<th>Authroized by</th>
|
||||
<th style="width:8em">Authroized at</th>
|
||||
<th style="width:9em">Authroized by</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-probe>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<p-panel>
|
||||
<div *ngIf="crawler; else info" class="ui-g" style="height: 180px; overflow: auto">
|
||||
<p-panel [showHeader]="false">
|
||||
<div *ngIf="crawler; else info" class="ui-g ui-width-100-" style="height: 180px; overflow: auto">
|
||||
<div class="ui-g-12" *ngFor="let item of inputItems">
|
||||
<span class="md-inputfield">
|
||||
<input id="name" type="text" pInputText />
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<div *ngIf="target; else info">
|
||||
<div *ngIf="target; else info" class="ui-width-100-">
|
||||
<p-orderList [value]="crawlers" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="name"
|
||||
(onSelectionChange)="onSelectionChange($event)">
|
||||
<ng-template let-crawler pTemplate="item">
|
||||
<div class="ui-helper-clearfix">
|
||||
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{crawler.name}}</div>
|
||||
<div style="font-size:14px;float:right;margin:0">{{crawler.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-orderList>
|
||||
</div>
|
||||
|
||||
<ng-template #info>
|
||||
<p-panel>
|
||||
<p-panel [showHeader]="false">
|
||||
<div>개발자의 배려가 돋보이는 친절한 안내 메시지</div>
|
||||
</p-panel>
|
||||
</ng-template>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<p-panel>
|
||||
<div *ngIf="crawler && target; else info" class="ui-g" style="height: 200px; overflow: auto">
|
||||
<p-panel [showHeader]="false">
|
||||
<div *ngIf="crawler && target; else info" class="ui-g ui-width-100- ui-no-border" style="height: 200px; overflow: auto">
|
||||
<p-tree [value]="itemTreeNode" selectionMode="checkbox" [(selection)]="selectedItems" (onNodeSelect)="onNodeSelect($event)"
|
||||
(onNodeUnselect)="onNodeUnselect($event)"></p-tree>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div>
|
||||
<div style="height: 70%;">
|
||||
page 2222222
|
||||
</div>
|
||||
|
|
@ -1,15 +1,16 @@
|
|||
<h1>Add Sensor</h1>
|
||||
<div *ngIf="page === 1; else etc">
|
||||
<p-accordion [multiple]="false" [activeIndex]="step" (onOpen)="onTabOpen($event)">
|
||||
<p-accordionTab header="{{getTitle(0)}}" [disabled]="preTarget">
|
||||
<p-accordionTab header="{{getTitle(0)}}" [disabled]="preTarget" class="ui-nopad">
|
||||
<of-target-selector [visible]="visible" [preTarget]="preTarget" (targetSelected)="onTargetSelect($event)"></of-target-selector>
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="{{getTitle(1)}}">
|
||||
<p-accordionTab header="{{getTitle(1)}}" class="ui-nopad">
|
||||
<of-crawler-selector [target]="selectedTarget" (crawlerSelected)="onCrawlerSelect($event)"></of-crawler-selector>
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="{{getTitle(2)}}">
|
||||
<p-accordionTab header="{{getTitle(2)}}" class="ui-nopad">
|
||||
<of-crawler-auth [crawler]="selectedCrawler" (credentialPassed)="onCredentialPass($event)"></of-crawler-auth>
|
||||
</p-accordionTab>
|
||||
<p-accordionTab header="{{getTitle(3)}}">
|
||||
<p-accordionTab header="{{getTitle(3)}}" class="ui-nopad">
|
||||
<of-sensor-item-selector [target]="selectedTarget" [crawler]="selectedCrawler" (sensorItemsSelected)="onItemsSelect($event)"></of-sensor-item-selector>
|
||||
</p-accordionTab>
|
||||
</p-accordion>
|
||||
|
|
@ -19,12 +20,12 @@
|
|||
<of-sensor-setting-etc></of-sensor-setting-etc>
|
||||
</ng-template>
|
||||
|
||||
<div>
|
||||
<button pButton *ngIf="page === 1" class="ui-button-danger" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
|
||||
<button pButton *ngIf="page === 2" class="ui-button-danger" type="button" label="Prev" icon="ui-icon-close" (click)="onPrev()"></button>
|
||||
<div class="ui-top-space-10" dir="rtl">
|
||||
<button pButton *ngIf="page === 1" class=" ui-button-width-fit" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
|
||||
<button pButton *ngIf="page === 2" class=" ui-button-width-fit" type="button" label="Done" icon="fa-check" (click)="onDone()"></button>
|
||||
|
||||
<button pButton *ngIf="page === 1" [disabled]="!nextable" type="button" label="Next" icon="fa-check" (click)="onNext()"></button>
|
||||
<button pButton *ngIf="page === 2" type="button" label="Done" icon="fa-check" (click)="onDone()"></button>
|
||||
<button pButton *ngIf="page === 1" class="ui-button-danger ui-button-width-fit" type="button" label="Cancel" icon="ui-icon-close" (click)="onCancel()"></button>
|
||||
<button pButton *ngIf="page === 2" class="ui-button-danger ui-button-width-fit" type="button" label="Prev" icon="ui-icon-close" (click)="onPrev()"></button>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<div *ngIf="preTarget === null">
|
||||
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName" (onSelectionChange)="onSelectionChange($event)">
|
||||
<div *ngIf="preTarget === null" class="ui-width-100-">
|
||||
<p-orderList [value]="targets" [listStyle]="{'height':'200px'}" [responsive]="true" filterBy="displayName"
|
||||
(onSelectionChange)="onSelectionChange($event)">
|
||||
<ng-template let-target pTemplate="item">
|
||||
<div class="ui-helper-clearfix">
|
||||
<img src="assets/demo/images/car/BMW.gif" style="display:inline-block;margin:2px 0 2px 2px" />
|
||||
|
|
|
|||
|
|
@ -19,8 +19,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ui-button-secondary{
|
||||
background-color : #f5f6f8 !important;
|
||||
.ui-button-icon-left{
|
||||
color: #5e6166 !important;
|
||||
}
|
||||
}
|
||||
.ui-button-secondary:hover{
|
||||
color : white !important;
|
||||
color : #5e6166 !important;
|
||||
}
|
||||
|
||||
.ui-button-large {
|
||||
|
|
@ -31,3 +37,56 @@
|
|||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ui-picklist-buttons-unvisible{
|
||||
.ng-star-inserted.ui-picklist-buttons{
|
||||
visibility:hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-bottom-space-10{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ui-top-space-10{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ui-float-right{
|
||||
float:right;
|
||||
}
|
||||
.ui-button-width-fit{
|
||||
width: auto !important;
|
||||
}
|
||||
.ui-nopad{
|
||||
padding: 0px !important;
|
||||
.ui-accordion-content{
|
||||
padding: 0px !important;
|
||||
border: 0px !important;
|
||||
}
|
||||
}
|
||||
.ui-width-100-{
|
||||
.ui-orderlist-list-container{
|
||||
width : 100% !important;
|
||||
}
|
||||
}
|
||||
.ui-no-border{
|
||||
border: 0px !important;
|
||||
.ui-tree{
|
||||
border : 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-s-button{
|
||||
.ui-button-text {
|
||||
padding: 2px !important;
|
||||
.ui-button-text-icon-left {
|
||||
padding: 2px 12px 2px 4px !important;
|
||||
}
|
||||
.ui-button-text-icon-right {
|
||||
padding: 2px 4px 2px 12px !important;
|
||||
}
|
||||
}
|
||||
font-size: 0.8em !important;
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user