[webshop] [addresses] address selector, my addresses list
diff --git a/website/templates/js/cart.js b/website/templates/js/cart.js
index 3e6a344..db6c571 100644
--- a/website/templates/js/cart.js
+++ b/website/templates/js/cart.js
@@ -30,6 +30,8 @@
if(r.exc) {
if(r.exc.indexOf("WebsitePriceListMissingError")!==-1) {
wn.cart.show_error("Oops!", "Price List not configured.");
+ } else if(r["403"]) {
+ wn.cart.show_error("Hey!", "You need to be logged in to view your cart.");
} else {
wn.cart.show_error("Oops!", "Something went wrong.");
}
@@ -66,114 +68,145 @@
},
});
});
+
+ $("#cart-add-shipping-address").on("click", function() {
+ window.location.href = "address?address_fieldname=shipping_address_name";
+ });
+
+ $("#cart-add-billing-address").on("click", function() {
+ window.location.href = "address?address_fieldname=customer_address";
+ });
},
- render: function(doclist) {
- var $cart_wrapper = $("#cart-items").empty();
+ render: function(out) {
+ var doclist = out.doclist;
+ var addresses = out.addresses;
+
+ var $cart_items = $("#cart-items").empty();
+ var $cart_taxes = $("#cart-taxes").empty();
+ var $cart_billing_address = $("#cart-billing-address").empty();
+ var $cart_shipping_address = $("#cart-shipping-address").empty();
- if($.map(doclist, function(d) { return d.item_code || null;}).length===0) {
+ var no_items = $.map(doclist, function(d) { return d.item_code || null;}).length===0;
+ if(no_items) {
wn.cart.show_error("Empty :-(", "Go ahead and add something to your cart.");
+ $("#cart-addresses").toggle(false);
return;
}
$.each(doclist, function(i, doc) {
if(doc.doctype === "Quotation Item") {
- doc.image_html = doc.image ?
- '<div style="height: 120px; overflow: hidden;"><img src="' + doc.image + '" /></div>' :
- '{% include "app/website/templates/html/product_missing_image.html" %}';
-
- if(!doc.web_short_description) doc.web_short_description = doc.description;
-
- $(repl('<div class="row">\
- <div class="col col-lg-9 col-sm-9">\
- <div class="row">\
- <div class="col col-lg-3">%(image_html)s</div>\
- <div class="col col-lg-9">\
- <h4><a href="%(page_name)s">%(item_name)s</a></h4>\
- <p>%(web_short_description)s</p>\
- </div>\
- </div>\
- </div>\
- <div class="col col-lg-3 col-sm-3">\
- <div class="input-group item-update-cart">\
- <input type="text" placeholder="Qty" value="%(qty)s" \
- data-item-code="%(item_code)s">\
- <div class="input-group-btn">\
- <button class="btn btn-primary" data-item-code="%(item_code)s">\
- <i class="icon-ok"></i></button>\
- </div>\
- </div>\
- <p style="margin-top: 10px;">at %(formatted_rate)s</p>\
- <small class="text-muted" style="margin-top: 10px;">= %(formatted_amount)s</small>\
- </div>\
- </div><hr>', doc)).appendTo($cart_wrapper);
-
+ wn.cart.render_item_row($cart_items, doc);
}
});
-
-
- return;
-
- if(Object.keys(wn.cart.get_cart()).length) {
-
- $.each(wn.cart.get_cart(), function(item_code, item) {
- item.image_html = item.image ?
- '<div style="height: 120px; overflow: hidden;"><img src="' + item.image + '" /></div>' :
- '{% include "app/website/templates/html/product_missing_image.html" %}';
- item.price_html = item.price ? ('<p>at ' + item.price + '</p>') : "";
-
- $(repl('<div class="row">\
- <div class="col col-lg-9 col-sm-9">\
- <div class="row">\
- <div class="col col-lg-3">%(image_html)s</div>\
- <div class="col col-lg-9">\
- <h4><a href="%(url)s">%(item_name)s</a></h4>\
- <p>%(description)s</p>\
- </div>\
- </div>\
- </div>\
- <div class="col col-lg-3 col-sm-3">\
- <p><input type="text" placeholder="Qty" value="%(qty)s" \
- item_code="%(item_code)s" class="cart-input-qty"></p>\
- %(price_html)s\
- </div>\
- </div><hr>', item)).appendTo($cart_wrapper);
- });
-
- $('<p class="text-right"><button type="button" class="btn btn-success checkout-btn">\
- <span class="icon-ok"></span> Checkout</button></p>')
- .appendTo($cart_wrapper);
-
+ if(!(addresses && addresses.length)) {
+ $cart_shipping_address.html('<div class="well">Hey! Go ahead and add an address</div>');
} else {
- $('<p class="alert">No Items added to cart.</p>').appendTo($cart_wrapper);
+ wn.cart.render_address($cart_shipping_address, addresses, doclist[0].shipping_address_name);
+ wn.cart.render_address($cart_billing_address, addresses, doclist[0].customer_address);
}
},
- // bind_events: function() {
- // // on change of qty
- // $(".cart-input-qty").on("change", function on_change_of_qty() {
- // wn.cart.set_value_in_cart($(this).attr("item_code"), "qty", $(this).val());
- // });
- //
- // // shopping cart button
- // $(".checkout-btn").on("click", function() {
- // console.log("checkout!");
- // console.log(wn.cart.get_cart());
- //
- // var user_is_logged_in = getCookie("full_name");
- // if(user_is_logged_in) {
- // wn.call({
- // method: "website.helpers.cart.checkout",
- // args: {cart: wn.cart.get_cart()},
- // btn: this,
- // callback: function(r) {
- // console.log(r);
- // }
- // });
- // } else {
- // window.location.href = "login?from=cart";
- // }
- // });
- // }
+ render_item_row: function($cart_items, doc) {
+ doc.image_html = doc.image ?
+ '<div style="height: 120px; overflow: hidden;"><img src="' + doc.image + '" /></div>' :
+ '{% include "app/website/templates/html/product_missing_image.html" %}';
+
+ if(!doc.web_short_description) doc.web_short_description = doc.description;
+
+ $(repl('<div class="row">\
+ <div class="col col-lg-9 col-sm-9">\
+ <div class="row">\
+ <div class="col col-lg-3">%(image_html)s</div>\
+ <div class="col col-lg-9">\
+ <h4><a href="%(page_name)s">%(item_name)s</a></h4>\
+ <p>%(web_short_description)s</p>\
+ </div>\
+ </div>\
+ </div>\
+ <div class="col col-lg-3 col-sm-3">\
+ <div class="input-group item-update-cart">\
+ <input type="text" placeholder="Qty" value="%(qty)s" \
+ data-item-code="%(item_code)s">\
+ <div class="input-group-btn">\
+ <button class="btn btn-primary" data-item-code="%(item_code)s">\
+ <i class="icon-ok"></i></button>\
+ </div>\
+ </div>\
+ <p style="margin-top: 10px;">at %(formatted_rate)s</p>\
+ <small class="text-muted" style="margin-top: 10px;">= %(formatted_amount)s</small>\
+ </div>\
+ </div><hr>', doc)).appendTo($cart_items);
+ },
+
+ render_address: function($address_wrapper, addresses, address_name) {
+ $.each(addresses, function(i, address) {
+ $(repl('<div class="accordion-group"> \
+ <div class="accordion-heading"> \
+ <div class="row"> \
+ <div class="col col-lg-10 address-title" \
+ data-address-name="%(name)s"><strong>%(name)s</strong></div> \
+ <div class="col col-lg-2"><input type="checkbox" \
+ data-address-name="%(name)s"></div> \
+ </div> \
+ </div> \
+ <div class="accordion-body collapse" data-address-name="%(name)s"> \
+ <div class="accordion-inner">%(display)s</div> \
+ </div> \
+ </div>', address))
+ .css({"margin": "10px auto"})
+ .appendTo($address_wrapper);
+ });
+
+ $address_wrapper.find(".accordion-heading")
+ .css({
+ "background-color": "#eee",
+ "padding": "10px",
+ })
+ .find(".address-title")
+ .css({"cursor": "pointer"})
+ .on("click", function() {
+ $address_wrapper.find('.accordion-body[data-address-name="'
+ +$(this).attr("data-address-name")+'"]').collapse("toggle");
+ });
+
+ $address_wrapper.find('input[type="checkbox"]').on("click", function() {
+ if($(this).is(":checked")) {
+ var me = this;
+ $address_wrapper.find('input[type="checkbox"]').each(function(i, chk) {
+ if($(chk).attr("data-address-name")!=$(me).attr("data-address-name")) {
+ $(chk).removeAttr("checked");
+ }
+ });
+
+ wn.call({
+ type: "POST",
+ method: "website.helpers.cart.update_cart_address",
+ args: {
+ address_fieldname: $address_wrapper.attr("data-fieldname"),
+ address_name: $(this).attr("data-address-name")
+ },
+ callback: function(r) {
+ if(!r.exc) {
+ wn.cart.render(r.message);
+ }
+ }
+ });
+ } else {
+ return false;
+ }
+ });
+
+ $address_wrapper.find('input[type="checkbox"][data-address-name="'+ address_name +'"]')
+ .attr("checked", "checked");
+
+ $address_wrapper.find(".accordion-body").collapse({
+ parent: $address_wrapper,
+ toggle: false
+ });
+
+ $address_wrapper.find('.accordion-body[data-address-name="'+ address_name +'"]')
+ .collapse("show");
+ }
});
\ No newline at end of file
diff --git a/website/templates/pages/account.html b/website/templates/pages/account.html
index f6992e1..b3fe5df 100644
--- a/website/templates/pages/account.html
+++ b/website/templates/pages/account.html
@@ -5,14 +5,15 @@
{% block content %}
<div class="col col-lg-12">
<ul class="breadcrumb">
- <li><a href="index">Home</a> <span class="divider">/</span></li>
+ <li><a href="index">Home</a></li>
<li class="active">My Account</li>
</ul>
<h3>My Account</h3>
- <p><a href="profile"><i class="icon-user"></i> Change my name, password</a></p>
- <p><a href="orders"><i class="icon-list"></i> My Orders</a></p>
- <p><a href="tickets"><i class="icon-tags"></i> My Tickets</a></p>
- <p><a href="server.py?cmd=web_logout"><i class="icon-signout"></i> Logout</a></p>
+ <p><a href="profile"><i class="icon-user icon-fixed-width"></i> Change my name, password</a></p>
+ <p><a href="addresses"><i class="icon-map-marker icon-fixed-width"></i> My Addresses</a></p>
+ <p><a href="orders"><i class="icon-list icon-fixed-width"></i> My Orders</a></p>
+ <p><a href="tickets"><i class="icon-tags icon-fixed-width"></i> My Tickets</a></p>
+ <p><a href="server.py?cmd=web_logout"><i class="icon-signout icon-fixed-width"></i> Logout</a></p>
</ul>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/address.html b/website/templates/pages/address.html
new file mode 100644
index 0000000..5b90928
--- /dev/null
+++ b/website/templates/pages/address.html
@@ -0,0 +1,123 @@
+{% extends "app/website/templates/html/page.html" %}
+
+{% set title=doc and doc.name or "New Address" %}
+{% set docname=(doc and doc.name or "") %}
+
+{% macro render_fields(docfields) -%}
+{% for df in docfields -%}
+ {% if df.fieldtype in ["Data", "Link"] -%}
+ <fieldset>
+ <label>{{ df.label }}</label>
+ <input type="text" placeholder="Type {{ df.label }}"
+ data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}"
+ {% if doc and doc.fields.get(df.fieldname) -%} value="{{ doc.fields[df.fieldname] }}" {%- endif %}>
+ </fieldset>
+ {% elif df.fieldtype == "Check" -%}
+ <fieldset class="checkbox">
+ <label><input type="checkbox" data-fieldname="{{ df.fieldname }}"
+ data-fieldtype="{{ df.fieldtype }}"
+ {% if doc and cint(doc.fields.get(df.fieldname)) -%} checked="checked" {%- endif %}>
+ {{ df.label }}</label>
+ </fieldset>
+ {% elif df.fieldtype == "Select" -%}
+ <fieldset>
+ <label>{{ df.label }}</label>
+ <select data-fieldname="{{ df.fieldname }}" data-fieldtype="{{ df.fieldtype }}">
+ {% for value in df.options.split("\n") -%}
+ {% if doc and doc.fields.get(df.fieldname) == value -%}
+ <option selected="selected">{{ value }}</option>
+ {% else -%}
+ <option>{{ value }}</option>
+ {%- endif %}
+ {%- endfor %}
+ </select>
+ </fieldset>
+ {%- endif %}
+{%- endfor %}
+{%- endmacro %}
+
+{% block content %}
+<div class="col col-lg-12">
+ <ul class="breadcrumb">
+ <li><a href="index">Home</a></li>
+ <li><a href="account">My Account</a></li>
+ <li><a href="addresses">My Addresses</a></li>
+ <li class="active">{{ title }}</li>
+ </ul>
+ <h3><i class="icon-map-marker"></i> {{ title }}</h3>
+ <button type="button" class="btn btn-primary pull-right" id="address-save"><i class="icon-ok"></i>
+ {{ doc and "Save" or "Insert" }}</button>
+ <div class="clearfix"></div>
+ <hr>
+ <div id="address-error" class="alert alert-danger" style="display: none;"></div>
+ <form autocomplete="on">
+ <div class="row">
+ <section class="col col-lg-6">
+ {{ render_fields(meta.left_fields) }}
+ </section>
+ <section class="col col-lg-6">
+ {{ render_fields(meta.right_fields) }}
+ </section>
+ </section>
+ </form>
+</div>
+
+<script>
+;(function() {
+ $(document).ready(function() {
+ bind_save();
+ });
+
+ var bind_save = function() {
+ $("#address-save").on("click", function() {
+ var fields = {
+ name: "{{ docname }}"
+ };
+
+ $("form").find("[data-fieldname]").each(function(i, input) {
+ var $input = $(input);
+ var fieldname = $(input).attr("data-fieldname");
+ var fieldtype = $(input).attr("data-fieldtype");
+
+ if(fieldtype == "Check") {
+ fields[fieldname] = $input.is(":checked") ? 1 : 0;
+ } else {
+ fields[fieldname] = $input.val();
+ }
+ });
+
+ wn.call({
+ btn: $(this),
+ type: "POST",
+ method: "website.helpers.cart.save_address",
+ args: { fields: fields, address_fieldname: get_url_arg("address_fieldname") },
+ callback: function(r) {
+ if(r.exc) {
+ var msg = "";
+ if(r._server_messages) {
+ msg = JSON.parse(r._server_messages || []).join("<br>");
+ }
+
+ $("#address-error")
+ .html(msg || "Something went wrong!")
+ .toggle(true);
+ } else if(get_url_arg("address_fieldname")) {
+ window.location.href = "cart";
+ } else {
+ window.location.href = "address?name=" + encodeURIComponent(r.message);
+ }
+ }
+ });
+ });
+ };
+})();
+</script>
+{% endblock %}
+
+{% block css %}
+<style>
+fieldset {
+ margin-bottom: 20px;
+}
+</style>
+{% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/addresses.html b/website/templates/pages/addresses.html
new file mode 100644
index 0000000..8526666
--- /dev/null
+++ b/website/templates/pages/addresses.html
@@ -0,0 +1,54 @@
+{% extends "app/website/templates/html/page.html" %}
+
+{% set title="My Addresses" %}
+
+{% block content %}
+<div class="col col-lg-12">
+ <ul class="breadcrumb">
+ <li><a href="index">Home</a></li>
+ <li><a href="account">My Account</a></li>
+ <li class="active">My Addresses</li>
+ </ul>
+ <h3><i class="icon-map-marker icon-fixed-width"></i> My Addresses</h3>
+ <hr>
+ <p><a class="btn btn-default" href="address"><i class="icon-plus"> New Address</i></a></p>
+ <hr>
+ <div id="address-list">
+ <div class="progress progress-striped active">
+ <div class="progress-bar progress-bar-info" style="width: 100%;"></div>
+ </div>
+ </div>
+</div>
+
+<script>
+;(function() {
+ $(document).ready(function() {
+ fetch_addresses();
+ });
+
+ var fetch_addresses = function() {
+ wn.call({
+ method: "website.helpers.cart.get_addresses",
+ callback: function(r) {
+ $("#address-list .progress").remove();
+ var $list = $("#address-list");
+
+ if(!(r.message && r.message.length)) {
+ $list.html("<div class='alert'>No Addresses Found</div>");
+ return;
+ }
+
+ $.each(r.message, function(i, address) {
+ address.url_name = encodeURIComponent(address.name);
+ $(repl('<div> \
+ <p><a href="address?name=%(url_name)s">%(name)s</a></p> \
+ <p>%(display)s</p> \
+ <hr> \
+ </div>', address)).appendTo($list);
+ });
+ }
+ });
+ };
+})();
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/website/templates/pages/cart.html b/website/templates/pages/cart.html
index 2619dec..9d5f100 100644
--- a/website/templates/pages/cart.html
+++ b/website/templates/pages/cart.html
@@ -8,7 +8,7 @@
{% block content %}
<div class="col col-lg-12">
- <h2><i class="icon-shopping-cart"></i> Shopping Cart</h2>
+ <h2><i class="icon-shopping-cart"></i> {{ title }}</h2>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" style="width: 100%;"></div>
</div>
@@ -20,17 +20,35 @@
<div class="col col-lg-9 col-sm-9">
<div class="row">
<div class="col col-lg-3"></div>
- <div class="col col-lg-9"><strong>Item Details</strong></div>
+ <div class="col col-lg-9"><h4>Item Details</h4></div>
</div>
</div>
- <div class="col col-lg-3 col-sm-3"><strong>Qty</strong></div>
+ <div class="col col-lg-3 col-sm-3"><h4>Qty</h4></div>
</div><hr>
<div id="cart-items">
</div>
- <hr>
<div id="cart-taxes">
</div>
+ <hr>
<div id="cart-addresses">
+ <div class="row">
+ <div class="col col-lg-6">
+ <h4>Shipping Address</h4>
+ <div id="cart-shipping-address" class="accordion"
+ data-fieldname="shipping_address_name"></div>
+ <button class="btn btn-default" type="button" id="cart-add-shipping-address">
+ <span class="icon icon-plus"></span> New Address</button>
+ </div>
+ <div class="col col-lg-6">
+ <h4>Billing Address</h4>
+ <div id="cart-billing-address" class="accordion"
+ data-fieldname="customer_address"></div>
+ <button class="btn btn-default" type="button" id="cart-add-billing-address">
+ <span class="icon icon-plus"></span> New Address</button>
+ </div>
+
+ </div>
+ <hr>
</div>
<button class="btn btn-success pull-right" type="button">Place Order</button>
</div>
diff --git a/website/templates/pages/order.html b/website/templates/pages/order.html
index 2588d39..61afe32 100644
--- a/website/templates/pages/order.html
+++ b/website/templates/pages/order.html
@@ -5,9 +5,9 @@
{% block content %}
<div class="col col-lg-12">
<ul class="breadcrumb">
- <li><a href="index">Home</a> <span class="divider">/</span></li>
- <li><a href="account">My Account</a> <span class="divider">/</span></li>
- <li><a href="orders">My Orders</a> <span class="divider">/</span></li>
+ <li><a href="index">Home</a></li>
+ <li><a href="account">My Account</a></li>
+ <li><a href="orders">My Orders</a></li>
<li class="active">{{ doc.name }}</li>
</ul>
<h3><i class="icon-file"></i> {{ doc.name }}</h3>
diff --git a/website/templates/pages/orders.html b/website/templates/pages/orders.html
index f43a474..bb72fc3 100644
--- a/website/templates/pages/orders.html
+++ b/website/templates/pages/orders.html
@@ -14,7 +14,7 @@
<li><a href="account">My Account</a> <span class="divider">/</span></li>
<li class="active">My Orders</li>
</ul>
- <h3><i class="icon-list"></i> My Orders</h3>
+ <h3><i class="icon-list icon-fixed-width"></i> My Orders</h3>
<hr>
<div id="order-list" style="font-size: 13px;">
<div class="progress progress-striped active">
diff --git a/website/templates/pages/partners.html b/website/templates/pages/partners.html
index 93cef3c..c090227 100644
--- a/website/templates/pages/partners.html
+++ b/website/templates/pages/partners.html
@@ -1,10 +1,10 @@
{% extends "app/website/templates/html/page.html" %}
-{% set title="Sales Partners" %}
+{% set title="Partners" %}
{% block content %}
<div class="col col-lg-12">
- <h2 id="blog-title">Partners</h2>
+ <h2 id="blog-title">{{ title }}</h2>
<hr>
{% for partner_info in partners %}
<div class="row">
diff --git a/website/templates/pages/profile.html b/website/templates/pages/profile.html
index 40d6a19..993839e 100644
--- a/website/templates/pages/profile.html
+++ b/website/templates/pages/profile.html
@@ -27,7 +27,7 @@
</div>
<div class="control-group">
<div class="controls">
- <button id="update_profile" type="submit" class="btn">Update</button>
+ <button id="update_profile" type="submit" class="btn btn-default">Update</button>
</div>
</div>
</form>
diff --git a/website/templates/pages/tickets.html b/website/templates/pages/tickets.html
index f1ee58a..901453d 100644
--- a/website/templates/pages/tickets.html
+++ b/website/templates/pages/tickets.html
@@ -5,11 +5,11 @@
{% block content %}
<div class="col col-lg-12">
<ul class="breadcrumb">
- <li><a href="index">Home</a> <span class="divider">/</span></li>
- <li><a href="account">My Account</a> <span class="divider">/</span></li>
+ <li><a href="index">Home</a></li>
+ <li><a href="account">My Account</a></li>
<li class="active">My Tickets</li>
</ul>
- <h3><i class="icon-tags"></i> My Tickets</h3>
+ <h3><i class="icon-tags icon-fixed-width"></i> My Tickets</h3>
<hr>
<div id="ticket-list" style="font-size: 13px;">
<div class="progress progress-striped active">