Merge pull request #297 from bounswe/fe/poll-component

FE | Added poll component
bounswe · Nov 10, 2023 · e9b1476 · e9b1476
2 parents a3be53d + 51261d2
commit e9b1476
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 22 deletions.
diff --git a/app/frontend/src/app/app.module.ts b/app/frontend/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { HomeComponent } from './home/home.component';
 import { TagsBarComponent } from './tags-bar/tags-bar.component';
 import { LeaderboardBarComponent } from './leaderboard-bar/leaderboard-bar.component';
 import { PollRequestComponent } from './poll-request/poll-request.component';
+import { PollComponent } from './poll/poll.component';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { PollRequestComponent } from './poll-request/poll-request.component';
     HomeComponent,
     TagsBarComponent,
     LeaderboardBarComponent,
-    PollRequestComponent
+    PollRequestComponent,
+    PollComponent
   ],
   imports: [
     BrowserModule,

diff --git a/app/frontend/src/app/home/home.component.css b/app/frontend/src/app/home/home.component.css
@@ -22,20 +22,7 @@
     text-align: center;
     flex: 1;
 }
-.poll {
-    display: flex;
-    flex-direction: column;
-    background-color: #9DC0C4; 
-    border: 1px solid #1b1818; 
-    border-radius: 15px; 
-    width: 80%; 
-    padding: 10%;
-    height: 120px;
-    margin-top: 15px;
-    margin-bottom: 15px;
-    align-items: center;
-    justify-content: center;
-}
+
 
 .button {
     display: block;

diff --git a/app/frontend/src/app/home/home.component.html b/app/frontend/src/app/home/home.component.html
@@ -18,10 +18,12 @@
                     <div class="user-polls-column">Following</div>
                     <div class="user-polls-column">Trending</div>
                 </div>
-                <div class="poll">
-                </div>                
-                <div class="poll">
+
+                <div>
+                    <app-poll></app-poll>
                 </div>
+
+
             </div>
             <div style="display: flex; flex-direction: column;">
                 <app-tags-bar></app-tags-bar>

diff --git a/app/frontend/src/app/poll/poll.component.css b/app/frontend/src/app/poll/poll.component.css
@@ -0,0 +1,28 @@
+body {background-color: #9DC0C4; height: 70%;}
+.container {
+    background-color: #63989f; 
+    border-radius: 15px; 
+    padding: 20px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    align-items: center;
+    justify-content: center;
+}
+.image {
+    max-width: 100%;
+    height: 100%;
+}
+
+.button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #9DC0C4;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 15px; 
+    border: 1px solid #1b1818; 
+}
+
+
diff --git a/app/frontend/src/app/poll/poll.component.html b/app/frontend/src/app/poll/poll.component.html
@@ -0,0 +1,48 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .button.clicked {
+          background-color:rgb(162, 92, 227) !important;
+          color: white;
+        }
+      </style>
+</head>
+<body>
+    <div class="container" style="position: relative;">
+        <div class="post-widget" style="display: flex; align-items: start;">
+            <img class="user-avatar" src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg&fm=jpg"
+             alt="User Avatar" style="width:50px; height:50px;border-radius: 50%; margin-right: 5px;">
+            <div class="post-content" style="display: flex; flex-direction: column; align-items: start;
+            margin-left: 5px;">
+                <b class="name" style=" font-size:small;">Jane</b>
+                <p class="user-name" style="margin-top:2px;">@janesmith</p>
+            </div>
+        </div>
+        <h3>Who will be the next James Bond?</h3>
+        <div style="display: flex; justify-content: space-between;">
+            <div>
+                <button style="width: 120px; height: 25px; background-color: rgb(231, 146, 85); cursor: pointer; 
+            border-radius: 15px;  border: 1px solid #1b1818; font-size: smaller; margin-bottom: 10px;margin-right: 5px;">Movies</button>
+            <button style="width: 120px; height: 25px; background-color: rgb(180, 231, 85); cursor: pointer; 
+            border-radius: 15px;  border: 1px solid #1b1818; font-size: smaller; margin-bottom: 10px;">Trending</button>
+            </div>
+
+            <p style="text-align: right; font-size: smaller;">1567 Votes</p>    
+        </div>
+
+        <button class="button" #button1 id = "button1" (click)="toggleButton(button1)" [disabled]="selectedButton != null && selectedButton != button1" >Tom Hardy</button>
+        <button class="button" #button2 id = "button2" (click)="toggleButton(button2)" [disabled]="selectedButton != null && selectedButton != button2">Theo James</button>
+        <button class="button" #button3 id = "button3" (click)="toggleButton(button3)" [disabled]="selectedButton != null && selectedButton != button3">Other</button>
+
+        <div style="display: flex; justify-content: space-between; ">
+            <button style="width: 100px; height: 35px; background-color: rgb(82, 190, 244); cursor: pointer; 
+            border-radius: 15px;  border: 1px solid #1b1818; font-size: smaller; margin-bottom: 10px; margin-top: 20px;">Like</button>
+            <p style="text-align: center; margin-right: 170px; margin-left: 100px;">52 Comments</p>
+            <p style="text-align: right;">3d</p>
+        </div>
+
+    </div>
+</body>
+</html>
diff --git a/app/frontend/src/app/poll/poll.component.spec.ts b/app/frontend/src/app/poll/poll.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PollComponent } from './poll.component';
+
+describe('PollComponent', () => {
+  let component: PollComponent;
+  let fixture: ComponentFixture<PollComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PollComponent]
+    });
+    fixture = TestBed.createComponent(PollComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/app/frontend/src/app/poll/poll.component.ts b/app/frontend/src/app/poll/poll.component.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-poll',
+  templateUrl: './poll.component.html',
+  styleUrls: ['./poll.component.css']
+})
+export class PollComponent {
+  selectedButton: HTMLButtonElement | null = null;
+
+  ngOnInit() {
+    // Retrieve the selected button's state from localStorage on component initialization
+    const selectedButtonId = localStorage.getItem('selectedButtonId');
+    if (selectedButtonId) {
+      this.selectedButton = document.getElementById(selectedButtonId) as HTMLButtonElement;
+      if (this.selectedButton) {
+        this.selectedButton.classList.add('clicked');
+      }
+    }
+  }
+
+  toggleButton(button: HTMLButtonElement) {
+    if (this.selectedButton === button) {
+      // If the same button is clicked again, unselect it
+      this.selectedButton.classList.remove('clicked');
+      this.selectedButton = null;
+      localStorage.removeItem('selectedButtonId');
+    } else {
+      // Unselect the previously selected button (if any)
+      if (this.selectedButton) {
+        this.selectedButton.classList.remove('clicked');
+      }
+
+      // Select the clicked button
+      button.classList.add('clicked');
+      this.selectedButton = button;
+
+      // Save the selected button's state in localStorage
+      localStorage.setItem('selectedButtonId', button.id);
+    }
+  }
+}
diff --git a/app/frontend/src/app/user-profile/user-profile.component.css b/app/frontend/src/app/user-profile/user-profile.component.css
@@ -26,8 +26,7 @@
 .poll {
     display: flex;
     flex-direction: column;
-    background-color: #9DC0C4; 
-    border: 1px solid #1b1818; 
+    background-color: #7fb7be; 
     border-radius: 15px; 
     width: 80%; 
     padding: 10%;

diff --git a/app/frontend/src/app/user-profile/user-profile.component.html b/app/frontend/src/app/user-profile/user-profile.component.html
@@ -23,8 +23,9 @@
                     <div class="user-polls-column">Liked</div>
                     <div class="user-polls-column">Voted</div>
                 </div>
-                <div class="poll">
-                </div>     
+                <div>
+                    <app-poll></app-poll>
+                </div>   
             </div>
             <div style="display: flex; flex-direction: column;">
                 <app-ranks-bar></app-ranks-bar>