Skip to content

Commit

Permalink
From structure created.
Browse files Browse the repository at this point in the history 
The values should be extracted from form and pushed into the request params.
Icons for element added.
  • Loading branch information
@Royedc4
Royedc4 committed Mar 7, 2017
1 parent 982a819 commit 9c5ab15
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 39 deletions.
4 changes: 3 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
"polymer": "Polymer/polymer#^1.8.1",
"paper-styles": "PolymerElements/paper-styles#^1.2.0",
"paper-input": "PolymerElements/paper-input#^1.1.23",
"iron-image": "PolymerElements/iron-image#^1.2.5"
"iron-image": "PolymerElements/iron-image#^1.2.5",
"paper-button": "PolymerElements/paper-button#^1.0.14",
"vaadin-combo-box": "vaadin/vaadin-combo-box#^1.3.2"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
Expand Down
1 change: 0 additions & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var historyApiFallback = require('connect-history-api-fallback');

var config = {
paths: {
Expand Down
23 changes: 0 additions & 23 deletions order-styles.html
View file

This file was deleted.

1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
},
"devDependencies": {
"browser-sync": "^2.18.6",
"connect-history-api-fallback": "^1.3.0",
"eslint": "^3.12.0",
"eslint-config-google": "^0.7.0",
"eslint-plugin-html": "^1.7.0",
Expand Down
Binary file added prime.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
176 changes: 163 additions & 13 deletions stitch-order-form.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<link rel="import" href="bower_components/paper-styles/shadow.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/iron-image/iron-image.html">

<link rel="import" href="order-styles.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="font-styles.html">
<link rel="import" href="stitch-order-icons.html">

<dom-module id="stitch-order-form">
<template>
<style include="order-styles">
<style include="font-styles">
:host {
display: block;
color: var(--primary-text-color);
Expand All @@ -19,30 +22,150 @@

@apply(--shadow-elevation-2dp);
}

.section {
margin-top: 50px;
}

.horizontal {
@apply(--layout-horizontal);
}

[spacer] {
@apply(--layout-flex);
}

form paper-input {
margin: 0 10px;
}

@media (min-width: 768px) {
form paper-input {
margin: 0 25px;
width: 60%;
}

form .horizontal paper-input {
width: 15%;
}
}

#content {
margin: 15px auto;
}

.left iron-image {
display: block;
width: 150px;
height: 150px;
}

.left .checkPrime {
height: 29px;
}

#content .right {
padding-left: 10px;
@apply(--layout-flex);
}

#options {
@apply(--layout-vertical);
@apply(--layout-end);
}

iron-icon[prefix] {
color: var(--secondary-text-color);
margin-right: 10px;
}

#invoiceResume :not(h3) {
margin: 0 25px;
}

#buttons {
margin: 50px 0 20px;
@apply(--layout-horizontal-reverse);
}

paper-button:not([disabled]):hover {
font-weight: bold;
}

#submitButton:not([disabled]) {
color: var(--text-primary-color);
background-color: var(--primary-color);
}

#cancelButton:not([disabled]) {
color: var(--accent-color);
}
</style>

<header>
<h1>Order Product</h1>

<paper-input label="[[label]]" placeholder="[[placeholder]]"
value="{{productUrl}}" type="url"
error-message="Invalid URL" auto-validate>
value="{{productUrl}}" type="url" required
error-message="Invalid URL">
<iron-icon icon="stitch-order:shopping-cart" prefix></iron-icon>
</paper-input>
</header>

<div class="content">
<div class="left">
<iron-image placeholder="./placeholder.jpg"></iron-image>
<form is="iron-form" id="form" method="get" content-type="application/json">
<div id="content" class="horizontal">
<div class="left">
<iron-image sizing="contain" preload fade placeholder="./placeholder.jpg"
src="[[productDetails.image]]">
</iron-image>

<img class="checkPrime" hidden$="[[!productDetails.prime]]"
src="./prime.png" alt="the Prime Logo with a checkmark">
</div>

<div class="right">
<h2>[[productDetails.Title]]</h2>

<h4>Select Options</h4>
<div id="options">
<template is="dom-repeat" items="[[productDetails.options]]" as="option">
<vaadin-combo-box required label="[[option.name]] *"
items="[[option.values]]">
</vaadin-combo-box>
</template>
</div>
</div>
</div>

<div class="right">
<h2>[[productDetails.Title]]</h2>
<div id="shipping" class="section">
<h3>Shipping information</h3>
<paper-input required label="Address Line 1 *"></paper-input>
<paper-input label="Address Line 2"></paper-input>
<div class="horizontal">
<paper-input required label="City *"></paper-input>
<paper-input required label="State *"></paper-input>
<paper-input required label="ZIP *" type="number"></paper-input>
</div>
<paper-input required label="E-Mail *" type="email">
<iron-icon icon="stitch-order:mail" prefix></iron-icon>
</paper-input>
<paper-input required label="Phone Number *" type="tel">
<iron-icon icon="stitch-order:phone" prefix></iron-icon>
</paper-input>
</div>
</div>

<div class="actions">
<div id="invoiceResume" class="section">
<h3>Total Cost</h3>
<div>$ [[productDetails.cost]] + shipping</div>
<p>(Note: shipping is calculated when purchase is made)</p>
</div>

</div>
<div id="buttons" class="section">
<paper-button id="submitButton" raised on-tap="_submit">Set up Order</paper-button>
<div spacer></div>
<paper-button id="cancelButton" on-tap="reset">Cancel</paper-button>
</div>
</form>
</template>

<script>
Expand Down Expand Up @@ -84,6 +207,33 @@ <h2>[[productDetails.Title]]</h2>
*/
type: Object
}
},

listeners: {
'iron-form-presubmit': '_setAction'
},

attached: function(){
this.reset();
},

reset: function(){
this.productUrl = '';
this.$.form.reset();
},

_setAction: function(){
var params = this.$.form.request.params;
console.log(params);
},

_submit: function(){
if (this._validate()) {
this.$.form.submit();
}
},
_validate: function(){
return true;
}
});
})();
Expand Down
17 changes: 17 additions & 0 deletions stitch-order-icons.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<link rel="import" href="bower_components/iron-iconset-svg/iron-iconset-svg.html">

<iron-iconset-svg name="stitch-order" size="24">
<svg>
<defs>
<g id="mail">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
</g>
<g id="phone">
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
</g>
<g id="shopping-cart">
<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
</g>
</defs>
</svg>
</iron-iconset-svg>

0 comments on commit 9c5ab15

Please sign in to comment.