nun

src/app/backend/berechnung.ts

@@ -0,0 +1,44 @@
+export class Berechnung {
+
+  binArr = new Array<string>;
+  decArr = new Array<string>;
+
+  // Convert dec Numbers to Binary
+  decToBin(number: string) {
+    this.decArr = number.split(".")
+    this.decArr.forEach(element => {
+      let tmp = (Number(element)).toString(2)
+      if (tmp.length < 8) {
+        let slicer = (8 - tmp.length);
+        tmp = "0".repeat(slicer) + tmp
+        console.log(element)
+      }
+      this.binArr.push(tmp);
+    });
+    return this.binArr.join(".")
+  }
+
+  subNetMask(prefix: number) {
+    let mask = ""
+    return mask;
+  }
+
+  broadCast(arr: any[]) {
+
+  }
+
+  netId(mask: string) {
+    let netId;
+    return netId;
+  }
+
+  minIp() {
+    return null;
+  }
+
+  max() {
+    return null;
+  }
+
+}
+

src/app/header/header.component.ts

@@ -7,7 +7,11 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+
+
+
+  }
 
   ngOnInit(): void {
   }

src/app/input/input.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Berechnung } from '../backend/berechnung';
 
 @Component({
   selector: 'app-input',
@@ -18,7 +19,10 @@ export class InputComponent implements OnInit {
   }
 
   onClick() {
-    alert(this.prefix_selection + " " + this.ipv4_eingabe)
+    var berechnung = new Berechnung;
+    let number = berechnung.decToBin(this.ipv4_eingabe)
+    alert(number)
+
   }
 
   ngOnInit(): void {

src/app/myservice.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MyserviceService } from './myservice.service';
+
+describe('MyserviceService', () => {
+  let service: MyserviceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MyserviceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/myservice.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MyserviceService {
+
+  constructor() { }
+}

src/app/output/output.component.html

@@ -1,5 +1,7 @@
-<div class="card" *ngFor="let name of out">
+<div class="card" *ngFor="let name of outArr">
     <label class="label">{{name}}</label>
-    <p><label class="outlabel">IP:</label><label>{{ipv4_dec}}</label></p>
-    <p><label class="outlabel">Binary:</label><label>{{ipv4_bin}}</label></p>
+    <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>
+    </div>
 </div>

src/app/output/output.component.scss

@@ -1,8 +1,8 @@
 .card {
     min-height: 40px;
     background-color: white;
-    width: 700px;
-    border: 1px solid rgba(0, 0, 0, 0.30);
+    width: 680px;
+    border: 3px solid rgba(0, 0, 0, 0.30);
     border-radius: 10px;
     overflow: hidden;
     position: relative;

src/app/output/output.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Berechnung } from '../backend/berechnung';
+import { InputComponent } from '../input/input.component';
+
 
 @Component({
   selector: 'app-output',
@@ -6,32 +9,40 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./output.component.scss']
 })
 export class OutputComponent implements OnInit {
-  ipv4_dec = "192.168.0.1";
-  ipv4_bin = "11000000.10101000.00000000.00000001";
-  subnet_dec = "";
-  subnet_bin = "";
-  broadcast_dec = "";
-  broadcast_bin = "";
-  netID_de = "";
-  netID_bin = "";
-  firstIP_dec = "";
-  firstIP_bin = "";
-  lastIP_dec = "";
-  lastIP_bin = "";
 
-  out = ["IPv4", "Subnetmask:", "Broadcast:", "Net-ID:", "First Ip:", "Last Ip:"]
+
+  // 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 = "";
+  prefix = 0;
+
+  outArr = ["IPv4", "Subnetmask:", "Broadcast:", "Net-ID:", "First Ip:", "Last Ip:"]
   constructor() {
+  }
 
+  onClick() {
+    var br = new Berechnung;
 
-    var arr = this.ipv4_dec.split(".");
-
-    arr.forEach(element => {
-      console.log(element)
-    });
-    var bb = new Berechnung();
-    bb.decToBin("192.168.0.1")
-
-
+    // Dict Zugriff
+    this.bin_dec_dict.ipv4_bin = br.decToBin(this.dec)
+    this.bin_dec_dict.subnet_bin = br.subNetMask(this.prefix)
   }
 
   ngOnInit(): void {
@@ -39,47 +50,4 @@ export class OutputComponent implements OnInit {
   }
 
 }
-class Berechnung {
-
-  binArr = new Array<string>;
-  decArr = new Array<string>;
-
-  // Convert dec Numbers to Binary
-  decToBin(number: string) {
-    this.decArr = number.split(".")
-    this.decArr.forEach(element => {
-      let tmp = (Number(element)).toString(2)
-      if (tmp.length < 8) {
-        let slicer = (8 - tmp.length);
-        tmp = "0".repeat(slicer) + tmp
-        console.log(element)
-      }
-      this.binArr.push(tmp);
-    });
-    return this.binArr.join(".")
-  }
-
-  subNetMask(prefix: number) {
-    let mask = ""
-    return mask;
-  }
-
-  broadCast(arr: any[]) {
-
-  }
-
-  netId(mask: string) {
-    let netId;
-    return netId;
-  }
-
-  minIp() {
-    return null;
-  }
-
-  max() {
-    return null;
-  }
-
-}