design
This commit is contained in:
sunny
parent
7a9ee9ed9e
commit
9a0ff60821
|
|
@ -5,26 +5,26 @@
|
|||
<button mat-button color="primary" (click)="discovery()">Start</button>
|
||||
</mat-dialog-actions> -->
|
||||
|
||||
<p-card title="Zone" subtitle="192.168.1.0/24" [style]="{width: '100%'}" styleClass="ui-card-shadow">
|
||||
<p-card title="Zone" subtitle="192.168.1.0/24" styleClass="ui-card-shadow">
|
||||
<p-header>
|
||||
|
||||
</p-header>
|
||||
<div>
|
||||
|
||||
<div class="ui-g" style="width:250px;margin-bottom:10px">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
<p-checkbox name="group1" value="host" label="Host" inputId="la" [(ngModel)]="hostChecked" (onChange)="handleHostCheckChange($event)"></p-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui-g form-group">
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP">
|
||||
<label for="float-input">Start Ip</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP">
|
||||
<label for="float-input">End Ip</label>
|
||||
|
|
@ -33,16 +33,16 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="ui-g" style="width:250px;margin-bottom:10px">
|
||||
<div class="ui-g">
|
||||
<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-12">
|
||||
<div class="ui-g-4">
|
||||
<div class="ui-g-6">
|
||||
TCP
|
||||
<p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
|
||||
</div>
|
||||
<div class="ui-g-4">
|
||||
<div class="ui-g-6">
|
||||
UDP
|
||||
<p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
|
||||
</div>
|
||||
|
|
@ -50,14 +50,14 @@
|
|||
</div>
|
||||
|
||||
<div class="ui-g form-group">
|
||||
<div class="ui-g-12 ui-md-4">
|
||||
<div class="ui-g-12 ui-md-6">
|
||||
<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">
|
||||
<div class="ui-g-12 ui-md-6">
|
||||
<span class="ui-float-label">
|
||||
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort">
|
||||
<label for="float-input">End Port</label>
|
||||
|
|
@ -72,17 +72,17 @@
|
|||
</p-header>
|
||||
</p-listbox> -->
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g-12 ui-g-nopad">
|
||||
<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'}" class="ui-picklist-buttons-unvisible">
|
||||
[sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" [showTargetControls]="false" [showSourceControls]="false">
|
||||
<ng-template let-service pTemplate="item">
|
||||
<div class="ui-helper-clearfix">
|
||||
<div style="font-size:14px;float:right;margin:0;padding: 0;">{{service.name}}</div>
|
||||
<div style="font-size:14px;margin:0;padding: 0;">{{service.name}}</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</p-pickList>
|
||||
|
|
@ -113,15 +113,17 @@
|
|||
<p-header>
|
||||
|
||||
</p-header>
|
||||
<div>
|
||||
<div class="ui-g-12">
|
||||
<p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="filesTree4"></p-tree>
|
||||
<div>Selected Nodes:
|
||||
</div>
|
||||
<div class="ui-g-12">Selected Nodes:
|
||||
<span *ngFor="let file of filesTree4">{{file.label}} </span>
|
||||
</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="Save" icon="fa-check"></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="Save" icon="fa-check" class="ui-button-width-fit"></button>
|
||||
</div>
|
||||
</p-footer>
|
||||
</p-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,14 +12,26 @@
|
|||
</div>
|
||||
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
<div class="ui-bottom-space-10">
|
||||
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
|
||||
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
|
||||
</p-dialog>
|
||||
|
||||
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large" (click)="onAddSensor()"></button>
|
||||
<div class="ui-g-12">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-5 ui-g-nopad">
|
||||
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
|
||||
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>
|
||||
</p-dialog>
|
||||
|
||||
<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-button-large ui-button-width-fit" (click)="onAddSensor()"></button>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-7 ui-g-nopad">
|
||||
<div style="float: right; margin-top: 30px;">
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-success"></i>Up
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-fatal"></i>Dwon
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>Warn
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-error"></i>Error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-3">
|
||||
<p-panel [showHeader]="false">
|
||||
<div class="ui-g">
|
||||
<h3>Search</h3>
|
||||
|
|
@ -48,21 +60,27 @@
|
|||
</div>
|
||||
|
||||
<div class="ui-g-12 ui-md-9">
|
||||
<p-dataList [value]="targetSensor" [paginator]="true" styleClass="cars-datalist" [rows]="10">
|
||||
<p-dataList [value]="targetSensor" [paginator]="true" styleClass="ui-sensors-datalist" [rows]="10">
|
||||
<!-- <p-header>
|
||||
List of Cars
|
||||
</p-header> -->
|
||||
<ng-template let-item pTemplate="item">
|
||||
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12 ui-md-3 ui-lg-3" style="display:inline-block;margin: auto 0">{{item.target.id}} - {{item.target.displayName}}</div>
|
||||
<div class="ui-g-10 ui-md-7 ui-lg-8 car-details" style="display:inline-block;margin: auto 0">
|
||||
<div *ngFor="let sensor of item.sensors">
|
||||
<a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
|
||||
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix ui-sensors">
|
||||
<div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
|
||||
<i class="fa ui-icon-devices ui-icon-lg"></i><br>
|
||||
{{item.target.id}} - {{item.target.displayName}}
|
||||
</div>
|
||||
<div class="ui-g-12 ui-md-9 ui-lg-9 ui-sensors-details">
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-10">
|
||||
<div *ngFor="let sensor of item.sensors" class="ui-g-12">
|
||||
<i class="fa ui-icon-stop ui-status-icon ui-status-warn"></i>
|
||||
<a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g-2" dir="rtl">
|
||||
<button type="button" pButton icon="ui-icon-add" style="margin: auto 0;" (click)="onAddSensorWithTarget(item.target)"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g-2 ui-md-2 ui-lg-1">
|
||||
<button type="button" pButton icon="ui-icon-add" style="margin:auto" (click)="onAddSensorWithTarget(item.target)"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,17 +33,6 @@
|
|||
font-size: 1.6em !important;
|
||||
}
|
||||
|
||||
.ui-orderlist-controls {
|
||||
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;
|
||||
}
|
||||
|
|
@ -130,7 +119,7 @@ img.ui-img-profile-responsive {
|
|||
height: auto;
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
|
@ -140,4 +129,22 @@ img.ui-img-profile-responsive {
|
|||
@media (max-width: 640px) {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-sensors-datalist {
|
||||
.ui-sensors{
|
||||
.ui-sensor{
|
||||
display:inline-block;
|
||||
margin: auto;
|
||||
padding:9px;
|
||||
text-align: center;
|
||||
.ui-icon-lg{
|
||||
font-size: 3em;
|
||||
margin: 3px;
|
||||
}
|
||||
}
|
||||
.ui-sensors-details{
|
||||
display:inline-block;
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user