src/app/modules/docs/docs.component.ts
OnInit
| selector | app-docs |
| styleUrls | ./docs.component.scss |
| templateUrl | ./docs.component.html |
Properties |
|
Methods |
constructor(configService: ConfigService, router: Router, activatedRoute: ActivatedRoute, docsService: DocsService, ga: GoogleAnalyticsService)
|
||||||||||||||||||
|
Defined in src/app/modules/docs/docs.component.ts:25
|
||||||||||||||||||
|
Parameters :
|
| onChange | ||||||
onChange(idx: number)
|
||||||
|
Defined in src/app/modules/docs/docs.component.ts:56
|
||||||
|
Parameters :
Returns :
void
|
| onLatest |
onLatest()
|
|
Defined in src/app/modules/docs/docs.component.ts:63
|
|
Returns :
void
|
| openData |
openData()
|
|
Defined in src/app/modules/docs/docs.component.ts:73
|
|
Returns :
void
|
| openDataOld |
openDataOld()
|
|
Defined in src/app/modules/docs/docs.component.ts:78
|
|
Returns :
void
|
| openGithub |
openGithub()
|
|
Defined in src/app/modules/docs/docs.component.ts:68
|
|
Returns :
void
|
| Public activatedRoute |
Type : ActivatedRoute
|
|
Defined in src/app/modules/docs/docs.component.ts:30
|
| Public configService |
Type : ConfigService
|
|
Defined in src/app/modules/docs/docs.component.ts:28
|
| copyrightYear |
Default value : new Date().getFullYear()
|
|
Defined in src/app/modules/docs/docs.component.ts:24
|
| docsData |
Type : string
|
|
Defined in src/app/modules/docs/docs.component.ts:21
|
| Public docsService |
Type : DocsService
|
|
Defined in src/app/modules/docs/docs.component.ts:31
|
| faChevronRight |
Default value : faChevronRight
|
|
Defined in src/app/modules/docs/docs.component.ts:19
|
| faEnvelope |
Default value : faEnvelope
|
|
Defined in src/app/modules/docs/docs.component.ts:18
|
| faPhone |
Default value : faPhone
|
|
Defined in src/app/modules/docs/docs.component.ts:17
|
| Public ga |
Type : GoogleAnalyticsService
|
|
Defined in src/app/modules/docs/docs.component.ts:32
|
| masterSheetLink |
Type : string
|
|
Defined in src/app/modules/docs/docs.component.ts:25
|
| REGISTRY |
Default value : REGISTRY
|
|
Defined in src/app/modules/docs/docs.component.ts:22
|
| selected |
Type : number
|
|
Defined in src/app/modules/docs/docs.component.ts:23
|
| showHeader |
Default value : true
|
|
Defined in src/app/modules/docs/docs.component.ts:20
|
| window |
Default value : window
|
|
Defined in src/app/modules/docs/docs.component.ts:16
|
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { faChevronRight, faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons';
import { GoogleAnalyticsService } from 'ngx-google-analytics';
import { ConfigService } from '../../app-config.service';
import { GaAction, GaCategory } from '../../models/ga.model';
import { DocsService } from '../../services/docs.service';
import { REGISTRY } from '../../static/docs';
@Component({
selector: 'app-docs',
templateUrl: './docs.component.html',
styleUrls: ['./docs.component.scss'],
})
export class DocsComponent implements OnInit {
window = window;
faPhone = faPhone;
faEnvelope = faEnvelope;
faChevronRight = faChevronRight;
showHeader = true;
docsData!: string;
REGISTRY = REGISTRY;
selected!: number;
copyrightYear = new Date().getFullYear();
masterSheetLink!: string;
constructor(
public configService: ConfigService,
private readonly router: Router,
public activatedRoute: ActivatedRoute,
public docsService: DocsService,
public ga: GoogleAnalyticsService,
) {
this.configService.config$.subscribe((config) => {
this.masterSheetLink = config['masterSheetLink'] as string;
});
}
ngOnInit(): void {
this.activatedRoute.params.subscribe((params) => {
if (this.docsService.getID(params['id']) >= 0) {
this.selected = this.docsService.getID(params['id']);
this.docsService.getData(params['id']);
} else {
this.router.navigate(['/docs', 'introduction']);
}
});
this.docsService.docsData.subscribe((data) => {
if (data) {
this.docsData = data;
}
});
}
onChange(idx: number) {
this.selected = idx;
const title = this.docsService.getTitle(idx);
this.router.navigate(['/docs', title]);
// Router navigation already fires Google Analytics events, see app.component.ts
}
onLatest() {
this.router.navigate(['/']);
this.ga.event(GaAction.NAV, GaCategory.DOCS, 'Back to Latest Release');
}
openGithub() {
window.open('https://github.com/hubmapconsortium/ccf-asct-reporter', '_blank');
this.ga.event(GaAction.NAV, GaCategory.DOCS, 'Open Github');
}
openData() {
window.open(this.masterSheetLink, '_blank');
this.ga.event(GaAction.NAV, GaCategory.DOCS, 'Open Data Tables');
}
openDataOld() {
window.open(
'https://docs.google.com/spreadsheets/d/1j_SLhFipRWUcRZrCDfNH15OWoiLf7cJks7NVppe3htI/edit#gid=1268820100',
'_blank',
);
this.ga.event(GaAction.NAV, GaCategory.DOCS, 'Open Old Data Tables');
}
}
<div class="w-100 h-100">
<div class="dark">
<div>
<div class="w-100 py-3 px-5 navbar dark">
<div class="d-flex justify-content-between align-items-center w-100">
<div class="navbar-logo">
<img src="./assets/logo-light.svg" alt="" class="w-75 logo-link" routerLink="/" />
</div>
<div class="navbar-options">
<a (click)="openData()" class="text-white">Master Tables</a>
<a (click)="openGithub()" class="ml-4 text-white github">GitHub</a>
<a (click)="openDataOld()" class="text-white ml-4">Old Tables</a>
</div>
</div>
</div>
</div>
</div>
<div class="w-100 h-100 nav-height">
<mat-drawer-container class="w-100">
<mat-drawer
[opened]="true"
[mode]="'side'"
class="drawer pb-5 nav-height"
position="start"
style="position: fixed"
>
<div class="pl-5 pr-3 d-flex justify-content-between align-items-center goto py-3" (click)="onLatest()">
<span class="h6 m-0 fw-bold h6-title">Latest Release</span>
<fa-icon class="icon-right" [icon]="faChevronRight"></fa-icon>
</div>
<hr class="m-0 mb-3" />
<div
*ngFor="let item of REGISTRY; let i = index"
class="px-5 py-3 menu-item"
[class.bg-light]="i === selected"
(click)="onChange(i)"
>
<h6 class="m-0">{{ item.title }}</h6>
</div>
</mat-drawer>
<div class="h-100 bg-white" style="overflow-y: auto">
<div class="p-5">
<div *ngIf="selected === 0">
<span class="title2 mb-0">ASCT+B REPORTER DOCS</span>
<p class="mt-3 desc">Welcome to the ASCT+B Reporter Documentation!</p>
</div>
<div class="w-100">
<markdown [data]="docsData" class="w-100 md-file"></markdown>
</div>
<div class="mt-5">
<app-docs-nav
[next]="selected + 1"
[prev]="selected - 1"
(nextClick)="onChange(selected + 1)"
(prevClick)="onChange(selected - 1)"
></app-docs-nav>
</div>
</div>
</div>
<!-- FOOTER -->
<app-footer></app-footer>
</mat-drawer-container>
</div>
</div>
./docs.component.scss
.dark {
background-color: #262626;
}
a {
color: white;
}
.navbar {
position: fixed;
z-index: 100;
}
.title2 {
font-family: 'Poppins', sans-serif;
font-size: 3.125rem;
line-height: 2.75rem;
font-weight: 700;
hyphens: auto;
letter-spacing: 0.25rem;
}
.desc {
font-size: 14pt;
font-weight: 400;
line-height: 1.5625rem;
}
.top-padding {
padding-top: 8rem;
}
.drawer {
width: 18rem;
}
h1 {
font-weight: 800 !important;
font-family: 'Poppins', sans-serif;
}
.menu-item {
transform: all 0.3s;
cursor: pointer;
&:hover:not(.bg-light) {
transition: all 0.3s;
background-color: #f2f2f2 !important;
}
}
.bg-light {
color: #444a65;
background-color: #e1e1e1 !important;
}
.nav-height {
padding-top: 62px;
}
.goto {
transition: all 0.3s;
cursor: pointer;
&:hover {
color: white;
background-color: #444a65;
}
&:active {
color: white;
background-color: #2e3243;
}
}
.md-file ::ng-deep {
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
.icon-right {
padding-right: 1rem;
}
.h6-title {
padding-left: 3rem;
}
.navbar-options {
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.github {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}