Commit 2d3935f7 authored by Venkat's avatar Venkat
Browse files

modified the post records call, added the dialog to pull information from the UI

parent 80046baa
table {
width: 100%;
}
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
/* Add a black background color to the top navigation */
#topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
#topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
#topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
#topnav a.active {
background-color: #4CAF50;
color: white;
}
\ No newline at end of file
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="userId">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> UserId </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.userId}} </mat-cell>
<ng-container matColumnDef="subnet_name">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> Subnet </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="openDialog()"> {{element?.subnet_name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="ipv4">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> IPV4 </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="openDialog()"> {{element?.ipv4}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Id">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> ID </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.id}} </mat-cell>
<ng-container matColumnDef="ipv6">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> IPV6 </mat-header-cell>
<mat-cell *matCellDef="let element" (click)="openDialog()"> {{element?.ipv6}} </mat-cell>
</ng-container>
<ng-container matColumnDef="host">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> Host </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.host}} </mat-cell>
</ng-container>
<ng-container matColumnDef="title">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> Title </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.title}} </mat-cell>
<ng-container matColumnDef="mac_addr">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> Mac Address </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.mac_addr}} </mat-cell>
</ng-container>
<ng-container matColumnDef="completed">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> Completed </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.completed}} </mat-cell>
<ng-container matColumnDef="adapter">
<mat-header-cell style="font-weight: bold" *matHeaderCellDef> Adapter </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element?.adapter}} </mat-cell>
</ng-container>
<mat-header-row style="font-weight: bold" *matHeaderRowDef="displayedColumns"></mat-header-row>
......@@ -26,68 +36,6 @@
<!--<mat-toolbar [color] = "primary">
<mat-toolbar-row >
<span>
Hi
</span>
</mat-toolbar-row>
</mat-toolbar>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>-->
\ No newline at end of file
......@@ -4,6 +4,9 @@ import {MatToolbarModule} from '@angular/material/toolbar';
import { SampleService } from './sample.service';
import { Observable } from 'rxjs';
import { delay } from 'q';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { DialogOverviewComponent, Records } from './dialog-overview/dialog-overview.component';
import { isIPv6 } from 'net';
@Component({
selector: 'app-root',
......@@ -12,7 +15,7 @@ import { delay } from 'q';
})
export class AppComponent {
constructor(private sampleService: SampleService){
constructor(private sampleService: SampleService, public dialog: MatDialog){
}
title = 'IPAM';
......@@ -22,11 +25,23 @@ export class AppComponent {
returned_record_id: any;
returned_host_id: any;
returned_mac_addr: any;
ipv4: any;
ipv6: any;
host: any;
adapter: any;
mac: any;
ipResultSet: IPResultSet[] = [];
postUIObject: PostUIObject = {};
ngOnInit(){
// this.getUserInformation();
//this.getAvailableIPs();
//this.getAllIps();
this.getAllIps();
//this.PutRecords();
//this.getIPsByRange()
//this.PostPreambles()
//this.PostRecords();
......@@ -39,7 +54,8 @@ export class AppComponent {
}
displayedColumns: string[] = ['userId', 'Id', 'title', 'completed'];
displayedColumns: string[] = ['subnet_name', 'ipv4', 'ipv6', 'host', 'mac_addr', 'adapter'];
displayUserInformation(item: UserInformation[]){
item.forEach(item =>
......@@ -48,6 +64,7 @@ export class AppComponent {
console.log(this.userInformation);
}
getUserInformation(): void {
this.sampleService.getInfo()
......@@ -69,11 +86,17 @@ export class AppComponent {
}
getAllIps(): void{
this.sampleService.ListAllIPs()
.toPromise()
.then((res) => {
console.log("hi")
})
res.forEach(x => {
let item = new IPResultSet(x.id != null ? x.id : null , x.ipv4, x.ipv6, x.mac_addr != null ? x.mac_addr.adapter.host.host_name: null, x.mac_addr != null ? x.mac_addr.mac : null, x.mac_addr!== null && x.mac_addr.adapter !== null ? x.mac_addr.adapter.adapter_name : null, x.subnet !== null ? x.subnet.subnet_name : null);
this.ipResultSet.push(item)
})
this.dataSource = this.ipResultSet;
})
}
getIPsByRange(): void{
......@@ -84,15 +107,15 @@ export class AppComponent {
})
}
PostHosts(recordID): any {
this.sampleService.PostHosts(recordID)
.toPromise()
.then((res) => {
//this.returned_host_id = res.id
this.returned_host_id = res.id
})
//return this.returned_host_id
}
// PostHosts(recordID): any {
// this.sampleService.PostHosts()
// .toPromise()
// .then((res) => {
// //this.returned_host_id = res.id
// this.returned_host_id = res.id
// })
// //return this.returned_host_id
// }
PostAdapters(hostID): any {
this.sampleService.PostAdapters(hostID)
......@@ -102,28 +125,38 @@ export class AppComponent {
})
}
DeleteHost(): void{
this.sampleService.DeleteHost(347)
this.sampleService.DeleteHost(23)
.toPromise()
.then((res) => {
console.log('sucess')
console.log('success')
})
}
PostRecords(): void {
this.sampleService.AddRecord()
PutRecords(): void {
this.sampleService.PutRecord()
.toPromise()
.then((res) => {
console.log('updated record')
})
}
PostRecords(host_name): void {
this.sampleService.PostHosts(host_name)
.toPromise()
.then((res) => {
this.returned_record_id = res.id
this.sampleService.PostHosts(this.returned_record_id)
this.sampleService.AddRecord(this.returned_record_id)
.toPromise()
.then((item) => {
this.sampleService.PostAdapters(item.id)
this.sampleService.PostAdapters(this.returned_record_id)
.toPromise()
.then((item) => {
this.sampleService.PostMacs(item.id)
.toPromise()
.then((item) => {
this.sampleService.PutIP(item.mac, 20)
let ip_id = this.ipResultSet.find(x => x.ipv4 === this.postUIObject.ipv4 || x.ipv4 === this.postUIObject.ipv6).ip_id
this.sampleService.PutIP(item.id, 1, ip_id, this.postUIObject.ipv4, this.postUIObject.ipv6)
.toPromise()
.then((item) => {
console.log('inserted')
......@@ -133,11 +166,30 @@ export class AppComponent {
})
})
console.log('Record Posted');
}
}
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewComponent, {
width: '250px',
data: {ipv4: this.ipv4, ipv6: this.ipv6, host: this.host, adapter: this.adapter, mac: this.mac}
});
}
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.postUIObject.ipv4 = result.ipv4;
this.postUIObject.ipv6 = result.ipv6;
this.postUIObject.host_name = result.host;
this.postUIObject.mac_address = result.mac;
this.postUIObject.adapter_name = result.adapter;
//this.postUIObject.ip_id = ip_object.id
this.PostRecords(this.postUIObject.host_name)
});
}
}
export interface UserInformation{
userId: Number,
......@@ -162,10 +214,10 @@ export interface IPs{
}
export interface Subnets{
Subnet_ID: Number,
Subnet: any,
Preamble_ID: Number,
Role_ID: Number
id: Number,
subnet_name: any,
Preamble_ID: Preambles,
Role_ID: any
}
export interface Roles{
......@@ -176,8 +228,8 @@ export interface Roles{
export interface MacAddresses{
id: Number,
mac: any,
adapter: Number
mac: string,
adapter: Adapters
}
export interface Preambles{
......@@ -195,14 +247,9 @@ export interface Preambles{
export interface Hosts{
id: number,
host_name: any,
record: any
}
export interface Records{
id: any,
Data: any,
record_type: string
}
export interface Record_Types{
Type: string
......@@ -215,7 +262,37 @@ export interface Users{
export interface Adapters{
adapter_name: string,
host: Number,
host: Hosts,
id: any
}
export interface PostUIObject{
ip_id?: any;
ipv4?: string;
ipv6?: string;
host_name?: string;
mac_address?: string;
adapter_name?: string;
}
export class IPResultSet{
ip_id: any;
ipv4: any;
ipv6: any;
host: any
mac_addr: any;
adapter: any;
subnet_name: any
constructor(id, ipv4, ipv6, host, mac_addr, adapter, subnet_name){
this.ip_id = id;
this.ipv4 = ipv4;
this.ipv6 = ipv6;
this.host = host;
this.mac_addr = mac_addr;
this.adapter = adapter;
this.subnet_name = subnet_name;
}
}
......@@ -5,23 +5,41 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import { MatCardModule } from '@angular/material';
import { MatCardModule, MatInputModule, MatSelectModule, MatDialogModule } from '@angular/material';
import { HttpClientModule } from '@angular/common/http';
import { RecordFormComponent } from './record-form/record-form.component';
import { ReactiveFormsModule, FormsModule} from '@angular/forms'
import {MatFormFieldModule} from '@angular/material/form-field';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import { DialogOverviewComponent } from './dialog-overview/dialog-overview.component';
@NgModule({
declarations: [
AppComponent,
RecordFormComponent,
DialogOverviewComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
FormsModule,
AppRoutingModule,
MatTableModule,
MatToolbarModule,
MatIconModule,
MatCardModule,
HttpClientModule
HttpClientModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
],
providers: [],
bootstrap: [AppComponent]
bootstrap: [AppComponent],
entryComponents:[DialogOverviewComponent]
})
export class AppModule { }
<div mat-dialog-content>
<p>Enter the data in the fields</p>
<mat-form-field>
<input matInput placeholder="IPV4" [(ngModel)]="data.ipv4">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="IPV6" [(ngModel)]="data.ipv6">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Host" [(ngModel)]="data.host">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Adapter" [(ngModel)]="data.adapter">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Mac" [(ngModel)]="data.mac">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DialogOverviewComponent } from './dialog-overview.component';
describe('DialogOverviewComponent', () => {
let component: DialogOverviewComponent;
let fixture: ComponentFixture<DialogOverviewComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DialogOverviewComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DialogOverviewComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
selector: 'app-dialog-overview',
templateUrl: './dialog-overview.component.html',
styleUrls: ['./dialog-overview.component.css']
})
export class DialogOverviewComponent implements OnInit {
ngOnInit() {
}
constructor(
public dialogRef: MatDialogRef<DialogOverviewComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
onNoClick(): void {
this.dialogRef.close();
}
}
export interface DialogData {
ipv4: string;
ipv6: string;
host: string;
adapter: string;
mac: string;
}
export interface Records{
id: any,
Data: any,
record_type: string,
host: any
}
<h1 mat-dialog-title>Hi {{data.name}}</h1>
<div mat-dialog-content>
<p>What's your favorite animal?</p>
<mat-form-field>
<input matInput [(ngModel)]="data.animal">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
</div>
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}
\ No newline at end of file
<ol>
<li>
<button mat-raised-button (click)="openDialog()">Pick one</button>
</li>
<li *ngIf="animal">
You chose: <i>{{animal}}</i>
</li>
</ol>