finish

src/app/app.module.ts

@@ -11,6 +11,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { OutputComponent } from './output/output.component';
 import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 
 @NgModule({
@@ -27,7 +29,9 @@ import { FormsModule } from '@angular/forms';
     MatInputModule,
     MatFormFieldModule,
     MatSelectModule,
-    FormsModule
+    FormsModule,
+    MatIconModule,
+    MatButtonModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/backend/berechnung.ts

@@ -20,7 +20,6 @@ export class Berechnung {
 
   binToDec(bin: string) {
     var arr = bin.split(" ")
-    alert(arr)
     let binNum = ""
     for (let index = 0; index < arr.length - 1; index++) {
       binNum += parseInt(arr[index], 2).toString() + ".";
@@ -30,9 +29,9 @@ export class Berechnung {
 
   }
 
-  subNetMask(prefix: number) {
+  binSubNetMask(prefix: number) {
-    let mask = ""
+    let binMask = "1".repeat(prefix) + "0".repeat((32 - prefix))
-    return mask;
+    return this.splitBinNumberString(binMask)
   }
 
   broadCastBin(binIp: string, prefix: number) {
@@ -40,24 +39,31 @@ export class Berechnung {
     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) {
+    return this.splitBinNumberString(hostbin)
-      hostbin = [hostbin.slice(0, i), " ", hostbin.slice(i)].join('')
+  }
+
+  netIdBin(binIp: string, prefix: number) {
+    var arr = binIp.split(' ');
+    let prefixIp = arr.join("");
+    let hostbin = prefixIp.slice(0, prefix);
+    hostbin = hostbin + "0".repeat(32 - prefix);
+    return this.splitBinNumberString(hostbin)
+  }
+
+  minIp(binNetID: string) {
+    return binNetID.slice(0, binNetID.length - 2) + "1 "
+  }
+
+  maxIp(binBroadcast: string) {
+    return binBroadcast.slice(0, binBroadcast.length - 2) + "0 "
+  }
+
+  splitBinNumberString(binString: string) {
+    for (let i = 8; i <= binString.length; i += 8) {
+      binString = [binString.slice(0, i), " ", binString.slice(i)].join('')
       i++
     }
-    return hostbin
+    return binString;
-  }
-
-  netId(mask: string) {
-    let netId;
-    return netId;
-  }
-
-  minIp() {
-    return null;
-  }
-
-  max() {
-    return null;
   }
 
 }

src/app/input/input.component.html

@@ -12,5 +12,8 @@
             </mat-option>
         </mat-select>
     </mat-form-field>
-    <button mat-raised-button (click)="onClick()">Calculate</button>
+
+    <button mat-fab aria-label="Calculate">
+        <mat-icon class="icon">swap_horiz</mat-icon>
+    </button>
 </div>

src/app/input/input.component.scss

@@ -1,8 +1,13 @@
 .input_field {
     min-width: 150px;
     max-width: 500px;
+    height: 58px;
     width: 100%;
+    margin-top: 15px;
     margin-right: 12px;
+    margin-left: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.30);
+    border-radius: 10px;
 
 }
 
@@ -10,5 +15,10 @@
     min-width: 50px;
     max-width: 100px;
     width: 100%;
+    margin-top: 15px;
     margin-right: 12px;
 }
+
+.button {
+    padding-top: 10px;
+}

src/app/input/input.component.ts

@@ -24,6 +24,14 @@ export class InputComponent implements OnInit {
     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)
+    this.service.bin_dec_dict.Subnet.bin = calc.binSubNetMask(this.prefix_selection)
+    this.service.bin_dec_dict.Subnet.dec = calc.binToDec(this.service.bin_dec_dict.Subnet.bin)
+    this.service.bin_dec_dict.NetID.bin = calc.netIdBin(this.service.bin_dec_dict.Ipv4.bin, this.prefix_selection)
+    this.service.bin_dec_dict.NetID.dec = calc.binToDec(this.service.bin_dec_dict.NetID.bin)
+    this.service.bin_dec_dict.FirstIP.bin = calc.minIp(this.service.bin_dec_dict.NetID.bin)
+    this.service.bin_dec_dict.FirstIP.dec = calc.binToDec(this.service.bin_dec_dict.FirstIP.bin)
+    this.service.bin_dec_dict.LastIP.bin = calc.maxIp(this.service.bin_dec_dict.Broadcast.bin)
+    this.service.bin_dec_dict.LastIP.dec = calc.binToDec(this.service.bin_dec_dict.LastIP.bin)
   }
 
   ngOnInit(): void {