shopping lists
This commit is contained in:
Oli Passey
@@ -96,6 +96,11 @@
|
||||
<i class="fas fa-home me-1"></i>Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('shopping_lists') }}">
|
||||
<i class="fas fa-shopping-cart me-1"></i>Shopping Lists
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('add_product') }}">
|
||||
<i class="fas fa-plus me-1"></i>Add Product
|
||||
|
||||
214
templates/shopping_list_detail.html
Normal file
214
templates/shopping_list_detail.html
Normal file
@@ -0,0 +1,214 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}{{ shopping_list.store_display_name }} Shopping List{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>
|
||||
<i class="fas fa-store"></i> {{ shopping_list.store_display_name }}
|
||||
<small class="text-muted">Shopping List</small>
|
||||
</h1>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="{{ url_for('shopping_lists') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i> Back to All Lists
|
||||
</a>
|
||||
{% if shopping_list.base_url %}
|
||||
<a href="{{ shopping_list.base_url }}" target="_blank" class="btn btn-success">
|
||||
<i class="fas fa-external-link-alt"></i> Visit Store
|
||||
</a>
|
||||
{% endif %}
|
||||
<button class="btn btn-info" onclick="window.print()">
|
||||
<i class="fas fa-print"></i> Print List
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Card -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card border-primary">
|
||||
<div class="card-body">
|
||||
<div class="row text-center">
|
||||
<div class="col-md-3">
|
||||
<h3 class="text-primary">{{ shopping_list.item_count }}</h3>
|
||||
<p class="mb-0">Items to Buy</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h3 class="text-success">£{{ "%.2f"|format(shopping_list.total_cost) }}</h3>
|
||||
<p class="mb-0">Total Cost</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h3 class="text-info">£{{ "%.2f"|format(shopping_list.total_savings) }}</h3>
|
||||
<p class="mb-0">Total Savings</p>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<h3 class="text-warning">
|
||||
{{ "%.1f"|format((shopping_list.total_savings / (shopping_list.total_cost + shopping_list.total_savings) * 100) if (shopping_list.total_cost + shopping_list.total_savings) > 0 else 0) }}%
|
||||
</h3>
|
||||
<p class="mb-0">Savings Rate</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shopping Items -->
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="fas fa-shopping-cart"></i>
|
||||
Items to Buy ({{ shopping_list.item_count }})
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th width="5%">#</th>
|
||||
<th width="45%">Product</th>
|
||||
<th width="15%" class="text-center">Price</th>
|
||||
<th width="15%" class="text-center">Savings</th>
|
||||
<th width="15%" class="text-center">Last Updated</th>
|
||||
<th width="5%" class="text-center">Link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in shopping_list.items %}
|
||||
<tr class="shopping-item">
|
||||
<td class="align-middle">
|
||||
<span class="badge badge-secondary">{{ loop.index }}</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<strong>{{ item.product_name }}</strong>
|
||||
{% if item.savings_vs_most_expensive > 0 %}
|
||||
<br><small class="text-success">
|
||||
<i class="fas fa-arrow-down"></i> Best price!
|
||||
</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="h5 text-success mb-0">
|
||||
£{{ "%.2f"|format(item.current_price) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
{% if item.savings_vs_most_expensive > 0 %}
|
||||
<span class="text-info font-weight-bold">
|
||||
£{{ "%.2f"|format(item.savings_vs_most_expensive) }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<small class="text-muted">
|
||||
{{ item.last_updated.strftime('%Y-%m-%d %H:%M') if item.last_updated else 'Unknown' }}
|
||||
</small>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
{% if item.store_url %}
|
||||
<a href="{{ item.store_url }}" target="_blank"
|
||||
class="btn btn-sm btn-outline-primary"
|
||||
title="View product on {{ shopping_list.store_display_name }}">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot class="table-light">
|
||||
<tr>
|
||||
<th colspan="2" class="text-right">Totals:</th>
|
||||
<th class="text-center">
|
||||
<span class="h5 text-success">£{{ "%.2f"|format(shopping_list.total_cost) }}</span>
|
||||
</th>
|
||||
<th class="text-center">
|
||||
<span class="h5 text-info">£{{ "%.2f"|format(shopping_list.total_savings) }}</span>
|
||||
</th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shopping Tips -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="fas fa-lightbulb"></i> Shopping Tips
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fas fa-check text-success"></i> This list shows items where <strong>{{ shopping_list.store_display_name }}</strong> has the best price</li>
|
||||
<li><i class="fas fa-check text-success"></i> You're saving <strong>£{{ "%.2f"|format(shopping_list.total_savings) }}</strong> compared to other stores</li>
|
||||
<li><i class="fas fa-check text-success"></i> Prices were last updated from live store data</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fas fa-info-circle text-info"></i> Click product links to go directly to store pages</li>
|
||||
<li><i class="fas fa-info-circle text-info"></i> Print this list for easy shopping reference</li>
|
||||
<li><i class="fas fa-info-circle text-info"></i> Check other stores for remaining items on your list</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.shopping-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.shopping-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.btn-group, .card:last-child {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.shopping-item:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.page-break {
|
||||
page-break-after: always;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
220
templates/shopping_lists.html
Normal file
220
templates/shopping_lists.html
Normal file
@@ -0,0 +1,220 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Smart Shopping Lists{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h1 class="mb-4">
|
||||
<i class="fas fa-shopping-cart"></i> Smart Shopping Lists
|
||||
<small class="text-muted">- Automated best price recommendations</small>
|
||||
</h1>
|
||||
|
||||
<!-- Summary Card -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-12">
|
||||
<div class="card border-primary">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="fas fa-chart-line"></i> Shopping Summary</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h3 class="text-primary">{{ summary.total_products }}</h3>
|
||||
<p class="mb-0">Total Products</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h3 class="text-success">£{{ "%.2f"|format(summary.total_cost) }}</h3>
|
||||
<p class="mb-0">Total Cost</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h3 class="text-info">£{{ "%.2f"|format(summary.total_savings) }}</h3>
|
||||
<p class="mb-0">Total Savings</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h3 class="text-warning">{{ summary.store_count }}</h3>
|
||||
<p class="mb-0">Stores to Visit</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if summary.most_items_store %}
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-info mb-0">
|
||||
<i class="fas fa-star"></i>
|
||||
<strong>{{ summary.most_items_store }}</strong> has the most items ({{ summary.most_items_count }}) - consider starting there!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-12">
|
||||
<div class="btn-group" role="group">
|
||||
<form style="display: inline;" method="POST" action="{{ url_for('send_daily_shopping_list') }}">
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="fas fa-envelope"></i> Send Daily Email
|
||||
</button>
|
||||
</form>
|
||||
<a href="{{ url_for('api_shopping_lists') }}" class="btn btn-info" target="_blank">
|
||||
<i class="fas fa-code"></i> API Data
|
||||
</a>
|
||||
<button class="btn btn-secondary" onclick="window.print()">
|
||||
<i class="fas fa-print"></i> Print Lists
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shopping Lists by Store -->
|
||||
{% if shopping_lists %}
|
||||
<div class="row">
|
||||
{% for store_list in shopping_lists %}
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">
|
||||
<i class="fas fa-store"></i> {{ store_list.store_display_name }}
|
||||
</h5>
|
||||
<span class="badge badge-primary">{{ store_list.item_count }} items</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-6">
|
||||
<strong>Total Cost:</strong><br>
|
||||
<span class="h5 text-success">£{{ "%.2f"|format(store_list.total_cost) }}</span>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<strong>Savings:</strong><br>
|
||||
<span class="h5 text-info">£{{ "%.2f"|format(store_list.total_savings) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Items Preview -->
|
||||
<div class="mb-3">
|
||||
<h6>Items to Buy:</h6>
|
||||
<ul class="list-group list-group-flush">
|
||||
{% for item in store_list.items[:3] %}
|
||||
<li class="list-group-item p-2 border-0">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span class="text-truncate" style="max-width: 200px;" title="{{ item.product_name }}">
|
||||
{{ item.product_name }}
|
||||
</span>
|
||||
<span class="text-success font-weight-bold">
|
||||
£{{ "%.2f"|format(item.current_price) }}
|
||||
</span>
|
||||
</div>
|
||||
{% if item.savings_vs_most_expensive > 0 %}
|
||||
<small class="text-muted">
|
||||
Saves £{{ "%.2f"|format(item.savings_vs_most_expensive) }}
|
||||
</small>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% if store_list.items|length > 3 %}
|
||||
<li class="list-group-item p-2 border-0 text-muted">
|
||||
... and {{ store_list.items|length - 3 }} more items
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="btn-group w-100" role="group">
|
||||
<a href="{{ url_for('shopping_list_detail', store_name=store_list.store_name) }}"
|
||||
class="btn btn-primary btn-sm">
|
||||
<i class="fas fa-list"></i> Full List
|
||||
</a>
|
||||
{% if store_list.base_url %}
|
||||
<a href="{{ store_list.base_url }}" target="_blank"
|
||||
class="btn btn-outline-secondary btn-sm">
|
||||
<i class="fas fa-external-link-alt"></i> Visit Store
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-warning">
|
||||
<h4><i class="fas fa-exclamation-triangle"></i> No Shopping Data Available</h4>
|
||||
<p>No price data found to generate shopping lists. Make sure you have:</p>
|
||||
<ul>
|
||||
<li>Added products to track</li>
|
||||
<li>Run the scraper to collect price data</li>
|
||||
<li>Products have valid prices from at least one store</li>
|
||||
</ul>
|
||||
<a href="{{ url_for('index') }}" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> Add Products
|
||||
</a>
|
||||
<form style="display: inline;" method="POST" action="{{ url_for('scrape_all_products') }}">
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="fas fa-search"></i> Run Scraper
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Help Section -->
|
||||
<div class="row mt-5">
|
||||
<div class="col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5><i class="fas fa-question-circle"></i> How Smart Shopping Lists Work</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6><i class="fas fa-brain"></i> Automatic Analysis</h6>
|
||||
<p>The system automatically analyzes all your tracked products and finds the store with the lowest current price for each item.</p>
|
||||
|
||||
<h6><i class="fas fa-map-marked-alt"></i> Store Grouping</h6>
|
||||
<p>Products are grouped by store, so you know exactly what to buy from each location for maximum savings.</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6><i class="fas fa-calculator"></i> Savings Calculation</h6>
|
||||
<p>See how much you save compared to buying each item at the most expensive store.</p>
|
||||
|
||||
<h6><i class="fas fa-envelope"></i> Daily Notifications</h6>
|
||||
<p>Set up daily email notifications to get your optimized shopping list delivered automatically.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media print {
|
||||
.btn-group, .card-footer, .alert-warning, .card:last-child {
|
||||
display: none !important;
|
||||
}
|
||||
.card {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user