diff --git a/src/app/component/header/header.component.ts b/src/app/component/header/header.component.ts
index 05cfc17..d5d96bb 100644
--- a/src/app/component/header/header.component.ts
+++ b/src/app/component/header/header.component.ts
@@ -8,14 +8,14 @@ import {SessionService} from '@shigde/core';
import {SidebarComponent} from '../sidebar/sidebar.component';
@Component({
- selector: 'app-header',
- imports: [
- AsyncPipe,
- NgIf,
- SidebarComponent
- ],
- templateUrl: './header.component.html',
- styleUrl: './header.component.scss'
+ selector: 'app-header',
+ imports: [
+ AsyncPipe,
+ NgIf,
+ SidebarComponent
+ ],
+ templateUrl: './header.component.html',
+ styleUrl: './header.component.scss'
})
export class HeaderComponent {
public readonly isUserLogin$: Observable;
@@ -25,4 +25,8 @@ export class HeaderComponent {
map((name) => name !== 'anonymous')
);
}
+
+ newStream() {
+ this.router.navigate(['/stream/new']);
+ }
}
diff --git a/src/app/component/sidebar/sidebar.component.html b/src/app/component/sidebar/sidebar.component.html
index 4629040..b4ed1a3 100644
--- a/src/app/component/sidebar/sidebar.component.html
+++ b/src/app/component/sidebar/sidebar.component.html
@@ -1,10 +1,10 @@
+
@@ -12,10 +12,10 @@
- - My Channel + My Channel
- - Settings + Settings
-
diff --git a/src/app/component/sidebar/sidebar.component.ts b/src/app/component/sidebar/sidebar.component.ts
index ad183a8..f5df34a 100644
--- a/src/app/component/sidebar/sidebar.component.ts
+++ b/src/app/component/sidebar/sidebar.component.ts
@@ -1,29 +1,37 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
import {AvatarComponent} from '../avatar/avatar.component';
import {SessionService} from '../../../../../shig-js-sdk/dist/core';
import {Router} from '@angular/router';
-import {map} from 'rxjs/operators';
-import {Observable} from 'rxjs';
+import {filter, Observable, tap} from 'rxjs';
import {AsyncPipe} from '@angular/common';
+import {User} from '@shigde/core';
+import {map} from 'rxjs/operators';
+
+export interface SidebarUser extends User {
+ domainName: string;
+}
@Component({
- selector: 'app-sidebar',
- imports: [
- AvatarComponent,
- AsyncPipe
- ],
- templateUrl: './sidebar.component.html',
- styleUrl: './sidebar.component.scss'
+ selector: 'app-sidebar',
+ imports: [
+ AvatarComponent,
+ AsyncPipe
+ ],
+ templateUrl: './sidebar.component.html',
+ styleUrl: './sidebar.component.scss'
})
export class SidebarComponent {
- public readonly userName$: Observable
; + public readonly user$: Observable ; constructor(private session: SessionService, private router: Router) { - this.userName$ = session.getUserName() + this.user$ = session.getUser().pipe( + filter(u => u != null), + map(u => ({...u, domainName: u.name + '@' + u.domain} as SidebarUser)), + ); } public logout(): void { - this.session.clearData() + this.session.clearData(); this.router.navigate(['login']); } diff --git a/src/app/component/theme-selection/theme-selection.component.html b/src/app/component/theme-selection/theme-selection.component.html new file mode 100644 index 0000000..f2790f0 --- /dev/null +++ b/src/app/component/theme-selection/theme-selection.component.html @@ -0,0 +1,36 @@ + + ++ diff --git a/src/app/component/theme-selection/theme-selection.component.scss b/src/app/component/theme-selection/theme-selection.component.scss new file mode 100644 index 0000000..758d5f6 --- /dev/null +++ b/src/app/component/theme-selection/theme-selection.component.scss @@ -0,0 +1,3 @@ +#theme-selection { + display: inline-block; +} diff --git a/src/app/component/theme-selection/theme-selection.component.spec.ts b/src/app/component/theme-selection/theme-selection.component.spec.ts new file mode 100644 index 0000000..dbb7275 --- /dev/null +++ b/src/app/component/theme-selection/theme-selection.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ThemeSelectionComponent } from './theme-selection.component'; + +describe('ThemeSelectionComponent', () => { + let component: ThemeSelectionComponent; + let fixture: ComponentFixture-
+
- + + +
- + + +
- + + +
; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ThemeSelectionComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ThemeSelectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/component/theme-selection/theme-selection.component.ts b/src/app/component/theme-selection/theme-selection.component.ts new file mode 100644 index 0000000..a10b466 --- /dev/null +++ b/src/app/component/theme-selection/theme-selection.component.ts @@ -0,0 +1,39 @@ +import {Component, OnInit} from '@angular/core'; +import {Theme, ThemeService} from '../../providers/theme.service'; +import {NgClass, NgIf} from '@angular/common'; + +@Component({ + selector: 'app-theme-selection', + imports: [ + NgIf, + NgClass + ], + templateUrl: './theme-selection.component.html', + styleUrl: './theme-selection.component.scss' +}) +export class ThemeSelectionComponent { + + private selectedTheme: Theme; + + constructor(private themeService: ThemeService) { + this.selectedTheme = this.themeService.getPreferredTheme(); + } + + isDark(): boolean { + return this.selectedTheme === 'dark'; + } + + isLight(): boolean { + return this.selectedTheme === 'light'; + } + + isAuto(): boolean { + return this.selectedTheme === 'auto'; + } + + public toggleTheme(theme: Theme): void { + this.themeService.setStoredTheme(theme); + this.themeService.setTheme(theme); + this.selectedTheme = theme; + } +} diff --git a/src/app/entities/alert.ts b/src/app/entities/alert.ts new file mode 100644 index 0000000..894d11f --- /dev/null +++ b/src/app/entities/alert.ts @@ -0,0 +1,16 @@ +export interface Alert { + kind: AlertKind, + msg: string, + closed: () => void, +} + +export enum AlertKind { + SUCCESS = 'success', + INFO = 'info', + WARNING = 'warning', + DANGER = 'danger', + PRIMARY = 'primary', + SECONDARY = 'secondary', + LIGHT = 'light', + DARK = 'dark' +} diff --git a/src/app/pages/auth/login/login.component.ts b/src/app/pages/auth/login/login.component.ts index d76e806..394ced0 100644 --- a/src/app/pages/auth/login/login.component.ts +++ b/src/app/pages/auth/login/login.component.ts @@ -1,21 +1,22 @@ import {Component} from '@angular/core'; -import {FormControl, FormGroup, NgForm, ReactiveFormsModule, Validators} from '@angular/forms'; -import {Router} from '@angular/router'; -import {User, SessionService, AuthService} from '@shigde/core'; -import {catchError, of, take, tap} from 'rxjs'; +import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; +import {AuthService} from '@shigde/core'; +import {catchError, of, take} from 'rxjs'; import {NgClass, NgIf} from '@angular/common'; import {map} from 'rxjs/operators'; import {ValidInput} from '../../../validators/valid-types'; +import {AlertService} from '../../../providers/alert.service'; +import {AlertKind} from '../../../entities/alert'; @Component({ - selector: 'app-login', - templateUrl: './login.component.html', - imports: [ - ReactiveFormsModule, - NgClass, - NgIf - ], - styleUrls: ['./login.component.scss'] + selector: 'app-login', + templateUrl: './login.component.html', + imports: [ + ReactiveFormsModule, + NgClass, + NgIf + ], + styleUrls: ['./login.component.scss'] }) export class LoginComponent { @@ -29,9 +30,8 @@ export class LoginComponent { }); constructor( - private router: Router, private readonly authService: AuthService, - private session: SessionService) { + private readonly alert: AlertService) { } onSubmit() { @@ -51,6 +51,7 @@ export class LoginComponent { } private handleError() { + this.alert.alert(AlertKind.DANGER, 'Login fails') this.fail = true; return of(''); } diff --git a/src/app/pages/auth/update-password/update-password.component.html b/src/app/pages/auth/update-password/update-password.component.html index 19b273f..88636e1 100644 --- a/src/app/pages/auth/update-password/update-password.component.html +++ b/src/app/pages/auth/update-password/update-password.component.html @@ -1,86 +1,77 @@ - --+ diff --git a/src/app/pages/auth/update-password/update-password.component.ts b/src/app/pages/auth/update-password/update-password.component.ts index f7c9c45..97365c1 100644 --- a/src/app/pages/auth/update-password/update-password.component.ts +++ b/src/app/pages/auth/update-password/update-password.component.ts @@ -8,15 +8,16 @@ import {PASSWORD_CONSTRAIN, PasswordValidator} from '../../../validators/passwor import {ValidInput} from '../../../validators/valid-types'; @Component({ - selector: 'app-update-password', - imports: [ - FormsModule, - ReactiveFormsModule, - NgIf, - NgClass - ], - templateUrl: './update-password.component.html', - styleUrl: './update-password.component.scss' + selector: 'app-update-password', + imports: [ + FormsModule, + ReactiveFormsModule, + NgIf, + NgClass + ], + standalone: true, + templateUrl: './update-password.component.html', + styleUrl: './update-password.component.scss' }) export class UpdatePasswordComponent { @@ -72,7 +73,7 @@ export class UpdatePasswordComponent { onChangeOrgPass() { if (this.updateForm.get('orgPassword')?.invalid) { this.orgPassValid = 'is-invalid'; - return + return; } if (this.updateForm.get('orgPassword')?.valid) { this.orgPassValid = 'is-valid'; @@ -82,7 +83,7 @@ export class UpdatePasswordComponent { onChangeNewPass() { if (this.updateForm.get('newPassword')?.invalid) { this.newPassValid = 'is-invalid'; - return + return; } if (this.updateForm.get('newPassword')?.valid) { this.newPassValid = 'is-valid'; @@ -92,7 +93,7 @@ export class UpdatePasswordComponent { onChangeConfirmPass() { if (this.updateForm.get('confirmPassword')?.invalid || this.updateForm.errors?.['confirm']) { this.confirmPassValid = 'is-invalid'; - return + return; } if (this.updateForm.get('confirmPassword')?.valid) { this.confirmPassValid = 'is-valid'; diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index e091775..a2df658 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -1,55 +1,41 @@ import {Component, OnInit} from '@angular/core'; -import {Stream, StreamService, SpaceService} from '@shigde/core'; -import {map, Observable, of} from 'rxjs'; +import {Stream, StreamService} from '@shigde/core'; +import {catchError, map, Observable, of, take} from 'rxjs'; import {v4 as uuidv4} from 'uuid'; +import {AlertKind} from '../../entities/alert'; +import {AlertService} from '../../providers/alert.service'; @Component({ - selector: 'app-dashboard', - templateUrl: './dashboard.component.html', - styleUrls: ['./dashboard.component.scss'], - standalone: false + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.scss'], + standalone: false }) export class DashboardComponent implements OnInit { streams$: Observable-+-- -Change Password
----+Your password was changed!
-+-+-Your password was changed!
+-+Your password could not be changed!
-+- -Your password could not be changed!
++ diff --git a/src/app/pages/user/channel/channel/channel.component.html b/src/app/pages/user/channel/channel/channel.component.html new file mode 100644 index 0000000..54bf731 --- /dev/null +++ b/src/app/pages/user/channel/channel/channel.component.html @@ -0,0 +1,14 @@ + +diff --git a/src/app/pages/user/channel/channel/channel.component.scss b/src/app/pages/user/channel/channel/channel.component.scss new file mode 100644 index 0000000..4c2b203 --- /dev/null +++ b/src/app/pages/user/channel/channel/channel.component.scss @@ -0,0 +1,9 @@ +#banner-container { + position: relative; +} + +#banner { + background-image: url("src/assets/images/default-banner-2.jpg"); + background-size: cover; + background-repeat: no-repeat; +} diff --git a/src/app/pages/user/channel/channel/channel.component.spec.ts b/src/app/pages/user/channel/channel/channel.component.spec.ts new file mode 100644 index 0000000..dd67210 --- /dev/null +++ b/src/app/pages/user/channel/channel/channel.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChannelComponent } from './channel.component'; + +describe('ChannelComponent', () => { + let component: ChannelComponent; + let fixture: ComponentFixture++++Enrico Channel
+Live Stream Channel
++ ++; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ChannelComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ChannelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/user/channel/channel/channel.component.ts b/src/app/pages/user/channel/channel/channel.component.ts new file mode 100644 index 0000000..09cf61b --- /dev/null +++ b/src/app/pages/user/channel/channel/channel.component.ts @@ -0,0 +1,44 @@ +import {Component} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {Channel, ChannelService, StreamService} from '@shigde/core'; +import {catchError, Observable, of, take} from 'rxjs'; +import {map} from 'rxjs/operators'; +import {AlertKind} from '../../../../entities/alert'; +import {AlertService} from '../../../../providers/alert.service'; + +@Component({ + selector: 'app-channel', + imports: [], + templateUrl: './channel.component.html', + styleUrl: './channel.component.scss' +}) +export class ChannelComponent { + + public readonly channel$: Observable ; + private channelUuid: string; + + + constructor( + private readonly router: Router, + private readonly channelService: ChannelService, + private readonly streamService: StreamService, + private readonly alert: AlertService, + activeRoute: ActivatedRoute) { + this.channelUuid = activeRoute.snapshot.params['channelId']; + + this.channel$ = this.channelService.fetch(this.channelUuid).pipe( + take(1), + map((res) => res.data), + catchError(_ => this.handleError ('Could not load channel!', {} as Channel)) + ); + } + + editChannel() { + this.router.navigate(['/channel/' + this.channelUuid + '/edit']); + } + + private handleError (msg: string, resp: T): Observable { + this.alert.alert(AlertKind.DANGER, msg); + return of(resp); + } +} diff --git a/src/app/pages/user/channel/edit-channel/edit-channel.component.html b/src/app/pages/user/channel/edit-channel/edit-channel.component.html new file mode 100644 index 0000000..60f092f --- /dev/null +++ b/src/app/pages/user/channel/edit-channel/edit-channel.component.html @@ -0,0 +1,102 @@ + +diff --git a/src/app/pages/user/channel/edit-channel/edit-channel.component.scss b/src/app/pages/user/channel/edit-channel/edit-channel.component.scss new file mode 100644 index 0000000..14590b1 --- /dev/null +++ b/src/app/pages/user/channel/edit-channel/edit-channel.component.scss @@ -0,0 +1,4 @@ +.domain-name-input { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} diff --git a/src/app/pages/user/channel/edit-channel/edit-channel.component.spec.ts b/src/app/pages/user/channel/edit-channel/edit-channel.component.spec.ts new file mode 100644 index 0000000..faf1aaf --- /dev/null +++ b/src/app/pages/user/channel/edit-channel/edit-channel.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditChannelComponent } from './edit-channel.component'; + +describe('EditChannelComponent', () => { + let component: EditChannelComponent; + let fixture: ComponentFixtureEdit Channel
+ +; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [EditChannelComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EditChannelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/user/channel/edit-channel/edit-channel.component.ts b/src/app/pages/user/channel/edit-channel/edit-channel.component.ts new file mode 100644 index 0000000..6872682 --- /dev/null +++ b/src/app/pages/user/channel/edit-channel/edit-channel.component.ts @@ -0,0 +1,115 @@ +import {Component, OnInit} from '@angular/core'; +import {ApiResponse, Channel, ChannelService} from '@shigde/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; +import {catchError, filter, Observable, of, take, tap} from 'rxjs'; +import {NgIf} from '@angular/common'; +import {FederativeService} from '../../../../providers/federative.service'; +import {AlertKind} from '../../../../entities/alert'; +import {map} from 'rxjs/operators'; +import {AlertService} from '../../../../providers/alert.service'; + +@Component({ + selector: 'app-edit-channel', + imports: [ + FormsModule, + ReactiveFormsModule, + ], + templateUrl: './edit-channel.component.html', + styleUrl: './edit-channel.component.scss' +}) +export class EditChannelComponent { + + channelForm: FormGroup = new FormGroup({ + name: new FormControl('', [Validators.minLength(4), Validators.required, Validators.maxLength(50)]), + description: new FormControl('', [Validators.maxLength(250)]), + support: new FormControl('', [Validators.maxLength(150)]), + public: new FormControl('', [Validators.required]), + file: new FormControl('') + }); + + channel: Channel | undefined; + domain: string = ''; + + private readonly channelId: string; + public isUploading = false; + public progress = {upload: 0}; + + + constructor( + private readonly channelService: ChannelService, + private readonly router: Router, + private readonly alert: AlertService, + activeRoute: ActivatedRoute, + ) { + this.channelId = activeRoute.snapshot.params['channelId']; + this.channelService.fetch(this.channelId).pipe( + take(1), + catchError(_ => this.handleError ('Could not load channel!', null)), + filter((s) => s !== null) + ).subscribe((c) => { + this.channel = c.data; + let split = FederativeService.splitDomainNameToJson(this.channel.name); + this.domain = split.domain; + this.channelForm.get('name')?.setValue(split.name); + this.channelForm.get('description')?.setValue(this.channel.description); + this.channelForm.get('support')?.setValue(this.channel.support); + this.channelForm.get('public')?.setValue(this.channel.public); + }); + } + + get name() { + return this.channelForm.get('name'); + } + + get support() { + return this.channelForm.get('support'); + } + + get description() { + return this.channelForm.get('description'); + } + + save(fileInput: any) { + + if (this.channelForm.valid) { + this.isUploading = true; + let fileBlob = null; + let files: File[] = fileInput.files; + if (files.length > 0) { + fileBlob = files[0]; + } + + let channelName = FederativeService.joinDomainNameToJson(this.channelForm.get('name')?.value, this.domain); + // @ts-ignore + const channel: Channel = { + ...this.channel, + name: channelName, + description: this.channelForm.get('description')?.value, + support: this.channelForm.get('support')?.value, + public: this.channelForm.get('public')?.value, + }; + this.channelService.save(channel, fileBlob, this.progress).pipe( + take(1), + tap(_ => this.alert.alert(AlertKind.SUCCESS, 'The Channel has been updated!')), + map(_ => this.goToChannel()), + catchError(_ => this.handleError ('Could not update channel!', channel)) + ).subscribe(() => { + setTimeout(() => { + this.isUploading = false; // Stop the progress indicator after a delay + this.progress.upload = 0; // Reset for the next upload + }, 1000); // Delay for smoother UX + }); + } + } + + goToChannel() { + this.router.navigate(['/channel/' + this.channelId]); + } + + private handleError (msg: string, rsp: T): Observable { + this.alert.alert(AlertKind.DANGER, msg); + return of(rsp); + } + +} diff --git a/src/app/pages/user/settings/settings.component.html b/src/app/pages/user/settings/settings.component.html new file mode 100644 index 0000000..e893701 --- /dev/null +++ b/src/app/pages/user/settings/settings.component.html @@ -0,0 +1,36 @@ + +diff --git a/src/app/pages/user/settings/settings.component.scss b/src/app/pages/user/settings/settings.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/user/settings/settings.component.spec.ts b/src/app/pages/user/settings/settings.component.spec.ts new file mode 100644 index 0000000..82c748a --- /dev/null +++ b/src/app/pages/user/settings/settings.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SettingsComponent } from './settings.component'; + +describe('SettingsComponent', () => { + let component: SettingsComponent; + let fixture: ComponentFixtureSettings
+ ++ ++++ ++ ++++++Toggle Theme
++
+ +++ ++ ++++++Change Password
+This form allows you to update your password securely.
++ ; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [SettingsComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/user/settings/settings.component.ts b/src/app/pages/user/settings/settings.component.ts new file mode 100644 index 0000000..df96465 --- /dev/null +++ b/src/app/pages/user/settings/settings.component.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; +import {UpdatePasswordComponent} from '../../auth/update-password/update-password.component'; +import {ThemeSelectionComponent} from '../../../component/theme-selection/theme-selection.component'; + +@Component({ + selector: 'app-settings', + imports: [UpdatePasswordComponent, ThemeSelectionComponent], + templateUrl: './settings.component.html', + styleUrl: './settings.component.scss' +}) +export class SettingsComponent { + +} diff --git a/src/app/pages/user/stream/edit-stream/edit-stream.component.html b/src/app/pages/user/stream/edit-stream/edit-stream.component.html new file mode 100644 index 0000000..f885ccc --- /dev/null +++ b/src/app/pages/user/stream/edit-stream/edit-stream.component.html @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +diff --git a/src/app/pages/user/stream/edit-stream/edit-stream.component.scss b/src/app/pages/user/stream/edit-stream/edit-stream.component.scss new file mode 100644 index 0000000..10e47a0 --- /dev/null +++ b/src/app/pages/user/stream/edit-stream/edit-stream.component.scss @@ -0,0 +1,4 @@ +#date-picker-group { + width: 200px !important; +} + diff --git a/src/app/pages/user/stream/edit-stream/edit-stream.component.spec.ts b/src/app/pages/user/stream/edit-stream/edit-stream.component.spec.ts new file mode 100644 index 0000000..e42f9ab --- /dev/null +++ b/src/app/pages/user/stream/edit-stream/edit-stream.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EditStreamComponent } from './edit-stream.component'; + +describe('EditStreamComponent', () => { + let component: EditStreamComponent; + let fixture: ComponentFixtureNew Stream
+ +; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [EditStreamComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(EditStreamComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/user/stream/edit-stream/edit-stream.component.ts b/src/app/pages/user/stream/edit-stream/edit-stream.component.ts new file mode 100644 index 0000000..ff56f29 --- /dev/null +++ b/src/app/pages/user/stream/edit-stream/edit-stream.component.ts @@ -0,0 +1,36 @@ +import { Component } from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import { + NgbDatepickerModule, + NgbDropdownModule, + NgbTimepicker +} from '@ng-bootstrap/ng-bootstrap'; +import {FormsModule} from '@angular/forms'; +import { JsonPipe } from '@angular/common'; + +@Component({ + selector: 'app-edit-stream', + standalone: true, + imports: [ + NgbTimepicker, + FormsModule, + NgbDropdownModule, + NgbDatepickerModule + ], + templateUrl: './edit-stream.component.html', + styleUrl: './edit-stream.component.scss' +}) +export class EditStreamComponent { + private id: string; + time = { hour: 13, minute: 30 }; + hours = 1; + minutes= 1 ; + + constructor(private router: Router, activeRoute: ActivatedRoute) { + this.id = activeRoute.snapshot.params['channelId']; + } + + goToChannel() { + this.router.navigate(['/channel/1234']); + } +} diff --git a/src/app/providers/alert.service.ts b/src/app/providers/alert.service.ts new file mode 100644 index 0000000..804ba4a --- /dev/null +++ b/src/app/providers/alert.service.ts @@ -0,0 +1,21 @@ +import {Injectable} from '@angular/core'; +import {Alert, AlertKind} from '../entities/alert'; +import {BehaviorSubject} from 'rxjs'; +import {resolve} from '@angular/compiler-cli'; + +@Injectable({ + providedIn: 'root' +}) +export class AlertService { + + public readonly alerts$ = new BehaviorSubject (null); + + alert(kind: AlertKind, msg: string): Promise { + return new Promise((resolve) => { + let alert: Alert = { + kind, msg, closed: resolve + }; + this.alerts$.next(alert); + }); + } +} diff --git a/src/app/providers/federative.service.ts b/src/app/providers/federative.service.ts new file mode 100644 index 0000000..6da28ed --- /dev/null +++ b/src/app/providers/federative.service.ts @@ -0,0 +1,22 @@ +import {Injectable} from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class FederativeService { + + constructor() { + } + + public static splitDomainNameToJson(name: string): { domain: string, name: string } { + let split = name.split('@'); + if (split.length > 1) { + return {'domain': split[1], 'name': split[0]}; + } + return {'domain': '', 'name': split[0]}; + } + + public static joinDomainNameToJson(name: string, domain: string): string { + return `${name}@${domain}`; + } +} diff --git a/src/app/providers/theme.service.ts b/src/app/providers/theme.service.ts new file mode 100644 index 0000000..ca88981 --- /dev/null +++ b/src/app/providers/theme.service.ts @@ -0,0 +1,45 @@ +import {Injectable} from '@angular/core'; + +export type Theme = 'dark' | 'light' | 'auto'; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService { + private static readonly key = 'theme'; + + public init(): void { + this.setTheme(this.getPreferredTheme()); + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + const storedTheme = this.getStoredTheme() + if (storedTheme !== 'light' && storedTheme !== 'dark') { + this.setTheme(this.getPreferredTheme()) + } + }); + } + + public getStoredTheme(): Theme | null { + return localStorage.getItem(ThemeService.key) as Theme; + } + + public setStoredTheme(theme: Theme) { + localStorage.setItem(ThemeService.key, theme); + } + + public getPreferredTheme(): Theme { + const storedTheme = this.getStoredTheme(); + if (storedTheme !== null) { + return storedTheme + } + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + public setTheme(theme: Theme): void { + if (theme === 'auto') { + document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')) + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } +} diff --git a/src/assets/images/default-banner-2.jpg b/src/assets/images/default-banner-2.jpg new file mode 100644 index 0000000..9a73543 Binary files /dev/null and b/src/assets/images/default-banner-2.jpg differ diff --git a/src/assets/images/default-banner.jpg b/src/assets/images/default-banner.jpg new file mode 100644 index 0000000..b037343 Binary files /dev/null and b/src/assets/images/default-banner.jpg differ diff --git a/src/index.html b/src/index.html index d998b69..977771d 100644 --- a/src/index.html +++ b/src/index.html @@ -6,7 +6,6 @@ - diff --git a/src/styles.scss b/src/styles.scss index bbe68ab..7f73b70 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -50,3 +50,6 @@ svg#clouds { z-index: -10; width: 1920px; } + +/* Importing Bootstrap SCSS file. */ +@import 'bootstrap/scss/bootstrap'; diff --git a/tsconfig.json b/tsconfig.json index 2c96e75..cb1a0c4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,34 +1,34 @@ /* To learn more about this file see: https://angular.io/config/tsconfig. */ { - "compileOnSave": false, - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - "forceConsistentCasingInFileNames": true, - "esModuleInterop": true, - "strict": true, - "noImplicitOverride": true, - "noPropertyAccessFromIndexSignature": true, - "noImplicitReturns": true, - "noFallthroughCasesInSwitch": true, - "sourceMap": true, - "declaration": false, - "experimentalDecorators": true, - "moduleResolution": "node", - "importHelpers": true, - "target": "ES2022", - "module": "ES2022", - "useDefineForClassFields": false, - "lib": [ - "ES2022", - "dom" - ] - }, - "angularCompilerOptions": { - "enableI18nLegacyMessageIdFormat": false, - "strictInjectionParameters": true, - "strictInputAccessModifiers": true, - "strictTemplates": true, - "preserveSymlinks": true - } + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true, + "preserveSymlinks": true + }, }