Add footer and instance/statistics info page

src/app/api/client.service.ts

@@ -16,6 +16,7 @@ import {Contest} from "./types/contests/contest";
 import {Score} from "./types/levels/score";
 import { LevelRelations } from './types/levels/level-relations';
 import { Asset } from './types/asset';
+import { Statistics } from './types/statistics';
 import { LevelUpdateRequest } from './types/levels/level-update-request';
 
 export const defaultPageSize: number = 40;
@@ -26,6 +27,7 @@ export const defaultPageSize: number = 40;
 export class ClientService extends ApiImplementation {
   private readonly instance: LazySubject<Instance>;
   private readonly categories: LazySubject<ListWithData<LevelCategory>>;
+  private statistics: LazySubject<Statistics>;
 
   private usersCache: User[] = [];
 
@@ -34,7 +36,9 @@ export class ClientService extends ApiImplementation {
     this.instance = new LazySubject<Instance>(() => this.http.get<Instance>("/instance"));
     this.instance.tryLoad();
 
-    this.categories = new LazySubject<ListWithData<LevelCategory>>(() => this.http.get<ListWithData<LevelCategory>>("/levels?includePreviews=true"))
+    this.categories = new LazySubject<ListWithData<LevelCategory>>(() => this.http.get<ListWithData<LevelCategory>>("/levels?includePreviews=true"));
+
+    this.statistics = new LazySubject<Statistics>(() => this.http.get<Statistics>("/statistics"));
   }
 
   getInstance() {
@@ -45,6 +49,14 @@ export class ClientService extends ApiImplementation {
     return this.categories.asObservable();
   }
 
+  getStatistics(refresh: boolean) {
+    if (refresh) {
+      this.statistics = new LazySubject<Statistics>(() => this.http.get<Statistics>("/statistics"));
+    }
+
+    return this.statistics.asObservable();
+  }
+
   getRoomListing() {
     return this.http.get<ListWithData<Room>>("/rooms");
   }

src/app/api/types/asset-config-flags.ts

@@ -0,0 +1,17 @@
+export interface AssetConfigFlags {
+    // For some reason these are serialized as capitalized
+    Dangerous: boolean;
+    Media: boolean;
+    Modded: boolean;
+}
+
+export function blockedFlagsAsString(flags: AssetConfigFlags): String {
+    let flagList: String[] = [];
+    if (flags.Media == true) flagList.push("Media");
+    if (flags.Modded == true) flagList.push("Modded");
+    if (flags.Dangerous == true) flagList.push("Dangerous");
+
+    let flagStr: String = flagList.join(", ");
+    if (flagStr.length === 0) flagStr = "None";
+    return flagStr;
+}

src/app/api/types/contact-info.ts

@@ -0,0 +1,6 @@
+export interface ContactInfo {
+    adminName: string;
+    emailAddress: string;
+    discordServerInvite: string;
+    adminDiscordUsername: string;
+}

src/app/api/types/instance.ts

@@ -1,20 +1,28 @@
 import {Announcement} from "./announcement";
+import { AssetConfigFlags } from "./asset-config-flags";
+import { ContactInfo } from "./contact-info";
 import {Contest} from "./contests/contest";
 
 export interface Instance {
     instanceName: string;
     instanceDescription: string;
+    websiteLogoUrl: string;
 
     softwareName: string;
     softwareVersion: string;
     softwareType: string;
+    softwareSourceUrl: string;
+    softwareLicenseName: string;
+    softwareLicenseUrl: string;
 
     registrationEnabled: boolean;
-    maximumAssetSafetyLevel: number;
+    blockedAssetFlags: AssetConfigFlags;
+    blockedAssetFlagsForTrustedUsers: AssetConfigFlags;
 
     announcements: Announcement[];
     maintenanceModeEnabled: boolean;
     grafanaDashboardUrl: string | null;
 
     activeContest: Contest | null;
+    contactInfo: ContactInfo;
 }

src/app/api/types/request-statistics.ts

@@ -1,6 +1,5 @@
 export interface RequestStatistics {
     totalRequests: number
     apiRequests: number
-    legacyApiRequests: number
     gameRequests: number
 }

src/app/api/types/statistics.ts

@@ -2,6 +2,7 @@ import {RequestStatistics} from "./request-statistics";
 
 export interface Statistics {
     totalLevels: number
+    moddedLevels: number
     totalUsers: number
     activeUsers: number
     totalPhotos: number

src/app/app.component.html

@@ -1,12 +1,18 @@
-@if(!(layout.isMobile | async)) {
-    <app-header></app-header>
-} @else {
-    <app-header-mobile></app-header-mobile>
-}
-@defer (when bannerService.banners.length > 0) {
-    <app-popup-banner-container></app-popup-banner-container>
-}
-<div class="container mx-auto bg-backdrop p-5 border-divider"
-    [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
-    <router-outlet #o=outlet />
+<div class="flex flex-col min-h-screen">
+    <div class="flex-grow">
+        @if(!(layout.isMobile | async)) {
+            <app-header></app-header>
+        } @else {
+            <app-header-mobile></app-header-mobile>
+        }
+        @defer (when bannerService.banners.length > 0) {
+            <app-popup-banner-container></app-popup-banner-container>
+        }
+        <div class="container mx-auto bg-backdrop p-5 border-divider"
+            [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
+            <router-outlet #o=outlet />
+        </div>
+    </div>
+
+    <app-footer class="container mx-auto"></app-footer>
 </div>

src/app/app.component.ts

@@ -12,12 +12,13 @@ import {animate, group, query, style, transition, trigger} from "@angular/animat
 import {LayoutService} from "./services/layout.service";
 import {AsyncPipe} from "@angular/common";
 import {HeaderMobileComponent} from "./components/ui/header/mobile/header-mobile.component";
+import { FooterComponent } from "./components/ui/footer.component";
 
 const fadeLength: string = "100ms";
 
 @Component({
     selector: 'app-root',
-    imports: [RouterOutlet, HeaderComponent, PopupBannerContainerComponent, AsyncPipe, HeaderMobileComponent],
+    imports: [RouterOutlet, HeaderComponent, PopupBannerContainerComponent, AsyncPipe, HeaderMobileComponent, FooterComponent],
     templateUrl: './app.component.html',
     animations: [
         trigger('routeAnimations', [

src/app/app.routes.ts

@@ -90,6 +90,11 @@ export const routes: Routes = [
         loadComponent: () => import('./pages/contest-listing/contest-listing.component').then(x => x.ContestListingComponent),
         data: {title: "Contests"},
     },
+    {
+        path: 'instance',
+        loadComponent: () => import('./pages/instance-info/instance-info.component').then(x => x.InstanceInfoComponent),
+        data: {title: "About Us"},
+    },
     ...appendDebugRoutes(),
     // KEEP THIS ROUTE LAST! It handles pages that do not exist.
     {

src/app/components/ui/divider.component.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'app-divider',
     imports: [],
     template: `
-    <div class="my-3 h-[3px] rounded-sm bg-divider drop-shadow-md"></div>
+    <div [class]="'my-3 h-[3px] rounded-sm drop-shadow-md ' + color"></div>
   `
 })
 export class DividerComponent {
-
+  @Input() color: String = "bg-divider";
 }

src/app/components/ui/footer.component.ts

@@ -0,0 +1,202 @@
+import { Component } from '@angular/core';
+import { NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
+import { ClientService } from '../../api/client.service';
+import { Instance } from '../../api/types/instance';
+import { BannerService } from '../../banners/banner.service';
+import { RefreshApiError } from '../../api/refresh-api-error';
+import { LayoutService } from '../../services/layout.service';
+import { VerticalDividerComponent } from "./vertical-divider.component";
+import { faArrowUp, faCertificate, faCodeFork, faEnvelope, faPlay, faSignIn, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { DividerComponent } from "./divider.component";
+import { getWebsiteRepoUrl } from '../../helpers/data-fetching';
+import { Statistics } from '../../api/types/statistics';
+import { StatisticComponent } from "./info/statistic.component";
+import { RouterLink } from "@angular/router";
+
+@Component({
+  selector: 'app-footer',
+  imports: [
+    VerticalDividerComponent,
+    DividerComponent,
+    NgTemplateOutlet,
+    FaIconComponent,
+    NgOptimizedImage,
+    StatisticComponent,
+    RouterLink
+],
+  template: `
+    <footer class="mt-10 mb-5 mx-4">
+      @if (instance != null) {
+        <ng-template #instanceInfo>
+          <div class="flex flex-col gap-y-1">
+            <p class="text-3xl">
+              <img [ngSrc]="instance.websiteLogoUrl" class="inline aspect-square object-cover rounded" 
+                alt="Server icon" width="30" height="30"
+                (error)="iconErr($event.target)" loading="lazy">
+              {{ instance.instanceName }}
+            </p>
+            <p class="text-wrap"> {{instance.instanceDescription}}</p>
+
+            @if (isMobile) {
+              <app-divider color="bg-foreground"></app-divider>
+            }
+            @else {
+              <div class="pt-3"></div>
+            }
+
+            <div>
+              @if (statistics != null) {
+                <div class="flex flex-col gap-y-1">
+                  <p class="text-3xl">Global Statistics</p>
+                  <div class="flex flex-wrap gap-x-1.5">
+                    <app-statistic [value]=statistics.totalLevels name="Total Levels" [icon]=faCertificate></app-statistic>
+                    <app-statistic [value]=statistics.totalUsers name="Total Users" [icon]=faUser></app-statistic>
+                    <app-statistic [value]=statistics.totalEvents name="Total Events" [icon]=faPlay></app-statistic>
+                    <app-statistic [value]=statistics.requestStatistics.apiRequests name="API Requests" [icon]=faArrowUp></app-statistic>
+                  </div>
+                  <a routerLink="/instance" class="text-link hover:text-link-hover hover:underline">
+                    More stats
+                  </a>
+                </div>
+              } 
+              @else {
+                <div class="flex flex-col">
+                  <p class="text-2xl text-wrap">Failed to retrieve statistics</p>
+                  <p>{{ statisticsError ?? "" }}</p>
+                </div>
+              }             
+            </div>
+          </div>
+        </ng-template>
+
+        <ng-template #contactInfo>
+          <div class="flex flex-col gap-y-1">
+            <p class="text-3xl">Get In Touch</p>
+            <a [href]="'mailto:' + instance.contactInfo.emailAddress" class="text-link hover:text-link-hover hover:underline">
+              <fa-icon class="pr-1" [icon]="faEnvelope"></fa-icon>
+              Email Us ({{ instance.contactInfo.emailAddress }})
+            </a>
+            <a [href]="instance.contactInfo.discordServerInvite" class="text-link hover:text-link-hover hover:underline">
+              <fa-icon class="pr-1" [icon]="faSignIn"></fa-icon>
+              Join Our Discord Server
+            </a>
+            <p>
+              You can also contact <span class="italic">{{ instance.contactInfo.adminName }}</span> on Discord at <span class="italic">{{ instance.contactInfo.adminDiscordUsername }}</span>
+            </p>
+          </div>
+        </ng-template>
+
+        <ng-template #softwareInfo>
+          <div class="flex flex-col gap-y-1">
+            <p class="text-3xl">The Software</p>
+            <a [href]="websiteRepoUrl" class="text-link hover:text-link-hover hover:underline">
+              <fa-icon class="pr-1" [icon]="faCodeFork"></fa-icon>
+              Website Repository
+            </a>
+            <a [href]="instance.softwareSourceUrl" class="text-link hover:text-link-hover hover:underline">
+              <fa-icon class="pr-1" [icon]="faCodeFork"></fa-icon>
+              Server Repository
+            </a>
+            <p class="text-wrap">
+              Server license:
+              <a [href]="instance.softwareLicenseUrl" class="text-link hover:text-link-hover hover:underline">
+                <fa-icon class="pr-1"></fa-icon>
+                {{ instance.softwareLicenseName }}
+              </a>
+            </p>
+            <p>
+              Server software: <span class="italic">{{instance.softwareName}} ({{instance.softwareType}})</span>
+            </p>
+            <p>
+              Server version: <span class="word-wrap-and-break italic">v{{ instance.softwareVersion }}</span>
+            </p>
+          </div>
+        </ng-template>
+
+        @if (isMobile) {
+          <div class="flex flex-col gap-y-1 pb-10">
+            <ng-container *ngTemplateOutlet="instanceInfo"></ng-container>
+            <app-divider color="bg-foreground"></app-divider>
+            <ng-container *ngTemplateOutlet="contactInfo"></ng-container>
+            <app-divider color="bg-foreground"></app-divider>
+            <ng-container *ngTemplateOutlet="softwareInfo"></ng-container>
+          </div>
+        }
+        @else {
+            <div class="flex flex-row flex-grow gap-x-3">
+              <div class="w-full mb-20">
+                <ng-container *ngTemplateOutlet="instanceInfo"></ng-container>
+              </div>
+              <app-vertical-divider color="bg-foreground" height="h-full"></app-vertical-divider>
+              <div class="w-full mb-20">
+                <ng-container *ngTemplateOutlet="contactInfo"></ng-container>
+              </div>
+              <app-vertical-divider color="bg-foreground" height="h-full"></app-vertical-divider>
+              <div class="w-full mb-20">
+                <ng-container *ngTemplateOutlet="softwareInfo"></ng-container>
+              </div>
+            </div>
+        }
+      }
+      @else {
+        <div class="flex flex-col">
+          <p class="text-3xl">Failed to retrieve instance data</p>
+          <p>{{ instanceError ?? "" }}</p>
+        </div>
+      }
+    </footer>
+  `
+})
+export class FooterComponent {
+  protected instance: Instance | undefined;
+  protected instanceError: String | undefined;
+
+  protected statistics: Statistics | undefined;
+  protected statisticsError: String | undefined;
+
+  protected isMobile: boolean = false;
+  protected websiteRepoUrl: String = getWebsiteRepoUrl();
+  protected iconError: boolean = false;
+
+  constructor(private client: ClientService, protected banner: BannerService, protected layout: LayoutService) {
+    this.layout.isMobile.subscribe(v => this.isMobile = v);
+
+    client.getInstance().subscribe({
+      error: error => {
+        const apiError: RefreshApiError | undefined = error.error?.error;
+        this.instanceError = apiError == null ? error.message : apiError.message;
+      },
+      next: response => {
+        this.instance = response;
+
+        // Only get stats after instance
+        client.getStatistics(false).subscribe({
+          error: error => {
+            const apiError: RefreshApiError | undefined = error.error?.error;
+            this.statisticsError = apiError == null ? error.message : apiError.message;
+          },
+          next: response => {
+            this.statistics = response
+          }
+        });
+      }
+    });
+  }
+
+  iconErr(img: EventTarget | null): void {
+    if(this.iconError) return;
+    this.iconError = true;
+
+    if(!(img instanceof HTMLImageElement)) return;
+    img.srcset = "/assets/logo.svg";
+  }
+
+  protected readonly faEnvelope = faEnvelope;
+  protected readonly faSignIn = faSignIn;
+  protected readonly faCodeFork = faCodeFork;
+  protected readonly faCertificate = faCertificate;
+  protected readonly faPlay = faPlay;
+  protected readonly faUser = faUser;
+  protected readonly faArrowUp = faArrowUp;
+}