ENH: Setting up esa, base template (#13)

Fixes #4

app/adapters/application.js

@@ -0,0 +1,12 @@
+import DS from 'ember-data';
+import ENV from '../config/environment';
+import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
+
+const { JSONAPIAdapter } = DS;
+const { APP: { API_HOST, API_NAMESPACE } } = ENV;
+
+export default JSONAPIAdapter.extend(DataAdapterMixin, {
+  namespace: API_NAMESPACE,
+  host: API_HOST,
+  authorizer: 'authorizer:application',
+});

app/authorizers/application.js

@@ -1,11 +1,11 @@
 import Ember from 'ember';
 import BaseAuthorizer from 'ember-simple-auth/authorizers/base';
 
-const { isEmpty } = Ember;
+const { isEmpty, get } = Ember;
 
 export default BaseAuthorizer.extend({
   authorize(data, block) {
-    const accessToken = data['token'];
+    const accessToken = get(data, 'data.token');
     if (!isEmpty(accessToken)) {
       block('Authorization', `Token ${accessToken}`);
     }

app/breakpoints.js

@@ -0,0 +1,5 @@
+export default {
+  mobile:  '(max-width: 767px)',
+  tablet:  '(min-width: 768px) and (max-width: 991px)',
+  desktop: '(min-width: 992px) and (max-width: 1200px)'
+};

app/components/admin-section-list.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({});

app/controllers/application.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+const { Controller, inject: { service }} = Ember;
+
+export default Controller.extend({
+  session: service('session'),
+});

app/initializers/responsive.js

@@ -0,0 +1,6 @@
+import { initialize } from 'ember-responsive/initializers/responsive';
+
+export default {
+  name: 'responsive',
+  initialize
+};

app/models/admin-section.js

@@ -0,0 +1,8 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  name: attr('string'),
+  sort: attr('number'),
+});

app/router.js

@@ -8,6 +8,7 @@ const Router = Ember.Router.extend({
 
 Router.map(function() {
   this.route('login');
+  this.route('logout');
 });
 
 export default Router;

app/routes/logout.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+const { Route, inject: { service }} = Ember;
+
+export default Route.extend({
+  session: service('session'),
+
+  beforeModel() {
+    this.get('session').invalidate();
+  }
+});

app/styles/app.css

@@ -37,3 +37,38 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+
+/* Sidebar */
+.sidebar {
+  position: fixed;
+  top: 0px;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  display: block;
+  padding-left: 10px;
+  padding-right: 10px;
+  overflow-x: hidden;
+  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
+  background-color: #f5f5f5;
+  border-right: 1px solid #eee;
+}
+
+/* Sidebar navigation */
+.nav-sidebar {
+  margin-right: -21px; /* 20px padding + 1px border */
+  margin-bottom: 20px;
+  margin-left: -20px;
+}
+
+.nav-sidebar > li > a {
+  padding-right: 20px;
+  padding-left: 20px;
+}
+.nav-sidebar > .active > a,
+.nav-sidebar > .active > a:hover,
+.nav-sidebar > .active > a:focus {
+  color: #fff;
+  background-color: #428bca;
+}
+

app/templates/application.hbs

@@ -1 +1,21 @@
+{{#if session.isAuthenticated}}
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-md-2 sidebar">
+      <ul class="nav nav-sidebar">
+        <li class="active"><a href="#">Overview</a></li>
+        <li><a href="#">Experiments</a></li>
+        <li><a href="#">Collections</a></li>
+      </ul>
+      <ul class="nav nav-sidebar">
+        <li>{{#link-to 'logout'}}Logout{{/link-to}}</li>
+      </ul>
+    </div>
+    <div class="col-md-10 content">
       {{outlet}}
+    </div>
+  </div>
+</div>
+{{else}}
+{{outlet}}
+{{/if}}

app/templates/components/admin-section-list.hbs

@@ -0,0 +1 @@
+{{yield}}

app/templates/index.hbs

@@ -1,2 +1 @@
-Logged in
+
-{{outlet}}

app/templates/logout.hbs

@@ -0,0 +1 @@
+{{outlet}}

bower.json

@@ -1,5 +1,9 @@
 {
   "name": "ccdb-web",
   "dependencies": {
+    "bootstrap": "^3.3.7"
+  },
+  "devDependencies": {
+    "bootstrap": "^3.3.7"
   }
 }

config/environment.js

@@ -30,6 +30,8 @@ module.exports = function(environment) {
     // ENV.APP.LOG_TRANSITIONS = true;
     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
     // ENV.APP.LOG_VIEW_LOOKUPS = true;
+    ENV.APP.API_HOST = 'http://localhost:8000';
+    ENV.APP.API_NAMESPACE = 'api/v1';
   }
 
   if (environment === 'test') {

mirage/config.js

@@ -1,5 +0,0 @@
-import config from '../config/environment';
-
-export default function() {
-  this.passthrough(`${config.APP.API_HOST}/api/auth/login/`);
-}

mirage/scenarios/default.js

@@ -1,11 +0,0 @@
-export default function(/* server */) {
-
-  /*
-    Seed your development database using your factories.
-    This data will not be loaded in your tests.
-
-    Make sure to define a factory for each model you want to create.
-  */
-
-  // server.createList('post', 10);
-}

mirage/serializers/application.js

@@ -1,4 +0,0 @@
-import { JSONAPISerializer } from 'ember-cli-mirage';
-
-export default JSONAPISerializer.extend({
-});

package.json

@@ -26,22 +26,21 @@
     "ember-cli-htmlbars": "^2.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.4.3",
     "ember-cli-inject-live-reload": "^1.4.1",
-    "ember-cli-mirage": "0.3.4",
     "ember-cli-qunit": "^4.0.0",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-data": "~2.14.3",
-    "ember-django-adapter": "1.1.3",
     "ember-export-application-global": "^2.0.0",
     "ember-inflector": "^2.0.1",
+    "ember-light-table": "^1.10.0",
     "ember-load-initializers": "^1.0.0",
-    "ember-models-table": "^1.12.0",
     "ember-moment": "7.3.1",
     "ember-power-select": "1.8.5",
     "ember-power-select-with-create": "0.4.3",
     "ember-resolver": "^4.0.0",
-    "ember-simple-auth": "1.3.0",
+    "ember-responsive": "^2.0.4",
+    "ember-simple-auth": "1.4.0",
     "ember-source": "~2.14.0",
     "loader.js": "^4.2.3"
   },

tests/.jshintrc

@@ -1,5 +1,6 @@
 {
   "predef": [
+    "setBreakpoint",
     "document",
     "window",
     "location",

tests/helpers/responsive.js

@@ -0,0 +1,60 @@
+import Ember from 'ember';
+import MediaService from 'ember-responsive/media';
+
+const {
+  getOwner
+} = Ember;
+const { classify } = Ember.String;
+
+MediaService.reopen({
+  // Change this if you want a different default breakpoint in tests.
+  _defaultBreakpoint: 'desktop',
+
+  _breakpointArr: Ember.computed('breakpoints', function() {
+    return Object.keys(this.get('breakpoints')) || Ember.A([]);
+  }),
+
+  _forceSetBreakpoint(breakpoint) {
+    let found = false;
+
+    const props = {};
+    this.get('_breakpointArr').forEach(function(bp) {
+      const val = bp === breakpoint;
+      if (val) {
+        found = true;
+      }
+
+      props[`is${classify(bp)}`] = val;
+    });
+
+    if (found) {
+      this.setProperties(props);
+    } else {
+      throw new Error(
+        `You tried to set the breakpoint to ${breakpoint}, which is not in your app/breakpoint.js file.`
+      );
+    }
+  },
+
+  match() {}, // do not set up listeners in test
+
+  init() {
+    this._super(...arguments);
+
+    this._forceSetBreakpoint(this.get('_defaultBreakpoint'));
+  }
+});
+
+export default Ember.Test.registerAsyncHelper('setBreakpoint', function(app, breakpoint) {
+  // this should use getOwner once that's supported
+  const mediaService = app.__deprecatedInstance__.lookup('service:media');
+  mediaService._forceSetBreakpoint(breakpoint);
+});
+
+export function setBreakpointForIntegrationTest(container, breakpoint) {
+  const mediaService = getOwner(container).lookup('service:media');
+  mediaService._forceSetBreakpoint(breakpoint);
+  container.set('media', mediaService);
+
+  return mediaService;
+}

tests/test-helper.js

@@ -1,4 +1,6 @@
 import resolver from './helpers/resolver';
+import './helpers/responsive';
+
 import './helpers/flash-message';
 import {
   setResolver

tests/unit/controllers/login-test.js

@@ -1,12 +0,0 @@
-import { moduleFor, test } from 'ember-qunit';
-
-moduleFor('controller:login', 'Unit | Controller | login', {
-  // Specify the other units that are required for this test.
-  // needs: ['controller:foo']
-});
-
-// Replace this with your real tests.
-test('it exists', function(assert) {
-  let controller = this.subject();
-  assert.ok(controller);
-});

tests/unit/routes/application-test.js

@@ -1,11 +0,0 @@
-import { moduleFor, test } from 'ember-qunit';
-
-moduleFor('route:application', 'Unit | Route | application', {
-  // Specify the other units that are required for this test.
-  // needs: ['controller:foo']
-});
-
-test('it exists', function(assert) {
-  let route = this.subject();
-  assert.ok(route);
-});

tests/unit/routes/index-test.js

@@ -1,11 +0,0 @@
-import { moduleFor, test } from 'ember-qunit';
-
-moduleFor('route:index', 'Unit | Route | index', {
-  // Specify the other units that are required for this test.
-  // needs: ['controller:foo']
-});
-
-test('it exists', function(assert) {
-  let route = this.subject();
-  assert.ok(route);
-});

tests/unit/routes/login-test.js

@@ -1,11 +0,0 @@
-import { moduleFor, test } from 'ember-qunit';
-
-moduleFor('route:login', 'Unit | Route | login', {
-  // Specify the other units that are required for this test.
-  // needs: ['controller:foo']
-});
-
-test('it exists', function(assert) {
-  let route = this.subject();
-  assert.ok(route);
-});