Merge branch 'master' of...

Merge branch 'master' of https://gitlab.informatik.uni-halle.de/amsvu-teaching/client-seitige-web-anwendungen-uebungen

week03/app/controllers/application.js

+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class ApplicationController extends Controller {
+    @tracked a;
+    @tracked b;
+    @tracked operator = "+";
+    @tracked result;
+    @tracked calculated = false;
+    @tracked historyAvailable = false;
+    @tracked calculationsList = [];
+    
+    @action
+    calculate(event) {
+        event.preventDefault();
+        if (this.operator === "+") {
+            this.result = parseInt(this.a) + parseInt(this.b);
+            this.calculated = true;
+            this.calculationsList.pushObject({calc: `${this.a} ${this.operator} ${this.b} = ${this.result}`});
+            console.log(`list: ${this.calculationsList}`)
+            this.historyAvailable = true;
+            console.log(`a: ${this.a}, b: ${this.b}, operator: ${this.operator}, result: ${this.result}, calculated: ${this.calculated}`)
+        } else if (this.operator === "-") {
+            this.result = parseInt(this.a) - parseInt(this.b);
+            this.calculated = true;
+            this.calculationsList.pushObject({calc: `${this.a} ${this.operator} ${this.b} = ${this.result}`});
+            console.log(`list: ${this.calculationsList}`)
+            this.historyAvailable = true;
+            console.log(`a: ${this.a}, b: ${this.b}, operator: ${this.operator}, result: ${this.result}, calculated: ${this.calculated}`)
+        } else if (this.operator === "*") {
+            this.result = parseInt(this.a) * parseInt(this.b);
+            this.calculated = true;
+            this.calculationsList.pushObject({calc: `${this.a} ${this.operator} ${this.b} = ${this.result}`});
+            console.log(`list: ${this.calculationsList}`)
+            this.historyAvailable = true;
+            console.log(`a: ${this.a}, b: ${this.b}, operator: ${this.operator}, result: ${this.result}, calculated: ${this.calculated}`)
+        }else if (this.operator === "%") {
+            this.result = parseInt(this.a) % parseInt(this.b);
+            this.calculated = true;
+            this.calculationsList.pushObject({calc: `${this.a} ${this.operator} ${this.b} = ${this.result}`});
+            console.log(`list: ${this.calculationsList}`)
+            this.historyAvailable = true;
+            console.log(`a: ${this.a}, b: ${this.b}, operator: ${this.operator}, result: ${this.result}, calculated: ${this.calculated}`)
+        } else if (this.operator === "/" && parseInt(this.b) !== 0) {
+            this.result = parseInt(this.a) / parseInt(this.b);
+            this.calculated = true;
+            this.calculationsList.pushObject({calc: `${this.a} ${this.operator} ${this.b} = ${this.result}`});
+            console.log(`list: ${this.calculationsList}`)
+            this.historyAvailable = true;
+            console.log(`a: ${this.a}, b: ${this.b}, operator: ${this.operator}, result: ${this.result}, calculated: ${this.calculated}`)
+        }
+        
+    }
+
+    @action
+    setNewOperator(value) {
+        this.operator = value;
+    }
+
+    @action
+    recalculate(params) {
+        let splitted = params.split(" "), arr = [];
+        console.log(splitted)
+        this.a = splitted[0];
+        this.operator = splitted[1];
+        this.b = splitted[2];
+        this.calculate(event);
+    }
+}

week03/app/templates/application.hbs

-{{!-- The following component displays Ember's default welcome message. --}}
-<WelcomePage />
-{{!-- Feel free to remove this! --}}
+<h1>Calculator</h1>
 
+<form {{on "submit" this.calculate}}>
+    <label>
+        A
+        <Input @value={{this.a}} name="a" type="number" />
+    </label>
+    <label>
+        B
+        <Input @value={{this.b}} name="b" type="number" />
+    </label>
+    <select onchange={{action "setNewOperator" value="target.value"}}>
+        <option value="+">+</option>
+        <option value="-">-</option>
+        <option value="*">*</option>
+        <option value="/">/</option>
+        <option value="%">%</option>
+    </select>
+    <button>Calculate</button>
+</form>
+{{#if calculated}}
+  <h2>Result</h2>
+  <div id="result">
+    <p>{{this.a}} {{this.operator}} {{this.b}} = {{this.result}}</p>
+  </div>
+{{/if}}
+{{#if historyAvailable}}
+    <h2>History</h2>
+    <div id="history">
+        <ul>
+            {{#each this.calculationsList as | calculation |}}
+                <li><a {{on "click" (fn this.recalculate calculation.calc)}}>{{calculation.calc}}</a></li>
+            {{/each}}
+        </ul>
+    </div>
+{{/if}}
 {{outlet}}
\ No newline at end of file

week03/debug.log

+[1214/170119.440:ERROR:directory_reader_win.cc(43)] FindFirstFile: Das System kann den angegebenen Pfad nicht finden. (0x3)
+[1214/175008.630:ERROR:directory_reader_win.cc(43)] FindFirstFile: Das System kann den angegebenen Pfad nicht finden. (0x3)
+[1214/191059.372:ERROR:directory_reader_win.cc(43)] FindFirstFile: Das System kann den angegebenen Pfad nicht finden. (0x3)

week03/jsconfig.json

+{
+    "compilerOptions": {
+        "target": "es2015",
+        "experimentalDecorators": true
+    },
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}
\ No newline at end of file

week03/tests/unit/controllers/application-test.js

+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Controller | application', function(hooks) {
+  setupTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it exists', function(assert) {
+    let controller = this.owner.lookup('controller:application');
+    assert.ok(controller);
+  });
+});