fuel_track/app/templates/fuel_form.html

{% extends 'base.html' %}{% block content %}<div class="row justify-content-center"><div class="col-lg-8"><div class="card"><div class="card-body p-4"><h1 class="h2">Nowe tankowanie</h1><form method="post" class="ajax-form row g-3" id="fuel-form"><div class="col-md-6"><label class="form-label">Pojazd</label><select class="form-select" name="vehicle_id" required>{% for v in vehicles %}<option value="{{v.id}}" data-card-id="{{v.fuel_card_id or v.owner.fuel_card_id or ''}}">{{v.name}} · {{v.registration}}</option>{% endfor %}</select></div><div class="col-md-6"><label class="form-label">Data</label><input class="form-control" type="datetime-local" name="fueled_at" value="{{now}}" required></div><div class="col-md-4"><label class="form-label">Paliwo</label><select class="form-select" name="fuel_type"><option>PB95</option><option>PB98</option><option>DIESEL</option><option>LPG</option></select></div><div class="col-md-4"><label class="form-label">Litry</label><input class="form-control" type="number" step="0.001" min="0.001" name="liters" required></div><div class="col-md-4"><label class="form-label">Cena na dystrybutorze</label><input class="form-control" type="number" step="0.0001" min="0" name="price_per_liter" required></div><div class="col-md-6"><label class="form-label">Stan licznika</label><input class="form-control" type="number" min="0" name="odometer" required></div><div class="col-md-6"><label class="form-label">Firma / sieć stacji</label><select class="form-select" name="station_company_id" id="station-company"><option value="">Inna stacja</option>{% if favorite_stations %}<optgroup label="Ulubione">{% for s in favorite_stations %}<option value="{{s.id}}" data-region="{{s.selected_region}}" data-search="{{s.display_name}} {{s.company_name}} {{s.station_name_list|join(' ')}}">{{s.display_name}}{% if s.company_name != s.display_name %} — {{s.company_name}}{% endif %}</option>{% endfor %}</optgroup>{% endif %}{% if top_stations %}<optgroup label="10 największych sieci">{% for s in top_stations %}<option value="{{s.id}}" data-region="{{s.selected_region}}" data-search="{{s.display_name}} {{s.company_name}} {{s.station_name_list|join(' ')}}">{{s.display_name}}{% if s.company_name != s.display_name %} — {{s.company_name}}{% endif %}</option>{% endfor %}</optgroup>{% endif %}{% if other_stations %}<optgroup label="Pozostałe dozwolone">{% for s in other_stations %}<option value="{{s.id}}" data-region="{{s.selected_region}}" data-search="{{s.display_name}} {{s.company_name}} {{s.station_name_list|join(' ')}}">{{s.display_name}}{% if s.company_name != s.display_name %} — {{s.company_name}}{% endif %}</option>{% endfor %}</optgroup>{% endif %}</select><div class="form-text">Najpierw pokazujemy ulubione oraz 10 największych pozostałych sieci. <button type="button" class="btn btn-link btn-sm p-0 align-baseline" data-bs-toggle="modal" data-bs-target="#favorite-stations-modal">Edytuj ulubione</button>{% if restricted %} · firma ograniczyła listę do dozwolonych sieci{% endif %}.</div></div><div class="col-md-6"><label class="form-label">Własna nazwa stacji</label><input class="form-control" name="station" placeholder="Używane, gdy nie wybierzesz firmy"></div><div class="col-md-6"><label class="form-label">Numer faktury</label><input class="form-control" name="invoice_number"></div><div class="col-md-6"><label class="form-label">Karta paliwowa</label><select class="form-select" name="fuel_card_id" id="fuel-card-select"><option value="">Bez karty</option>{% for card in fuel_cards %}<option value="{{card.id}}">{{card.name}} · {{card.provider}}</option>{% endfor %}</select><div class="form-check mt-2"><input class="form-check-input" type="checkbox" name="used_fuel_card" id="used-card"><label class="form-check-label" for="used-card">Rozlicz kartą paliwową</label></div></div><div class="col-12"><div id="orlen-preview" class="alert alert-secondary py-2">Cena Orlen zostanie pobrana automatycznie.</div></div><div class="col-12"><button class="btn btn-primary">Zapisz tankowanie</button></div></form></div></div></div></div><div class="modal fade" id="favorite-stations-modal" tabindex="-1"><div class="modal-dialog modal-lg modal-dialog-scrollable"><div class="modal-content"><form action="/api/me/favorite-stations" data-method="PUT" class="ajax-form favorite-station-form" data-max-favorites="10" data-page-size="10"><div class="modal-header"><h2 class="modal-title fs-5">Ulubione stacje</h2><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><p class="text-body-secondary">Wybierz maksymalnie 10 sieci. Gdy nic nie wybierzesz, aplikacja proponuje 10 największych sieci według liczby punktów.</p><input class="form-control mb-3 station-modal-search" type="search" placeholder="Szukaj po nazwie sieci, firmy lub punktu"><div class="table-responsive"><table class="table table-hover align-middle mb-2"><thead><tr><th style="width:3rem"></th><th>Nazwa</th><th class="text-end">Punkty</th></tr></thead><tbody>{% for s in favorite_catalog %}<tr data-station-name="{{(s.display_name ~ ' ' ~ s.company_name ~ ' ' ~ (s.station_name_list|join(' ')))|lower}}"><td><input class="form-check-input" type="checkbox" name="station_ids" value="{{s.id}}" {% if s in favorite_stations %}checked{% endif %}></td><td><strong>{{s.display_name}}</strong><div class="small text-body-secondary">{{s.company_name}}</div></td><td class="text-end">{{s.station_count}}</td></tr>{% endfor %}</tbody></table></div><div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2"><small class="text-body-secondary favorite-pagination-summary"></small><nav aria-label="Strony stacji"><ul class="pagination pagination-sm mb-0 favorite-pagination"></ul></nav></div></div><div class="modal-footer position-sticky bottom-0 bg-body border-top"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button><button type="submit" class="btn btn-primary">Zapisz ulubione</button></div></form></div></div></div>{% endblock %}{% block scripts %}<script>FuelTrack.bindFuelPreview();</script>{% endblock %}