diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 78f9cb1..a809433 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -5,13 +5,16 @@ import {ProfileComponent} from "./profile/profile.component"; import {SqueakComponent} from "./squeak/squeak.component"; import {LoginComponent} from "./login/login.component"; import {RegisterComponent} from "./register/register.component"; +import {ProfileEditComponent} from "./profile-edit/profile-edit.component"; const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full'}, { path: 'home', component: HomeComponent}, { path: 'profile', component: ProfileComponent}, { path: 'login', component: LoginComponent}, - { path: 'register', component: RegisterComponent} + { path: 'register', component: RegisterComponent}, + { path: 'edit', component: ProfileEditComponent} + ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 151d451..10c1930 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { ProfileComponent } from './profile/profile.component'; import { HomeComponent } from './home/home.component'; import { DataService } from "./services/data.service"; import { RegisterComponent } from './register/register.component'; +import { ProfileEditComponent } from './profile-edit/profile-edit.component'; @NgModule({ declarations: [ @@ -25,7 +26,8 @@ import { RegisterComponent } from './register/register.component'; LoginComponent, ProfileComponent, HomeComponent, - RegisterComponent + RegisterComponent, + ProfileEditComponent ], imports: [ BrowserModule, @@ -36,4 +38,6 @@ import { RegisterComponent } from './register/register.component'; providers: [SqueakerService, SqueakService, DataService], bootstrap: [AppComponent] }) + + export class AppModule { } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 1c353f3..3042f3f 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -24,12 +24,12 @@ -
+
login
-
+
perm_identity
diff --git a/src/app/models/squeak.ts b/src/app/models/squeak.ts index 9fcb3e3..1fee7cb 100644 --- a/src/app/models/squeak.ts +++ b/src/app/models/squeak.ts @@ -3,5 +3,8 @@ import {Squeaker} from "./squeaker"; export interface Squeak { id: number; content: string; - squeaker: Squeaker + squeaker: Squeaker; + postedAtDate: number; + postedAtTime: number; + image: string; } diff --git a/src/app/models/squeakDTO.ts b/src/app/models/squeakDTO.ts index f50d477..3bc6d13 100644 --- a/src/app/models/squeakDTO.ts +++ b/src/app/models/squeakDTO.ts @@ -3,9 +3,11 @@ import {Squeaker} from "./squeaker"; export class SqueakDTO { content: string; squeaker: Squeaker; + image: string - constructor(content: string, squeaker: Squeaker) { + constructor(content: string, squeaker: Squeaker, image: string) { this.content = content; this.squeaker = squeaker; + this.image = image; } } diff --git a/src/app/models/squeaker.ts b/src/app/models/squeaker.ts index d4562ca..d492fbc 100644 --- a/src/app/models/squeaker.ts +++ b/src/app/models/squeaker.ts @@ -6,4 +6,6 @@ export interface Squeaker { lastName: string; email: string; profilePic: string; + joinDate: number; + } diff --git a/src/app/profile-edit/profile-edit.component.css b/src/app/profile-edit/profile-edit.component.css new file mode 100644 index 0000000..ecfc566 --- /dev/null +++ b/src/app/profile-edit/profile-edit.component.css @@ -0,0 +1,176 @@ +/* Split the screen in half */ +.split { + height: 100%; + width: 50%; + position: fixed; + z-index: 1; + top: 0; + overflow-x: hidden; + padding-top: 20px; +} + +/* Control the left side */ +.left { + left: 0; + background-color: rgb(219, 203, 253); + +} +img { + display: block; + margin-left: auto; + margin-right: auto; + width: 70%; + position: relative; + top: 150px; +} + +/* Control the right side */ +.right { + right: 0; + background-color: white; +} + +body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, +pre, form, fieldset, input, textarea, p, blockquote, th, td { + padding:0; + margin:0;} + +fieldset, img {border:0} + +ol, ul, li {list-style:none} + +:focus {outline:none} + +body, +input, +textarea, +select { + font-family: 'Open Sans', sans-serif; + font-size: 16px; + color: #4c4c4c; +} + +p { + font-size: 12px; + width: 150px; + display: inline-block; + margin-left: 18px; +} +h1 { + font-size: 32px; + font-weight: 300; + color: #4c4c4c; + text-align: center; + padding-top: 10px; + margin-bottom: 10px; +} + +html{ + background-color: #ffffff; +} + +.testbox { + margin: 20px auto; + width: 343px; + height: 464px; + -webkit-border-radius: 8px/7px; + -moz-border-radius: 8px/7px; + border-radius: 8px/7px; + background-color: #ebebeb; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); + box-shadow: 1px 2px 5px rgba(0,0,0,.31); + border: solid 1px #cbc9c9; + position: relative; + top: 150px; +} + +input[type=radio] { + visibility: hidden; +} + +form{ + margin: 0 30px; +} + +hr{ + color: #a9a9a9; + opacity: 0.3; +} + +input[type=text],input[type=password]{ + width: 200px; + height: 39px; + -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; + -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px; + border-radius: 0px 4px 4px 0px/5px 5px 4px 4px; + background-color: #fff; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); + box-shadow: 1px 2px 5px rgba(0,0,0,.09); + border: solid 1px #cbc9c9; + margin-left: -5px; + margin-top: 13px; + padding-left: 10px; +} + +input[type=password]{ + margin-bottom: 25px; +} + +#icon { + display: inline-block; + width: 50px; + background-color: rgb(219, 203, 253); + padding: 8px 0px 8px 15px; + margin-left: 15px; + -webkit-border-radius: 4px 0px 0px 4px; + -moz-border-radius: 4px 0px 0px 4px; + border-radius: 4px 0px 0px 4px; + color: white; + -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09); + -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09); + box-shadow: 1px 2px 5px rgba(0,0,0,.09); + border: solid 0px #cbc9c9; +} + +.gender { + margin-left: 30px; + margin-bottom: 30px; +} + +.accounttype{ + margin-left: 8px; + margin-top: 20px; +} + +a.button { + font-size: 14px; + font-weight: 600; + color: white; + padding: 6px 25px 0px 20px; + margin: 10px 8px 20px 0px; + display: inline-block; + float: right; + text-decoration: none; + width: 90px; height: 27px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + background-color: rgb(219, 203, 253); + -webkit-box-shadow: 0 3px rgb(219, 203, 253); + -moz-box-shadow: 0 3px rgb(219, 203, 253); + box-shadow: 0 3px rgb(219, 203, 253); + transition: all 0.1s linear 0s; + top: 0px; + position: relative; +} + +a.button:hover { + top: 3px; + background-color:#c2a8f7; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + +} diff --git a/src/app/profile-edit/profile-edit.component.html b/src/app/profile-edit/profile-edit.component.html new file mode 100644 index 0000000..2e52990 --- /dev/null +++ b/src/app/profile-edit/profile-edit.component.html @@ -0,0 +1,55 @@ + + + + + + + Twitter Clone - Final + + + + + + + + +
+
+ +
+
+ +
+
+
+

Edit Profile

+
+ + + + + + + + + + + + + +

Click here to return back to your profile page.

+ Submit +
+
+
+
+ + + + + diff --git a/src/app/profile-edit/profile-edit.component.spec.ts b/src/app/profile-edit/profile-edit.component.spec.ts new file mode 100644 index 0000000..5675dff --- /dev/null +++ b/src/app/profile-edit/profile-edit.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfileEditComponent } from './profile-edit.component'; + +describe('ProfileEditComponent', () => { + let component: ProfileEditComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ProfileEditComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ProfileEditComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/profile-edit/profile-edit.component.ts b/src/app/profile-edit/profile-edit.component.ts new file mode 100644 index 0000000..e052725 --- /dev/null +++ b/src/app/profile-edit/profile-edit.component.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; +import {SqueakerService} from "../services/squeaker.service"; +import {NgForm} from "@angular/forms"; +import {SqueakerDTO} from "../models/squeakerDTO"; +import {Squeaker} from "../models/squeaker"; +import {DataService} from "../services/data.service"; + +@Component({ + selector: 'app-profile-edit', + templateUrl: './profile-edit.component.html', + styleUrls: ['./profile-edit.component.css'] +}) +export class ProfileEditComponent implements OnInit { + // @ts-ignore + currentSqueaker: Squeaker; + id=0; + + + + constructor(private squeakerService: SqueakerService, private dataService: DataService) { } + + ngOnInit(): void { + this.dataService.currentSqueakerId.subscribe(id => { + this.squeakerService.findSqueakerById(id).subscribe((data: Squeaker)=>{ + this.currentSqueaker=data; + }) + }) + } + + + updateSqueaker(sendForm: NgForm): void { + const squeakerDTO = new SqueakerDTO(sendForm.value.username, sendForm.value.password, sendForm.value.firstName, sendForm.value.lastName, sendForm.value.email, sendForm.value.profilePic) + this.squeakerService.update(this.currentSqueaker.id, squeakerDTO).subscribe(); + console.log(squeakerDTO); + sendForm.control.reset() + } + +} diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html index 1468b3d..fed42d7 100644 --- a/src/app/profile/profile.component.html +++ b/src/app/profile/profile.component.html @@ -24,12 +24,12 @@
-
+
login
-
+
perm_identity
@@ -44,25 +44,28 @@
- -

Welcome to {{ this.currentSqueaker.username}}'s Profile Page

+ +
+

Profile - HELLO {{ this.currentSqueaker.username.toUpperCase()}}

+
+
+ background-image - +
profile-picture -

{{ this.currentSqueaker.firstName}} verified

+

{{ this.currentSqueaker.firstName}} {{this.currentSqueaker.lastName}} verified

-

{{ this.currentSqueaker.username }}

+

@{{ this.currentSqueaker.username }}

-

Joined September 2022

+

Joined {{currentSqueaker.joinDate}}

-

0 Followers 0 Following

+
@@ -82,9 +85,9 @@

0 Followers 0 Following

- {{ squeak.squeaker.username }} + {{ squeak.squeaker.firstName }} {{squeak.squeaker.lastName}} verified @{{ squeak.squeaker.username }} verified @{{ squeak.squeaker.username }} · {{squeak.postedAtDate}} · {{squeak.postedAtTime}}

@@ -93,7 +96,7 @@

diff --git a/src/app/services/squeaker.service.ts b/src/app/services/squeaker.service.ts index 8329db8..1b9e926 100644 --- a/src/app/services/squeaker.service.ts +++ b/src/app/services/squeaker.service.ts @@ -34,4 +34,9 @@ export class SqueakerService { public save(squeakerDTO: SqueakerDTO): Observable { return this.http.post(this.squeakerUrl, squeakerDTO); } + + public update(id: number, squeakerDTO: SqueakerDTO): Observable { + console.log(squeakerDTO); + return this.http.post(this.squeakerUrl + "/edit/" +id, squeakerDTO); + } } diff --git a/src/app/squeak/squeak.component.html b/src/app/squeak/squeak.component.html index c56882d..0253b58 100644 --- a/src/app/squeak/squeak.component.html +++ b/src/app/squeak/squeak.component.html @@ -7,6 +7,7 @@ alt="" /> +
@@ -39,8 +40,16 @@

{{squeak.content}}

+ + + + + + + +
diff --git a/src/app/squeak/squeak.component.ts b/src/app/squeak/squeak.component.ts index ddadd5b..96bd9f7 100644 --- a/src/app/squeak/squeak.component.ts +++ b/src/app/squeak/squeak.component.ts @@ -17,7 +17,7 @@ export class SqueakComponent implements OnInit { // @ts-ignore currentSqueaker: Squeaker; squeaks: Squeak[] = []; - id = 0 + image: string = ""; constructor(private squeakService: SqueakService, private dataService: DataService, private squeakerService: SqueakerService) { } @@ -44,7 +44,7 @@ export class SqueakComponent implements OnInit { } saveSqueak(sendForm: NgForm): void { - const squeakDTO = new SqueakDTO(sendForm.value.content, this.currentSqueaker) + const squeakDTO = new SqueakDTO(sendForm.value.content, this.currentSqueaker, this.image) this.squeakService.save(squeakDTO).subscribe(); this.findAllSqueaks(); this.findAllSqueaks(); diff --git a/src/styles.css b/src/styles.css index dba9ff4..f41e12f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -17,7 +17,7 @@ body { } .sidebarOption .material-icons -/*.fa-twitter */ + /*.fa-twitter */ { padding: 20px; } @@ -186,7 +186,7 @@ body { .post { display: flex; align-items: flex-start; - border-bottom: 1px solid var(--squeaker-background); + border-bottom: 5px solid var(--squeaker-background); padding-bottom: 10px; } @@ -221,7 +221,10 @@ body { .post__headerDescription { margin-bottom: 10px; - font-size: 15px; + font-size: 30px; + font-family: Trebuchet MS; + +; } .post__body { @@ -269,3 +272,6 @@ body { font-size: 18px; font-weight: 800; } + +html, body { height: 100%; } +body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }