angular calculator

packages/dspwa1022-angular/src/app/app.component.html

@@ -1,5 +1,8 @@
-<app-todo-list [tasks]="tasks"/>
+<!-- <app-todo-list [tasks]="tasks"/> -->
+<div class="m-4">
+  <app-calculator/>
+</div>
 
-<hr>
+<!-- <hr>
 
-<app-log-list/>
+<app-log-list/> -->

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 {
 

packages/dspwa1022-angular/src/app/calculator/components/calculator-cell-operator/calculator-cell-operator.component.html

@@ -0,0 +1,9 @@
+<button
+  class="h-full w-full"
+  [class.bg-slate-100]="disabled"
+  [class.hover:bg-slate-300]="!disabled"
+  (click)="operatorClicked.emit(operator)"
+  [disabled]="disabled"
+>
+  {{operator}}
+</button>

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<Operator>();
+
+}

packages/dspwa1022-angular/src/app/calculator/components/calculator-cell/calculator-cell.component.html

@@ -0,0 +1,6 @@
+<button
+  class="h-full w-full hover:bg-slate-300"
+  (click)="cellClicked.emit(value)"
+>
+  {{value}}
+</button>

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<number>();
+
+}

packages/dspwa1022-angular/src/app/calculator/components/calculator/calculator.component.html

@@ -0,0 +1,48 @@
+<div class="grid grid-cols-6 border w-72 text-center">
+  <div class="col-span-full border text-right pr-2">
+    {{lines[lines.length - 1]}}
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="1" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="2" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="3" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="4" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="5" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="6" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="7" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="8" (cellClicked)="appendDigit($event)"/>
+  </div>
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="9" (cellClicked)="appendDigit($event)"/>
+  </div>
+
+  <div class="col-span-1 border">
+    <app-calculator-cell-operator [operator]="operators.ADD" (operatorClicked)="appendOperator($event)"/>
+  </div>
+  <div class="col-span-1 border">
+    <app-calculator-cell-operator [operator]="operators.SUBTRACT" (operatorClicked)="appendOperator($event)"/>
+  </div>
+
+  <div class="col-span-2 border">
+    <app-calculator-cell [value]="0" (cellClicked)="appendDigit($event)"/>
+  </div>
+
+  <div class="col-span-2 border">
+    <app-calculator-cell-operator [operator]="operators.EQUAL" (operatorClicked)="appendOperator($event)" [disabled]="lines.length < 3 || lines[lines.length - 1] === 0"/>
+  </div>
+</div>
+

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;
+  }
+
+}

packages/dspwa1022-angular/src/app/calculator/model/operator.ts

@@ -0,0 +1,5 @@
+export enum Operator {
+  ADD = '+',
+  SUBTRACT = '-',
+  EQUAL = '=',
+}

packages/dspwa1022-angular/src/app/todos/components/todo-list-item/todo-list-item.component.ts → 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({

packages/dspwa1022-angular/src/app/todos/components/todo-list/todo-list.component.ts → 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',

packages/dspwa1022-angular/src/index.html

@@ -6,6 +6,8 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <script src="https://cdn.tailwindcss.com"></script>
+
 </head>
 <body>
   <app-root></app-root>

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
 ---

packages/slides/slides/02302-angular-components.md

@@ -7,7 +7,8 @@ layout: default
 <div class="grid grid-cols-12 gap-6">
 <div class="col-span-12">
 
-- Ü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
 
 </div>
 

packages/slides/slides/02306-angular-dynamic-attributes.md

@@ -7,7 +7,7 @@ layout: default
 <div class="grid grid-cols-12 gap-6">
 <div class="col-span-12">
 
-- 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
 
 </div>
 

packages/slides/slides/02314-angular-outputs.md

@@ -7,7 +7,7 @@ layout: default
 <div class="grid grid-cols-12 gap-x-6">
 <div class="col-span-12">
 
-- 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
 
 </div>
 
@@ -85,3 +85,9 @@ export class TodoListItem {
 </div>
 
 <PageNumber/>
+
+<!--
+
+Bald verfügbar: https://angular.dev/guide/components/output-fn
+
+-->

packages/slides/slides/02322-task-angular.md

@@ -0,0 +1,13 @@
+---
+layout: section
+---
+
+<EmojiTitle title="Übung" emoji="👷">
+Angular
+</EmojiTitle>
+
+<PageNumber/>
+
+<Footer
+    text="💻 Frontend-Entwicklung"
+/>

packages/slides/slides/02323-task-angular-details.md

@@ -0,0 +1,22 @@
+---
+layout: default
+---
+
+# Übung <SubHeading text="Angular"/>
+
+<div class="grid grid-cols-12 gap-6">
+<div class="col-span-12">
+
+- Installiert die aktuellen Dependencies mit `bun install` im Hauptverzeichnis
+- Installiert euch die [Angular CLI](https://angular.dev/tools/cli/setup-local#install-the-angular-cli) (Command Line Interface)
+- Wechselt ins [packages/dspwa1022-angular](https://github.com/volkmann-design-code/IU-DSPWA1022-Programmierung-von-Web-Anwendungen/tree/main/packages/dspwa1022-angular)-Verzeichnis und startet die Anwendung mit `bun start` (oder `ng serve`)
+- Öffnet die Anwendung unter [localhost:4200](http://localhost:4200/)
+- Aufgaben:
+  - Erweitert den Rechner um Multiplikation und Division
+  - Erweitert den Rechner um einen Button zum Zurücksetzen
+  - Bonus: Ermöglicht die Eingabe von Komma-Zahlen
+
+</div>
+</div>
+
+<PageNumber/>