asctb-reporter
  1. Components
  2. DocsComponent

File

src/app/modules/docs/docs.component.ts

Implements

OnInit

Metadata

selector app-docs
styleUrls ./docs.component.scss
templateUrl ./docs.component.html

Index

Properties
Methods

Constructor

constructor(configService: ConfigService, router: Router, activatedRoute: ActivatedRoute, docsService: DocsService, ga: GoogleAnalyticsService)
Defined in src/app/modules/docs/docs.component.ts:25
Parameters :
Name Type Optional
configService ConfigService No
router Router No
activatedRoute ActivatedRoute No
docsService DocsService No
ga GoogleAnalyticsService No

Methods

onChange
onChange(idx: number)
Defined in src/app/modules/docs/docs.component.ts:56
Parameters :
Name Type Optional
idx number No
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

Properties

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;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""