From 2e3fa8f1d9f8d0e25ba94f2795c832c2bef7e131 Mon Sep 17 00:00:00 2001
From: Marcin Czachurski <mczachurski@icloud.com>
Date: Fri, 17 Nov 2023 18:23:32 +0100
Subject: [PATCH] Add new pages

---
 src/app/components/angular-material.module.ts | 13 ++-
 .../core/header/header.component.html         | 81 +++++++++++++++--
 .../core/header/header.component.scss         |  6 ++
 src/app/pages/categories/categories.page.html |  5 ++
 src/app/pages/categories/categories.page.scss |  0
 src/app/pages/categories/categories.page.ts   | 13 +++
 src/app/pages/editors/editors.page.html       |  5 ++
 src/app/pages/editors/editors.page.scss       |  0
 src/app/pages/editors/editors.page.ts         | 13 +++
 src/app/pages/pages-routing.module.ts         |  8 ++
 src/app/pages/pages.module.ts                 | 16 +++-
 .../pages/preferences/preferences.page.html   | 89 +++++++++++++++++++
 .../pages/preferences/preferences.page.scss   | 29 ++++++
 src/app/pages/preferences/preferences.page.ts | 55 ++++++++++++
 src/app/pages/trending/trending.page.html     |  5 ++
 src/app/pages/trending/trending.page.scss     |  0
 src/app/pages/trending/trending.page.ts       | 13 +++
 17 files changed, 339 insertions(+), 12 deletions(-)
 create mode 100644 src/app/pages/categories/categories.page.html
 create mode 100644 src/app/pages/categories/categories.page.scss
 create mode 100644 src/app/pages/categories/categories.page.ts
 create mode 100644 src/app/pages/editors/editors.page.html
 create mode 100644 src/app/pages/editors/editors.page.scss
 create mode 100644 src/app/pages/editors/editors.page.ts
 create mode 100644 src/app/pages/preferences/preferences.page.html
 create mode 100644 src/app/pages/preferences/preferences.page.scss
 create mode 100644 src/app/pages/preferences/preferences.page.ts
 create mode 100644 src/app/pages/trending/trending.page.html
 create mode 100644 src/app/pages/trending/trending.page.scss
 create mode 100644 src/app/pages/trending/trending.page.ts

diff --git a/src/app/components/angular-material.module.ts b/src/app/components/angular-material.module.ts
index 7c6039e..247937a 100644
--- a/src/app/components/angular-material.module.ts
+++ b/src/app/components/angular-material.module.ts
@@ -25,6 +25,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatRadioModule } from '@angular/material/radio';
 
 @NgModule({
     imports: [
@@ -53,7 +56,10 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
         MatNativeDateModule,
         MatCheckboxModule,
         MatStepperModule,
-        MatButtonToggleModule
+        MatButtonToggleModule,
+        MatBadgeModule,
+        MatSlideToggleModule,
+        MatRadioModule
     ],
     exports: [
         MatToolbarModule,
@@ -81,7 +87,10 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
         MatNativeDateModule,
         MatCheckboxModule,
         MatStepperModule,
-        MatButtonToggleModule
+        MatButtonToggleModule,
+        MatBadgeModule,
+        MatSlideToggleModule,
+        MatRadioModule
     ]
 })
 export class AngularMaterialModule { }
diff --git a/src/app/components/core/header/header.component.html b/src/app/components/core/header/header.component.html
index 38a7a69..0152d99 100644
--- a/src/app/components/core/header/header.component.html
+++ b/src/app/components/core/header/header.component.html
@@ -7,22 +7,83 @@
             <button mat-button [routerLink]="['/login']">Log in</button>
         </ng-container>
         <ng-container *ngIf="user">
+            <ng-container *ngIf="deviceResolution === resolution.handsetLandscape || deviceResolution === resolution.tablet || deviceResolution === resolution.browser">
+                <ng-container *ngIf="deviceResolution === resolution.handsetLandscape">
+                    <button mat-icon-button color="primary" [routerLink]="['/trending']" aria-label="Trending">
+                        <mat-icon>timeline</mat-icon>
+                    </button>
+                    <button mat-icon-button color="primary" [routerLink]="['/editors']" aria-label="Editor's choice">
+                        <mat-icon>stars</mat-icon>
+                    </button>
+                    <button mat-icon-button color="primary" [routerLink]="['/categories']" aria-label="Categories">
+                        <mat-icon>loyalty</mat-icon>
+                    </button>
+                </ng-container>
+
+
+                <ng-container *ngIf="deviceResolution === resolution.tablet || deviceResolution === resolution.browser">
+                    <button mat-button color="primary" [routerLink]="['/trending']" aria-label="Trending" class="margin-right-5">
+                        <mat-icon>timeline</mat-icon> Trending
+                    </button>
+                    <button mat-button color="primary" [routerLink]="['/editors']" aria-label="Editor's choice" class="margin-right-5">
+                        <mat-icon>stars</mat-icon> Editor's choice
+                    </button>
+                    <button mat-button color="primary" [routerLink]="['/categories']" aria-label="Categories" class="margin-right-5">
+                        <mat-icon>loyalty</mat-icon> Categories
+                    </button>
+                </ng-container>
+            </ng-container>
+
             <div class="flex-spacer"></div>
 
-            <button *ngIf="deviceResolution === resolution.browser" mat-stroked-button color="primary" class="margin-right-10" [routerLink]="['/upload']">
-                <mat-icon>arrow_upward</mat-icon> Upload
-            </button>
+            <ng-container *ngIf="deviceResolution === resolution.handsetLandscape || deviceResolution === resolution.tablet || deviceResolution === resolution.browser">
+                <button *ngIf="deviceResolution === resolution.handsetLandscape" mat-icon-button color="primary" [routerLink]="['/upload']" aria-label="Upload">
+                    <mat-icon>arrow_upward</mat-icon>
+                </button>
+                <button *ngIf="deviceResolution === resolution.tablet || deviceResolution === resolution.browser" mat-stroked-button color="primary" class="margin-right-10" [routerLink]="['/upload']">
+                    <mat-icon>arrow_upward</mat-icon> Upload
+                </button>
+            </ng-container>
 
-            <button *ngIf="deviceResolution !== resolution.browser" mat-icon-button color="primary" [routerLink]="['/upload']">
-                <mat-icon>arrow_upward</mat-icon>
-            </button>
+            <ng-container *ngIf="deviceResolution === resolution.handsetPortrait">
+                <button mat-icon-button [matMenuTriggerFor]="discover" color="primary" aria-label="More options">
+                    <mat-icon>menu</mat-icon>
+                </button>
+                <mat-menu #discover="matMenu">
+                    <button mat-menu-item [routerLink]="['/trending']" aria-label="Trending">
+                        <mat-icon>timeline</mat-icon>
+                        <span>Trending</span>
+                    </button>
+                    <button mat-menu-item [routerLink]="['/editors']" aria-label="Editor's choice">
+                        <mat-icon>stars</mat-icon>
+                        <span>Editor's choice</span>
+                    </button>
+                    <button mat-menu-item [routerLink]="['/categories']" aria-label="Categories">
+                        <mat-icon>loyalty</mat-icon>
+                        <span>Categories</span>
+                    </button>
+
+                    <mat-divider></mat-divider>
 
-            <button mat-icon-button color="primary" [routerLink]="['/search']" aria-label="Search">
+                    <button mat-menu-item [routerLink]="['/upload']" aria-label="Upload">
+                        <mat-icon>arrow_upward</mat-icon>
+                        <span>Upload</span>
+                    </button>
+                    <button mat-menu-item [routerLink]="['/search']" aria-label="Search">
+                        <mat-icon>search</mat-icon>
+                        <span>Search</span>
+                    </button>
+                </mat-menu>
+            </ng-container>
+
+            <mat-divider class="menu-divider" [vertical]="true"></mat-divider>
+
+            <button *ngIf="deviceResolution !== resolution.handsetPortrait" mat-icon-button color="primary" [routerLink]="['/search']" aria-label="Search">
                 <mat-icon>search</mat-icon>
             </button>
 
             <button mat-icon-button color="primary" [routerLink]="['/notifications']" aria-label="Notifications">
-                <mat-icon>notifications_none</mat-icon>
+                <mat-icon matBadge="15" matBadgeColor="warn" matBadgeSize="small" aria-hidden="false">notifications_none</mat-icon>
             </button>
 
             <div>
@@ -52,6 +113,10 @@
                         <mat-icon>account_circle</mat-icon>
                         <span>Account</span>
                     </button>
+                    <button mat-menu-item [routerLink]="['/preferences']" aria-label="Preferences">
+                        <mat-icon>build</mat-icon>
+                        <span>Preferences</span>
+                    </button>
                     <button *ngIf="isAdministrator()" mat-menu-item [routerLink]="['/settings']" aria-label="Settings">
                         <mat-icon>settings</mat-icon>
                         <span>Settings</span>
diff --git a/src/app/components/core/header/header.component.scss b/src/app/components/core/header/header.component.scss
index f040b29..dcf7ffe 100644
--- a/src/app/components/core/header/header.component.scss
+++ b/src/app/components/core/header/header.component.scss
@@ -9,6 +9,12 @@ mat-toolbar {
   height: 64px !important;
 }
 
+.menu-divider {
+    height: 24px;
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
 .avatar {
     border-radius: 50%;
 }
diff --git a/src/app/pages/categories/categories.page.html b/src/app/pages/categories/categories.page.html
new file mode 100644
index 0000000..5c27e35
--- /dev/null
+++ b/src/app/pages/categories/categories.page.html
@@ -0,0 +1,5 @@
+<div *ngIf="isReady" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <section>
+        <h1>Categories</h1>
+    </section>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/categories/categories.page.scss b/src/app/pages/categories/categories.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/categories/categories.page.ts b/src/app/pages/categories/categories.page.ts
new file mode 100644
index 0000000..57631ed
--- /dev/null
+++ b/src/app/pages/categories/categories.page.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { fadeInAnimation } from "src/app/animations/fade-in.animation";
+import { Responsive } from "src/app/common/responsive";
+
+@Component({
+    selector: 'app-categories',
+    templateUrl: './categories.page.html',
+    styleUrls: ['./categories.page.scss'],
+    animations: fadeInAnimation
+})
+export class CategoriesPage extends Responsive {
+    isReady = true;
+}
diff --git a/src/app/pages/editors/editors.page.html b/src/app/pages/editors/editors.page.html
new file mode 100644
index 0000000..319bdf9
--- /dev/null
+++ b/src/app/pages/editors/editors.page.html
@@ -0,0 +1,5 @@
+<div *ngIf="isReady" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <section>
+        <h1>Editor's choice</h1>
+    </section>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/editors/editors.page.scss b/src/app/pages/editors/editors.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/editors/editors.page.ts b/src/app/pages/editors/editors.page.ts
new file mode 100644
index 0000000..79473e8
--- /dev/null
+++ b/src/app/pages/editors/editors.page.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { fadeInAnimation } from "src/app/animations/fade-in.animation";
+import { Responsive } from "src/app/common/responsive";
+
+@Component({
+    selector: 'app-editors',
+    templateUrl: './editors.page.html',
+    styleUrls: ['./editors.page.scss'],
+    animations: fadeInAnimation
+})
+export class EditorsPage extends Responsive {
+    isReady = true;
+}
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index 801f55f..fd08e91 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -22,6 +22,10 @@ import { StatusPage } from './status/status.page';
 import { NotificationsPage } from './notifications/notifications.page';
 import { InvitationsPage } from './invitations/invitations.page';
 import { SettingsPage } from './settings/settings.page';
+import { TrendingPage } from './trending/trending.page';
+import { EditorsPage } from './editors/editors.page';
+import { CategoriesPage } from './categories/categories.page';
+import { PreferencesPage } from './preferences/preferences.page';
 
 const routes: Routes = [
     { path: 'login', component: LoginPage, canActivate: [ LoggedOutGuardService ] },
@@ -41,6 +45,10 @@ const routes: Routes = [
     { path: 'notifications', component: NotificationsPage, canActivate: [ AuthorizationGuardService ] },
     { path: 'invitations', component: InvitationsPage, canActivate: [ AuthorizationGuardService ] },
     { path: 'settings', component: SettingsPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'trending', component: TrendingPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'editors', component: EditorsPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'categories', component: CategoriesPage, canActivate: [ AuthorizationGuardService ] },
+    { path: 'preferences', component: PreferencesPage, canActivate: [ AuthorizationGuardService ] },
     { path: ':userName', component: ProfilePage, children: [
         { path: 'following', component: ProfilePage },
         { path: 'followers', component: ProfilePage }
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index 94621dc..1dc91e1 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -24,6 +24,10 @@ import { StatusPage } from './status/status.page';
 import { NotificationsPage } from './notifications/notifications.page';
 import { InvitationsPage } from './invitations/invitations.page';
 import { SettingsPage } from './settings/settings.page';
+import { TrendingPage } from './trending/trending.page';
+import { EditorsPage } from './editors/editors.page';
+import { CategoriesPage } from './categories/categories.page';
+import { PreferencesPage } from './preferences/preferences.page';
 
 @NgModule({
     imports: [
@@ -51,7 +55,11 @@ import { SettingsPage } from './settings/settings.page';
         StatusPage,
         NotificationsPage,
         InvitationsPage,
-        SettingsPage
+        SettingsPage,
+        TrendingPage,
+        EditorsPage,
+        CategoriesPage,
+        PreferencesPage
     ],
     exports: [
         ComponentsModule,
@@ -74,7 +82,11 @@ import { SettingsPage } from './settings/settings.page';
         SearchPage,
         NotificationsPage,
         InvitationsPage,
-        SettingsPage
+        SettingsPage,
+        TrendingPage,
+        EditorsPage,
+        CategoriesPage,
+        PreferencesPage
     ]
 })
 export class PagesModule { }
diff --git a/src/app/pages/preferences/preferences.page.html b/src/app/pages/preferences/preferences.page.html
new file mode 100644
index 0000000..392c5a6
--- /dev/null
+++ b/src/app/pages/preferences/preferences.page.html
@@ -0,0 +1,89 @@
+<div *ngIf="isReady && preferences" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <div class="flex-row flex-space-around">
+        <div class="preferences-container width-100">
+            <section>
+                <h1>Preferences</h1>
+            </section>
+
+            <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
+
+                <mat-card *ngIf="preferences" class="preferences-card" appearance="outlined">
+                    <mat-card-content>
+                        <h4>Theme</h4>
+                        <div class="margin-bottom-20">
+                            <mat-radio-group name="theme" [(ngModel)]="theme" aria-label="Select theme">
+                                <div>
+                                    <mat-radio-button value="1" [disableRipple]="true"> Light</mat-radio-button>
+                                </div>
+                                <div>
+                                    <mat-radio-button value="2" [disableRipple]="true"> Dark</mat-radio-button>
+                                </div>
+                            </mat-radio-group>
+                        </div>
+
+                        <mat-divider></mat-divider>
+
+                        <div class="margin-top-20">
+                            <h4>Avatar</h4>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-radio-group name="avatar" [(ngModel)]="avatar" aria-label="Select avatar">
+                                <div>
+                                    <mat-radio-button value="1" [disableRipple]="true"> Circle</mat-radio-button>
+                                </div>
+                                <div>
+                                    <mat-radio-button value="2" [disableRipple]="true"> Rounded rectangle</mat-radio-button>
+                                </div>
+                            </mat-radio-group>
+                        </div>
+
+                        <mat-divider></mat-divider>
+
+                        <div class="margin-top-20">
+                            <h4>Media settings</h4>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="alwaysShowNSFW">
+                                Always show NSFW <div class="text-muted fs-90">Force show all NSFW (sensitive) media without warnings.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showAlternativeText">
+                                Show alternative text <div class="text-muted fs-90">Show alternative text if present on status details screen.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showAvatars">
+                                Show avatars <div class="text-muted fs-90">Avatars will be displayed on timelines.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showFavourites">
+                                Show favourites <div class="text-muted fs-90">Favourites will be displayed on timelines.</div>
+                            </mat-slide-toggle>
+                        </div>
+
+                        <div class="margin-bottom-20">
+                            <mat-slide-toggle color="warn" [checked]="showAltIcon">
+                                Show ALT icon <div class="text-muted fs-90">ALT icon will be displayed on timelines.</div>
+                            </mat-slide-toggle>
+                        </div>
+                    </mat-card-content>
+
+                    <mat-card-actions>
+                        <div class="actions margin-top-20">
+                            <button type="submit" mat-raised-button color="primary" aria-label="Save">Save</button>
+                        </div>
+                    </mat-card-actions>
+                </mat-card>
+
+            </form>
+
+        </div>
+    </div>
+</div>
diff --git a/src/app/pages/preferences/preferences.page.scss b/src/app/pages/preferences/preferences.page.scss
new file mode 100644
index 0000000..4f84041
--- /dev/null
+++ b/src/app/pages/preferences/preferences.page.scss
@@ -0,0 +1,29 @@
+.preferences-container {
+    max-width: 640px;
+
+    mat-form-field {
+        width: 100%;
+    }
+    
+    ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+        height: 0;
+    }
+
+    .actions {
+        margin-left: 8px;
+        margin-right: 8px;
+        margin-bottom: 10px;
+    }
+
+    .rounded {
+        width: 32px;
+        height: 32px;
+        border-radius: 15%;
+    }
+
+    .circle {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+    }
+}
diff --git a/src/app/pages/preferences/preferences.page.ts b/src/app/pages/preferences/preferences.page.ts
new file mode 100644
index 0000000..35b85e4
--- /dev/null
+++ b/src/app/pages/preferences/preferences.page.ts
@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { fadeInAnimation } from "../../animations/fade-in.animation";
+import { MessagesService } from 'src/app/services/common/messages.service';
+import { EventType } from 'src/app/models/event-type';
+import { LoadingService } from 'src/app/services/common/loading.service';
+import { Responsive } from 'src/app/common/responsive';
+import { BreakpointObserver } from '@angular/cdk/layout';
+
+@Component({
+    selector: 'app-preferences',
+    templateUrl: './preferences.page.html',
+    styleUrls: ['./preferences.page.scss'],
+    animations: fadeInAnimation
+})
+export class PreferencesPage extends Responsive {
+    isReady = false;
+    preferences: string[] = [];
+    eventTypes = Object.values(EventType);
+
+    theme = '1';
+    avatar = '1';
+    alwaysShowNSFW = false;
+    showAlternativeText = false;
+    showAvatars = false;
+    showFavourites = false;
+    showAltIcon = false;
+
+    constructor(
+        private messageService: MessagesService,
+        private loadingService: LoadingService,
+        breakpointObserver: BreakpointObserver) {
+            super(breakpointObserver);
+    }
+
+    override async ngOnInit(): Promise<void> {
+        super.ngOnInit();
+
+        this.loadingService.showLoader();
+        // this.settings = await this.settingsService.get();
+        this.isReady = true;
+        this.loadingService.hideLoader();
+    }
+
+    async onSubmit(): Promise<void> {
+        try {
+            if (this.preferences) {
+                // await this.settingsService.put(this.settings);
+                this.messageService.showSuccess('Settings was saved.');
+            }
+        } catch (error) {
+            console.error(error);
+            this.messageService.showServerError(error);
+        }
+    }
+}
diff --git a/src/app/pages/trending/trending.page.html b/src/app/pages/trending/trending.page.html
new file mode 100644
index 0000000..2cfa4dc
--- /dev/null
+++ b/src/app/pages/trending/trending.page.html
@@ -0,0 +1,5 @@
+<div *ngIf="isReady" @fadeIn [ngClass]="{ 'padding-30': !isHandset, 'padding-10': isHandset }">
+    <section>
+        <h1>Trending</h1>
+    </section>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/trending/trending.page.scss b/src/app/pages/trending/trending.page.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/trending/trending.page.ts b/src/app/pages/trending/trending.page.ts
new file mode 100644
index 0000000..5b37899
--- /dev/null
+++ b/src/app/pages/trending/trending.page.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+import { fadeInAnimation } from "src/app/animations/fade-in.animation";
+import { Responsive } from "src/app/common/responsive";
+
+@Component({
+    selector: 'app-trending',
+    templateUrl: './trending.page.html',
+    styleUrls: ['./trending.page.scss'],
+    animations: fadeInAnimation
+})
+export class TrendingPage extends Responsive {
+    isReady = true;
+}