finished technologies page + added animations

src/app/sites/technologies/technologies.component.ts

@@ -0,0 +1,65 @@
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import Chart from 'chart.js/auto';
+import {BackendService} from "../../services/backend.service";
+import {Technology} from "../../models/technology";
+import {DeviceDetectorService} from "ngx-device-detector";
+
+@Component({
+  selector: 'app-technologies',
+  templateUrl: './technologies.component.html',
+  styleUrls: ['./technologies.component.scss']
+})
+export class TechnologiesComponent implements AfterViewInit {
+
+  @ViewChild('chard') chartRef: ElementRef;
+  public technologies: Technology[];
+
+  public constructor(public deviceService: DeviceDetectorService, private backend: BackendService) {}
+
+  async ngAfterViewInit() {
+    const projects = await this.backend.getProjects();
+    const data: {lang: string, count: number}[] = [];
+
+    for (let project of projects) {
+      for (let lang of project.languages) {
+        if (lang.class == "angularjs") {
+          project.languages.push({label: "HTML", class: ""}, {label: "CSS", class: ""}, {label: "TypeScript", class: ""});
+        }
+
+        if (lang.class == "dotnetcore") {
+          project.languages.push({label: "C#", class: ''});
+        }
+
+        let element = data.filter(row => row.lang == lang.label)[0];
+        if (element == undefined) {
+          element = {lang: lang.label, count: 0};
+          data.push(element);
+        }
+
+
+
+        element.count++;
+      }
+    }
+
+    Chart.defaults.color = "#FFF";
+    new Chart(
+      this.chartRef.nativeElement,
+      {
+        type: "doughnut",
+        data: {
+          labels: data.map(row => row.lang),
+          datasets: [
+            {
+              label: "Projekte",
+              data: data.map(row => row.count)
+            }
+          ]
+        }
+      }
+    );
+
+    this.technologies = await this.backend.getTechnologies();
+  }
+
+}