gettting to know the form

getting to know the form

{% extends '/layouts/layout.njs' %}
{% block contenttype%}item-form{%endblock%}
{% block content %}

{% if item.summary and item.title and (item.ship or item.exchange) and item.category and (item.images|length > 0) and (item.groups|length > 0) and (item.state != "open") %}
    {% set isPublishable = 1 %}
{% else %}
    {% set isPublishable = 0 %}
{% endif %}

<div class="box ">
    <aside class="container">
        <div class="col col-1of1-xs">
            {% include "partials/list-progress.njs" %}
        </div>
    </aside>
<div class="col col-1of1-xs">
    {% if step == "product" %}
    <form id="itemNew" class="form-full" action="{{"/items/new/post" if action=="new" else "/items/"+item._id+"/edit/update"}}" enctype="multipart/form-data" method="post">
        <header class="form-header form-header-product item-post-header"><span>Name it. Price it. Tell the story. Make them love it like you once did.</span></header>
        <fieldset class="container">
            <div class="fieldgroup">
                <label for="title">Title It <span class="character-limit">100</span></label>
                <input type="text" id="title" name="title" value="{{item.title}}" maxlength="100" required class="has-character-limit">
                <p class="help-inline">E.g., Levi's 501 Women's Jeans Size 10</p>
                <input type="hidden" name="_id" value="{{item._id}}">
            </div>
            <div class="fieldgroup">
                {# This layout is kinda precious & creates not-best-practices custom inputs. Custom inputs bad. Seriously. #}
                <div class="container form-item-price">
                    <label for="price">Price it, Swap it, Give it Away</label>
                    <div class="col col-first col-2of5-md  col-1of1-xs">
                        <div class="input-group">
                            <span class="input-addon">$</span>
                            <input type="text" name="price" id="price" class="form-price" placeholder="0.00" value="{{item.price|monify if item.price}}">
                        </div>
                        <p class="help-inline">How much would you like for this item?</p>
                    </div>
                    <div class="col col-1of5-md col-0-md"></div>
                    <div class="col col-1of5-md col-1of2-xs col-first-md">
                        <label class="fancy-label sublabel" for="free">
                        <input type="checkbox" name="free" id="free" class="fancy-checkbox"{{" checked" if item.price ==0 and action != "new"}}>
                        <span><span>Free</span></span></label>
                    </div>
                    <div class="col col-last col-1of5-md col-1of2-xs">
                        <label class="fancy-label sublabel"for="swap">
                        <input type="checkbox" name="acceptSwap" id="acceptSwap" class="fancy-checkbox"{{" checked" if item.acceptSwap}}>
                        <span><span>Swap It</span></span></label>
                    </div>
                    <div class="col col-first col-last col-1of1-xs form-item-price-notes">
                        <input type="text" name="swap" id="swap" value="{{item.swap}}">
                        <p class="help-inline">What are you willing to swap for? Any other pricing or swapping notes?</p>
                    </div>
                </div>
            </div>
			<div class="fieldgroup">
			  <div class="container form-item-multiple-accept">
				<div class="col col-first col-last col-1of1-xs">
				  <label id="multiple-accept" class="fancy-label sublabel" for="acceptMultipleOffers">
					<input type="checkbox" name="acceptMultipleOffers" id="acceptMultipleOffers" class="fancy-checkbox" {{"checked" if item.acceptMultipleOffers == true}}> <span><span id="multiple-accept-label">I have multiples of this item </span></span></label>
				  <p class="help-inline"> Do you have more than one of these items to offer? You can manage all these sales in just one listing: no need to repost. Please note that cir.cl cannot manage your inventory. We trust you to remove the item when you sell out.</p>
				</div>
			  </div>
			</div>
            <div class="fieldgroup">
                <label for="category">Categorize It</label>
                <select id="category" name="category" class="fancy-select">
                    <option disabled="disabled"{{" selected=selected" if not item.category}}>Choose a Category</option>
                    <option value="Adult Furniture"{{" selected=selected" if item.category == "Adult Furniture"}}>Adult Furniture</option>
                    <option value="Kids Furniture"{{" selected=selected" if item.category == "Kids Furniture"}}>Kids Furniture</option>
                    <option value="Food"{{" selected=selected" if item.category == "Food"}}>Food</option>
                    <option value="Adult Clothing"{{" selected=selected" if item.category == "Adult Clothing"}}>Adult Clothing</option>
                    <option value="Kids Clothing"{{" selected=selected" if item.category == "Kids Clothing"}}>Kids Clothing</option>
                    <option value="Transportation"{{" selected=selected" if item.category == "Transportation"}}>Transportation</option>
                    <option value="Appliances"{{" selected=selected" if item.category == "Appliances"}}>Appliances</option>
                    <option value="Electronics"{{" selected=selected" if item.category == "Electronics"}}>Electronics</option>
                    <option value="Toys"{{" selected=selected" if item.category == "Toys"}}>Toys</option>
                    <option value="Jewlery"{{" selected=selected" if item.category == "Jewlery"}}>Jewlery</option>
                    <option value="Other"{{" selected=selected" if item.category == "Other"}}>Other</option>
                </select>
            </div>
            <div class="fieldgroup">
                <label for="groups">Post to Groups</label>
                <div class="form-item-groups">
                    <label for="isPublic" class="fancy-label sublabel">
                        <input type="checkbox" name="public" class="fancy-checkbox"{{" checked" if item.public or action=="new"}}><span><span>Public (uncheck to keep Private)</span></span>
                    </label>
                    {% for group in reqUser.groups %}
                    <label for="{{group.groupId}}" class="fancy-label sublabel">
                        <input type="checkbox" name="groups" class="fancy-checkbox" value="{{group.groupId}}"{% if action == "edit" %}{{" checked" if group.groupId|inArray(item.groups) }}{% endif %}
><span><span>{{group.name}}</span></span>
                    </label>
                    {% endfor %} {# group in reqUser.groups #}
                </div>
            </div>
            <div class="fieldgroup">
                <label for="summary">Tell the Story <span class="character-limit">400</span></label>

                <textarea id="summary" name="summary" maxlength="400" rows="4" required class="has-character-limit">{{item.summary}}</textarea>
                <p class="help-inline">How did it become yours? Why are you selling it? What makes this item special?</p>
            </div>
            <div class="fieldgroup">
                <label for="details" class="optional">Get Down to the Nitty Gritty<span class="character-limit">4000</span></label>
                <textarea id="details" name="details" maxlength="4000" rows="4" class="has-character-limit">{{item.acceptMultipleOffers}} {{item.details}}</textarea>
                <p class="help-inline">Sizing, materials, thread count, mileage. Get technical. Try to anticipate questions buyers might have.</p>
            </div>
            <div class="fieldgroup">
                <label>Shipping & Exchange</label>
                <p class="help-inline">Get it in their hands. Help local buyers connect with you. Choose at least one. You can always message buyers to finalize details.</p>
                <div class="container">
                    <div class="col col-first col-3of5-md col-1of1-xs">
                        <label for="ship" class="fancy-label sublabel"><input type="checkbox" name="ship" id="ship" class="fancy-checkbox"{{" checked" if (action == "new" or item.ship)}}><span><span>I will ship this item.</span></span></label>
                    </div>
                    <div class="col col-last col-2of5-md col-1of1-xs col-first-md input-ship{{ " transparent" if item and not item.ship }}" id="shipDetails">
                        <div class="input-group">
                            <span class="input-addon">$</span>
                            <input type="text" name="shipPrice" id="shipPrice" class="form-price" placeholder="0.00" value="{{item.shipPrice|monify if item.shipPrice}}">
                        </div>
                        <p class="help-inline">Enter a shipping price or leave empty for free.</p>
                    </div>
                </div>
                <div class="container">
                    <div class="col col-first col-3of5-md col-1of1-xs col-last-md">
                        <label for="exchange" class="fancy-label sublabel"><input type="checkbox" name="exchange" id="exchange" class="fancy-checkbox"{{" checked" if (action == "new" or item.exchange)}}><span><span>I will meet in person to exchange this item.</span></span></label>
                    </div>
                    <div class="col col-last col-2of5-md col-1of1-xs col-first-md input-exchange{{ " transparent" if item and not item.exchange }}" id="exchangeDetails">

                        <select id="exchangeAddress" name="exchangeAddress" class="fancy-select">

                            <option disabled="disabled"{{" selected=selected" if action=="new" or not item.exchangeAddress}}>Choose an Address</option>

                            {% for address in reqUser.address %}
                            <option {{" selected=selected " if item.exchangeAddress and item.exchangeAddress.address == address.address and item.exchangeAddress.zip == address.zip}} value="{{address._id}}">{{address.address}}{{", " if address.address}}{{address.city}}{{" " if address.city}}{{address.state}}{{" "+address.zip}}</option>
                            {% endfor %}
                        </select>
                        <button class="bttn4" data-toggle="modal" data-target="#addressModal">Add an Address</button>
                        <div class="modal fade bs-example-modal-sm" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-sm">
                            <div class="modal-content">
                                <a class="close" data-dismiss="modal" aria-hidden="true">&#10005;</a>
                                <legend>Add an Address</legend>
                                <input type="text" id="address" name="addressAddress" placeholder="123 Your Street"></input>
                                <input type="text" id="city" name="cityAddress" placeholder="Your City"></input>
                                <input type="text" id="state" name="stateAddress" placeholder="ST"></input>
                                <input type="text" id="zip" name="zipAddress" placeholder="12345 (required)" aria-required="true"></input>
                                <button type="button" id="submitNewAddress">Add</button>
                            </div>
                          </div>
                        </div>

                        <p class="help-inline">Choose an address or enter a new one.</p>
                    </div>
                </div>
            </div>
            {% if item.images %}
                {% for image in item.images %}
                <input type="hidden" name="images[{{ loop.index0 }}][href]" value="{{ image.href }}">
                <input type="hidden" name="images[{{ loop.index0 }}][title]" value="{{image.title}}">
                <input type="hidden" name="images[{{ loop.index0 }}][_id]" value="{{image._id}}" data-hide="{{image._id}}">
                {% endfor %} {# image in item.images #}
            {% endif %} {# item.images #}
        </fieldset>
        {% if item.state == "draft" or action == "new" %}
        <div class="container save">
            <button type="submit" class="save-draft bttn5" name="draftFlag" value="false">Save Draft</button>
        </div>
        {% endif %} {# action="new" #}
        <div class="container save">
            <button name="draftFlag" type="submit" value="true">Save & {{"Add" if action=="new" or not item.images|length else "Edit"}} Pictures</button>
        </div>
    </form>
    {% else %}
    <form id="itemImages" class="form-full" action="/items/{{ item._id }}/edit/images/post" enctype="multipart/form-data" method="post">
        <header class="form-header form-header-pictures item-post-header"><span>Show the goods.</span></header>
        <fieldset class="container">
            <p>Great photos increase your chance of selling. You can use square, landscape, and portrait images. Minimum image size is 456 x 780px. Images will display in order shown. Drag and drop to reorder. Your listing can include up to 8 photos.</p>
            <ul id="sortable" class="form-images">
                {% if item.images %}
                    {% for image in item.images %}
                        <li class="ui-state-default">
                            <input type="hidden" name="images[{{ loop.index0 }}][href]" value="{{ image.href }}">
                            <input type="hidden" name="images[{{ loop.index0 }}][title]" value="{{image.title}}">
                            <input type="hidden" name="images[{{ loop.index0 }}][_id]" value="{{image._id}}" data-hide="{{image._id}}">
                            <img src="{{ image.href }}">
                            <div class="image-order">{{ loop.index }}</div>
                            <div class="image-delete" {{ "id="+image._id+"" if image._id }}>Remove</div>
                        </li>
                    {% endfor %} {# image in item.images #}
                {% endif %} {# item.images #}
                {% if item.images|length <= 8 %}
                <input type="filepicker" id="imagePicker" data-fp-apikey="AyJ0iptWRYyqw2NylhzVAz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-multiple="true" data-fp-button-class="form-image-picker bttn2" data-fp-maxsize="3000000" data-fp-services="COMPUTER,FACEBOOK,INSTAGRAM,URL" data-fp-button-text="Add Images" onchange="displayImages();">

                {% endif %} {# item.images|length <= 8 #}

            </ul>
            <div class="fallback">
                <input name="file" type="file" multiple>
            </div>
        </fieldset>
        {% if item.state=="draft" %}
        <div class="container save">
            <button type="submit" name="draftFlag" value="false" class="save-draft bttn5">Save Draft</button>
        </div>
        {% endif %} {# action=="new" #}
        <div class="container save">
            <button type="submit">Save & {{"Preview" if item.state == "draft" else "View" }}</button>
        </div>
    </form>
    {% endif %} {# step = "product" #}

</div>
</div>

{% endblock %}
{% block contextual_js %}
<script src="/static/js/item-form.js"></script>


<script>

function displayImages() {
    var imageArray=event.fpfiles;
    var currentImages = $('#sortable li').length;

    for(var i=0 ; i < imageArray.length ; i++) {
        $('#imagePicker').before('<li class="ui-state-default"><input type="hidden" name="images['+(i+1+currentImages)+'][href]" value="' + imageArray[i].url + '"><input type="hidden" name="images['+(i+1+currentImages)+'][title]" value="' + imageArray[i].filename + '"><img src="'+imageArray[i].url+'"><div class="image-order">'+ (i+1+currentImages) +'</div><div class="image-delete">Remove</div></li>');
    };
};

</script>


{% endblock %}