PackageHelper/www/pages/add.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="add">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link" onclick="router.back({force: true, ignoreCache: true})">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">Add Items</div>
            <!--<div class="right">
                <a class="link" id="addpackagebtn">
                    <i class="icon fas fa-plus"></i>
                    <span>Add</span>
                </a>
            </div>-->
        </div>
    </div>

    <div class="toolbar tabbar toolbar-bottom">
        <div class="toolbar-inner">
            <a href="#add-tab" class="tab-link tab-link-active">Add</a>
            <a href="#history-tab" class="tab-link">Recent</a>
        </div>
    </div>

    <div class="tabs-swipeable-wrap">
        <div class="tabs">
            <div id="add-tab" class="tab tab-active">
                <div class="page-content">
                    <div class="list no-margin-top">
                        <ul>
                            <li class="item-divider">Address</li>
                            <li>
                                <div class="row justify-content-stretch">
                                    <div class="col-70 item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-label">Number</div>
                                            <div class="item-input-wrap">
                                                <input type="number" name="number" id="housenumberinput" placeholder="1234" value="" autocomplete="off" autocorrect="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-30 item-content item-input no-padding-left">
                                        <div class="item-inner no-padding-right">
                                            <div class="item-title item-label">Unit</div>
                                            <div class="item-input-wrap">
                                                <input type="text" name="unit" id="unitinput" placeholder="" value="" autocomplete="off" autocorrect="off">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-label">Street</div>
                                    <div class="item-input-wrap">
                                        <input type="text" name="street" id="streetInput" placeholder="Road Dr" autocomplete="off" autocorrect="off">
                                        <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="row justify-content-stretch">
                                    <div class="col-70 item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-label">City, State</div>
                                            <div class="item-input-wrap">
                                                <input type="text" name="citystate" placeholder="City, ST" value="" autocomplete="off" autocorrect="off">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-30 item-content item-input no-padding-left">
                                        <div class="item-inner no-padding-right">
                                            <div class="item-title item-label">ZIP</div>
                                            <div class="item-input-wrap">
                                                <input type="text" name="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="item-divider">Item Type</li>
                            {{#each itemtypes}}
                            <li>
                                <label class="item-radio item-content">
                                    <input type="radio" name="itemtype" value="{{id}}" {{#if selected}}data-default="1" checked{{/if}} />
                                           <i class="icon icon-radio"></i>
                                    <div class="item-inner">
                                        <div class="item-title"><i class="{{icon}}"></i> {{name}}</div>
                                    </div>
                                </label>
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>

                <div class="fab fab-right-bottom">
                    <a id="addpackagebtn">
                        <i class="icon material-icons">add</i>
                    </a>
                </div>
            </div>

            <div id="history-tab" class="page-content tab">
                <div class="block text-align-center" id="no-history">
                    <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/history-dashed.svg" class="margin-vertical" />
                    <div class="margin-top">No recently added items!  Swipe <i class="fas fa-arrow-left"></i> to add some.</div>
                </div>
                <ul class="list no-hairlines tablet-inset no-margin-top" id="historylist">
                    <!-- Packages go here -->
                </ul>
            </div>
        </div>
    </div>

    <script src="assets/js/add.js"></script>

</div>