weifer/Ipv4_Converter_Angular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
marcusferl@weifer.de 2022-08-31 14:18:13 +02:00
parent 776a75c783
commit dc5af6085e
6 changed files with 99 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/backend/berechnung.ts
View File

@ -18,13 +18,33 @@ export class Berechnung {
return this.binArr.join(".")
}
binToDec(bin: string) {
var arr = bin.split(" ")
alert(arr)
let binNum = ""
for (let index = 0; index < arr.length; index++) {
binNum += parseInt(arr[index], 2).toString();
}
return binNum;
}
subNetMask(prefix: number) {
let mask = ""
return mask;
}
broadCast(arr: any[]) {
broadCastBin(binIp: string, prefix: number) {
var arr = binIp.split('.');
let prefixIp = arr.join("");
let hostbin = prefixIp.slice(0, prefix);
hostbin = hostbin + "1".repeat(32 - prefix);
for (let i = 8; i <= hostbin.length; i += 8) {
hostbin = [hostbin.slice(0, i), " ", hostbin.slice(i)].join('')
i++
}
return hostbin
}
netId(mask: string) {

2
src/app/input/input.component.html
View File

@ -12,5 +12,5 @@
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button (click)="onClick();">Calculate</button>
<button mat-raised-button (click)="onClick()">Calculate</button>
</div>

13
src/app/input/input.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Berechnung } from '../backend/berechnung';
import { MyserviceService } from '../myservice.service';
@Component({
selector: 'app-input',
@ -11,18 +12,18 @@ export class InputComponent implements OnInit {
ipv4_eingabe: string = "";
prefix_selection: number = 0;
constructor() {
constructor(public service: MyserviceService) {
for (let i = 0; i <= 32; i++) {
this.counter.push(i);
}
}
onClick() {
var berechnung = new Berechnung;
let number = berechnung.decToBin(this.ipv4_eingabe)
alert(number)
var calc = new Berechnung;
this.service.bin_dec_dict.Ipv4.bin = calc.decToBin(this.ipv4_eingabe)
this.service.bin_dec_dict.Ipv4.dec = this.ipv4_eingabe;
this.service.bin_dec_dict.Broadcast.bin = calc.broadCastBin(this.service.bin_dec_dict.Ipv4.bin, this.prefix_selection);
this.service.bin_dec_dict.Broadcast.dec = calc.binToDec(this.service.bin_dec_dict.Broadcast.bin)
}
ngOnInit(): void {

27
src/app/myservice.service.ts
View File

@ -4,6 +4,31 @@ import { Injectable } from '@angular/core';
providedIn: 'root'
})
export class MyserviceService {
bin_dec_dict = {
Ipv4: {
dec: "",
bin: ""
},
Subnet: {
dec: "",
bin: ""
},
Broadcast: {
dec: "",
bin: ""
},
NetID: {
dec: "",
bin: ""
},
FirstIP: {
dec: "",
bin: ""
},
LastIP: {
dec: "",
bin: ""
}
}
constructor() { }
}

43
src/app/output/output.component.html
View File

@ -1,7 +1,42 @@
<div class="card" *ngFor="let name of outArr">
<label class="label">{{name}}</label>
<div class="card">
<label class="label">Ipv4</label>
<div>
<p><label class="outlabel" *ngFor="let element in bin_dec_dict">{{element}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{bin}}</label></p>
<p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Ipv4.dec}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Ipv4.bin}}</label></p>
</div>
</div>
<div class="card">
<label class="label">Subnet Mask</label>
<div>
<p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
</div>
</div>
<div class="card">
<label class="label">Broadcast</label>
<div>
<p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
</div>
</div>
<div class="card">
<label class="label">NetID</label>
<div>
<p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
</div>
</div>
<div class="card">
<label class="label">First Ip</label>
<div>
<p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
</div>
</div>
<div class="card">
<label class="label">Last Ip</label>
<div>
<p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
<p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
</div>
</div>

34
src/app/output/output.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Berechnung } from '../backend/berechnung';
import { InputComponent } from '../input/input.component';
import { MyserviceService } from '../myservice.service';
@Component({
@ -10,40 +10,14 @@ import { InputComponent } from '../input/input.component';
})
export class OutputComponent implements OnInit {
// Dictionary
bin_dec_dict = {
ipv4_dec: "",
ipv4_bin: "",
subnet_dec: "",
subnet_bin: "",
broadcast_dec: "",
broadcast_bin: "",
netID_de: "",
netID_bin: "",
firstIP_dec: "",
firstIP_bin: "",
lastIP_dec: "",
lastIP_bin: ""
}
bin = "";
dec = "";
inputIp = "";
prefix = 0;
outArr = ["IPv4", "Subnetmask:", "Broadcast:", "Net-ID:", "First Ip:", "Last Ip:"]
constructor() {
constructor(public service: MyserviceService) {
}
onClick() {
var br = new Berechnung;
// Dict Zugriff
this.bin_dec_dict.ipv4_bin = br.decToBin(this.dec)
this.bin_dec_dict.subnet_bin = br.subNetMask(this.prefix)
}
ngOnInit(): void {