From e581c638858b83870ee0399701899ab0de7e3f4a Mon Sep 17 00:00:00 2001
From: bertrand <bpinel@ippon.fr>
Date: Tue, 18 Apr 2017 19:04:52 +0200
Subject: [PATCH] Add Bootstrp and model table to make things look better
---
app/controllers/racks.js | 29 ++++++++++++++++++++++++++
app/templates/application.hbs | 11 ++++++++--
app/templates/customcell/imagecell.hbs | 2 ++
app/templates/racks.hbs | 18 +++-------------
ember-cli-build.js | 6 +++++-
package.json | 3 +++
tests/unit/controllers/racks-test.js | 12 +++++++++++
7 files changed, 63 insertions(+), 18 deletions(-)
create mode 100644 app/controllers/racks.js
create mode 100644 app/templates/customcell/imagecell.hbs
create mode 100644 tests/unit/controllers/racks-test.js
diff --git a/app/controllers/racks.js b/app/controllers/racks.js
new file mode 100644
index 0000000..c37c502
--- /dev/null
+++ b/app/controllers/racks.js
@@ -0,0 +1,29 @@
+import Ember from 'ember';
+export default Ember.Controller.extend({
+
+rackTableColumns: Ember.computed(function() {
+ var col = Ember.A([
+ Ember.Object.create({
+ propertyName: "name",
+ title: "Name"
+ }),
+ Ember.Object.create({
+ propertyName: 'nbColumns',
+ title: 'Nombre de colonnes',
+ }),
+ Ember.Object.create({
+ propertyName: 'nbRows',
+ title: 'Nombre de lignes',
+ }),
+ Ember.Object.create({
+ "template": "customcell/imagecell",
+ title: 'Image',
+ })
+]);
+ return col;
+}),
+
+rackTableContent: Ember.computed(function() {
+ return this.get("model");
+ })
+});
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index a105875..6011c00 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,2 +1,9 @@
-<h1>Ember Cellar</h1>
- {{outlet}}
+<div class="container">
+
+ <div class="page-header">
+ <h1>Ember Cellar</h1>
+ <p class="lead">Basic layout using Bootstrap for a simple wine application</p>
+ </div>
+ {{outlet}}
+
+</div>
diff --git a/app/templates/customcell/imagecell.hbs b/app/templates/customcell/imagecell.hbs
new file mode 100644
index 0000000..6c1f03a
--- /dev/null
+++ b/app/templates/customcell/imagecell.hbs
@@ -0,0 +1,2 @@
+{{!`record` - row from model, current column is available as `column`}}
+<img src='{{record.image}}' height="128" width="128"/>
diff --git a/app/templates/racks.hbs b/app/templates/racks.hbs
index cb7e8cd..3db5d2d 100644
--- a/app/templates/racks.hbs
+++ b/app/templates/racks.hbs
@@ -1,17 +1,5 @@
-
<h2>List of Racks</h2>
-<div class="detail">
-{{#each model as |rack|}}
- <article class="listing">
- <h3>{{rack.name}}</h3>
- <div class="detail">
- <span>Nb Colums:</span> {{rack.nbColumns}}
- <span>Nb Rows:</span> {{rack.nbRows}}
- </div>
- <div class="detail">
- <img src={{rack.image}} width='235px' height='235px'/>
- </div>
- </article>
-{{/each}}
+{{models-table
+ data=rackTableContent
+ columns=rackTableColumns}}
{{outlet}}
-</div>
diff --git a/ember-cli-build.js b/ember-cli-build.js
index c9be049..b401e89 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -3,7 +3,11 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
- // Add options here
+ 'ember-bootstrap': {
+ 'bootstrapVersion': 3,
+ 'importBootstrapFont': true,
+ 'importBootstrapCSS': true
+ }
});
// Use `app.import` to add additional libraries to the generated
diff --git a/package.json b/package.json
index d6f8044..dafac40 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,10 @@
"test": "ember test"
},
"devDependencies": {
+ "bootstrap": "^3.3.7",
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^2.4.1",
+ "ember-bootstrap": "^1.0.0-alpha.10",
"ember-cli": "2.12.1",
"ember-cli-app-version": "^2.0.0",
"ember-cli-babel": "^5.1.7",
@@ -32,6 +34,7 @@
"ember-data": "^2.12.0",
"ember-export-application-global": "^1.0.5",
"ember-load-initializers": "^0.6.0",
+ "ember-models-table": "^1.11.0",
"ember-resolver": "^2.0.3",
"ember-source": "~2.12.0",
"loader.js": "^4.2.3"
diff --git a/tests/unit/controllers/racks-test.js b/tests/unit/controllers/racks-test.js
new file mode 100644
index 0000000..0d82c3a
--- /dev/null
+++ b/tests/unit/controllers/racks-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:racks', 'Unit | Controller | racks', {
+ // 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);
+});
--
GitLab