add star rating, comment section and submit directive - #102

package.json

@@ -48,6 +48,7 @@
     "@fortawesome/angular-fontawesome": "^0.5.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-brands-svg-icons": "^5.12.1",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@nguniversal/express-engine": "^8.2.6",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",

src/app/app.module.ts

@@ -35,6 +35,7 @@ import {TestcardComponent} from './user/testcard/testcard.component';
 import {LazyLoadImageModule} from 'ng-lazyload-image';
 import {UsersComponent} from './users/users.component';
 import {DialogComponent} from './_dialog';
+import {RatingComponent} from './user/rating/rating.component';
 
 declare const require; // Use the require method provided by webpack
 
@@ -70,7 +71,8 @@ declare const require; // Use the require method provided by webpack
     AvatarComponent,
     TestcardComponent,
     UsersComponent,
-    DialogComponent
+    DialogComponent,
+    RatingComponent
   ],
   providers: [
     AuthenticationService,

src/app/classroom/classroom.component.html

@@ -140,8 +140,8 @@ <h4 class="text-info">
       </div>
     </div>
   </div>
+  <app-rating></app-rating>
 </div>
-
 <div class="mb-3 d-md-none" *ngIf="activeTest">
   <div class="container">
     <!-- Switch between all questions (Mobile only)-->

src/app/icons.ts

@@ -40,6 +40,8 @@ import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
 import {faSearchLocation} from '@fortawesome/free-solid-svg-icons/faSearchLocation';
 import {faEye} from '@fortawesome/free-solid-svg-icons/faEye';
 import {faEyeSlash} from '@fortawesome/free-solid-svg-icons/faEyeSlash';
+import {faStar as farStar} from '@fortawesome/free-regular-svg-icons';
+import {faStar as fasStar} from '@fortawesome/free-solid-svg-icons';
 
 export const shareButtonsIcons = [
   faFacebookF, faTwitter, faLinkedinIn, faPinterestP, faRedditAlien, faTumblr,
@@ -48,5 +50,5 @@ export const shareButtonsIcons = [
   faCommentAlt, faEnvelope, faCheck, faPrint, faExclamation, faLink, faEllipsisH, faMinus,
   faTrash, faUser, faHome, faCog, faShare, faSun, faCircle, faChevronRight, faChevronLeft,
   faQuestion, faSave, faUserPlus, faXRay, faSignInAlt, faBrain, faBars, faTimes, faSearchLocation,
-  faEye, faEyeSlash
+  faEye, faEyeSlash, farStar, fasStar
 ];

src/app/user/rating/rating.component.html

@@ -0,0 +1,23 @@
+<section id="star-rating">
+    <div class="container">
+        <div class="row">
+            <div class="col-12">
+                <p class="lead">Rate this question:</p>
+                <span class="star text-warning" [ngClass]="{'rated': rated}" *ngFor="let star of stars; let i=index">
+                    <fa-icon *ngIf="!star" [icon]="['far', 'star']" (click)="!rated ? select(i) : ''"></fa-icon>
+                    <fa-icon *ngIf="star" [icon]="['fas', 'star']" (click)="!rated ? select(i) : ''"></fa-icon>
+                </span>
+                <p *ngIf="rated" class="lead">Thank you for rating!</p>
+            </div>
+            <div class="col-12 col-sm-4 my-3" *ngIf="selected && !rated">
+                <form>
+                    <div class="form-group">
+                        <label for="rating-comment">Tell us more (optional):</label>
+                        <textarea class="form-control" id="rating-comment" rows="3" placeholder="Let us know what you liked or we can improve..."></textarea>
+                    </div>
+                    <button type="submit" class="btn btn-primary btn-block" (click)="submit()">Submit</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</section>

src/app/user/rating/rating.component.scss

@@ -0,0 +1,10 @@
+#star-rating {
+    .star {
+        cursor: pointer;
+        font-size: 2rem;
+
+        &.rated {
+            pointer-events: none;
+        }
+    }
+}

src/app/user/rating/rating.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RatingComponent } from './rating.component';
+
+describe('RatingComponent', () => {
+  let component: RatingComponent;
+  let fixture: ComponentFixture<RatingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RatingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RatingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user/rating/rating.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-rating',
+  templateUrl: './rating.component.html',
+  styleUrls: ['./rating.component.scss']
+})
+export class RatingComponent implements OnInit {
+
+    stars: boolean[];
+    selected: boolean = false;
+    rated: boolean = false;
+
+  constructor() {
+    this.stars = [false, false, false, false, false];
+   }
+
+  ngOnInit() {
+  }
+
+    select(selectedStar: number) {
+        for(let i = 0; i < this.stars.length; i++) {
+            if(i <= selectedStar) {
+                this.stars[i] = true;
+            } else {
+                this.stars[i] = false;
+            }
+        }
+        this.selected = true;
+    }
+
+    submit() {
+        // TODO: POST REQUEST to API
+        this.rated = true;
+    }
+}