added frontend template

frontend/src/app/_service/api.service.spec.ts

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

frontend/src/app/_service/api.service.ts

@@ -0,0 +1,53 @@
+import {Injectable} from '@angular/core';
+import {Observable, of} from "rxjs";
+import {ApiResponse} from "../_data/data";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApiService {
+  constructor() {
+  }
+
+  public getServiceStates(): Observable<ApiResponse> {
+    return of({
+      state: "maintenance",
+      groups: [{
+        id: 'default',
+        name: 'Some Group',
+        state: "outage",
+        services: [{
+          id: 'nextcloud',
+          name: 'Nextcloud',
+          url: "https://sp-codes.de",
+          state: "operational"
+        }, {
+          id: 'synapse',
+          name: 'Synapse',
+          url: "https://sp-codes.de",
+          state: "outage"
+        }, {
+          id: 'searx',
+          name: 'Searx',
+          url: "https://sp-codes.de",
+          state: "maintenance"
+        }]
+      }, {
+        id: 'test',
+        name: 'Test',
+        state: "operational",
+        services: [{
+          id: 'nextcloud',
+          name: 'Nextcloud',
+          url: "https://sp-codes.de",
+          state: "operational"
+        }, {
+          id: 'synapse',
+          name: 'Synapse',
+          url: "https://sp-codes.de",
+          state: "operational"
+        }]
+      }]
+    });
+  }
+}