mirror of
https://github.com/AllSpiceIO/digikey-search-html-report.git
synced 2024-11-23 12:34:40 +00:00
136 lines
13 KiB
HTML
136 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html data-bs-theme="light" lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
|
<title>AllSpice Component Report</title>
|
|
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
|
|
<link rel="stylesheet" href="assets/css/Navbar-Right-Links-Dark-icons.css">
|
|
</head>
|
|
|
|
<body style="border-color: var(--bs-gray-400);">
|
|
<div class="row" style="background: var(--bs-secondary-text-emphasis);padding: 10px;margin-bottom: 20px;">
|
|
<div class="col"><span style="font-size: 1.2em;font-weight: bold;color: var(--bs-body-bg);"> <img class="rounded-circle" src="assets/img/leaf_green_bg.png" style="height: 36px;"> Component Report - DigiKey API</span></div>
|
|
</div>
|
|
{% for part in bom %}
|
|
<div style="margin-bottom: 20px;">
|
|
<div style="width: 48px;margin-left: 30px;color: var(--bs-emphasis-color);background: #d6aa2c;text-align: center;height: 26px;"><span style="font-size: 12px;background: #d6aa2c;height: 0px;font-weight: bold;">{{ loop.index }}</span></div>
|
|
{% if 'Obsolete' == part.lifecycle_status %}
|
|
<div style="margin-left: 30px;margin-right: 30px;border-style: solid;border-color: var(--bs-red);border-radius: 3px;padding-bottom: 0px;margin-bottom: 50px;">
|
|
{% elif 'Not For New Designs' == part.lifecycle_status %}
|
|
<div style="margin-left: 30px;margin-right: 30px;border-style: solid;border-color: var(--bs-red);border-radius: 3px;padding-bottom: 0px;margin-bottom: 50px;">
|
|
{% else %}
|
|
<div style="margin-left: 30px;margin-right: 30px;border-style: solid;border-color: var(--bs-gray-500);border-radius: 3px;padding-bottom: 0px;margin-bottom: 50px;">
|
|
{% endif %}
|
|
<div class="row" style="margin-right: 0px;margin-left: 0px;border-color: var(--bs-gray-400);">
|
|
<div class="col" style="padding-left: initial;"><span style="font-size: 12px;font-weight: bold;padding-left: 13px;">{{ part.categories|join(" > ") }}</span></div>
|
|
</div>
|
|
<div class="row" style="font-size: 12px;color: rgb(255,255,255);margin-right: 0px;margin-left: 0px;">
|
|
<div class="col" style="background: var(--bs-secondary-text-emphasis);padding-top: 5px;padding-bottom: 5px;"><span>{{ part.associated_refdes }}</span></div>
|
|
</div>
|
|
{% if part.mfr_name is not none %}
|
|
<div class="row g-0" style="border-bottom-style: solid;border-bottom-color: var(--bs-gray-400);">
|
|
<div class="col-auto text-center" style="padding-right: 20px;padding-left: 20px;border-style: none;border-color: var(--bs-gray-400);"><img src="{{ part.photo_url }}" style="height: 88px;margin-left: 10px;"><a href="{{ part.datasheet_url }}" target="_blank">
|
|
<p style="text-align: center;font-size: 10px;padding-bottom: 5px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="25px"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 144-208 0c-35.3 0-64 28.7-64 64l0 144-48 0c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zM176 352l32 0c30.9 0 56 25.1 56 56s-25.1 56-56 56l-16 0 0 32c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-48 0-80c0-8.8 7.2-16 16-16zm32 80c13.3 0 24-10.7 24-24s-10.7-24-24-24l-16 0 0 48 16 0zm96-80l32 0c26.5 0 48 21.5 48 48l0 64c0 26.5-21.5 48-48 48l-32 0c-8.8 0-16-7.2-16-16l0-128c0-8.8 7.2-16 16-16zm32 128c8.8 0 16-7.2 16-16l0-64c0-8.8-7.2-16-16-16l-16 0 0 96 16 0zm80-112c0-8.8 7.2-16 16-16l48 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 32 32 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-32 0 0 48c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-64 0-64z" style="fill:var(--bs-secondary-text-emphasis);"/></svg></p>
|
|
</a></div>
|
|
<div class="col-auto" style="padding-right: 20px;padding-left: 20px;border-style: none;border-color: var(--bs-gray-400);border-left-style: solid;"><span style="font-size: 12px;font-style: italic;font-weight: bold;color: var(--bs-gray-700);">{{ part.mfr_name }}</span><a href="{{ part.product_url }}" style="font-size: 12px;" target="_blank">
|
|
<p style="margin-bottom: 0px;font-size: 11px;">{{ part.mfr_part_number }}</p>
|
|
</a>
|
|
<p style="font-size: 10px;margin-bottom: 10px;">{{ part.part_description }}</p>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">{{ "{:,}".format(part.qty_available) }}</span><span style="font-size: 12px;display: block;margin-bottom: 0px;">In Stock</span>
|
|
{% if 'Active' == part.lifecycle_status %}
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 10px;color: var(--bs-green);font-weight: bold;">{{ part.lifecycle_status }}</span>
|
|
{% elif 'Obsolete' == part.lifecycle_status %}
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 10px;color: var(--bs-red);font-weight: bold;">{{ part.lifecycle_status }}</span>
|
|
{% elif 'Not For New Designs' == part.lifecycle_status %}
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 10px;color: var(--bs-red);font-weight: bold;">{{ part.lifecycle_status }}</span>
|
|
{% else %}
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 10px;color: var(--bs-gray-400);font-weight: bold;">{{ part.lifecycle_status }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-auto" style="text-align: right;padding-right: 20px;padding-left: 20px;border-style: none;border-color: var(--bs-gray-400);border-left-style: solid;">
|
|
{% if part.pricing is not none %}
|
|
{% for variation in part.pricing %}
|
|
<span style="font-size: 12px;font-style: italic;">{{ variation['PackageType']['Name'] }}</span>
|
|
<div class="table-responsive text-end" style="font-size: 12px;line-height: 3px;">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Qty</th>
|
|
<th>Unit Price</th>
|
|
<th>Ext Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for price_break in variation['StandardPricing'] %}
|
|
<tr>
|
|
<td>{{ "{:,}".format(price_break['BreakQuantity']) }}</td>
|
|
<td>{{ "{:,}".format(price_break['UnitPrice']) }}</td>
|
|
<td>{{ "{:,}".format(price_break['TotalPrice']) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-auto" style="padding-right: 20px;padding-left: 20px;border-style: none;border-color: var(--bs-gray-400);border-right-style: none;border-left-style: solid;"><span style="font-size: 12px;font-weight: bold;color: var(--bs-body-color);">Operating Temperature</span>
|
|
<p style="font-size: 10px;margin-bottom: 0px;">{{ part.operating_temp if part.operating_temp is not none else "-" }}</p>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">Package / Case</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.package_case if part.package_case is not none else "-" }}</span>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">Device Dimensions</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.xy_size if part.xy_size is not none else "-" }}</span>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">Device Height</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.height if part.height is not none else "-" }}</span>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">Device Thickness</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.thickness if part.thickness is not none else "-" }}</span>
|
|
</div>
|
|
<div class="col-auto" style="padding-right: 20px;padding-left: 20px;border-style: none;border-color: var(--bs-gray-400);border-right-style: none;border-left-style: solid;"><span style="font-size: 12px;font-weight: bold;color: var(--bs-body-color);">RoHS Status</span>
|
|
<p style="font-size: 10px;margin-bottom: 0px;">{{ part.rohs_status if part.rohs_status is not none else "-" }}</p>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">Moisture Sensitivity Level (MSL)</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.moisture_sensitivity_level if part.moisture_sensitivity_level is not none else "-" }}</span>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">REACH Status</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.reach_status if part.reach_status is not none else "-" }}</span>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">ECCN</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.eccn if part.eccn is not none else "-" }}</span>
|
|
<hr style="width: 50%;margin-bottom: 0px;margin-top: 5px;"><span style="font-size: 12px;font-weight: bold;">HTSUS</span><span style="font-size: 10px;display: block;margin-bottom: 0px;">{{ part.htsus if part.htsus is not none else "-" }}</span>
|
|
</div>
|
|
</div>
|
|
{% if part.cogs_breakdown is not none %}
|
|
<div class="row" style="margin-right: 0px;margin-left: 0px;border-color: var(--bs-tertiary-color);border-left-color: rgb(33, 37, 41);margin-bottom: 10px;">
|
|
<div class="col" style="padding-left: initial;margin-top: 10px;"><span class="border rounded" style="font-size: 10px;padding-left: 10px;background: #0f375f;padding-bottom: 5px;padding-top: 5px;padding-right: 10px;margin-left: 10px;color: rgb(214,170,44);font-weight: bold;">COGS</span></div>
|
|
</div>
|
|
<div class="row" style="margin-right: 0px;margin-left: 0px;border-color: var(--bs-gray-400);border-left-color: rgb(33,37,41);">
|
|
{% for package_type in part.cogs_breakdown %}
|
|
<div class="col-auto" style="text-align: right;padding-right: 20px;padding-left: 20px;border-style: none;border-color: var(--bs-gray-400);border-right-style: none;border-left-style: none;"><span style="font-size: 12px;font-style: italic;">{{ package_type["package_type"]["Name"] }}</span>
|
|
<div class="table-responsive text-end" style="font-size: 12px;line-height: 3px;">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>PCB Qty</th>
|
|
<th>Total Part Qty</th>
|
|
<th>Unit Price</th>
|
|
<th>Total Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for pcb_qty_pricing in package_type['cogs'] %}
|
|
<tr>
|
|
<td>{{ "{:,}".format(pcb_qty_pricing['pcb_qty']) }}</td>
|
|
<td>{{ "{:,}".format(pcb_qty_pricing['total_part_qty']) }}</td>
|
|
<td>{{ "{:,}".format(pcb_qty_pricing['price_per_unit']) }}</td>
|
|
<td>{{ "{:,.3f}".format(pcb_qty_pricing['total_price']) }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
|
</body>
|
|
|
|
</html>
|