From 5b460d5b025d75d167f007c94c621f7c3f957c9e Mon Sep 17 00:00:00 2001 From: Enzo Volkmann Date: Fri, 9 Aug 2024 09:18:32 +0200 Subject: [PATCH] angular calculator --- .../src/app/app.component.html | 9 ++- .../src/app/app.component.ts | 7 ++- .../calculator-cell-operator.component.html | 9 +++ .../calculator-cell-operator.component.scss} | 0 .../calculator-cell-operator.component.ts | 24 +++++++ .../calculator-cell.component.html | 6 ++ .../calculator-cell.component.scss} | 0 .../calculator-cell.component.ts | 20 ++++++ .../calculator/calculator.component.html | 48 ++++++++++++++ .../calculator/calculator.component.scss} | 0 .../calculator/calculator.component.ts | 63 +++++++++++++++++++ .../src/app/calculator/model/operator.ts | 5 ++ .../add-todo-input.component.html | 0 .../add-todo-input.component.scss | 0 .../add-todo-input.component.ts | 0 .../todo-list-item.component.html | 0 .../todo-list-item.component.scss | 0 .../todo-list-item.component.ts | 2 +- .../todo-list/todo-list.component.html | 0 .../todo-list/todo-list.component.scss | 0 .../todo-list/todo-list.component.ts | 4 +- .../{todos => todos-signals}/model/task.ts | 0 packages/dspwa1022-angular/src/index.html | 2 + packages/slides/slides.md | 8 +++ .../slides/slides/02302-angular-components.md | 3 +- .../02306-angular-dynamic-attributes.md | 2 +- .../slides/slides/02314-angular-outputs.md | 8 ++- packages/slides/slides/02322-task-angular.md | 13 ++++ .../slides/02323-task-angular-details.md | 22 +++++++ 29 files changed, 243 insertions(+), 12 deletions(-) create mode 100644 packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.html rename packages/dspwa1022-angular/src/app/{todos/components/add-todo-input/add-todo-input.component.scss => calculator/components/calculator-cell-operator/calculator-cell-operator.component.scss} (100%) create mode 100644 packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.ts create mode 100644 packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.html rename packages/dspwa1022-angular/src/app/{todos/components/todo-list-item/todo-list-item.component.scss => calculator/components/calculator-cell/calculator-cell.component.scss} (100%) create mode 100644 packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.ts create mode 100644 packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.html rename packages/dspwa1022-angular/src/app/{todos/components/todo-list/todo-list.component.scss => calculator/components/calculator/calculator.component.scss} (100%) create mode 100644 packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.ts create mode 100644 packages/dspwa1022-angular/src/app/calculator/model/operator.ts rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/components/add-todo-input/add-todo-input.component.html (100%) create mode 100644 packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.scss rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/components/add-todo-input/add-todo-input.component.ts (100%) rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/components/todo-list-item/todo-list-item.component.html (100%) create mode 100644 packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.scss rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/components/todo-list-item/todo-list-item.component.ts (81%) rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/components/todo-list/todo-list.component.html (100%) create mode 100644 packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.scss rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/components/todo-list/todo-list.component.ts (100%) rename packages/dspwa1022-angular/src/app/{todos => todos-signals}/model/task.ts (100%) create mode 100644 packages/slides/slides/02322-task-angular.md create mode 100644 packages/slides/slides/02323-task-angular-details.md diff --git a/packages/dspwa1022-angular/src/app/app.component.html b/packages/dspwa1022-angular/src/app/app.component.html index 8975851..0587f9f 100644 --- a/packages/dspwa1022-angular/src/app/app.component.html +++ b/packages/dspwa1022-angular/src/app/app.component.html @@ -1,5 +1,8 @@ - + +
+ +
-
+ diff --git a/packages/dspwa1022-angular/src/app/app.component.ts b/packages/dspwa1022-angular/src/app/app.component.ts index cc06129..e88be7a 100644 --- a/packages/dspwa1022-angular/src/app/app.component.ts +++ b/packages/dspwa1022-angular/src/app/app.component.ts @@ -1,15 +1,16 @@ import { Component } from '@angular/core'; -import { Task } from './todos/model/task'; -import { TodoListComponent } from "./todos/components/todo-list/todo-list.component"; +import { Task } from './todos-signals/model/task'; +import { TodoListComponent } from "./todos-signals/components/todo-list/todo-list.component"; import { LogListComponent } from "./logs/components/log-list/log-list.component"; import { LogService } from './logs/services/log.service'; +import { CalculatorComponent } from "./calculator/components/calculator/calculator.component"; @Component({ selector: 'app-root', standalone: true, templateUrl: './app.component.html', styleUrl: './app.component.scss', - imports: [TodoListComponent, LogListComponent] + imports: [TodoListComponent, LogListComponent, CalculatorComponent] }) export class AppComponent { diff --git a/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.html b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.html new file mode 100644 index 0000000..9efbb6e --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.html @@ -0,0 +1,9 @@ + diff --git a/packages/dspwa1022-angular/src/app/todos/components/add-todo-input/add-todo-input.component.scss b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.scss similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/add-todo-input/add-todo-input.component.scss rename to packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.scss diff --git a/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.ts b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.ts new file mode 100644 index 0000000..13cf1c6 --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.ts @@ -0,0 +1,24 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; +import { Operator } from '../../model/operator'; + +@Component({ + selector: 'app-calculator-cell-operator', + standalone: true, + imports: [], + templateUrl: './calculator-cell-operator.component.html', + styleUrl: './calculator-cell-operator.component.scss' +}) +export class CalculatorCellOperatorComponent { + + @Input({ + required: true + }) + operator?: Operator; + + @Input() + disabled = false; + + @Output() + operatorClicked = new EventEmitter(); + +} diff --git a/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.html b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.html new file mode 100644 index 0000000..6ec8473 --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.html @@ -0,0 +1,6 @@ + diff --git a/packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.scss b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.scss similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.scss rename to packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.scss diff --git a/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.ts b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.ts new file mode 100644 index 0000000..debe426 --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.ts @@ -0,0 +1,20 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'app-calculator-cell', + standalone: true, + imports: [], + templateUrl: './calculator-cell.component.html', + styleUrl: './calculator-cell.component.scss' +}) +export class CalculatorCellComponent { + + @Input({ + required: true + }) + value?: number; + + @Output() + cellClicked = new EventEmitter(); + +} diff --git a/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.html b/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.html new file mode 100644 index 0000000..42d1595 --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.html @@ -0,0 +1,48 @@ +
+
+ {{lines[lines.length - 1]}} +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+
+ diff --git a/packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.scss b/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.scss similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.scss rename to packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.scss diff --git a/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.ts b/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.ts new file mode 100644 index 0000000..1efa36f --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.ts @@ -0,0 +1,63 @@ +import { Component } from '@angular/core'; +import { CalculatorCellComponent } from "../calculator-cell/calculator-cell.component"; +import { CalculatorCellOperatorComponent } from "../calculator-cell-operator/calculator-cell-operator.component"; +import { Operator } from '../../model/operator'; +import { JsonPipe } from '@angular/common'; + +@Component({ + selector: 'app-calculator', + standalone: true, + imports: [CalculatorCellComponent, CalculatorCellOperatorComponent], + templateUrl: './calculator.component.html', + styleUrl: './calculator.component.scss' +}) +export class CalculatorComponent { + + readonly operators = Operator; + lines: (number | Operator)[] = [0]; + + appendDigit(digit: number) { + this.lines[this.lines.length - 1] = (this.lines[this.lines.length - 1] as number) * 10 + digit; + } + + appendOperator(operator: Operator) { + if (operator === Operator.EQUAL) { + const result = this.evaluateLines(); + this.lines = [result]; + } else { + this.lines.push(operator); + this.lines.push(0); + } + } + + private evaluateLines(): number { + let result = 0; + let nextOperator: Operator | undefined; + + for (const line of this.lines) { + if (typeof line === 'number') { + switch (nextOperator) { + case Operator.ADD: + result += line; + break; + case Operator.SUBTRACT: + result -= line; + break; + case undefined: + result = line; + break; + default: + throw new Error(`Unexpected operator: ${nextOperator}`); + } + nextOperator = undefined; + continue; + } + + nextOperator = line; + continue; + } + + return result; + } + +} diff --git a/packages/dspwa1022-angular/src/app/calculator/model/operator.ts b/packages/dspwa1022-angular/src/app/calculator/model/operator.ts new file mode 100644 index 0000000..d8c31c1 --- /dev/null +++ b/packages/dspwa1022-angular/src/app/calculator/model/operator.ts @@ -0,0 +1,5 @@ +export enum Operator { + ADD = '+', + SUBTRACT = '-', + EQUAL = '=', +} diff --git a/packages/dspwa1022-angular/src/app/todos/components/add-todo-input/add-todo-input.component.html b/packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.html similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/add-todo-input/add-todo-input.component.html rename to packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.html diff --git a/packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.scss b/packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/dspwa1022-angular/src/app/todos/components/add-todo-input/add-todo-input.component.ts b/packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.ts similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/add-todo-input/add-todo-input.component.ts rename to packages/dspwa1022-angular/src/app/todos-signals/components/add-todo-input/add-todo-input.component.ts diff --git a/packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.html b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.html similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.html rename to packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.html diff --git a/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.scss b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.ts b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.ts similarity index 81% rename from packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.ts rename to packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.ts index 774997d..6f9c581 100644 --- a/packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.ts +++ b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list-item/todo-list-item.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, input, Input, model, Output } from '@angular/core'; +import { Component, model } from '@angular/core'; import { Task } from '../../model/task'; @Component({ diff --git a/packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.html b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.html similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.html rename to packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.html diff --git a/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.scss b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.ts b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.ts similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.ts rename to packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.ts index 3f504bf..51cf5e6 100644 --- a/packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.ts +++ b/packages/dspwa1022-angular/src/app/todos-signals/components/todo-list/todo-list.component.ts @@ -1,8 +1,8 @@ import { Component, computed, model } from '@angular/core'; -import { Task } from '../../model/task'; -import { TodoListItemComponent } from "../todo-list-item/todo-list-item.component"; import { LogService } from '../../../logs/services/log.service'; +import { Task } from '../../model/task'; import { AddTodoInputComponent } from "../add-todo-input/add-todo-input.component"; +import { TodoListItemComponent } from "../todo-list-item/todo-list-item.component"; @Component({ selector: 'app-todo-list', diff --git a/packages/dspwa1022-angular/src/app/todos/model/task.ts b/packages/dspwa1022-angular/src/app/todos-signals/model/task.ts similarity index 100% rename from packages/dspwa1022-angular/src/app/todos/model/task.ts rename to packages/dspwa1022-angular/src/app/todos-signals/model/task.ts diff --git a/packages/dspwa1022-angular/src/index.html b/packages/dspwa1022-angular/src/index.html index ab3f081..16703a7 100644 --- a/packages/dspwa1022-angular/src/index.html +++ b/packages/dspwa1022-angular/src/index.html @@ -6,6 +6,8 @@ + + diff --git a/packages/slides/slides.md b/packages/slides/slides.md index 16076fb..064bbb9 100644 --- a/packages/slides/slides.md +++ b/packages/slides/slides.md @@ -1050,6 +1050,14 @@ src: ./slides/02314-angular-outputs.md src: ./slides/02320-demo-angular.md --- +--- +src: ./slides/02322-task-angular.md +--- + +--- +src: ./slides/02323-task-angular-details.md +--- + --- src: ./slides/02330-angular-signals.md --- diff --git a/packages/slides/slides/02302-angular-components.md b/packages/slides/slides/02302-angular-components.md index a2537ff..bfce00f 100644 --- a/packages/slides/slides/02302-angular-components.md +++ b/packages/slides/slides/02302-angular-components.md @@ -7,7 +7,8 @@ layout: default
-- Üblicherweise teilt man den Code der _Klasse_, des _Templates_ und der _Styles_ in drei Dateien auf, um die Komponenten übersichtlich zu halten +- Üblicherweise teilt man den Code der _Klasse_ (`ts`), des _Templates_ (`html`) und der _Styles_ (`css`) in drei Dateien auf, um die Komponenten übersichtlich zu halten +- In den Metadaten der Komponente werden diese Dateien dann angegeben
diff --git a/packages/slides/slides/02306-angular-dynamic-attributes.md b/packages/slides/slides/02306-angular-dynamic-attributes.md index 0f985e0..5a6bfe4 100644 --- a/packages/slides/slides/02306-angular-dynamic-attributes.md +++ b/packages/slides/slides/02306-angular-dynamic-attributes.md @@ -7,7 +7,7 @@ layout: default
-- Wir können auch _Inputs_ sowie alle Standard-HTML-Attribute (Klassen, Disabled, ...) mittels der `[]`-Syntax mit dynamischen Daten belegen +- Wir können auch _Inputs_ (im Beispiel `done`) sowie alle Standard-HTML-Attribute (z.B. `class` oder `disabled`) mit der `[]`-Syntax mit dynamischen Daten belegen
diff --git a/packages/slides/slides/02314-angular-outputs.md b/packages/slides/slides/02314-angular-outputs.md index 72ae917..657f0eb 100644 --- a/packages/slides/slides/02314-angular-outputs.md +++ b/packages/slides/slides/02314-angular-outputs.md @@ -7,7 +7,7 @@ layout: default
-- Mit _Outputs_ können wir Informationen inder Komponenten-Hierarchie nach oben geben bzw. eigene Events unserer Komponenten anlegen +- Mit [_Outputs_](https://angular.dev/guide/components/outputs) können wir Informationen inder Komponenten-Hierarchie nach oben geben bzw. eigene Events unserer Komponenten anlegen
@@ -85,3 +85,9 @@ export class TodoListItem {
+ + diff --git a/packages/slides/slides/02322-task-angular.md b/packages/slides/slides/02322-task-angular.md new file mode 100644 index 0000000..c0f9b7b --- /dev/null +++ b/packages/slides/slides/02322-task-angular.md @@ -0,0 +1,13 @@ +--- +layout: section +--- + + +Angular + + + + +