Rework folder structure in frontend

Pages are now grouped per group they appear in on in the header (where possible)
Utilities used by multiple pages in the project are grouped in folders such as services/pipes/etc

frontend/src/app/pages/altitude/team/team.component.html

@@ -0,0 +1,72 @@
+<ng-container>
+  <app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">>
+    <div class="title" header-content>
+      <h1>Staffing Team</h1>
+      <h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to
+        create Altitude, to create home. This is where the magic happens.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Management</h2>
+        <div *ngFor="let member of getTeamMembers('owner') | async" class="member">
+          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+               height="160" width="160" style="width: 160px;">
+          <h2>{{ member.name }}</h2>
+          <p>Owner</p>
+        </div>
+        <div *ngFor="let member of getTeamMembers('manager') | async" class="member">
+          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+               height="160" width="160" style="width: 160px;">
+          <h2>{{ member.name }}</h2>
+          <p>Manager</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Admins</h2>
+        <div *ngFor="let member of getTeamMembers('admin') | async" class="member">
+          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+               height="160" width="160" style="width: 160px;">
+          <h2>{{ member.name }}</h2>
+          <p>Admin</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Head Moderators</h2>
+        <div *ngFor="let member of getTeamMembers('headmod') | async" class="member">
+          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+               height="160" width="160" style="width: 160px;">
+          <h2>{{ member.name }}</h2>
+          <p>Head Mod</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Moderators</h2>
+        <div *ngFor="let member of getTeamMembers('moderator') | async" class="member">
+          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+               height="160" width="160" style="width: 160px;">
+          <h2>{{ member.name }}</h2>
+        </div>
+      </div>
+    </section>
+    <section *ngIf="(getTeamMembers('trainee') | async)?.length  ?? 0 > 0" class="darkmodeSection">
+      <div class="container teamContainer">
+        <h2 class="sectionTitle">Trainees</h2>
+        <div *ngFor="let member of getTeamMembers('trainee') | async" class="member">
+          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
+               height="160" width="160" style="width: 160px;">
+          <h2>{{ member.name }}</h2>
+        </div>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/pages/altitude/team/team.component.scss

@@ -0,0 +1,26 @@
+.sectionTitle {
+  flex: 0 0 100%;
+  text-align: center;
+  padding-bottom: 20px;
+  font-size: 2em;
+}
+
+.member {
+  width: 33%;
+  min-width: 250px;
+  padding-bottom: 50px;
+  text-align: center;
+}
+
+.member img {
+  padding-bottom: 15px;
+}
+
+.member p {
+  font-family: 'opensans-bold', sans-serif;
+}
+
+.teamContainer {
+  padding: 50px 0 0 0;
+  justify-content: center;
+}

frontend/src/app/pages/altitude/team/team.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TeamComponent } from './team.component';
+
+describe('TeamComponent', () => {
+  let component: TeamComponent;
+  let fixture: ComponentFixture<TeamComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TeamComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TeamComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/pages/altitude/team/team.component.ts

@@ -0,0 +1,53 @@
+import {Component} from '@angular/core';
+import {ScrollService} from '@services/scroll.service';
+import {BASE_PATH, Player, TeamService} from '@api';
+import {CommonModule, NgOptimizedImage} from '@angular/common';
+import {HeaderComponent} from '@header/header.component';
+import {CookieService} from 'ngx-cookie-service';
+import {map, Observable, shareReplay} from 'rxjs';
+import {environment} from '@environment';
+
+@Component({
+  selector: 'app-team',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    NgOptimizedImage
+  ],
+  providers: [
+    CookieService,
+    {provide: BASE_PATH, useValue: environment.apiUrl}
+  ],
+
+  templateUrl: './team.component.html',
+  styleUrl: './team.component.scss'
+})
+export class TeamComponent {
+
+  private teamMembersCache: { [key: string]: Observable<Player[]> } = {};
+
+  constructor(public scrollService: ScrollService, public teamApi: TeamService) {
+  }
+
+  public getTeamMembers(team: string): Observable<Player[]> {
+    if (!this.teamMembersCache[team]) {
+      this.teamMembersCache[team] = this.teamApi.getTeamMembers(team).pipe(
+        map(res => this.removeDuplicates(res)),
+        shareReplay(1)
+      );
+    }
+    return this.teamMembersCache[team];
+  }
+
+  private removeDuplicates(array: Player[]): Player[] {
+    return array.filter((player, index, self) =>
+      index === self.findIndex((p) => p.uuid === player.uuid)
+    );
+  }
+
+  public getAvatarUrl(entry: Player): string {
+    let uuid = entry.uuid.replace('-', '');
+    return `https://crafatar.com/avatars/${uuid}?overlay`;
+  }
+}