Adds base Angular Material project, CI config files, and instructions.

This commit is contained in:
Aaron Louie 2019-11-13 12:35:49 -05:00
parent 6de7461fc8
commit 3d39c3ffb6
50 changed files with 14558 additions and 0 deletions

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false

49
.gitignore vendored Normal file
View File

@ -0,0 +1,49 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# Only exists if Bazel was run
/bazel-out
# dependencies
/node_modules
# profiling files
chrome-profiler-events*.json
speed-measure-plugin*.json
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# System Files
.DS_Store
Thumbs.db
# SonarCloud
/.scannerwork/

5
.sonarcloud.properties Normal file
View File

@ -0,0 +1,5 @@
sonar.organization=sartography
sonar.projectKey=sartography_app-template-angular-material
sonar.host.url=https://sonarcloud.io
sonar.login=f586bac67c1fe26a18700fa0ecf535e9c8a49bee
sonar.javascript.lcov.reportPaths=coverage/app-template-angular-material/lcov.info

20
.travis.yml Normal file
View File

@ -0,0 +1,20 @@
sudo: required
dist: trusty
addons:
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sonarcloud:
organization: "sartography"
language: node_js
node_js:
- 12
before_script:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
install:
- npm install
script:
- npm run ci

21
LICENSE Normal file
View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2019 Sartography
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

187
angular.json Normal file
View File

@ -0,0 +1,187 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-template-angular-material": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/app-template-angular-material",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
},
"test": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.test.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app-template-angular-material:build"
},
"configurations": {
"production": {
"browserTarget": "app-template-angular-material:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app-template-angular-material:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app-template-angular-material:serve"
},
"configurations": {
"production": {
"devServerTarget": "app-template-angular-material:serve:production"
}
}
}
}
}},
"defaultProject": "app-template-angular-material"
}

12
browserslist Normal file
View File

@ -0,0 +1,12 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

32
e2e/protractor.conf.js Normal file
View File

@ -0,0 +1,32 @@
// @ts-check
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
/**
* @type { import("protractor").Config }
*/
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
browserName: 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};

23
e2e/src/app.e2e-spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('Study Administrator App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('app-template-angular-material');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});

11
e2e/src/app.po.ts Normal file
View File

@ -0,0 +1,11 @@
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get(browser.baseUrl) as Promise<any>;
}
getTitleText() {
return element(by.css('app-root .site-title')).getText() as Promise<string>;
}
}

13
e2e/tsconfig.json Normal file
View File

@ -0,0 +1,13 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}

32
karma.conf.js Normal file
View File

@ -0,0 +1,32 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/app-template-angular-material'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

13167
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

57
package.json Normal file
View File

@ -0,0 +1,57 @@
{
"name": "app-template-angular-material",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --configuration=production",
"build:staging": "ng build --configuration=staging",
"build:test": "ng build --configuration=test",
"test": "ng test",
"test:once": "ng test --code-coverage --watch=false",
"lint": "ng lint",
"e2e": "ng e2e",
"ci": "npm run lint && npm run test:once && npm run e2e && sonar-scanner"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.12",
"@angular/cdk": "~8.2.3",
"@angular/common": "~8.2.12",
"@angular/compiler": "~8.2.12",
"@angular/core": "~8.2.12",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "~8.2.12",
"@angular/material": "^8.2.3",
"@angular/platform-browser": "~8.2.12",
"@angular/platform-browser-dynamic": "~8.2.12",
"@angular/router": "~8.2.12",
"hammerjs": "^2.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.15",
"@angular/cli": "~8.3.15",
"@angular/compiler-cli": "~8.2.12",
"@angular/language-service": "~8.2.12",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"sonar-scanner": "^3.1.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}

View File

@ -0,0 +1,3 @@
export interface GenericType {
id: number;
}

View File

@ -0,0 +1,7 @@
export interface StudyTask {
id: number;
study_id: number;
task_id: number;
is_complete: boolean;
is_disabled: boolean;
}

View File

@ -0,0 +1,7 @@
import {GenericType} from './generic-type';
export interface StudyType extends GenericType {
id: number;
label: string;
task_ids: number[];
}

7
src/app/_models/study.ts Normal file
View File

@ -0,0 +1,7 @@
import {GenericType} from './generic-type';
export interface Study extends GenericType {
id: number;
title: string;
type_id: number;
}

6
src/app/_models/task.ts Normal file
View File

@ -0,0 +1,6 @@
import {GenericType} from './generic-type';
export interface Task extends GenericType {
id: number;
label: string;
}

View File

@ -0,0 +1,29 @@
import {HttpClient, HttpHandler} from '@angular/common/http';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {TestBed} from '@angular/core/testing';
import {ApiService} from './api.service';
describe('ApiService', () => {
let httpClient: HttpClient;
let httpTestingController: HttpTestingController;
beforeEach(async () => {
TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [
HttpClient,
HttpHandler
]
});
// Inject the http service and test controller for each test
httpClient = TestBed.get(HttpClient);
httpTestingController = TestBed.get(HttpTestingController);
});
it('should be created', () => {
const service: ApiService = TestBed.get(ApiService);
expect(service).toBeTruthy();
});
});

View File

@ -0,0 +1,135 @@
import {HttpClient} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable, throwError} from 'rxjs';
import {catchError, filter, find, map} from 'rxjs/operators';
import {environment} from '../../../environments/environment';
import {GenericType} from '../../_models/generic-type';
import {Study} from '../../_models/study';
import {StudyTask} from '../../_models/study-task';
import {StudyType} from '../../_models/study-type';
import {Task} from '../../_models/task';
interface ApiError {
code: string;
message: string;
}
@Injectable({
providedIn: 'root'
})
export class ApiService {
public endpoints = {
study: '/api/study/<id>',
studyList: '/api/study',
studyTask: '/api/study_task/<id>',
studyTaskList: '/api/study_task',
studyTaskListForStudy: '/api/study_task/study/<id>',
studyType: '/api/study_type/<id>',
studyTypeList: '/api/study_type',
task: '/api/task/<id>',
taskList: '/api/task',
};
private apiRoot: string;
constructor(
private httpClient: HttpClient
) {
this.apiRoot = environment.api;
}
/** Get Study */
getStudy(id: number): Observable<Study> {
return this._getOne<Study>(id, 'study');
}
/** Get Studies */
getStudies(): Observable<Study[]> {
return this._getAll<Study>('study');
}
/** Get Study Task */
getStudyTask(id: number): Observable<StudyTask> {
return this._getOne<StudyTask>(id, 'studyTask');
}
/** Get Study Tasks for Study */
getStudyTasksForStudy(id: number): Observable<StudyTask[]> {
if (environment.dummy) {
return this.httpClient
.get<StudyTask[]>(this._endpointUrl('studyTaskList'))
.pipe(map(st => st.filter(s => s.study_id === id)))
.pipe(catchError(this._handleError));
} else {
return this.httpClient
.get<StudyTask[]>(this._endpointUrl('studyTasksForStudy').replace('<id>', id.toString()))
.pipe(catchError(this._handleError));
}
}
/** Get Study Tasks */
getStudyTasks(): Observable<StudyTask[]> {
return this._getAll<StudyTask>('studyTask');
}
/** Get Study Type */
getStudyType(id: number): Observable<StudyType> {
return this._getOne<StudyType>(id, 'studyType');
}
/** Get Study Types */
getStudyTypes(): Observable<StudyType[]> {
return this._getAll<StudyType>('studyType');
}
/** Get Task */
getTask(id: number): Observable<Task> {
return this._getOne<Task>(id, 'task');
}
/** Get Tasks */
getTasks(): Observable<Task[]> {
return this._getAll<Task>('task');
}
private _handleError(error: ApiError) {
let message = 'Could not complete your request; please try again later.';
message = error.message;
// return an observable with a user-facing error message
return throwError(message);
}
private _endpointUrl(endpointName: string): string {
const path = this.endpoints[endpointName];
if (environment.dummy) {
return this._dummy_api_url(path);
} else if (path) {
return this.apiRoot + path;
} else {
console.log(`endpoint '${endpointName}' does not exist`);
}
}
private _dummy_api_url(path: string) {
return path.replace(/^(.*)\/api\/(.*)$/, '/assets/json/$2.json');
}
private _getOne<T extends GenericType>(id: number, endpointName: string): Observable<T> {
if (environment.dummy) {
return this.httpClient
.get<T[]>(this._endpointUrl(endpointName + 'List'))
.pipe(map(results => results.find(t => t.id === id)))
.pipe(catchError(this._handleError));
} else {
return this.httpClient
.get<T>(this._endpointUrl(endpointName).replace('<id>', id.toString()))
.pipe(catchError(this._handleError));
}
}
private _getAll<T extends GenericType>(endpointName: string): Observable<T[]> {
return this.httpClient
.get<T[]>(this._endpointUrl(endpointName + 'List'))
.pipe(catchError(this._handleError));
}
}

View File

@ -0,0 +1,18 @@
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HomeComponent} from './home/home.component';
const routes: Routes = [
{
path: '',
component: HomeComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}

View File

@ -0,0 +1 @@
<router-outlet></router-outlet>

View File

View File

@ -0,0 +1,32 @@
import {HttpClient} from '@angular/common/http';
import {async, TestBed} from '@angular/core/testing';
import {RouterTestingModule} from '@angular/router/testing';
import {AppComponent} from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
providers: [
HttpClient
]
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'app-template-angular-material'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app-template-angular-material');
});
});

10
src/app/app.component.ts Normal file
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app-template-angular-material';
}

51
src/app/app.module.ts Normal file
View File

@ -0,0 +1,51 @@
import {HttpClientModule} from '@angular/common/http';
import {NgModule} from '@angular/core';
import {FlexLayoutModule} from '@angular/flex-layout';
import {FormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ApiService} from './_services/api/api.service';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {HomeComponent} from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
AppRoutingModule,
BrowserAnimationsModule,
BrowserModule,
FlexLayoutModule,
FormsModule,
HttpClientModule,
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatSelectModule,
MatSidenavModule,
MatToolbarModule,
],
providers: [
{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}},
ApiService
],
bootstrap: [AppComponent]
})
export class AppModule {
}

View File

@ -0,0 +1,44 @@
<mat-toolbar color="primary">
<span class="site-title">app-template-angular-material</span>
<button mat-button [matMenuTriggerFor]="menu">
{{selectedStudy ? selectedStudy.title : 'Select study'}}
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let study of studies" (click)="getStudyTasks(study)">
{{study.title}}
</button>
</mat-menu>
</mat-toolbar>
<mat-drawer-container class="example-container">
<mat-drawer mode="side" opened>
<mat-nav-list>
<mat-list-item *ngFor="let task of tasks" [ngClass]="{'disabled': isDisabled(task)}">
<a fxLayout="row" fxLayoutAlign="start center" href="?taskId={{task.id}}" matLine>
{{ task.label }}
<span fxFlex></span>
<mat-icon>{{isComplete(task) ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
</a>
</mat-list-item>
</mat-nav-list>
</mat-drawer>
<mat-drawer-content>
<form>
<h4>Select Study Type</h4>
<mat-form-field>
<mat-label>Study Type</mat-label>
<mat-select [(ngModel)]="selectedType" name="type">
<mat-option *ngFor="let type of types" [value]="type">
{{type.label}}
</mat-option>
</mat-select>
</mat-form-field>
<ng-container *ngIf="selectedType">
<p>Selected: {{selectedType.label}} ({{selectedType.id}})</p>
<ul>
<li *ngFor="let taskId of selectedType.task_ids">{{taskId}}</li>
</ul>
</ng-container>
</form>
</mat-drawer-content>
</mat-drawer-container>

View File

@ -0,0 +1,13 @@
mat-drawer {
width: 250px;
}
mat-drawer-content {
padding: 40px;
}
mat-list-item.disabled {
cursor: not-allowed !important;
opacity: 0.5;
text-decoration: none;
}

View File

@ -0,0 +1,53 @@
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatListModule} from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu';
import {MatSelectModule} from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatToolbarModule} from '@angular/material/toolbar';
import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
import {HomeComponent} from './home.component';
describe('HomeComponent', () => {
let component: HomeComponent;
let fixture: ComponentFixture<HomeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [HomeComponent],
imports: [
HttpClientModule,
MatButtonModule,
MatMenuModule,
MatToolbarModule,
BrowserAnimationsModule,
NoopAnimationsModule,
MatIconModule,
MatListModule,
MatSidenavModule,
MatFormFieldModule,
MatSelectModule,
FormsModule,
],
providers: [
HttpClient
]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,50 @@
import {Component, OnInit} from '@angular/core';
import {Study} from '../_models/study';
import {StudyTask} from '../_models/study-task';
import {StudyType} from '../_models/study-type';
import {Task} from '../_models/task';
import {ApiService} from '../_services/api/api.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
studies: Study[] = [];
tasks: Task[] = [];
types: StudyType[] = [];
studyTasks: StudyTask[] = [];
selectedType: StudyType;
selectedStudy: Study;
constructor(private api: ApiService) {
this.api.getStudies().subscribe(s => this.studies = s);
this.api.getStudyTypes().subscribe(st => this.types = st);
}
ngOnInit() {
}
getStudyTasks(study: Study) {
this.selectedStudy = study;
this.tasks = [];
this.api.getStudyTasksForStudy(this.selectedStudy.id).subscribe(st => {
this.studyTasks = st;
st.forEach(item => {
this.api.getTask(item.task_id).subscribe(t => {
this.tasks.push(t);
});
});
});
}
isDisabled(task: Task) {
return this.studyTasks.find(st => st.task_id === task.id).is_disabled;
}
isComplete(task: Task) {
return this.studyTasks.find(st => st.task_id === task.id).is_complete;
}
}

0
src/assets/.gitkeep Normal file
View File

View File

@ -0,0 +1,22 @@
[
{
"id": 0,
"title": "Study 0",
"type_id": 2
},
{
"id": 1,
"title": "Study 1",
"type_id": 3
},
{
"id": 2,
"title": "Study 2",
"type_id": 0
},
{
"id": 3,
"title": "Study 3",
"type_id": 1
}
]

View File

@ -0,0 +1,72 @@
[
{
"id": 0,
"study_id": 0,
"task_id": 0,
"is_complete": true,
"is_disabled": false
},
{
"id": 1,
"study_id": 0,
"task_id": 1,
"is_complete": false,
"is_disabled": true
},
{
"id": 2,
"study_id": 1,
"task_id": 3,
"is_complete": false,
"is_disabled": false
},
{
"id": 3,
"study_id": 2,
"task_id": 0,
"is_complete": false,
"is_disabled": false
},
{
"id": 4,
"study_id": 2,
"task_id": 1,
"is_complete": false,
"is_disabled": false
},
{
"id": 5,
"study_id": 2,
"task_id": 2,
"is_complete": false,
"is_disabled": true
},
{
"id": 6,
"study_id": 2,
"task_id": 3,
"is_complete": false,
"is_disabled": true
},
{
"id": 7,
"study_id": 3,
"task_id": 0,
"is_complete": false,
"is_disabled": false
},
{
"id": 8,
"study_id": 3,
"task_id": 2,
"is_complete": false,
"is_disabled": true
},
{
"id": 9,
"study_id": 3,
"task_id": 3,
"is_complete": true,
"is_disabled": false
}
]

View File

@ -0,0 +1,22 @@
[
{
"id": 0,
"label": "Study Type 0",
"task_ids": [0, 1, 2, 3]
},
{
"id": 1,
"label": "Study Type 1",
"task_ids": [0, 2, 3]
},
{
"id": 2,
"label": "Study Type 2",
"task_ids": [0, 1]
},
{
"id": 3,
"label": "Study Type 3",
"task_ids": [3]
}
]

18
src/assets/json/task.json Normal file
View File

@ -0,0 +1,18 @@
[
{
"id": 0,
"label": "Tasks 0"
},
{
"id": 1,
"label": "Tasks 1"
},
{
"id": 2,
"label": "Tasks 2"
},
{
"id": 3,
"label": "Tasks 3"
}
]

View File

@ -0,0 +1,5 @@
export const environment = {
production: true,
api: 'https://crconnect.virginia.edu',
googleAnalyticsKey: ''
};

View File

@ -0,0 +1,5 @@
export const environment = {
production: true,
api: 'https://staging.crconnect.virginia.edu',
googleAnalyticsKey: ''
};

View File

@ -0,0 +1,5 @@
export const environment = {
production: false,
api: 'localhost:4200',
dummy: true,
};

View File

@ -0,0 +1,5 @@
export const environment = {
production: false,
api: 'localhost:4200',
dummy: true,
};

BIN
src/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 B

15
src/index.html Normal file
View File

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app-template-angular-material - Prototype</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>

13
src/main.ts Normal file
View File

@ -0,0 +1,13 @@
import 'hammerjs';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

63
src/polyfills.ts Normal file
View File

@ -0,0 +1,63 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags.ts';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

32
src/styles.scss Normal file
View File

@ -0,0 +1,32 @@
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-template-angular-material-primary: mat-palette($mat-indigo);
$app-template-angular-material-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
$app-template-angular-material-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$app-template-angular-material-theme: mat-light-theme($app-template-angular-material-primary, $app-template-angular-material-accent, $app-template-angular-material-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-template-angular-material-theme);
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

20
src/test.ts Normal file
View File

@ -0,0 +1,20 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);

18
tsconfig.app.json Normal file
View File

@ -0,0 +1,18 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.ts"
],
"exclude": [
"src/test.ts",
"src/**/*.spec.ts"
]
}

26
tsconfig.json Normal file
View File

@ -0,0 +1,26 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}

18
tsconfig.spec.json Normal file
View File

@ -0,0 +1,18 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"node"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

91
tslint.json Normal file
View File

@ -0,0 +1,91 @@
{
"extends": "tslint:recommended",
"rules": {
"array-type": false,
"arrow-parens": false,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"import-blacklist": [
true,
"rxjs/Rx"
],
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
},
"rulesDirectory": [
"codelyzer"
]
}