Skip to content

Commit 177558b

Browse files
dineshkumar20dineshkumar20
committed
Added Chatrooms
1 parent a3ab40d commit 177558b

15 files changed

+628
-131
lines changed

‎src/app/app.module.ts

+5-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { LMarkdownEditorModule } from 'ngx-markdown-editor';
2222
import { ReadComponent } from './component/admin/read/read.component';
2323
import { ReadcourseComponent } from './component/readcourse/readcourse.component';
2424
import { ChatComponent } from './component/chat/chat.component';
25+
import { ChatroomsComponent } from './component/chatrooms/chatrooms.component';
2526

2627
const appRoutes: Routes = [
2728
{ path: 'login', component: LoginComponent },
@@ -33,7 +34,8 @@ const appRoutes: Routes = [
3334
{ path: 'admin-update', component: UpdateComponent },
3435
{ path: 'admin-read', component: ReadComponent },
3536
{ path: 'read-course', component: ReadcourseComponent},
36-
{ path: 'chat', component: ChatComponent}
37+
{ path: 'chat', component: ChatComponent},
38+
{ path: 'chatroom', component: ChatroomsComponent}
3739
]
3840

3941
@NgModule({
@@ -52,7 +54,8 @@ const appRoutes: Routes = [
5254
UpdateComponent,
5355
ReadComponent,
5456
ReadcourseComponent,
55-
ChatComponent
57+
ChatComponent,
58+
ChatroomsComponent
5659
],
5760
imports: [
5861
BrowserModule,

‎src/app/component/cards/cards.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<div class="image">
66
<img src="{{course.path}}" alt="IMG" width="270">
77
<div class="overlay">
8-
<div class="text" style="font-weight:bold">Start {{course.coursename}} Today</div>
8+
<div class="text" style="font-weight:bold">Start {{test}} Today</div>
99
<button style="position:relative;margin:80% 38%;font-size:14px;" type="button" class="btn btn-primary btn-lg"(click)="read(course.coursename)">Read</button>
1010
</div>
1111
</div>

‎src/app/component/cards/cards.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import { Component, OnInit, Input } from '@angular/core';
22
import { NodeService } from '../../services/node.service';
33
import { Router } from '@angular/router';
44

@@ -9,6 +9,7 @@ import { Router } from '@angular/router';
99
})
1010
export class CardsComponent implements OnInit {
1111
flag : boolean;
12+
@Input("test") test : string;
1213
constructor(private nodeService: NodeService, private router: Router) {
1314

1415
this.nodeService.home().subscribe(

‎src/app/component/chat/chat.component.css

+52-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,30 @@
1+
/* Propeller buttons */
2+
@import "http://propeller.in/components/button/css/button.css";
3+
4+
/* Propeller icons */
5+
@import "http://fonts.googleapis.com/icon?family=Material+Icons";
6+
@import "http://propeller.in/components/icons/css/google-icons.css";
7+
8+
/* Propeller css for Floating Action Button*/
9+
.pmd-floating-action { bottom: 0; position: fixed; margin:4rem; right: 0; }
10+
.pmd-floating-action-btn { display:block; position: relative; transition: all .2s ease-out;}
11+
.pmd-floating-action-btn:before { bottom: 10%; content: attr(data-title); opacity: 0; position: absolute; right: 100%; transition: all .2s ease-out .5s; white-space: nowrap; background-color:#fff; padding:6px 12px; border-radius:2px; color:#333; font-size:12px; margin-right:5px; display:inline-block; box-shadow: 0px 2px 3px -2px rgba(0, 0, 0, 0.18), 0px 2px 2px -7px rgba(0, 0, 0, 0.15);}
12+
.pmd-floating-action-btn:last-child:before { font-size: 14px; bottom: 25%;}
13+
.pmd-floating-action-btn:active, .pmd-floating-action-btn:focus, .pmd-floating-action-btn:hover {box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);}
14+
.pmd-floating-action-btn:not(:last-child){ opacity: 0; -ms-transform: translateY(20px) scale(0.3); transform: translateY(20px) scale(0.3); margin-bottom:15px; margin-left:8px; position:absolute; bottom:0;}
15+
.pmd-floating-action-btn:not(:last-child):nth-last-child(1) { transition-delay: 50ms;}
16+
.pmd-floating-action-btn:not(:last-child):nth-last-child(2) { transition-delay: 100ms;}
17+
.pmd-floating-action-btn:not(:last-child):nth-last-child(3) { transition-delay: 150ms;}
18+
.pmd-floating-action-btn:not(:last-child):nth-last-child(4) { transition-delay: 200ms;}
19+
.pmd-floating-action-btn:not(:last-child):nth-last-child(5) { transition-delay: 250ms;}
20+
.pmd-floating-action-btn:not(:last-child):nth-last-child(6) { transition-delay: 300ms;}
21+
.pmd-floating-action:hover .pmd-floating-action-btn, .menu--floating--open .pmd-floating-action-btn { opacity: 1; -ms-transform: none; transform: none; position:relative; bottom:auto;}
22+
.pmd-floating-action:hover .pmd-floating-action-btn:before, .menu--floating--open .pmd-floating-action-btn:before { opacity: 1;}
23+
.pmd-floating-hidden{ display:none;}
24+
.pmd-floating-action-btn.btn:hover{ overflow:visible;}
25+
26+
.pmd-floating-action-btn .ink{ width:50px; height:50px;}
27+
128
.container_chatbot
229
{
330
position: fixed;
@@ -187,7 +214,8 @@ div.chat div.chat-content span.friend
187214
display: inline-block;
188215
background: #fff;
189216
padding: 10px;
190-
padding-bottom: 25px;
217+
margin-top:5px;
218+
padding-bottom: 15px;
191219
font-weight: 400;
192220

193221
box-shadow: 2px 2px 20px -2px rgba(60,51,176,0.2);
@@ -204,12 +232,13 @@ div.chat div.chat-content span.you
204232
font-weight: 400;
205233
position: relative;
206234
float: right;
235+
margin-top:5px;
207236
width: 70%;
208237
height: auto;
209238
background: #5850c0;
210239
display: inline-block;
211240
padding: 10px;
212-
padding-bottom: 25px;
241+
padding-bottom: 15px;
213242
color: #fff;
214243

215244
box-shadow: 2px 2px 20px rgba(60,51,176,0.2),
@@ -282,8 +311,29 @@ div.msg-box span.btn-group i
282311
color: rgb(199, 4, 4);
283312
}
284313
.connection{
314+
position: relative;
285315
text-align: center;
286316
font-size: 14px;
287317
font-weight: 500;
288318
color: rgb(119, 119, 119)
319+
}
320+
.chip {
321+
display: inline-block;
322+
padding: 0 25px;
323+
height: 50px;
324+
font-size: 16px;
325+
line-height: 50px;
326+
border-radius: 25px;
327+
background-color: #f1f1f1;
328+
color : blue;
329+
width: 90%;
330+
margin-top:10px;
331+
}
332+
333+
.chip img {
334+
float: left;
335+
margin: 0 15px 0 -25px;
336+
height: 50px;
337+
width: 50px;
338+
border-radius: 50%;
289339
}

‎src/app/component/chat/chat.component.html

+98-62
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,105 @@
1-
<div class="container_chatbot">
2-
<div class="app">
3-
<div class="head clearfix">
4-
<span class="messages-notification">
5-
<i class="fa fa-comments-o"></i>
6-
<span class="count"></span>
7-
</span>
8-
<span class="title">Chatroom</span>
9-
<span class="create-new">
10-
<a (click)="onClickFab()" class="close">
11-
<i class="material-icons">expand_more</i>
12-
</a>
13-
</span>
14-
</div>
15-
16-
<div class="body">
17-
<div class="friend-list clearfix">
18-
<ul>
19-
<li class="active">
20-
<img src="./../../../assets/angular.png" alt="" />
21-
<span class="name">
22-
Angular 4
23-
</span>
24-
</li>
25-
</ul>
1+
<ng-template #fab [ngIf]="visible == 'fab'">
2+
<div class="menu pmd-floating-action" role="navigation">
3+
<a (click)="onClickChatbot()" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default"
4+
data-title="CHat">
5+
<span class="pmd-floating-hidden">Chat</span>
6+
<i class="material-icons">question_answer</i>
7+
</a>
8+
<a class="pmd-floating-action-btn btn pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-primary" data-title="Chat">
9+
<span class="pmd-floating-hidden">Primary</span>
10+
<i class="material-icons pmd-sm">expand_less</i>
11+
</a>
12+
</div>
13+
</ng-template>
14+
<ng-template #chatroom [ngIf]="visible == 'chatroom'">
15+
<div class="container_chatbot">
16+
<div class="app">
17+
<div class="head clearfix">
18+
<span class="messages-notification">
19+
<i class="fa fa-comments-o"></i>
20+
<span class="count"></span>
21+
</span>
22+
<span class="title">Chatroom</span>
23+
<span class="create-new">
24+
<a (click)="onClickFab()" class="close">
25+
<i class="material-icons">expand_more</i>
26+
</a>
27+
</span>
2628
</div>
27-
<div class="chat-messages">
28-
<div class="chat">
29-
<div #scrollMe [scrollTop]="scrollMe.scrollHeight" class="chat-content clearfix">
30-
<div *ngFor="let m of messages">
31-
<!-- <div *ngIf="m.username=='you';then you else bot"></div> -->
32-
<ng-template #bot [ngIf]="m.index == 'received'">
33-
<span class="friend last">
34-
<div class="username">{{m.username}} :</div>
35-
{{m.message}}
36-
</span>
37-
</ng-template>
38-
<ng-template #you [ngIf]="m.index == 'sent'">
39-
<span class="you first">
40-
{{m.message}}
41-
</span>
42-
</ng-template>
43-
<ng-template #notificaion [ngIf]="m.index == 'user_joined'">
44-
<span class="connection">
45-
<div>{{m.username}} joined </div>
46-
<div>No. of participants in online : {{m.numUsers}}</div>
47-
</span>
48-
</ng-template>
49-
<ng-template #notificaion [ngIf]="m.index == 'user_left'">
50-
<span class="connection">
51-
<div>{{m.username}} left </div>
52-
<div>No. of participants in online : {{m.numUsers}}</div>
53-
</span>
54-
</ng-template>
29+
30+
<div class="body">
31+
<div class="friend-list clearfix">
32+
<ul>
33+
<li class="active">
34+
<img src="{{path}}" alt="" />
35+
<span class="name">
36+
{{coursename}}
37+
</span>
38+
</li>
39+
</ul>
40+
</div>
41+
<ng-template [ngIf]="flag == 'chatroom'">
42+
<div class="chat-messages">
43+
<div class="chat">
44+
<div #scrollMe [scrollTop]="scrollMe.scrollHeight" class="chat-content clearfix">
45+
46+
<div *ngFor="let m of courses">
47+
<span style="margin-left:10px;margin-top:10px;width:100%">
48+
<a (click)="selectChatRoom(m.coursename,m.path)">
49+
<div class="chip">
50+
<img src="{{m.path}}" alt="Person" width="96" height="96"> {{m.coursename}}
51+
</div>
52+
</a>
53+
</span>
54+
</div>
55+
</div>
5556
</div>
5657
</div>
57-
<div class="msg-box">
58-
<input #box (keyup.enter)="onEnter()" type="text" [(ngModel)]="message" class="ip-msg" placeholder="type something.." />
59-
<span class="btn-group">
60-
<a (click)="onSendMessage()">
61-
<i class="material-icons">send</i>
62-
</a>
63-
</span>
58+
</ng-template>
59+
<ng-template [ngIf]="flag == 'chat'">
60+
<div class="chat-messages">
61+
<div class="chat">
62+
<div #scrollMe [scrollTop]="scrollMe.scrollHeight" class="chat-content clearfix">
63+
<div *ngFor="let m of messages">
64+
<!-- <div *ngIf="m.username=='you';then you else bot"></div> -->
65+
<ng-template #bot [ngIf]="m.index == 'received'">
66+
<span class="friend last">
67+
<span class="username">{{m.username}} :</span><span>{{m.message}}</span>
68+
69+
</span>
70+
</ng-template>
71+
<ng-template #you [ngIf]="m.index == 'sent'">
72+
<span class="you first">
73+
{{m.message}}
74+
</span>
75+
</ng-template>
76+
<ng-template #notificaion [ngIf]="m.index == 'user_joined'">
77+
<span class="connection">
78+
<div>{{m.username}} joined </div>
79+
<div>No. of participants in online : {{m.numUsers}}</div>
80+
</span>
81+
</ng-template>
82+
<ng-template #notificaion [ngIf]="m.index == 'user_left'">
83+
<span class="connection">
84+
<div>{{m.username}} left </div>
85+
<div>No. of participants in online : {{m.numUsers}}</div>
86+
</span>
87+
</ng-template>
88+
</div>
89+
90+
</div>
91+
<div class="msg-box">
92+
<input #box (keyup.enter)="onEnter()" type="text" [(ngModel)]="message" class="ip-msg" placeholder="type something.." />
93+
<span class="btn-group">
94+
<a (click)="onSendMessage()">
95+
<i class="material-icons">send</i>
96+
</a>
97+
</span>
98+
</div>
99+
</div>
64100
</div>
65-
</div>
101+
</ng-template>
66102
</div>
67103
</div>
68104
</div>
69-
</div>
105+
</ng-template>

0 commit comments

Comments
 (0)