Skip to content

Commit 529c30e

Browse files
SapythonSapython
committed
Completed chat system.
1 parent f9d06f9 commit 529c30e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1026
-177
lines changed

‎gulpfile.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,32 @@ const compressPostImages = async () => {
7878
.pipe(imagemin())
7979
.pipe(dest("src/assets/images/postImages/compressed/"));
8080
};
81+
const compressUiImages = async () => {
82+
await src("src/assets/images/ui/*.{png,jpg}")
83+
.pipe(
84+
sharpResponsive({
85+
formats: [
86+
// jpeg
87+
{ width: 1024, format: "jpeg", rename: { suffix: "-1024" } },
88+
{ width: 1600, format: "jpeg", rename: { suffix: "-1600" } },
89+
{ width: 1920, format: "jpeg", rename: { suffix: "-1920" } },
90+
// webp
91+
{ width: 1024, format: "webp", rename: { suffix: "-1024" } },
92+
{ width: 1600, format: "webp", rename: { suffix: "-1600" } },
93+
{ width: 1920, format: "webp", rename: { suffix: "-1920" } },
94+
// avif
95+
{ width: 1024, format: "avif", rename: { suffix: "-1024" } },
96+
{ width: 1600, format: "avif", rename: { suffix: "-1600" } },
97+
{ width: 1920, format: "avif", rename: { suffix: "-1920" } },
98+
],
99+
})
100+
)
101+
.pipe(dest("src/assets/images/ui/compressed"));
81102

103+
await src("src/assets/images/ui/compressed/*.{webp,avif,jpg}")
104+
.pipe(imagemin())
105+
.pipe(dest("src/assets/images/ui/compressed/"));
106+
};
82107
// compressAllImages = () =>
83108
// src("src/assets/images/**.{png,jpg}")
84109
// .pipe(imagemin())
@@ -88,4 +113,5 @@ module.exports = {
88113
compressProjectImages,
89114
compressAuthorImages,
90115
compressPostImages,
116+
compressUiImages
91117
};

‎package-lock.json‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"serve": "ng build --configuration production && npx scully --scanRoutes && npx scully serve --",
1515
"deploy": "npm run cleanDist && npm run prebuild && ng build --configuration production && npx scully --scanRoutes && firebase deploy && lighthouse https://sapython-f016a.web.app/ --view && start https://sapython-f016a.web.app/",
1616
"cibuild": "npm ci && npm run deploy",
17-
"prebuild": "gulp compressProjectImages compressAuthorImages compressPostImages",
17+
"prebuild": "gulp compressProjectImages compressAuthorImages compressPostImages compressUiImages",
1818
"analyze": "source-map-explorer dist/SapythonBlog/**/*.js",
1919
"lint": "ng lint"
2020
},
@@ -39,8 +39,10 @@
3939
"@scullyio/scully": "^2.1.21",
4040
"@scullyio/scully-plugin-puppeteer": "^2.1.21",
4141
"animate-css-grid": "^1.4.3",
42+
"badwords-list": "^1.0.0",
4243
"firebase": "^9.6.8",
4344
"g": "^2.0.1",
45+
"ngx-router-animations": "^13.0.0",
4446
"ngx-useful-swiper": "^10.0.1",
4547
"rxfire": "^6.0.0",
4648
"rxjs": "~6.6.0",

‎src/app/addons/chat/chat-box/chat-box.component.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div *ngIf="sender" class="sender">
2+
<p>{{message | obscenity}}</p>
3+
<span>{{date}}</span>
4+
</div>
5+
<div *ngIf="!sender" class="receive">
6+
<p>{{message | obscenity}}</p>
7+
<span>{{date}}</span>
8+
</div>

‎src/app/addons/chat/chat-box/chat-box.component.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
div.sender{
2+
width:300px;
3+
height:auto;
4+
position: relative;
5+
float: left;
6+
background-color: var(--color-tertiary);
7+
border-radius: 10px 10px 10px 0px;
8+
padding:10px;
9+
margin: 10px;
10+
p{
11+
text-justify: distribute;
12+
word-wrap: break-word;
13+
font-size: 15px;
14+
margin-bottom: 0px;
15+
}
16+
span{
17+
text-align: left;
18+
font-size: 9px;
19+
}
20+
}
21+
div.receive{
22+
width:300px;
23+
height:auto;
24+
position: relative;
25+
float: right;
26+
background-color: var(--color-primary);
27+
border-radius: 10px 10px 0px 10px;
28+
padding:10px;
29+
margin: 10px;
30+
p{
31+
text-justify: distribute;
32+
word-wrap: break-word;
33+
font-size: 15px;
34+
margin-bottom: 0px;
35+
}
36+
span{
37+
text-align: left;
38+
font-size: 9px;
39+
}
40+
}

‎src/app/addons/chat/chat-box/chat-box.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ChatBoxComponent } from './chat-box.component';
4+
5+
describe('ChatBoxComponent', () => {
6+
let component: ChatBoxComponent;
7+
let fixture: ComponentFixture<ChatBoxComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ ChatBoxComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ChatBoxComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/addons/chat/chat-box/chat-box.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component, Input, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-chat-box',
5+
templateUrl: './chat-box.component.html',
6+
styleUrls: ['./chat-box.component.scss']
7+
})
8+
export class ChatBoxComponent {
9+
constructor() { }
10+
@Input() date:any = new Date();
11+
@Input() message:string = '';
12+
@Input() sender:boolean = false;
13+
14+
}

‎src/app/addons/chat/chat-routing.module.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule, Routes } from '@angular/router';
3+
import { ChatComponent } from './chat.component';
4+
5+
const routes: Routes = [{ path: '', component: ChatComponent }];
6+
7+
@NgModule({
8+
imports: [RouterModule.forChild(routes)],
9+
exports: [RouterModule]
10+
})
11+
export class ChatRoutingModule { }

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div class="chatContainer" [style]="closingChat ? 'animation: scaleDown 0.3s ease-in-out forwards' : ''">
2+
<div class="chatHeader">
3+
<app-img root="authorImages" src="Kumar Saptam" style="vertical-align:middle;" alt="Kumar Saptam" width="40px" height="40px" borderRadius="50%"></app-img>
4+
<p>Hello, Ask me anything</p>
5+
<i class="ri-close-fill" (click)="closePopup()"></i>
6+
</div>
7+
<div class="chatBody" id="chatBody" #scrollMe>
8+
<div *ngIf="dataProvider.userID">
9+
<app-chat-box *ngFor="let message of messages" [message]="message.message" [sender]="message.sender" [date]="convertDate(message.date)"></app-chat-box>
10+
</div>
11+
<div *ngIf="!dataProvider.userID">
12+
Please <a routerLink="login">Log In</a> or type something to start a conversation.
13+
</div>
14+
</div>
15+
<div class="chatFooter">
16+
<form (ngSubmit)="sendMsg()" [formGroup]="chatForm">
17+
<input type="text" formControlName="message" #message [style]="message.value.length > 200 ? 'border-color:rgb(255, 98, 98);' : 'border-color:white;'">
18+
<p>{{message.value.length}}/200</p>
19+
<button type="submit"><i class="ri-send-plane-2-fill"></i></button>
20+
</form>
21+
</div>
22+
</div>

‎src/app/addons/chat/chat.component.scss‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
@keyframes scaleUp {
2+
from{
3+
transform: scale(0);
4+
}
5+
to{
6+
transform: scale(1);
7+
}
8+
}
9+
@keyframes scaleDown {
10+
from{
11+
transform: scale(1);
12+
}
13+
to{
14+
transform: scale(0);
15+
}
16+
}
17+
div.chatContainer{
18+
--headerHeight:40px;
19+
--footerHeight:40px;
20+
position: fixed;
21+
bottom: 50px;
22+
right: 50px;
23+
width: 400px;
24+
height: 500px;
25+
background-color: var(--color-secondary);
26+
z-index: 99999;
27+
border-radius: 7px;
28+
box-shadow: -10px 10px 20px rgba(0,0,0,0.5);
29+
animation: scaleUp 0.3s ease-in-out;
30+
div.chatHeader{
31+
position: relative;
32+
top:0px;
33+
left:0px;
34+
// width: 100%;
35+
height: var(--headerHeight);
36+
border-radius: 7px 7px 0px 0px;
37+
background-color: var(--color-main);
38+
display: flex;
39+
justify-content: space-between;
40+
align-items: center;
41+
padding: 10px;
42+
box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
43+
p{
44+
flex: 3;
45+
margin-left: 10px;
46+
font-size: 20px;
47+
color: var(--color-text);
48+
}
49+
}
50+
div.chatBody{
51+
height: calc(100% - calc(var(--headerHeight) + var(--footerHeight)));
52+
overflow-y: auto;
53+
}
54+
div.chatFooter{
55+
position: relative;
56+
bottom:0px;
57+
left:0px;
58+
height: var(--footerHeight);
59+
border-radius: 0px 0px 7px 7px;
60+
background-color: var(--color-main);
61+
display: flex;
62+
justify-content: space-between;
63+
align-items: center;
64+
padding: 10px;
65+
box-shadow: 0px -10px 20px rgba(0,0,0,0.1);
66+
form{
67+
width:100%;
68+
display: flex;
69+
input{
70+
outline: none;
71+
border: none;
72+
flex: 2;
73+
padding:0px;
74+
color:var(--color-text);
75+
height:calc(var(--footerHeight)-10px);
76+
width:100%;
77+
font-size: 18px;
78+
background: var(--color-main);
79+
border-bottom: 2px white solid;
80+
}
81+
button{
82+
outline: none;
83+
border: none;
84+
margin: 0px 20px 0px 20px;
85+
background-color: var(--color-main);
86+
color: var(--color-text);
87+
font-size: 20px;
88+
border-radius: 5px;
89+
padding: 5px;
90+
cursor: pointer;
91+
}
92+
p{
93+
font-size: 10px;
94+
}
95+
}
96+
}
97+
}

0 commit comments

Comments
 (0)