src/app/user/user.component.ts
selector | app-user |
styleUrls | ./user.component.scss |
templateUrl | ./user.component.html |
Properties |
Methods |
|
constructor(dataService: ApiService)
|
||||||
Defined in src/app/user/user.component.ts:17
|
||||||
Parameters :
|
Private changeState | ||||||
changeState(state: boolean)
|
||||||
Defined in src/app/user/user.component.ts:104
|
||||||
Parameters :
Returns :
void
|
logout |
logout()
|
Defined in src/app/user/user.component.ts:100
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/user/user.component.ts:22
|
Returns :
void
|
hist |
Type : number[]
|
Default value : []
|
Defined in src/app/user/user.component.ts:16
|
loggedIn |
Type : boolean
|
Defined in src/app/user/user.component.ts:15
|
timeline |
Type : number[]
|
Defined in src/app/user/user.component.ts:17
|
user |
Type : User
|
Defined in src/app/user/user.component.ts:14
|
import {Component, OnInit} from '@angular/core';
import {User} from '../user';
import {ApiService} from '../api.service';
declare var Chart: any;
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {
user: User;
loggedIn: boolean;
hist: number[] = [];
timeline: number[];
constructor(private dataService: ApiService) {
}
ngOnInit(): void {
this.dataService.getLoggedInState.subscribe(state => this.changeState(state));
this.loggedIn = this.dataService.isLoggedIn();
this.user = JSON.parse(this.dataService.getToken());
(() => {
this.timeline = JSON.parse(this.user.correct_timeline);
console.log(this.timeline);
let sum = 0;
this.timeline.forEach(element => {
sum += element;
this.hist.push(sum);
});
})();
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontColor = '#888';
const ctx = (document.getElementById('myChart') as HTMLCanvasElement).getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from(this.timeline.keys()),
datasets: [{
label: 'Total Accepted',
data: this.hist,
fill: true,
backgroundColor: '#0f08'
},
{
label: 'Total Incorrect',
data: Array.from(this.timeline.keys()),
fill: true,
backgroundColor: '#f008'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
elements: {
point: {
radius: 0
}
},
layout: {
padding: {
bottom: -10,
left: -10
}
},
legend: {
labels: {
fontSize: 15
}
},
scales: {
xAxes: [{
ticks: {
display: false
},
gridLines: {
color: 'transparent'
}
}],
yAxes: [{
ticks: {
display: false
},
gridLines: {
color: 'transparent'
}
}]
}
}
});
}
logout(): void {
this.dataService.deleteToken();
}
private changeState(state: boolean): void {
this.loggedIn = state;
}
}
<div class="container">
<div class="card" id="user_cred">
<div id="grid1">
<img alt="Profile Icon" id="profile-icon" src="{{user.img_url}}">
<div class="name-and-id">
<div class="tc">
<div>{{user.name}}</div>
<div>{{user.email}}</div>
<div class="inline-code">{{user.username}}</div>
<div class="inline-code"><i class="lnr lnr-star"></i> {{user.rating}}</div>
<div>
<a href="" id="edit">
<button>Edit Details</button>
</a>
<a (click)="logout()" href="" id=" Logout">
<button>Logout</button>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<table id="stats">
<tr>
<td>Total Attempts</td>
<td>{{user.n_attempts}}</td>
</tr>
<tr>
<td>Accepted Submissions</td>
<td>{{hist[hist.length - 1]}} ({{hist[hist.length - 1] / user.n_attempts * 100 | number : '1.2-2'}}%)</td>
</tr>
<tr>
<td>Attempt Summary:</td>
</tr>
</table>
<div id="canvas">
<canvas height="100px" id="myChart" width="100px"></canvas>
</div>
</div>
</div>
./user.component.scss
.container {
position: relative;
padding: 20px;
.card {
border-bottom: 1px solid var(--color);
padding: 20px;
margin: 20px 0;
background: var(--dark);
}
#grid1 {
display: grid;
grid-template-columns: 100px auto;
grid-column-gap: 4%;
#profile-icon {
display: block;
width: 100px;
padding: 2px;
border: 1px solid var(--color);
}
.name-and-id {
display: table;
height: 106px;
}
.tc {
display: table-cell;
height: 106px;
vertical-align: middle;
& > div {
margin: 4px;
.lnr {
font-size: 1.1em;
color: #ffa;
border-radius: 100%;
box-shadow: 0 0 5px 5px #ff84 inset,
0 0 5px 5px #ff84;
}
}
}
}
#stats {
td {
padding: 5px 20px;
}
}
#canvas {
width: 40vw;
height: 40vw;
margin: 10px auto;
border: 1px dashed var(--color);
canvas {
display: block;
}
}
}
a {
margin: 2px;
}
@media screen and (max-width: 800px) {
#canvas {
width: 70vw !important;
height: 70vw !important;
}
}