From 57306fe7bf1d5af25ded72eb7998226b958976ba Mon Sep 17 00:00:00 2001 From: jgerstbe Date: Sat, 31 Oct 2020 01:26:27 +0100 Subject: [PATCH] [U] channel.comp WIP --- src/app/api/supabase/message.ts | 3 + src/app/channel/channel.component.html | 107 ++++++++++++++++++++++++- src/app/channel/channel.component.scss | 35 ++++++++ src/app/channel/channel.component.ts | 102 ++++++++++++++++++++++- src/app/huddle/huddle.component.html | 4 +- src/app/huddle/huddle.component.ts | 24 +++--- src/app/sidebar/sidebar.component.html | 6 +- src/app/sidebar/sidebar.component.scss | 7 ++ 8 files changed, 269 insertions(+), 19 deletions(-) create mode 100644 src/app/api/supabase/message.ts diff --git a/src/app/api/supabase/message.ts b/src/app/api/supabase/message.ts new file mode 100644 index 0000000..9e09841 --- /dev/null +++ b/src/app/api/supabase/message.ts @@ -0,0 +1,3 @@ +export class Message { + +} \ No newline at end of file diff --git a/src/app/channel/channel.component.html b/src/app/channel/channel.component.html index 19f4ad8..899e9d5 100644 --- a/src/app/channel/channel.component.html +++ b/src/app/channel/channel.component.html @@ -1 +1,106 @@ -

channel works!

+ +
+
+ #{{ channel.name }} +
+
+
+ + +
+
+
+ {{ channel.description }} +
+
+
+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Morbi leo risus
    • +
  • Porta ac consectetur ac
    • +
  • Vestibulum at eros
    • +
+
+
+ +
+
+ +
+ +
+
+
+ diff --git a/src/app/channel/channel.component.scss b/src/app/channel/channel.component.scss index e69de29..78bc529 100644 --- a/src/app/channel/channel.component.scss +++ b/src/app/channel/channel.component.scss @@ -0,0 +1,35 @@ +.headerRow { + margin-top: -5px; + padding-bottom: 10px; + border-bottom: 1px dashed #343a40; +} +.messageRow { + margin-bottom: 60px; + max-height: calc(100vh - 200px); + overflow: hidden scroll; +} +.inputRow { + position: fixed; + bottom: 0; + // width: calc(100vw - 300px); + .input { + border: 0; + // width: 100%; + padding-left: 5px; + padding-right: 5px; + } + .optionRow { + // background-color: lightgray; + // width: 100%; + height: 40px; + padding: 5px; + .btnSend { + float: right; + background-color: lightseagreen; + border-color: lightseagreen; + &:hover { + border-color: seagreen; + } + } + } +} \ No newline at end of file diff --git a/src/app/channel/channel.component.ts b/src/app/channel/channel.component.ts index 0736dcc..e4a5617 100644 --- a/src/app/channel/channel.component.ts +++ b/src/app/channel/channel.component.ts @@ -1,4 +1,15 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; +import { DomSanitizer } from '@angular/platform-browser'; +import { ActivatedRoute, Router } from '@angular/router'; +import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; +import { Subject } from 'rxjs'; +import { take, takeUntil } from 'rxjs/operators'; +import { Channel } from '../api/supabase/channel'; +import { ChannelService } from '../api/supabase/channel.service'; +import { Message } from '../api/supabase/message'; +import { SupaService } from '../api/supabase/supa.service'; +import { User } from '../api/supabase/user'; +import { UserService } from '../api/supabase/user.service'; @Component({ selector: 'app-channel', @@ -6,10 +17,95 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./channel.component.scss'] }) export class ChannelComponent implements OnInit { + channel: Channel; + member: User[] = []; + messages: Message[] = []; + $destroy: Subject = new Subject(); + dataUpdated: boolean = false; + messageInput: string = ''; - constructor() { } + constructor( + private channelService: ChannelService, + private modalService: NgbModal, + private supaService: SupaService, + private route: ActivatedRoute, + private sanitizer: DomSanitizer, + private userService: UserService, + private router: Router, + ) { } - ngOnInit(): void { + ngOnInit() { + this.route.params.subscribe( + params => { + this.reset(); + if (params.id) { + this.channelService.getOne(params.id).subscribe( + data => { + console.log('got channel', data); + this.channel = data; + // this.loadMessages(data.id).subscribe(messages => { + // this.messages = messages; + // }); + }, + error => { + console.error(error); + this.router.navigateByUrl('/dashboard'); + } + ) + } + } + ) + } + + ngOnDestroy() { + this.$destroy.next(true); + this.$destroy.complete(); + } + + reset() { + delete this.channel; + this.member = []; + this.messages = []; + this.messageInput = ''; + this.$destroy.next(true); + } + + loadChannel(id: number) { + return this.channelService.getOne(id).pipe(takeUntil(this.$destroy.asObservable())); + } + + loadMessages(channel_id: number) { + + } + + loadUser(user_id: string) { + + } + + updateChannel(name:string, desc:string) { + this.channel.name = name; + this.channel.description = desc; + this.channelService.updateOne(this.channel).pipe(take(1)).subscribe( + data => { + console.log('Success', data); + }, + error => { + console.error('Failed', error); + } + ); + } + + deleteChannel() { + const check = confirm('Do you want to delete this channel?'); + if (check == true) { + this.channelService.deleteOne(this.channel).subscribe( + data => { + console.log('Deleted channel', data); + this.router.navigateByUrl('/dashboard'); + }, + error => console.error(error) + ); + } } } diff --git a/src/app/huddle/huddle.component.html b/src/app/huddle/huddle.component.html index 0f12f98..bcc9395 100644 --- a/src/app/huddle/huddle.component.html +++ b/src/app/huddle/huddle.component.html @@ -5,8 +5,8 @@
- - + +
diff --git a/src/app/huddle/huddle.component.ts b/src/app/huddle/huddle.component.ts index 4efff7c..a7c092a 100644 --- a/src/app/huddle/huddle.component.ts +++ b/src/app/huddle/huddle.component.ts @@ -50,6 +50,7 @@ export class HuddleComponent implements OnInit, OnDestroy { }, error => { console.error(error); + this.router.navigateByUrl('/dashboard'); } ) } @@ -123,19 +124,22 @@ export class HuddleComponent implements OnInit, OnDestroy { error => { console.error('Failed', error); } - ) + ); } deleteStandUp() { - this.standupService.deleteOne(this.standup).pipe(take(1)).subscribe( - data => { - console.log('Success', data); - this.router.navigateByUrl('/dashboard') - }, - error => { - console.error('Failed', error); - } - ); + const check = confirm('Do you want to delete this standup?'); + if (check == true) { + this.standupService.deleteOne(this.standup).pipe(take(1)).subscribe( + data => { + console.log('Success', data); + this.router.navigateByUrl('/dashboard') + }, + error => { + console.error('Failed', error); + } + ); + } } async uploadStory(src: string) { diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html index d835f33..1a3ef92 100644 --- a/src/app/sidebar/sidebar.component.html +++ b/src/app/sidebar/sidebar.component.html @@ -1,12 +1,12 @@
-

Standup +

+

Standup +

  • {{s.name}}
  • There are no standups yet.
-

Channel +

+

Channel +

    -
  • {{c.name}}
    • +
  • #{{c.name}}
  • There are no channels yet.

Settings

diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss index a5b0f37..d047c9d 100644 --- a/src/app/sidebar/sidebar.component.scss +++ b/src/app/sidebar/sidebar.component.scss @@ -19,4 +19,11 @@ color: lightseagreen; } } + .channelHash { + padding: 3px 6.5px; + background: rgba(255,255,255,0.1); + border-radius: 3px; + margin-right: 5px; + vertical-align: middle; + } }