overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
sunny 2018-04-19 22:25:17 +09:00
parent 7a9ee9ed9e
commit 9a0ff60821
3 changed files with 74 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/packages/discovery/component/setting/setting.component.html
View File

@ -5,26 +5,26 @@
<button mat-button color="primary" (click)="discovery()">Start</button> <button mat-button color="primary" (click)="discovery()">Start</button>
</mat-dialog-actions> --> </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>
</p-header> </p-header>
<div> <div>
<div class="ui-g" style="width:250px;margin-bottom:10px"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<p-checkbox name="group1" value="host" label="Host" inputId="la" [(ngModel)]="hostChecked" (onChange)="handleHostCheckChange($event)"></p-checkbox> <p-checkbox name="group1" value="host" label="Host" inputId="la" [(ngModel)]="hostChecked" (onChange)="handleHostCheckChange($event)"></p-checkbox>
</div> </div>
</div> </div>
<div class="ui-g form-group"> <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"> <span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP"> <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP">
<label for="float-input">Start Ip</label> <label for="float-input">Start Ip</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6">
<span class="ui-float-label"> <span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP"> <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP">
<label for="float-input">End Ip</label> <label for="float-input">End Ip</label>
@ -33,16 +33,16 @@
</div> </div>
<div class="ui-g" style="width:250px;margin-bottom:10px"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox> <p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<div class="ui-g-4"> <div class="ui-g-6">
TCP &nbsp; TCP &nbsp;
<p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch> <p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
</div> </div>
<div class="ui-g-4"> <div class="ui-g-6">
UDP &nbsp; UDP &nbsp;
<p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch> <p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
</div> </div>
@ -50,14 +50,14 @@
</div> </div>
<div class="ui-g form-group"> <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"> <span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort"> <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startPort">
<label for="float-input">Start Port</label> <label for="float-input">Start Port</label>
</span> </span>
</div> </div>
<div class="ui-g-12 ui-md-4"> <div class="ui-g-12 ui-md-6">
<span class="ui-float-label"> <span class="ui-float-label">
<input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort"> <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort">
<label for="float-input">End Port</label> <label for="float-input">End Port</label>
@ -72,17 +72,17 @@
</p-header> </p-header>
</p-listbox> --> </p-listbox> -->
<div class="ui-g-12"> <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> <p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<p-pickList [source]="serviceItems" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true" <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" 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"> <ng-template let-service pTemplate="item">
<div class="ui-helper-clearfix"> <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> </div>
</ng-template> </ng-template>
</p-pickList> </p-pickList>
@ -113,15 +113,17 @@
<p-header> <p-header>
</p-header> </p-header>
<div> <div class="ui-g-12">
<p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="filesTree4"></p-tree> <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> <span *ngFor="let file of filesTree4">{{file.label}} </span>
</div>
</div> </div>
<p-footer> <p-footer>
<button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="closeDialog()"></button> <div dir="rtl">
<button pButton type="button" label="Save" icon="fa-check"></button> <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-footer>
</p-card> </p-card>

52
src/packages/sensor/component/list/list.component.html
View File

@ -12,14 +12,26 @@
</div> </div>
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12 ui-md-3"> <div class="ui-g-12">
<div class="ui-bottom-space-10"> <div class="ui-g">
<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false"> <div class="ui-g-12 ui-md-5 ui-g-nopad">
<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting> <p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">
</p-dialog> <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>
<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>
<div class="ui-g-12 ui-md-3">
<p-panel [showHeader]="false"> <p-panel [showHeader]="false">
<div class="ui-g"> <div class="ui-g">
<h3>Search</h3> <h3>Search</h3>
@ -48,21 +60,27 @@
</div> </div>
<div class="ui-g-12 ui-md-9"> <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> <!-- <p-header>
List of Cars List of Cars
</p-header> --> </p-header> -->
<ng-template let-item pTemplate="item"> <ng-template let-item pTemplate="item">
<div style="border-bottom: 1px solid #bdbdbd" class="clearfix car-item"> <div style="border-bottom: 1px solid #bdbdbd" class="clearfix ui-sensors">
<div class="ui-g"> <div class="ui-g-12 ui-md-3 ui-lg-3 ui-sensor">
<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> <i class="fa ui-icon-devices ui-icon-lg"></i><br>
<div class="ui-g-10 ui-md-7 ui-lg-8 car-details" style="display:inline-block;margin: auto 0"> {{item.target.id}} - {{item.target.displayName}}
<div *ngFor="let sensor of item.sensors"> </div>
<a href="javascript:void(0)" (click)="onSensorClick(sensor)">{{sensor.crawler.name}} | {{sensor.itemCount}} items | {{sensor.status.name}}</a> <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>
<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> </div>
</div> </div>

33
src/styles.scss
View File

@ -33,17 +33,6 @@
font-size: 1.6em !important; 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{ .ui-bottom-space-10{
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -130,7 +119,7 @@ img.ui-img-profile-responsive {
height: auto; height: auto;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
@ -140,4 +129,22 @@ img.ui-img-profile-responsive {
@media (max-width: 640px) { @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;
}
}
}