Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Bertrand PINEL
EmberCellar
Commits
86e86c0d
Commit
86e86c0d
authored
Apr 19, 2017
by
Bertrand PINEL
Browse files
Add a component in component
parent
40c5fa9d
Changes
7
Hide whitespace changes
Inline
Side-by-side
app/components/bottle-display.js
0 → 100644
View file @
86e86c0d
import
Ember
from
'
ember
'
;
export
default
Ember
.
Component
.
extend
({
tagName
:
'
g
'
,
bottle
:
null
,
nbRows
:
4
,
nbColumns
:
4
,
flipped
:
false
,
width
:
100
,
height
:
200
,
margin
:
10
,
spacing
:
10
,
bottleColor
:
'
#22EE11
'
,
bottleFill
:
'
#00AA00
'
,
bottleStrokeWidth
:
2
,
bottleSize
:
0.80
,
incX
:
Ember
.
computed
(
'
nbColumns
'
,
'
width
'
,
'
margin
'
,
'
spacing
'
,
function
()
{
let
usefulWidth
=
this
.
get
(
'
width
'
)
-
2
*
this
.
get
(
'
margin
'
);
return
usefulWidth
/
this
.
get
(
'
nbColumns
'
)
/
2
;
}),
incY
:
Ember
.
computed
(
'
nbRows
'
,
'
height
'
,
'
margin
'
,
function
()
{
let
usefulHeight
=
this
.
get
(
'
height
'
)
-
2
*
this
.
get
(
'
margin
'
);
return
usefulHeight
/
this
.
get
(
'
nbRows
'
)
/
2
;
}),
cx
:
Ember
.
computed
(
'
bottle
'
,
'
incX
'
,
'
margin
'
,
function
()
{
let
xcolumn
=
this
.
get
(
'
bottle
'
).
get
(
'
xcolumn
'
);
return
this
.
get
(
'
margin
'
)
+
this
.
get
(
'
incX
'
)
+
xcolumn
*
2
*
this
.
get
(
'
incX
'
);
}),
cy
:
Ember
.
computed
(
'
bottle
'
,
'
incY
'
,
'
margin
'
,
function
()
{
let
yrow
=
this
.
get
(
'
bottle
'
).
get
(
'
yrow
'
);
return
this
.
get
(
'
margin
'
)
+
this
.
get
(
'
incY
'
)
+
yrow
*
2
*
this
.
get
(
'
incY
'
);
}),
radius
:
Ember
.
computed
(
'
incX
'
,
'
incY
'
,
'
spacing
'
,
'
bottleSize
'
,
function
()
{
return
Math
.
min
(
this
.
get
(
'
incX
'
)
-
this
.
get
(
'
spacing
'
),
this
.
get
(
'
incY
'
))
*
this
.
get
(
'
bottleSize
'
);
})
});
app/components/rack-display.js
View file @
86e86c0d
...
...
@@ -7,6 +7,8 @@ export default Ember.Component.extend({
nbColumns
:
4
,
nbRows
:
4
,
tickSize
:
8
,
margin
:
10
,
spacing
:
5
,
style
:
1
,
bottles
:
null
,
...
...
@@ -21,29 +23,31 @@ export default Ember.Component.extend({
rack
:
{
strokeColor
:
'
#3322FF
'
,
strokeWidth
:
3
,
bottleColor
:
'
#00EE00
'
,
marginX
:
10
,
marginY
:
10
,
handle
:
5
,
percentBottle
:
0.70
},
rackPath
:
Ember
.
computed
(
'
width
'
,
'
height
'
,
'
nbColumns
'
,
'
nbRows
'
,
'
rack
'
,
'
tickSize
'
,
function
()
{
let
usefulWidth
=
this
.
get
(
'
width
'
)
-
2
*
this
.
get
(
'
rack.marginX
'
);
let
usefulHeight
=
this
.
get
(
'
height
'
)
-
2
*
this
.
get
(
'
rack.marginY
'
);
rackPath
:
Ember
.
computed
(
'
width
'
,
'
height
'
,
'
nbColumns
'
,
'
nbRows
'
,
'
margin
'
,
'
spacing
'
,
'
tickSize
'
,
function
()
{
let
bottles
=
this
.
get
(
'
bottles
'
);
for
(
var
i
=
0
;
i
<
bottles
.
content
.
length
;
i
++
)
{
// pre-fetch data in relationship with rack (but do nothing with it :-())
let
bottle
=
bottles
.
objectAt
(
i
);
//console.log("Retrieve botlle "+bottle.get('name'));
}
let
usefulWidth
=
this
.
get
(
'
width
'
)
-
2
*
this
.
get
(
'
margin
'
);
let
usefulHeight
=
this
.
get
(
'
height
'
)
-
2
*
this
.
get
(
'
margin
'
);
let
tick
=
this
.
get
(
"
tickSize
"
);
let
incX
=
usefulWidth
/
this
.
get
(
'
nbColumns
'
)
/
2
;
let
incY
=
usefulHeight
/
this
.
get
(
'
nbRows
'
)
/
2
;
let
rayon
=
Math
.
min
(
incX
-
this
.
get
(
'
rack.handle
'
),
incY
);
let
rayon
=
Math
.
min
(
incX
-
this
.
get
(
'
spacing
'
),
incY
);
let
line
=
""
;
for
(
var
row
=
0
;
row
<
this
.
get
(
'
nbRows
'
);
row
++
)
{
let
cY
=
this
.
get
(
'
rack.
margin
Y
'
)
+
incY
+
row
*
2
*
incY
;
let
cY
=
this
.
get
(
'
margin
'
)
+
incY
+
row
*
2
*
incY
;
//line += "M "+this.get('rack.marginX')+" "+offsetY;
for
(
var
col
=
0
;
col
<
this
.
get
(
'
nbColumns
'
);
col
++
)
{
let
cX
=
this
.
get
(
'
rack.
margin
X
'
)
+
incX
+
col
*
2
*
incX
;
let
cX
=
this
.
get
(
'
margin
'
)
+
incX
+
col
*
2
*
incX
;
line
+=
"
M
"
+
(
cX
-
tick
)
+
"
"
+
cY
+
"
h
"
+
2
*
tick
+
"
M
"
+
cX
+
"
"
+
(
cY
-
tick
)
+
"
v
"
+
2
*
tick
+
"
"
;
if
(
this
.
get
(
'
style
'
)
==
1
)
if
(
this
.
get
(
'
style
'
)
==
=
1
)
{
line
+=
"
M
"
+
(
cX
-
rayon
)
+
"
"
+
cY
+
"
a
"
+
rayon
+
"
"
+
rayon
+
"
0 0 0
"
+
2
*
rayon
+
"
0
"
;
}
}
}
return
line
;
...
...
app/routes/rack.js
View file @
86e86c0d
...
...
@@ -4,7 +4,7 @@ export default Ember.Route.extend({
model
(
params
)
{
let
pid
=
params
.
rack_id
;
let
rack
=
this
.
store
.
peek
Record
(
'
rack
'
,
pid
);
let
rack
=
this
.
store
.
find
Record
(
'
rack
'
,
pid
,
{
reload
:
true
}
);
if
(
rack
==
null
)
{
this
.
transitionTo
(
'
racks
'
);
}
else
{
...
...
app/routes/racks.js
View file @
86e86c0d
...
...
@@ -2,5 +2,8 @@ import Ember from 'ember';
export
default
Ember
.
Route
.
extend
({
model
()
{
return
this
.
store
.
findAll
(
'
rack
'
,
{
include
:
'
bottles
'
});
}
// Preload all bottles
let
bottles
=
this
.
store
.
findAll
(
'
bottle
'
,
{
reload
:
true
});
return
this
.
store
.
findAll
(
'
rack
'
,
{
include
:
'
bottles
'
});
}
});
app/templates/components/bottle-display.hbs
0 → 100644
View file @
86e86c0d
{{
yield
}}
<circle
cx=
{{
cx
}}
cy=
{{
cy
}}
r=
{{
radius
}}
fill=
{{
bottleFill
}}
stroke=
{{
bottleColor
}}
stroke-width=
{{
bottleStrokeWidth
}}
/>
app/templates/components/rack-display.hbs
View file @
86e86c0d
...
...
@@ -10,4 +10,9 @@
stroke=
{{
frame
.
frameBorderColor
}}
stroke-width=
{{
frame
.
frameBorderWidth
}}
></rect>
<path
d=
{{
rackPath
}}
fill=
"none"
stroke=
{{
rack
.
strokeColor
}}
stroke-width=
{{
rack
.
strokeWidth
}}
></path>
{{#
each
bottles
as
|
bottle
|
}}
{{#
bottle-display
bottle
=
bottle
height
=
height
width
=
width
nbRows
=
nbRows
nbColumns
=
nbColumns
margin
=
margin
spacing
=
spacing
}}
{{/
bottle-display
}}
{{/
each
}}
</svg>
tests/integration/components/bottle-display-test.js
0 → 100644
View file @
86e86c0d
import
{
moduleForComponent
,
test
}
from
'
ember-qunit
'
;
import
hbs
from
'
htmlbars-inline-precompile
'
;
moduleForComponent
(
'
bottle-display
'
,
'
Integration | Component | bottle display
'
,
{
integration
:
true
});
test
(
'
it renders
'
,
function
(
assert
)
{
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.on('myAction', function(val) { ... });
this
.
render
(
hbs
`{{bottle-display}}`
);
assert
.
equal
(
this
.
$
().
text
().
trim
(),
''
);
// Template block usage:
this
.
render
(
hbs
`
{{#bottle-display}}
template block text
{{/bottle-display}}
`
);
assert
.
equal
(
this
.
$
().
text
().
trim
(),
'
template block text
'
);
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment