@@ -0,0 +1,16 @@ | |||
# 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 | |||
[*.ts] | |||
quote_type = single | |||
[*.md] | |||
max_line_length = off | |||
trim_trailing_whitespace = false |
@@ -0,0 +1,46 @@ | |||
# 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 |
@@ -0,0 +1,27 @@ | |||
# Einkaufszettel | |||
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.6. | |||
## 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). |
@@ -0,0 +1,128 @@ | |||
{ | |||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", | |||
"version": 1, | |||
"newProjectRoot": "projects", | |||
"projects": { | |||
"Einkaufszettel": { | |||
"projectType": "application", | |||
"schematics": {}, | |||
"root": "", | |||
"sourceRoot": "src", | |||
"prefix": "app", | |||
"architect": { | |||
"build": { | |||
"builder": "@angular-devkit/build-angular:browser", | |||
"options": { | |||
"outputPath": "dist/Einkaufszettel", | |||
"index": "src/index.html", | |||
"main": "src/main.ts", | |||
"polyfills": "src/polyfills.ts", | |||
"tsConfig": "tsconfig.app.json", | |||
"aot": true, | |||
"assets": [ | |||
"src/favicon.ico", | |||
"src/assets" | |||
], | |||
"styles": [ | |||
"src/styles.css" | |||
], | |||
"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, | |||
"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": "Einkaufszettel:build" | |||
}, | |||
"configurations": { | |||
"production": { | |||
"browserTarget": "Einkaufszettel:build:production" | |||
} | |||
} | |||
}, | |||
"extract-i18n": { | |||
"builder": "@angular-devkit/build-angular:extract-i18n", | |||
"options": { | |||
"browserTarget": "Einkaufszettel: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.css" | |||
], | |||
"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": "Einkaufszettel:serve" | |||
}, | |||
"configurations": { | |||
"production": { | |||
"devServerTarget": "Einkaufszettel:serve:production" | |||
} | |||
} | |||
} | |||
} | |||
} | |||
}, | |||
"defaultProject": "Einkaufszettel", | |||
"cli": { | |||
"analytics": false | |||
} | |||
} |
@@ -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'. |
@@ -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 } })); | |||
} | |||
}; |
@@ -0,0 +1,23 @@ | |||
import { AppPage } from './app.po'; | |||
import { browser, logging } from 'protractor'; | |||
describe('workspace-project App', () => { | |||
let page: AppPage; | |||
beforeEach(() => { | |||
page = new AppPage(); | |||
}); | |||
it('should display welcome message', () => { | |||
page.navigateTo(); | |||
expect(page.getTitleText()).toEqual('Einkaufszettel app is running!'); | |||
}); | |||
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)); | |||
}); | |||
}); |
@@ -0,0 +1,11 @@ | |||
import { browser, by, element } from 'protractor'; | |||
export class AppPage { | |||
navigateTo(): Promise<unknown> { | |||
return browser.get(browser.baseUrl) as Promise<unknown>; | |||
} | |||
getTitleText(): Promise<string> { | |||
return element(by.css('app-root .content span')).getText() as Promise<string>; | |||
} | |||
} |
@@ -0,0 +1,13 @@ | |||
{ | |||
"extends": "../tsconfig.json", | |||
"compilerOptions": { | |||
"outDir": "../out-tsc/e2e", | |||
"module": "commonjs", | |||
"target": "es5", | |||
"types": [ | |||
"jasmine", | |||
"jasminewd2", | |||
"node" | |||
] | |||
} | |||
} |
@@ -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/Einkaufszettel'), | |||
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 | |||
}); | |||
}; |
@@ -0,0 +1,46 @@ | |||
{ | |||
"name": "einkaufszettel", | |||
"version": "0.0.0", | |||
"scripts": { | |||
"ng": "ng", | |||
"start": "ng serve", | |||
"build": "ng build", | |||
"test": "ng test", | |||
"lint": "ng lint", | |||
"e2e": "ng e2e" | |||
}, | |||
"private": true, | |||
"dependencies": { | |||
"@angular/animations": "~9.1.7", | |||
"@angular/common": "~9.1.7", | |||
"@angular/compiler": "~9.1.7", | |||
"@angular/core": "~9.1.7", | |||
"@angular/forms": "~9.1.7", | |||
"@angular/platform-browser": "~9.1.7", | |||
"@angular/platform-browser-dynamic": "~9.1.7", | |||
"@angular/router": "~9.1.7", | |||
"rxjs": "~6.5.4", | |||
"tslib": "^1.10.0", | |||
"zone.js": "~0.10.2" | |||
}, | |||
"devDependencies": { | |||
"@angular-devkit/build-angular": "~0.901.6", | |||
"@angular/cli": "~9.1.6", | |||
"@angular/compiler-cli": "~9.1.7", | |||
"@types/node": "^12.11.1", | |||
"@types/jasmine": "~3.5.0", | |||
"@types/jasminewd2": "~2.0.3", | |||
"codelyzer": "^5.1.2", | |||
"jasmine-core": "~3.5.0", | |||
"jasmine-spec-reporter": "~4.2.1", | |||
"karma": "~5.0.0", | |||
"karma-chrome-launcher": "~3.1.0", | |||
"karma-coverage-istanbul-reporter": "~2.1.0", | |||
"karma-jasmine": "~3.0.1", | |||
"karma-jasmine-html-reporter": "^1.4.2", | |||
"protractor": "~5.4.3", | |||
"ts-node": "~8.3.0", | |||
"tslint": "~6.1.0", | |||
"typescript": "~3.8.3" | |||
} | |||
} |
@@ -0,0 +1,54 @@ | |||
<h1>Einkaufszettel</h1> | |||
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry> | |||
<h2>Neuen Einkaufszettel Eintrag anlegen:</h2> | |||
<div class="form"> | |||
<div class="control"> | |||
<label for="title">Titel:</label> | |||
<input type="text" id="title" #title/> | |||
</div> | |||
<div class="control"> | |||
<label for="title">Bild-URL:</label> | |||
<input type="text" id="image" #image/> | |||
</div> | |||
<div class="container"> | |||
<div class="row custom-wrapper"> | |||
<div class="col-md-12"> | |||
<!-- Form starts --> | |||
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()"> | |||
<div class="group-gap"> | |||
<div class="d-block my-3"> | |||
<div class="mb-3"> | |||
<select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName"> | |||
<option value="">Wählen sie eine Kategorie</option> | |||
<option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option> | |||
</select> | |||
<!-- error block --> | |||
<div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required"> | |||
<sup>*</sup>Bitte geben sie eine Kategorie ein! | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- Submit Button --> | |||
<button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button> | |||
</form><!-- Form ends --> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="control"> | |||
<label for="title">Kategorie:</label> | |||
<input type="text" id="kategorie" #kategorie/> | |||
</div> | |||
<div class="control"> | |||
<label for="text">Text:</label> | |||
<textarea id="text" cols="20" rows="3" #text> | |||
</textarea> | |||
</div> | |||
<div> | |||
<button (click)="createBlogEntry(title.value, image.value, kategorie.value, text.value)"> | |||
Blog-Eintrag anlegen | |||
</button> | |||
</div> | |||
</div> |
@@ -0,0 +1,31 @@ | |||
import { TestBed, async } from '@angular/core/testing'; | |||
import { AppComponent } from './app.component'; | |||
describe('AppComponent', () => { | |||
beforeEach(async(() => { | |||
TestBed.configureTestingModule({ | |||
declarations: [ | |||
AppComponent | |||
], | |||
}).compileComponents(); | |||
})); | |||
it('should create the app', () => { | |||
const fixture = TestBed.createComponent(AppComponent); | |||
const app = fixture.componentInstance; | |||
expect(app).toBeTruthy(); | |||
}); | |||
it(`should have as title 'Einkaufszettel'`, () => { | |||
const fixture = TestBed.createComponent(AppComponent); | |||
const app = fixture.componentInstance; | |||
expect(app.title).toEqual('Einkaufszettel'); | |||
}); | |||
it('should render title', () => { | |||
const fixture = TestBed.createComponent(AppComponent); | |||
fixture.detectChanges(); | |||
const compiled = fixture.nativeElement; | |||
expect(compiled.querySelector('.content span').textContent).toContain('Einkaufszettel app is running!'); | |||
}); | |||
}); |
@@ -0,0 +1,61 @@ | |||
import {Component} from '@angular/core'; | |||
import {initialEntries} from './initialEntries'; | |||
import {BlogEntry} from './blog-entry'; | |||
import {FormBuilder, Validators} from '@angular/forms'; | |||
@Component({ | |||
selector: 'app-root', | |||
templateUrl: 'app.component.html' | |||
}) | |||
export class AppComponent { | |||
constructor(public fb: FormBuilder) { | |||
this.entries = []; | |||
this.entries = initialEntries; | |||
} | |||
// Getter method to access formcontrols | |||
get kategorieName() { | |||
return this.registrationForm.get('kategorieName'); | |||
} | |||
title = 'Einkaufszettel'; | |||
entries: BlogEntry[] = []; | |||
isSubmitted = false; | |||
// Kategorien | |||
Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges']; | |||
/*########### Form ###########*/ | |||
registrationForm = this.fb.group({ | |||
kategorieName: ['', [Validators.required]] | |||
}); | |||
createBlogEntry(title: string, image: string, kategorie: string, text: string, ) { | |||
if (title && image && text && kategorie) { | |||
const entry = new BlogEntry(); | |||
entry.title = title; | |||
entry.image = image; | |||
entry.text = text; | |||
entry.kategorie = kategorie; | |||
this.entries.push(entry); | |||
} | |||
} | |||
// Kategorie mit Drop Down Menu wählen | |||
changeKategorie(e) { | |||
console.log(e.value); | |||
this.kategorieName.setValue(e.target.value, { | |||
onlySelf: true | |||
}); | |||
} | |||
/*########### Template Driven Form ###########*/ | |||
onSubmit() { | |||
this.isSubmitted = true; | |||
if (!this.registrationForm.valid) { | |||
return false; | |||
} else { | |||
alert(JSON.stringify(this.registrationForm.value)); | |||
} | |||
} | |||
} | |||
@@ -0,0 +1,20 @@ | |||
import { BlogEntryComponent } from './blog-entry.component'; | |||
import { BrowserModule } from '@angular/platform-browser'; | |||
import { NgModule } from '@angular/core'; | |||
import { AppComponent } from './app.component'; | |||
import {ReactiveFormsModule} from '@angular/forms'; | |||
@NgModule({ | |||
declarations: [ | |||
AppComponent, | |||
BlogEntryComponent | |||
], | |||
imports: [ | |||
BrowserModule, | |||
ReactiveFormsModule | |||
], | |||
providers: [], | |||
bootstrap: [AppComponent] | |||
}) | |||
export class AppModule { } |
@@ -0,0 +1,10 @@ | |||
<div class="blog-entry"> | |||
<div class="blog-image"> | |||
<img [src]="entry.image" [alt]="entry.title"/> | |||
</div> | |||
<div class="blog-summary"> | |||
<span class="title">{{entry.title}}</span> | |||
<p> {{entry.kategorie}}</p> | |||
<p> {{entry.text}}</p> | |||
</div> | |||
</div> |
@@ -0,0 +1,10 @@ | |||
import {Component, Input} from '@angular/core'; | |||
import {BlogEntry} from './blog-entry'; | |||
@Component({ | |||
selector: 'app-blog-entry', | |||
templateUrl: 'blog-entry.component.html' | |||
}) | |||
export class BlogEntryComponent { | |||
@Input() entry: BlogEntry; | |||
} |
@@ -0,0 +1,6 @@ | |||
export class BlogEntry { | |||
title: string; | |||
image: string; | |||
kategorie: string; | |||
text: string; | |||
} |
@@ -0,0 +1,14 @@ | |||
export const initialEntries = [ | |||
{ | |||
title: 'Edeka', | |||
image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png', | |||
kategorie: 'Lebensmittel', | |||
text: 'Hier könnten ihre benötigten Einkäufe stehen' | |||
}, | |||
{ | |||
title: 'Aldi Süd', | |||
image: 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg', | |||
kategorie: 'Lebensmittel', | |||
text: 'Hier könnten ihre benötigten Einkäufe stehen' | |||
} | |||
]; |
@@ -0,0 +1,3 @@ | |||
export const environment = { | |||
production: true | |||
}; |
@@ -0,0 +1,16 @@ | |||
// This file can be replaced during build by using the `fileReplacements` array. | |||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. | |||
// The list of file replacements can be found in `angular.json`. | |||
export const environment = { | |||
production: false | |||
}; | |||
/* | |||
* For easier debugging in development mode, you can import the following file | |||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. | |||
* | |||
* This import should be commented out in production mode because it will have a negative impact | |||
* on performance if an error is thrown. | |||
*/ | |||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI. |
@@ -0,0 +1,13 @@ | |||
<!doctype html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>Einkaufszettel</title> | |||
<base href="/"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<link rel="icon" type="image/x-icon" href="favicon.ico"> | |||
</head> | |||
<body> | |||
<app-root></app-root> | |||
</body> | |||
</html> |
@@ -0,0 +1,12 @@ | |||
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)); |
@@ -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'; | |||
* | |||
* 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 | |||
*/ |
@@ -0,0 +1,65 @@ | |||
body { | |||
font-family: Helvetica; | |||
padding-left: 15px; | |||
} | |||
.form { | |||
background-color: #eee; | |||
width: 580px; /* Breite des Formulars */ | |||
padding: 20px; | |||
border: 1px solid #8c8c8c; | |||
position: absolute; | |||
margin-bottom: 25px; | |||
} | |||
.control { | |||
display: flex; | |||
} | |||
label { | |||
width: 100px; | |||
cursor: pointer; | |||
} | |||
input, | |||
textarea { | |||
width: 550px; | |||
border: 1px solid #8c8c8c; | |||
margin-bottom: 1em; | |||
} | |||
span.title { | |||
font-size: x-large; | |||
} | |||
.clear-fix { | |||
clear: both; | |||
} | |||
.blog-entry { | |||
width: 600px; | |||
display: flex; | |||
padding-bottom: 30px; | |||
} | |||
button { | |||
float: right; | |||
padding-right: 20px; | |||
} | |||
.blog-image { | |||
width: 30%; | |||
} | |||
img { | |||
max-width: 90%; | |||
max-height: 100px; | |||
} | |||
.blog-summary { | |||
width: 70%; | |||
} | |||
textarea { | |||
height: 7em; | |||
} |
@@ -0,0 +1,25 @@ | |||
// 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: { | |||
context(path: string, deep?: boolean, filter?: RegExp): { | |||
keys(): string[]; | |||
<T>(id: string): T; | |||
}; | |||
}; | |||
// 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); |
@@ -0,0 +1,14 @@ | |||
{ | |||
"extends": "./tsconfig.json", | |||
"compilerOptions": { | |||
"outDir": "./out-tsc/app", | |||
"types": [] | |||
}, | |||
"files": [ | |||
"src/main.ts", | |||
"src/polyfills.ts" | |||
], | |||
"include": [ | |||
"src/**/*.d.ts" | |||
] | |||
} |
@@ -0,0 +1,23 @@ | |||
{ | |||
"compileOnSave": false, | |||
"compilerOptions": { | |||
"baseUrl": "./", | |||
"outDir": "./dist/out-tsc", | |||
"sourceMap": true, | |||
"declaration": false, | |||
"downlevelIteration": true, | |||
"experimentalDecorators": true, | |||
"module": "esnext", | |||
"moduleResolution": "node", | |||
"importHelpers": true, | |||
"target": "es2015", | |||
"lib": [ | |||
"es2018", | |||
"dom" | |||
] | |||
}, | |||
"angularCompilerOptions": { | |||
"fullTemplateTypeCheck": true, | |||
"strictInjectionParameters": true | |||
} | |||
} |
@@ -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" | |||
] | |||
} |
@@ -0,0 +1,148 @@ | |||
{ | |||
"extends": "tslint:recommended", | |||
"rules": { | |||
"align": { | |||
"options": [ | |||
"parameters", | |||
"statements" | |||
] | |||
}, | |||
"array-type": false, | |||
"arrow-return-shorthand": true, | |||
"curly": true, | |||
"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" | |||
], | |||
"eofline": true, | |||
"import-blacklist": [ | |||
true, | |||
"rxjs/Rx" | |||
], | |||
"import-spacing": true, | |||
"indent": { | |||
"options": [ | |||
"spaces" | |||
] | |||
}, | |||
"max-classes-per-file": false, | |||
"max-line-length": [ | |||
true, | |||
140 | |||
], | |||
"member-ordering": [ | |||
true, | |||
{ | |||
"order": [ | |||
"static-field", | |||
"instance-field", | |||
"static-method", | |||
"instance-method" | |||
] | |||
} | |||
], | |||
"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" | |||
], | |||
"quotemark": [ | |||
true, | |||
"single" | |||
], | |||
"semicolon": { | |||
"options": [ | |||
"always" | |||
] | |||
}, | |||
"space-before-function-paren": { | |||
"options": { | |||
"anonymous": "never", | |||
"asyncArrow": "always", | |||
"constructor": "never", | |||
"method": "never", | |||
"named": "never" | |||
} | |||
}, | |||
"typedef-whitespace": { | |||
"options": [ | |||
{ | |||
"call-signature": "nospace", | |||
"index-signature": "nospace", | |||
"parameter": "nospace", | |||
"property-declaration": "nospace", | |||
"variable-declaration": "nospace" | |||
}, | |||
{ | |||
"call-signature": "onespace", | |||
"index-signature": "onespace", | |||
"parameter": "onespace", | |||
"property-declaration": "onespace", | |||
"variable-declaration": "onespace" | |||
} | |||
] | |||
}, | |||
"variable-name": { | |||
"options": [ | |||
"ban-keywords", | |||
"check-format", | |||
"allow-pascal-case" | |||
] | |||
}, | |||
"whitespace": { | |||
"options": [ | |||
"check-branch", | |||
"check-decl", | |||
"check-operator", | |||
"check-separator", | |||
"check-type", | |||
"check-typecast" | |||
] | |||
}, | |||
"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" | |||
] | |||
} |