Commit e76c1c5f authored by Moises Sacal's avatar Moises Sacal
Browse files

issue #12 init angular app

parent 34c6289d
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "labarchives"
},
"apps": [
{
"name": "labarchives",
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
# Editor configuration, see http://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
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/dist-server
/tmp
/out-tsc
# dependencies
/node_modules
# 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
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
yarn-error.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db
# Labarchives
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.4.
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
## Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
import { AppPage } from './app.po';
describe('labarchives App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
// 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/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
This diff is collapsed.
{
"name": "labarchives",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./e2e/**/*.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: 'e2e/tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
import {Component, Input} from '@angular/core';
@Component({
selector: 'labarchives-list',
template: `
<div class="">
<table class="table">
<thead>
<tr>
<ng-container *ngFor="let header of columns">
<th>{{ header.label }}</th>
</ng-container>
<th>{{ rdmpLinkLabel }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of workspaces">
<ng-container *ngFor="let column of columns">
<td *ngIf="column.show != false">
<span *ngIf="column.link; else noProcessing "><a target="_blank" rel="noopener noreferrer"
href="{{ item[column.property] }}">{{ item[column.property]
}}</a></span>
<ng-template #multivalue></ng-template>
<ng-template #noProcessing><span>{{ item[column.property] }}</span></ng-template>
</td>
</ng-container>
<td>
<span *ngIf="item.rdmp.info && item.rdmp.info.rdmp; else isNotLinked ">
<button disabled type="button" class="btn btn-success btn-block"
*ngIf="item.rdmp.info.rdmp === rdmp"> Linked </button>
<button disabled type="button" class="btn btn-info btn-block" *ngIf="item.rdmp.info.rdmp != rdmp"> Linked to another RDMP</button>
</span>
<ng-template #isNotLinked>
<button type="button" class="btn btn-info btn-block" (click)="linkWorkspace(item)"> Link</button>
</ng-template>
</td>
</tr>
</tbody>
</table>
<div *ngIf="loading" class="">
<img class="center-block" src="/images/loading.svg">
</div>
<p *ngIf="failedObjects.length > 0">There were {{ failedObjects.length }} records that failed to
load</p>
<p *ngIf="accessDeniedObjects.length > 0">There were {{ accessDeniedObjects.length }} records that
you do not have access to</p>
<div class="">
<button type="button" class="btn btn-default" (click)="listWorkspaces()"><i
class="fa fa-refresh"></i>&nbsp;{{ syncLabel }}
</button>
</div>
</div>
`
})
export class LabarchivesListComponent {
columns: any;
syncLabel: any;
accessDeniedObjects: any = [];
failedObjects: any = [];
rdmpLinkLabel: string;
loading: boolean;
rdmp: string;
workspaces: any;
@Input() user: any;
constructor() {
this.columns = [
{'label': 'Name', 'property': 'name'},
{'label': 'Description', 'property': 'description'},
{'label': 'Location', 'property': 'web_url', 'link': 'true'}
];
this.rdmpLinkLabel = 'Plan';
this.syncLabel = 'Sync';
}
listWorkspaces() {
return [
{name: 'notebook', description: 'notebook description', web_url: 'the route of the notebook', rdmp: {info:''}},
{name: 'notebook2', description: 'notebook description 2 ', web_url: 'the route of the notebook', rdmp: {info:''}}
];
}
linkWorkspace(item: any) {
alert('linking')
}
ngOnInit() {
this.workspaces = this.listWorkspaces();
}
}
import {Component, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'labarchives-login',
template: `
<form (ngSubmit)="onSubmit()" #form="ngForm">
<div class="form-group">
<label>{{ usernameLabel }}</label>
<input type="text" class="form-control" [(ngModel)]="username" name="username"
attr.aria-label="{{ usernameLabel }}">
</div>
<div class="form-group">
<label>{{ passwordLabel }}</label>
<input type="password" class="form-control" [(ngModel)]="password" name="password"
attr.aria-label="{{ passwordLabel }}">
</div>
<div class="form-row">
<button type="submit" [disabled]="!valid" class="btn btn-primary">Login</button>
</div>
<div class="errorMessage" *ngIf="!isValid">{{valid}} is required</div>
</form>
`
})
export class LabarchivesLoginComponent {
valid = true;
username: string;
usernameLabel: string = 'Username';
password: string;
passwordLabel: string = 'Password';
submitted = false;
user: any;
@Output() userLogin = new EventEmitter<any>();
onSubmit() {
this.user = {username: this.username, password: this.password};
this.user.loggedIn = true;
this.userLogin.emit(this.user);
this.submitted = true;
}
isValid() {
return true;
}
}
<div class="container-fluid">
<h2>LabNotebooks</h2>
<div *ngIf="!user.loggedIn" class="row">
<div class="col-md-5 col-md-offset-2">
<labarchives-login (user)="user" (userLogin)="loginUser($event)"></labarchives-login>
</div>
</div>
<div *ngIf="user.loggedIn" class="row">
<div class="col-lg-10">
<labarchives-list ([user])="user"></labarchives-list>
</div>
</div>
</div>
import { TestBed, async } from '@angular/core/testing';
import { LabarchivesFormComponent } from './labarchives-form.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
LabarchivesFormComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(LabarchivesFormComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const fixture = TestBed.createComponent(LabarchivesFormComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
const fixture = TestBed.createComponent(LabarchivesFormComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
}));
});
import {Component} from '@angular/core';
@Component({
selector: 'labarchives',
templateUrl: './labarchives-form.component.html',
styleUrls: ['./labarchives-form.component.css']
})
export class LabarchivesFormComponent {
user: any;
constructor(){
this.user = {}
}
loginUser(user){
this.user = user;
}
}
import {BrowserModule} from '@angular/platform-browser';
import {ReactiveFormsModule} from '@angular/forms';
import {NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import {LabarchivesFormComponent} from './labarchives-form.component';
import {LabarchivesLoginComponent} from './components/labarchives-login.component';
import {LabarchivesListComponent} from './components/labarchives-list.component';
@NgModule({
declarations: [
LabarchivesFormComponent, LabarchivesLoginComponent, LabarchivesListComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [LabarchivesFormComponent]
})
export class LabarchivesModule {
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment