Worked on UI for reversing floors + added a even based communication …

…services across components

app/components/floor.hbs

@@ -3,9 +3,11 @@
     <div class="panel">
         {{#if floor.up}}
         <img src="assets/images/up.png" style="cursor: pointer;" height="15px" width="30px" {{on "click" (fn this.goUp floor.num)}}>
+        {{!-- <img src="assets/images/up.png" style="cursor: pointer;" height="15px" width="30px" {{action "move"}}> --}}
         {{/if}}
         {{#if floor.down}}
         <img src="assets/images/down.png" style="cursor: pointer;" height="15px" width="30px" {{on "click" (fn this.goDown floor.num)}}>
+        {{!-- <img src="assets/images/down.png" style="cursor: pointer;" height="15px" width="30px" {{action 'move'}}> --}}
         {{/if}}
     </div>
     <p class="floor-name">{{floor.name}} Floor</p>

app/components/floor.js

@@ -1,25 +1,21 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-
+import { inject as service } from '@ember/service';
 
 export default class FloorComponent extends Component {
+  @service('lift-mover') liftMoverService;
+  constructor(){
+    super(...arguments)
+    // console.log("moveIt", this.moveIt);
+  }
 
   @action
   goUp(level) {
-    console.log(level)
-    // alert(`Go to level ${level}!`);
-    this.analyseLift('UP', level);
+    this.liftMoverService.trigger('move', {level, direction : 1, lift : 1}) 
   }
 
   @action
   goDown(level) {
-    console.log(level)
-    this.analyseLift('DOWN', level);
-    // alert(`Go to level ${level}!`);
+    this.liftMoverService.trigger('move', {level, direction : 0, lift : 1})
   }
-
-  analyseLift(level, direction) {
-    console.log(level, direction);
-  }
-
 }

app/components/lift.hbs

@@ -1,10 +1,10 @@
 <div class="d-flex">
     {{#each @building.lifts as |lift|}}
-        <img src="assets/images/lift.png" id="lift_{{lift.num}}" class="lift" style="left: {{lift.width}}px;" height="70px" width="40px">
+        <img src="assets/images/lift.png" id="lift_{{lift.num}}" class="lift" style="left: {{lift.width}}px; bottom:{{lift.levelHeight}}px" height="70px" width="40px">
     {{/each}}
 </div>
 <div class="d-flex">
     {{#each @building.lifts as |lift|}}
-    <span class="lift-count" style="left: {{lift.num_width}}px;">{{lift.num}}</span>
+        <span class="lift-count" style="left: {{lift.num_width}}px;">{{lift.num}}</span>
     {{/each}}
 </div>

app/components/lift.js

@@ -1,13 +1,22 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
 export default class LiftComponent extends Component {
-  constructor(liftNum, noOfFloors) {
-    super();
-    this.liftNum = liftNum;
-    this.direction = 'UP';
-    this.state = 0; // 0 is idle, 1 is moving up, -1 is moving down
-    this.currentFloor = 0;
-    this.liftId = 'lift_' + liftNum;
-    this.noOfFloors = noOfFloors;
+  @service('lift-mover') liftMoverService;
+  constructor() {
+    super(...arguments)
+    // this.liftNum = liftNum;
+    // this.direction = 'UP';
+    // this.state = 0; // 0 is idle, 1 is moving up, -1 is moving down
+    // this.currentFloor = 0;
+    // this.liftId = 'lift_' + liftNum;
+    // this.noOfFloors = noOfFloors;
+    // console.log("this", this.element)
+
+    this.liftMoverService.on('move', (data) => {
+      console.log("data - ->", data)
+      // this.model({level : data.level, lift : data.lift})
+    })
   }
+
 }

app/models/floor.js

@@ -0,0 +1,5 @@
+import Model from '@ember-data/model';
+
+export default class FloorModel extends Model {
+
+}

app/models/lift.js

@@ -0,0 +1,5 @@
+import Model from '@ember-data/model';
+
+export default class LiftModel extends Model {
+
+}

app/router.js

@@ -7,5 +7,5 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
-  this.route('the-elevator-game');
+  this.route('the-elevator-game', { path: '/the-elevator-game' });
 });

app/routes/the-elevator-game.js

@@ -1,26 +1,60 @@
 import Route from '@ember/routing/route';
-
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 export default class TheElevatorGameRoute extends Route {
+  @service('lift-mover') liftMoverService;
+  constructor(){
+    super(...arguments)
+    // console.log("moveIt", this.moveIt);
+
+    // this.liftMoverService.on('move', (data) => {
+    //   console.log("data", data)
+    //   // this.model({level : data.level, lift : data.lift})
+    // })
+  }
 
-  model() {
-    const noOfFloors = 6;
-    const noOfLifts = 3;
+  model(selectedLift) {
+    const noOfFloors = 6, noOfLifts = 3,groundFloor = 0;
     const lifts = [];
     const floors = [];
-
-    for (let i = 1; i <= noOfFloors; i++) {
-      const upBtn = i > 1 ? true : false;
-      const downBtn = i < noOfFloors ? true : false;
-      const floorName = i == 1 ? 'Ground' : i + 'th';
-      floors.push({ up: upBtn, down: downBtn, num: i, name: floorName });
+
+    for (let i = groundFloor; i <= noOfFloors; i++) {
+      const upBtn = i >= groundFloor && i < noOfFloors;
+      const downBtn = i > groundFloor && i <= noOfFloors;
+      const floorName = i == groundFloor ? 'Ground' : i + 'th';
+      floors.push({ 
+        up: upBtn,
+        down: downBtn,
+        num: i,
+        name: floorName
+      });
     }
-    for (let i = 1; i <= noOfLifts; i++) {
-      lifts.push({ num: i, width: 200 * i, num_width: 200 * i + 20 });
+    for (let i = groundFloor; i < noOfLifts; i++) {
+      let level = 0;
+      let liftNo = i + 1;
+      let levelHeight = 0;
+      if(selectedLift && selectedLift.lift === liftNo){
+        level = selectedLift.level;
+      }
+      lifts.push({ 
+        level,
+        levelHeight : 100 * level,
+        num: liftNo,
+        width: 200 * liftNo,
+        num_width: 200 * liftNo + 20 });
     }
 
+    console.log("levels", lifts);
     return {
-      levels: Array.from(floors),
+      levels: Array.from(floors).reverse(),
       lifts: Array.from(lifts),
     };
   }
+
+  // @action
+  // move(){
+  //   console.log("on change")
+  // }
+
 }
+

app/services/lift-mover.js

@@ -0,0 +1 @@
+export default Ember.Service.extend(Ember.Evented);

app/styles/app.css

@@ -14,7 +14,7 @@
 .lift{
     position: absolute;
     left: 100px;
-    top: 540px;
+    bottom: 0;
     width: 50px;
     height: 70px;
     transition: 3s linear;

tests/unit/models/floor-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Model | floor', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('floor', {});
+    assert.ok(model);
+  });
+});

tests/unit/models/lift-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Model | lift', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = store.createRecord('lift', {});
+    assert.ok(model);
+  });
+});

tests/unit/services/lift-mover-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Service | lift-mover', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:lift-mover');
+    assert.ok(service);
+  });
+});