Skip to content
This repository has been archived by the owner on Jul 6, 2020. It is now read-only.

Commit

Permalink
Add challenge participant page(#153)
Browse files Browse the repository at this point in the history
  • Loading branch information
Sanji515 authored and RishabhJain2018 committed Jul 20, 2019
1 parent 3021ce0 commit 4d60082
Show file tree
Hide file tree
Showing 19 changed files with 641 additions and 270 deletions.
1 change: 1 addition & 0 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
<app-confirm *ngIf="confirmParams['isConfirming']" [params]="confirmParams"></app-confirm>
<app-modal *ngIf="modalParams['isModalVisible']" [params]="modalParams"></app-modal>
<app-editphasemodal *ngIf="editPhaseModalParams['isEditPhaseModalVisible']" [params]="editPhaseModalParams"></app-editphasemodal>
<app-terms-and-conditions-modal *ngIf="termsAndConditionsModalParams['isTermsAndConditionsModalVisible']" [params]="termsAndConditionsModalParams"></app-terms-and-conditions-modal>
6 changes: 6 additions & 0 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ export class AppComponent implements OnInit, OnDestroy {
confirmParams = { isConfirming: false};
modalParams = { isModalVisible: false};
editPhaseModalParams = { isEditPhaseModalVisible: false};
termsAndConditionsModalParams = { isTermsAndConditionsModalVisible: false };
globalServiceSubscription: any;
globalLogoutTrigger: any;
globalLoadingSubscription: any;
globalConfirmSubscription: any;
globalModalSubscription: any;
globalEditPhaseModalSubscription: any;
globalTermsAndConditionsModalSubscription: any;
globalServiceSubscriptionScrollTop: any;

/**
Expand Down Expand Up @@ -96,6 +98,10 @@ export class AppComponent implements OnInit, OnDestroy {
this.editPhaseModalParams = params;
});

this.globalTermsAndConditionsModalSubscription = this.globalService.termsAndConditionsModalParams.subscribe(params => {
this.termsAndConditionsModalParams = params;
});

this.globalServiceSubscriptionScrollTop = this.globalService.scrolltop.subscribe(() => {
SELF.document.body.scrollTop = SELF.document.documentElement.scrollTop = 0;
});
Expand Down
6 changes: 5 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ import { RulesComponent } from './components/home/rules/rules.component';
import { TestimonialsComponent } from './components/home/testimonials/testimonials.component';
import { FeaturedChallengesComponent } from './components/home/featured-challenges/featured-challenges.component';
import { EditphasemodalComponent } from './components/challenge/challengephases/editphasemodal/editphasemodal.component';
import {
TermsAndConditionsModalComponent
} from './components/challenge/challengeparticipate/terms-and-conditions-modal/terms-and-conditions-modal.component';
import {
ChallengeviewallsubmissionsComponent
} from './components/challenge/challengeviewallsubmissions/challengeviewallsubmissions.component';
Expand Down Expand Up @@ -123,7 +126,8 @@ import { MatIconModule } from '@angular/material/icon';
SideBarComponent,
FeaturedChallengesComponent,
EditphasemodalComponent,
ChallengeviewallsubmissionsComponent
ChallengeviewallsubmissionsComponent,
TermsAndConditionsModalComponent
],
imports: [
BrowserModule,
Expand Down
3 changes: 1 addition & 2 deletions src/app/components/challenge/challenge.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,7 @@
[class.selected]="localRouter.url.endsWith('view-all-submissions')"
[routerLink]="['./view-all-submissions']"
class="text-light-black fw-semibold fs-15">
<i class="fa fa-eye"></i>View All
Submissions</a></li>
<i class="fa fa-eye"></i>View All Submissions</a></li>
<li><a
[class.selected]="localRouter.url.endsWith('leaderboard')"
[routerLink]="['./leaderboard']"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
<div class="challenge-participate-container">
<div class="inactive" *ngIf="!isActive">
Sorry, The Challenge is not active!
<div class="challenge-card">
<div *ngIf="!isActive" class="ev-card-panel ev-md-container card-bt-margin">
<div class="inactive">
Sorry, The Challenge is not active!
</div>
</div>
<div *ngIf="isActive">
<app-forcelogin *ngIf="!isLoggedIn" [path]="routerPublic.url">
</app-forcelogin>
<div *ngIf="!isLoggedIn" class="ev-card-panel ev-md-container card-bt-margin">
<app-forcelogin [path]="routerPublic.url">
</app-forcelogin>
</div>
<div *ngIf="isParticipated" class="ev-card-panel ev-md-container card-bt-margin">
<p><strong class="fw-semibold content">You have already participated in the challenge with a team!</strong></p>
</div>
<div *ngIf="isLoggedIn">
<app-teamlist></app-teamlist>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +0,0 @@
@import './variables.scss';
@import './mixins.scss';

.challenge-participate-container {
padding:20px;
padding-left:40px;
overflow:auto;
.inactive {
font-size:$fs-18;
color:$gray-darker;
font-weight:$fw-regular;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<div class="modal-container">
<div class="modal-card">
<div class="ev-md-container text-center">
<div class="row row-lr-margin">
<div class="col-md-12 col-sm-12">
<div class="ev-card-body">
<div class="modal-title align-center content"><strong class="fw-semibold">{{title}}</strong></div>
<div class="terms-content content" [innerHTML]="content"></div>
<form name="acceptTermsAndConditionsForm">
<input type="checkbox" class="filled-in fs-14" [(ngModel)]="termsAndConditions" name="terms_and_conditions" id="terms_and_conditions">
<label for="terms_and_conditions">{{label}}</label>
<div style="text-align: left !important;">
<ul class="inline-list pointer">
<li class="rm-margin">
<a appClickstop (click)="denied()" class="dark-link pointer"><strong class="fw-semibold">{{deny}}</strong></a>
</li>
<li>
<button [disabled]="!termsAndConditions" appClickstop (click)="confirmed()" class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn grad-btn-dark fs-14">{{confirm}}</button>
</li>
</ul>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@import './variables.scss';

.modal-container {
.modal-card {
min-width: 240px;
max-width: 80%;
width: 80%;
max-height: 80%;
padding: 0px;

.terms-content {
margin-bottom: 15px;
}

.content {
padding: 0px;
}
}
}

ul.inline-list {
margin-top: 15px;
}

.ev-card-body {
.modal-title {
margin-bottom: 30px;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { TermsAndConditionsModalComponent } from './terms-and-conditions-modal.component';
import { GlobalService } from '../../../../services/global.service';
import { FormsModule } from '@angular/forms';

describe('TermsAndConditionsModalComponent', () => {
let component: TermsAndConditionsModalComponent;
let fixture: ComponentFixture<TermsAndConditionsModalComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ FormsModule ],
declarations: [ TermsAndConditionsModalComponent ],
providers: [ GlobalService ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(TermsAndConditionsModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { Component, OnInit, Input } from '@angular/core';
import { GlobalService } from '../../../../services/global.service';

@Component({
selector: 'app-terms-and-conditions-modal',
templateUrl: './terms-and-conditions-modal.component.html',
styleUrls: ['./terms-and-conditions-modal.component.scss']
})
export class TermsAndConditionsModalComponent implements OnInit {

/**
* Input parameters object
*/
@Input() params: any;

/**
* Modal title
*/
title = 'Are you sure ?';

/**
* Modal field label
*/
label = '';

/**
* Modal body
*/
content = '';

/**
* Modal accept button
*/
confirm = 'Yes';

/**
* Modal deny button
*/
deny = 'Cancel';

/**
* Is checked terms and conditions input
*/
termsAndConditions: any;

/**
* Modal confirmed callback
*/
confirmCallback = () => {};

/**
* Modal denied callback
*/
denyCallback = () => {};

constructor(private globalService: GlobalService) { }

ngOnInit() {
if (this.params) {
if (this.params['title']) {
this.title = this.params['title'];
}
if (this.params['label']) {
this.label = this.params['label'];
}
if (this.params['content']) {
this.content = this.params['content'];
}
if (this.params['confirm']) {
this.confirm = this.params['confirm'];
}
if (this.params['deny']) {
this.deny = this.params['deny'];
}
if (this.params['confirmCallback']) {
this.confirmCallback = this.params['confirmCallback'];
}
if (this.params['denyCallback']) {
this.denyCallback = this.params['denyCallback'];
}
}
}

confirmed() {
this.globalService.hideTermsAndConditionsModal();
this.confirmCallback();
}

denied() {
this.globalService.hideTermsAndConditionsModal();
this.denyCallback();
}

}
107 changes: 82 additions & 25 deletions src/app/components/publiclists/teamlist/teamlist.component.html
Original file line number Diff line number Diff line change
@@ -1,31 +1,88 @@
<div class="teamlist-container">
<div *ngIf="authServicePublic.isLoggedIn()">
<div class="card team-select">
<div class="card-title">
{{teamSelectTitle}}
</div>
<div class="card-content">
<app-cardlist [type]="'teams'" [data]="filteredTeams" [deleteTeam]="deleteTeamWrapper()" [editTeam]="editTeamWrapper()" [addMembersToTeam]="addMembersToTeamWrapper()" [selectTeam]="selectTeamWrapper()" [dataObservable]="filteredTeamsObservable"></app-cardlist>
<div class="see-more" *ngIf="filteredTeams.length < allTeams.length">
<a class="btn btn-filter" (click)="seeMoreClicked()">See More</a>
<div *ngIf="authServicePublic.isLoggedIn() &&
(fetchTeamsPath == 'hosts/challenge_host_team' ||
fetchTeamsPath == 'participants/participant_team') && (isOnChallengePage && !isParticipated)">
<div class="row row-lr-margin">
<div class="col-md-6 col-sm-12">
<div class="ev-card-panel card-bt-margin">
<div class="ev-md-container bottom-hr-line">
<strong class="fw-semibold content">{{teamSelectTitle}}</strong>
</div>
<div class="ev-card-body">
<app-cardlist *ngIf="!isOnChallengePage" [type]="'teams'" [data]="filteredTeams" [deleteTeam]="deleteTeamWrapper()"
[editTeam]="editTeamWrapper()" [addMembersToTeam]="addMembersToTeamWrapper()" [selectTeam]="selectTeamWrapper()"
[dataObservable]="filteredTeamsObservable">
</app-cardlist>
<div class="see-more" *ngIf="filteredTeams.length < allTeams.length && !isOnChallengePage">
<a class="btn btn-filter" (click)="seeMoreClicked()">See More</a>
</div>
<div *ngIf="isOnChallengePage && !isParticipated" class="participants-team-list">
<div *ngIf="!paginationDetails.showPagination" class="content">{{paginationDetails.paginationMessage}}</div>
<ul class="rm-pad">
<li *ngFor="let value of allTeams">
<input [(ngModel)]="teamId" type="radio" name="selectExistTeam" class="with-gap selectTeam"
id="{{value.id}}" value="{{value.id}}" (click)="selectedParticipantTeam(value)">
<label for="{{value.id}}"></label>
<div *ngIf="value.team_url != ''" class="radio-button-text pointer pointer content">
<strong class="text-med-black fw-semibold">Team: </strong>
<a class="orange-text" href="{{value.team_url}}" target="_blank">{{value.team_name}}</a>
<br><strong class="text-med-black fw-semibold">Created By: </strong>{{value.created_by}}
</div>
<div *ngIf="value.team_url == ''" class="radio-button-text pointer pointer content">
<strong class="text-med-black fw-semibold">Team: </strong>{{value.team_name}}
<br><strong class="text-med-black fw-semibold">Created By: </strong>{{value.created_by}}
</div>
<div class="clearfix"></div>
</li>

<div class="pagination" *ngIf="paginationDetails.showPagination">
<div class="row row-lr-margin">
<div class="col-md-6 col-sm-12 left-align col-lr-pad">
<button [ngClass]="paginationDetails.isPrev" class="btn-floating btn-pagination waves-effect waves-light "
(click)="loadPaginationData(previous)">
<i class="fa fa-chevron-left"></i>
</button>
<span class="pagination-title">
<strong class="text-med-black fw-semibold content">
Page {{paginationDetails.currentPage}} of {{paginationDetails.totalPage}}
</strong></span>
<button [ngClass]="paginationDetails.isNext" class="btn-floating btn-pagination waves-effect waves-light"
(click)="loadPaginationData(next)">
<i class="fa fa-chevron-right"></i>
</button>
</div>
<div class="col-md-6 col-sm-12 col-lr-pad">
<div class="create-challenge align-right" *ngIf="isOnChallengePage">
<button [disabled]="!selectedTeam" class="btn btn-waves-effect grad-rec-btn waves-dark ev-btn-dark
grad-btn-dark fw-light fs-14" (click)="participateInChallenge()">
Continue
</button>
</div>
</div>
</div>
</div>
</ul>
</div>
<div class="create-challenge" *ngIf="selectedTeam && routerPublic.url=='/teams/hosts'">
<a class="btn btn-filter selected" (click)="createChallenge()">Create Challenge</a>
</div>
</div>
</div>
<div class="create-challenge" *ngIf="selectedTeam && routerPublic.url=='/teams/hosts'">
<a class="btn btn-filter selected" (click)="createChallenge()">Create Challenge</a>
</div>
<div class="create-challenge" *ngIf="selectedTeam && isOnChallengePage">
<a class="btn btn-filter selected" (click)="participateInChallenge()">Participate</a>
</div>
</div>
<div class="card team-create">
<div class="card-title">
{{teamCreateTitle}}
</div>
<div class="card-content">
<div class="team-create-form">
<app-input [label]="'team_name'" [placeholder]="'Team Name*'" [isRequired]="true" [theme]="'dark'" [icon]="'assets/images/username_dark.png'" #formteam></app-input>
<app-input [label]="'team_url'" [placeholder]="'Team URL (Optional)'" [isRequired]="false" [theme]="'dark'" [icon]="'assets/images/link_dark.png'" #formteam></app-input>
<span class="btn btn-filter selected" (click)="createTeam('formteam')">{{teamCreateButton}}</span>
<div class="col-md-6 col-sm-12">
<div class="ev-card-panel card-bt-margin">
<div class="ev-md-container bottom-hr-line">
<strong class="fw-semibold content">{{teamCreateTitle}}</strong>
</div>
<div class="ev-card-body new-team-card">
<div class="team-create-form">
<app-input [label]="'team_name'" [placeholder]="'Team Name*'" [isRequired]="true" [icon]="'fa fa-user'" #formteam></app-input>
<app-input [label]="'team_url'" [placeholder]="'Team URL (Optional)'" [isRequired]="false" [icon]="'fa fa-link'" #formteam></app-input>
<div class="align-left reg-control">
<button class="btn btn-waves-effect grad-rec-btn waves-dark ev-btn-dark grad-btn-dark fw-light fs-14" (click)="createTeam('formteam')" type="submit" value="Submit">
{{teamCreateButton}}
</button>
</div>
</div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 4d60082

Please sign in to comment.