podifying this mother

app/components/huegasm-footer.js

@@ -1,7 +0,0 @@
-import Em from 'ember';
-
-export default Em.Component.extend({
-  tagName: 'footer',
-
-  classNames: ['footer']
-});

app/pods/components/bridge-finder/template.hbs

@@ -17,7 +17,7 @@
 
     {{#if bridgeFindMultiple}}
       <p>Found multiple hue bridges. <br>
-      Please select the one you want to use for this application.</p>
+        Please select the one you want to use for this application.</p>
 
       <div id="bridgeButtonGroup">
         {{#each multipleBridgeIps as |bridge|}}

app/pods/components/delete-group-modal/template.hbs

@@ -0,0 +1,10 @@
+{{#if isShowingConfirmDeleteModal}}
+  {{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
+
+    <p>Are you sure you want to delete group "{{groupName}}"?</p>
+
+    {{#paper-button action="close"}}Close{{/paper-button}}
+    {{#paper-button class="pull-right" action="delete" primary=true}}Delete{{/paper-button}}
+
+  {{/modal-dialog}}
+{{/if}}

app/pods/components/groups-list/template.hbs

@@ -8,7 +8,7 @@
   {{/each}}
 {{/paper-list}}
 
-{{modals/add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
+{{add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
 action="toggleAddGroupsModal"}}
 
-{{modals/confirm-delete-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
+{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}

app/pods/components/hue-controls/component.js

@@ -2,7 +2,7 @@ import Em from 'ember';
 
 export default Em.Component.extend({
   classNames: ['container-fluid'],
-  elementId: 'bridgeControls',
+  elementId: 'hueControls',
 
   bridgeIp: null,
   manualBridgeIp: null,
@@ -44,7 +44,7 @@ export default Em.Component.extend({
   },
 
   apiURL: function(){
-      return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
+    return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername');
   }.property('bridgeIp', 'bridgeUsername'),
 
   didInsertElement(){
@@ -61,7 +61,7 @@ export default Em.Component.extend({
       }
     });
 
-    observer.observe(Em.$('#bridgeControls')[0], {childList: true, subtree: true});
+    observer.observe(Em.$('#hueControls')[0], {childList: true, subtree: true});
 
     // automatically close the group menu when the user clicks somewhere else
     Em.$(document).click(function() {

app/pods/components/hue-controls/template.hbs

@@ -2,7 +2,7 @@
   <div class="row navigation">
     <div class="col-lg-4 col-lg-offset-4 col-xs-6 col-xs-offset-3">
       {{#each tabData as |tab|}}
-          <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
+        <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
       {{/each}}
     </div>
 
@@ -10,7 +10,7 @@
       <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
         <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>
 
-        {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
+        {{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
       </span>
 
       <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}">
@@ -26,6 +26,6 @@
     </div>
   </div>
 
-  {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
-  {{controls/music-control apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected}}
+  {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
+  {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected}}
 {{/if}}

app/pods/components/huegasm-app/template.hbs

@@ -0,0 +1,9 @@
+{{#if bridgeUsername}}
+  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
+{{else}}
+  {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
+{{/if}}
+
+<footer id="footer">
+  <p>Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>
+</footer>

app/pods/components/light-group/template.hbs

@@ -0,0 +1,5 @@
+{{#each lightsList as |light|}}
+  <div class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
+    <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
+  </div>
+{{/each}}

app/pods/components/music-tab/component.js

@@ -1,6 +1,6 @@
 import Em from 'ember';
-import musicControlMixin from '../mixins/music-control';
-import visualizerMixin from '../mixins/visualizer';
+import musicControlMixin from './mixins/music-control';
+import visualizerMixin from './mixins/visualizer';
 
 export default Em.Component.extend(musicControlMixin, visualizerMixin, {
   classNames: ['col-lg-6', 'col-lg-offset-3', 'col-sm-10', 'col-sm-offset-1', 'col-xs-12'],
@@ -27,7 +27,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
           this.send('goToSong',this.get('playQueuePointer'));
           this.send('volumeChanged', this.get('volume'));
         }
-        
+
         document.title = 'Huegasm';
       }
     },
@@ -216,17 +216,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       var self = this,
         playQueue = this.get('playQueue'),
         updatePlayQueue = function(){
-        var tags = ID3.getAllTags("local");
-        playQueue.push({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
+          var tags = ID3.getAllTags("local");
+          playQueue.push({filename: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title });
 
-        ID3.clearAll();
-        self.notifyPropertyChange('playQueue');
+          ID3.clearAll();
+          self.notifyPropertyChange('playQueue');
 
-        // make sure to init the first song
-        if(playQueue.length > 0 && self.get('playQueuePointer') === -1){
-          self.send('goToSong', 0);
-        }
-      };
+          // make sure to init the first song
+          if(playQueue.length > 0 && self.get('playQueuePointer') === -1){
+            self.send('goToSong', 0);
+          }
+        };
 
       for (var key in files) {
         if (files.hasOwnProperty(key)) {

app/pods/components/music-tab/template.hbs

@@ -3,13 +3,13 @@
     <div id="playNotification"
          class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
     <div id="playerControls">
-    {{#if notUsingMic}}
-      {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
+      {{#if notUsingMic}}
+        {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
 
 
-      {{#if playQueueMultiple}}
-        <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip"
-              data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
+        {{#if playQueueMultiple}}
+          <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip"
+                data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
           -->{{/if}}<!--
                     --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip"
                              data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
@@ -21,10 +21,10 @@
                    data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
                   -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
 
-      <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
-    {{/if}}
+        <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
+      {{/if}}
 
-          <span class="pull-right">
+      <span class="pull-right">
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye"  class="playerControllIcon"}}
             </span>
             <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen"  class="playerControllIcon"}}
@@ -43,7 +43,7 @@
       {{/if}}
 
       {{#if usingMicSupported}}
-          <span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip" id="usingMicTooltip" data-title={{usingMicTooltipTxt}} {{action "useMic"}}>{{paper-icon icon=micIcon class=usingMicClass}}</span>
+        <span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip" id="usingMicTooltip" data-title={{usingMicTooltipTxt}} {{action "useMic"}}>{{paper-icon icon=micIcon class=usingMicClass}}</span>
       {{/if}}
 
       {{#if notUsingMic}}<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>{{/if}}
@@ -87,9 +87,9 @@
   <div class="col-xs-offset-3 col-xs-3">
     {{paper-icon icon=beatDetectionArrowIcon}}
   </div>
-    <div class="col-xs-3">
-      {{paper-icon icon=beatDetectionArrowIcon}}
-    </div>
+  <div class="col-xs-3">
+    {{paper-icon icon=beatDetectionArrowIcon}}
+  </div>
 </div>
 
 {{#if playerBottomDisplayed}}

app/styles/app.scss

@@ -78,18 +78,17 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
   padding-bottom: 50px;
 }
 
-.footer {
+#footer {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: $footerHeight;
-}
-
-.footer .text-muted {
-  padding-left: 0;
-  margin-top: 10px;
-  text-align: center;
+  p {
+    padding-left: 0;
+    margin-top: 10px;
+    text-align: center;
+  }
 }
 
 .cursorPointer {
@@ -159,7 +158,7 @@ md-list-item .md-no-style {
   padding: 0;
 }
 
-#bridgeControls {
+#hueControls {
   position: relative;
 }
 

app/templates/components/huegasm-app.hbs

@@ -1,7 +0,0 @@
-{{#if bridgeUsername}}
-  {{bridge-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
-{{else}}
-  {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial}}
-{{/if}}
-
-{{huegasm-footer}}

app/templates/components/huegasm-footer.hbs

@@ -1 +0,0 @@
-<p class="text-muted">Made by <a href="//egorphilippov.me">egorphilippov.me</a> © 2015 Huegasm</p>

app/templates/components/light-group.hbs

@@ -1,5 +0,0 @@
-{{#each lightsList as |light|}}
-    <div class="{{light.activeClass}} bootstrapTooltip" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
-          <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}.svg">
-  </div>
-{{/each}}

app/templates/components/modals/confirm-delete-modal.hbs

@@ -1,10 +0,0 @@
-{{#if isShowingConfirmDeleteModal}}
-  {{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
-
-      <p>Are you sure you want to delete group "{{groupName}}"?</p>
-
-      {{#paper-button action="close"}}Close{{/paper-button}}
-      {{#paper-button class="pull-right" action="delete" primary=true}}Delete{{/paper-button}}
-
-  {{/modal-dialog}}
-{{/if}}

config/environment.js

@@ -3,6 +3,7 @@
 module.exports = function(environment) {
   var ENV = {
     modulePrefix: 'huegasm',
+    podModulePrefix: 'huegasm/pods',
     environment: environment,
     baseURL: '/',
     locationType: 'auto',

tests/integration/pods/components/add-group-modal/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('add-group-modal', 'Integration | Component | add group modal', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{add-group-modal}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#add-group-modal}}
+      template block text
+    {{/add-group-modal}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/bridge-finder/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('bridge-finder', 'Integration | Component | bridge finder', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{bridge-finder}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#bridge-finder}}
+      template block text
+    {{/bridge-finder}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/color-picker/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('color-picker', 'Integration | Component | color picker', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{color-picker}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#color-picker}}
+      template block text
+    {{/color-picker}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/delete-group-modal/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('delete-group-modal', 'Integration | Component | delete group modal', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{delete-group-modal}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#delete-group-modal}}
+      template block text
+    {{/delete-group-modal}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/groups-list/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('groups-list', 'Integration | Component | groups list', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{groups-list}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#groups-list}}
+      template block text
+    {{/groups-list}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/hue-controls/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('hue-controls', 'Integration | Component | hue controls', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{hue-controls}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#hue-controls}}
+      template block text
+    {{/hue-controls}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/huegasm-app/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('huegasm-app', 'Integration | Component | huegasm app', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{huegasm-app}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#huegasm-app}}
+      template block text
+    {{/huegasm-app}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/light-group/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('light-group', 'Integration | Component | light group', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{light-group}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#light-group}}
+      template block text
+    {{/light-group}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/lights-tab/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('lights-tab', 'Integration | Component | lights tab', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{lights-tab}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#lights-tab}}
+      template block text
+    {{/lights-tab}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/pods/components/music-tab/component-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('music-tab', 'Integration | Component | music tab', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{music-tab}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#music-tab}}
+      template block text
+    {{/music-tab}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});