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
40c5fa9d
Commit
40c5fa9d
authored
Apr 18, 2017
by
Bertrand PINEL
Browse files
Add a simple component for displaying the rack
parent
8783862c
Changes
5
Hide whitespace changes
Inline
Side-by-side
app/components/rack-display.js
0 → 100644
View file @
40c5fa9d
import
Ember
from
'
ember
'
;
export
default
Ember
.
Component
.
extend
({
id
:
'
rack
'
,
width
:
800
,
height
:
600
,
nbColumns
:
4
,
nbRows
:
4
,
tickSize
:
8
,
style
:
1
,
bottles
:
null
,
frame
:
{
frameBackgroundColor
:
'
#DDDDDD
'
,
frameBorderColor
:
'
#999999
'
,
frameBorderWidth
:
3
,
frameCornerSize
:
50
,
frameCornerShadow
:
true
,
},
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
'
);
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
line
=
""
;
for
(
var
row
=
0
;
row
<
this
.
get
(
'
nbRows
'
);
row
++
)
{
let
cY
=
this
.
get
(
'
rack.marginY
'
)
+
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.marginX
'
)
+
incX
+
col
*
2
*
incX
;
line
+=
"
M
"
+
(
cX
-
tick
)
+
"
"
+
cY
+
"
h
"
+
2
*
tick
+
"
M
"
+
cX
+
"
"
+
(
cY
-
tick
)
+
"
v
"
+
2
*
tick
+
"
"
;
if
(
this
.
get
(
'
style
'
)
==
1
)
line
+=
"
M
"
+
(
cX
-
rayon
)
+
"
"
+
cY
+
"
a
"
+
rayon
+
"
"
+
rayon
+
"
0 0 0
"
+
2
*
rayon
+
"
0
"
;
}
}
return
line
;
})
});
app/controllers/rack.js
0 → 100644
View file @
40c5fa9d
import
Ember
from
'
ember
'
;
export
default
Ember
.
Controller
.
extend
({
actions
:
{
back
()
{
this
.
transitionToRoute
(
'
racks
'
);
}
}
});
app/templates/components/rack-display.hbs
0 → 100644
View file @
40c5fa9d
<p>
{{
yield
}}
</p>
<svg
version=
"1.1"
style=
'font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;'
xmlns=
'http://www.w3.org/2000/svg'
width=
{{
width
}}
height=
{{
height
}}
>
<!-- Bounding box -->
<rect
x=
"0"
y=
"0"
width=
{{
width
}}
height=
{{
height
}}
rx=
{{
frame
.
frameCornerSize
}}
ry=
{{
frame
.
frameCornerSize
}}
fill=
{{
frame
.
frameBackgroundColor
}}
stroke=
{{
frame
.
frameBorderColor
}}
stroke-width=
{{
frame
.
frameBorderWidth
}}
></rect>
<path
d=
{{
rackPath
}}
fill=
"none"
stroke=
{{
rack
.
strokeColor
}}
stroke-width=
{{
rack
.
strokeWidth
}}
></path>
</svg>
app/templates/rack.hbs
View file @
40c5fa9d
<div
class=
"col-md-12 phase-container"
>
<h4><strong>
Rack Name:
</strong>
{{
model
.
name
}}
(
{{
model
.
nbRows
}}
rows by
{{
model
.
nbColumns
}}
columns)
</h4>
<ul>
{{#
each
model
.
bottles
as
|
bottle
|
}}
<li>
{{
bottle
.
name
}}
: row
{{
bottle
.
yrow
}}
, column
{{
bottle
.
xcolumn
}}
</li>
{{/
each
}}
</ul>
{{
outlet
}}
<p><button
{{
action
"back"
}}
>
Back
</button></p>
{{#
rack-display
nbColumns
=
model
.
nbColumns
nbRows
=
model
.
nbRows
bottles
=
model
.
bottles
}}
<p><strong>
Rack Name:
</strong>
{{
model
.
name
}}
(
{{
model
.
nbRows
}}
rows by
{{
model
.
nbColumns
}}
columns)
</p>
{{/
rack-display
}}
{{
outlet
}}
</div>
tests/integration/components/rack-display-test.js
0 → 100644
View file @
40c5fa9d
import
{
moduleForComponent
,
test
}
from
'
ember-qunit
'
;
import
hbs
from
'
htmlbars-inline-precompile
'
;
moduleForComponent
(
'
rack-display
'
,
'
Integration | Component | rack 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
`{{rack-display}}`
);
assert
.
equal
(
this
.
$
().
text
().
trim
(),
''
);
// Template block usage:
this
.
render
(
hbs
`
{{#rack-display}}
template block text
{{/rack-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