Subversion Repositories SmartDukaan

<style>
        .emi-import-box {
                padding: 12px;
                border: 1px dashed #999;
                background: #fafafa;
                margin: 8px 0 16px 0;
                border-radius: 4px;
        }

        .emi-table th {
                background: #f4f4f4;
        }

        .emi-sku {
                font-family: Menlo, Consolas, monospace;
                font-size: 12px;
                color: #555;
        }

        .emi-brand-badge {
                display: inline-block;
                padding: 1px 7px;
                border-radius: 10px;
                background: #eceff1;
                color: #37474f;
                font-size: 11px;
                font-weight: 600;
        }

        .emi-import-result {
                margin-top: 10px;
        }
</style>

<section class="wrapper">
        <div class="row">
                <div class="col-lg-12">
                        <h3 class="page-header"><i class="icon_document_alt"></i>EMI Catalog</h3>
                        <ol class="breadcrumb">
                                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                                <li><i class="icon_document_alt"></i>EMI Catalog</li>
                        </ol>
                </div>
        </div>

        <div class="emi-import-box">
                <h4 style="margin:0 0 8px 0;">Import EMI JSON (Pine Labs scrape)</h4>
                <form id="emi-cat-import-form" onsubmit="event.preventDefault(); emiCatalogImport();"
                          enctype="multipart/form-data">
                        <div class="col-lg-5" style="padding-left:0;">
                                <input type="file" id="emi-cat-import-file" accept="application/json,.json" class="form-control"
                                           required>
                        </div>
                        <div class="col-lg-3">
                                <button type="submit" class="btn btn-primary" id="emi-cat-import-btn">Import &amp; Persist</button>
                                <span style="color:#666; font-size:11px; margin-left:8px;">Replaces existing offers per SKU.</span>
                        </div>
                </form>
                <div class="col-lg-12 emi-import-result" id="emi-cat-import-result"></div>
        </div>

        <div class="row">
                <div class="col-lg-12">
                        <table id="emi-catalog-table" class="table table-striped table-bordered table-condensed emi-table">
                                <thead>
                                <tr>
                                        <th>#</th>
                                        <th>Brand</th>
                                        <th>Product</th>
                                        <th>Pine SKU</th>
                                        <th>Price</th>
                                        <th>Scraped</th>
                                        <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                        #foreach($p in $products)
                                        <tr>
                                                <td>$p.getId()</td>
                                                <td><span class="emi-brand-badge">$p.getBrand()</span></td>
                                                <td>$p.getProductName()</td>
                                                <td class="emi-sku">$p.getPineSku()</td>
                                                <td>#if($p.getPriceDisplay())$p.getPriceDisplay()#else -#end</td>
                                                <td>#if($p.getScrapedAt())$p.getScrapedAt()#else -#end</td>
                                                <td><a href="javascript:void(0)" data-id="$p.getId()"
                                                           class="btn btn-xs btn-default emi-cat-view">View offers</a></td>
                                        </tr>
                                        #end
                                </tbody>
                        </table>
                        #if(!$products || $products.isEmpty())
                                <p class="text-muted"><em>No products imported yet. Upload a Pine Labs EMI JSON above to get
                                        started.</em></p>
                        #end
                </div>
        </div>
</section>

<script type="text/javascript">
        $(document).ready(function () {
                $('#emi-catalog-table').DataTable({pageLength: 50, bLengthChange: true, bInfo: false});
        });

        function emiCatalogImport() {
                var fi = document.getElementById('emi-cat-import-file');
                if (!fi.files || !fi.files[0]) {
                        alert('Pick a JSON file first');
                        return;
                }
                var fd = new FormData();
                fd.append('file', fi.files[0]);
                var $btn = $('#emi-cat-import-btn');
                        $btn.prop('disabled', true).text('Importing...');
                $('#emi-cat-import-result').html('<em>Working…</em>');
                $.ajax({
                        url: context + '/emi-catalog/import',
                        type: 'POST', data: fd, processData: false, contentType: false,
                        success: function (res) {
                                renderEmiCatImportResult(res);
                        },
                        error: function (xhr) {
                                $('#emi-cat-import-result').html('<div class="alert alert-danger">Import failed: ' + (xhr.responseText || xhr.status) + '</div>');
                        },
                        complete: function () {
                                        $btn.prop('disabled', false).text('Import & Persist');
                        }
                });
        }

        function renderEmiCatImportResult(r) {
                var html = '<div class="alert alert-success">'
                                + '<strong>Imported.</strong> &middot; '
                                + 'products: ' + (r.productsUpserted || 0) + ' &middot; '
                                + 'groups: ' + (r.groupsInserted || 0) + ' &middot; '
                                + 'plans: ' + (r.plansInserted || 0) + ' &middot; '
                                + 'cleared: ' + (r.groupsDeleted || 0) + ' old groups'
                                + '</div>';
                if (r.failures && r.failures.length) {
                        html += '<div class="alert alert-danger"><strong>Failures:</strong><ul>';
                        r.failures.forEach(function (f) {
                                html += '<li>' + f + '</li>';
                        });
                        html += '</ul></div>';
                }
                if (r.productSummaries && r.productSummaries.length) {
                        html += '<table class="table table-condensed table-bordered" style="margin-top:8px;"><thead><tr>'
                                        + '<th>SKU</th><th>Product</th><th>Banks</th><th>Plans</th>'
                                        + '</tr></thead><tbody>';
                        r.productSummaries.forEach(function (p) {
                                html += '<tr>'
                                                + '<td class="emi-sku">' + (p.sku || '') + '</td>'
                                                + '<td>' + (p.productName || '') + '</td>'
                                                + '<td>' + (p.groupCount || 0) + '</td>'
                                                + '<td>' + (p.planCount || 0) + '</td>'
                                                + '</tr>';
                        });
                        html += '</tbody></table>';
                }
                html += '<p><a href="' + context + '/emi-catalog" class="btn btn-sm btn-primary" style="margin-top:6px;">Reload list</a></p>';
                $('#emi-cat-import-result').html(html);
        }
</script>