103 lines
4.6 KiB
HTML
103 lines
4.6 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ profile.nickname }} - {{ 'brand'|t(user.language) }}{% endblock %}
|
|
{% block content %}
|
|
<div class="section-header">
|
|
<h1>{{ profile.nickname }} {{ 'pc_list.title'|t(user.language) }}</h1>
|
|
<a href="/profiles/{{ profile.id }}/postcards/new" class="btn btn-primary">{{ 'pc_list.new'|t(user.language) }}</a>
|
|
</div>
|
|
<div style="margin-bottom:1rem">
|
|
{% if profile.notes %}
|
|
<div style="padding:.3rem .5rem;font-size:.85rem;color:var(--text-muted)">{{ profile.notes }}</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="filter-bar">
|
|
<form method="get" class="form-row">
|
|
<select name="country">
|
|
<option value="">{{ 'pc_list.all_countries'|t(user.language) }}</option>
|
|
{% for c in countries %}
|
|
<option value="{{ c }}" {% if country == c %}selected{% endif %}>{{ c|flag }} {{ c }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<button type="submit" class="btn">{{ 'pc_list.filter'|t(user.language) }}</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="tabs" id="tabs">
|
|
<button class="tab active" onclick="switchTab('sent')">{{ 'pc_list.tab_sent'|t(user.language) }} ({{ sent|length }})</button>
|
|
<button class="tab" onclick="switchTab('received')">{{ 'pc_list.tab_received'|t(user.language) }} ({{ received|length }})</button>
|
|
</div>
|
|
|
|
<div id="tab-sent" class="tab-panel">
|
|
{% if sent %}
|
|
{% for pc in sent %}
|
|
<a href="/postcards/{{ pc.id }}" class="postcard-row">
|
|
<div class="postcard-row-img">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="" loading="lazy">
|
|
{% else %}
|
|
<div class="thumb placeholder">📷</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="postcard-row-info">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="postcard-row-detail">
|
|
<span>{% if pc.country_to_from %}{{ pc.country_to_from|flag }}→{% endif %}{{ pc.country_to|flag }} {{ pc.country_to or '-' }}</span>
|
|
<span>→ {{ pc.recipient_name or '-' }}</span>
|
|
</div>
|
|
<span class="badge badge-{{ pc.status }}">{{ {'sent':'已寄出','delivered':'已送达'}.get(pc.status) if user.language=='zh' else {'sent':'Sent','delivered':'Delivered'}.get(pc.status) }}</span>
|
|
<span class="postcard-row-date">
|
|
{% if pc.send_time %}{{ pc.send_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}寄出{% endif %}{% endif %}
|
|
{% if pc.arrival_time %}<br>{{ pc.arrival_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}送达{% endif %}{% endif %}
|
|
</span>
|
|
</div>
|
|
{% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
|
|
<div class="postcard-row-action">
|
|
{% if pc.status == 'sent' %}
|
|
<form method="post" action="/postcards/{{ pc.id }}/mark-delivered" onclick="event.preventDefault();event.stopPropagation();if(confirm('{{ 'pc_list.confirm_delivered'|t(user.language) }}'))this.submit();">
|
|
<button type="submit" class="btn btn-sm btn-primary">{{ 'pc_list.mark_delivered'|t(user.language) }}</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="empty">{{ 'pc_list.empty_sent'|t(user.language) }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="tab-received" class="tab-panel" style="display:none">
|
|
{% if received %}
|
|
{% for pc in received %}
|
|
<a href="/postcards/{{ pc.id }}" class="postcard-row">
|
|
<div class="postcard-row-img">
|
|
{% if pc.image_front %}
|
|
<img src="{{ pc.image_front }}" alt="" loading="lazy">
|
|
{% else %}
|
|
<div class="thumb placeholder">📷</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="postcard-row-info">
|
|
<strong>{{ pc.card_number }}</strong>
|
|
<div class="postcard-row-detail">
|
|
<span>← {{ pc.sender_name or '-' }}</span>
|
|
</div>
|
|
{% if pc.receive_time %}<span class="postcard-row-date">{{ pc.receive_time.strftime('%Y-%m-%d') }}{% if user.language=='zh' %}收到{% endif %}</span>{% endif %}
|
|
</div>
|
|
{% if pc.notes %}<span class="postcard-row-notes">{{ pc.notes[:50] }}{% if pc.notes|length > 50 %}…{% endif %}</span>{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="empty">{{ 'pc_list.empty_received'|t(user.language) }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
function switchTab(name) {
|
|
document.querySelectorAll('.tab').forEach(function(t) { t.classList.remove('active'); });
|
|
document.querySelectorAll('.tab-panel').forEach(function(p) { p.style.display = 'none'; });
|
|
event.currentTarget.classList.add('active');
|
|
document.getElementById('tab-' + name).style.display = '';
|
|
}
|
|
</script>
|
|
{% endblock %}
|