Files
mailova/app/templates/postcard_form.html

138 lines
7.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "base.html" %}
{% block title %}{% if postcard %}{{ 'pc_form.edit'|t(user.language) }}{% else %}{% if create_type == 'received' %}{{ 'pc_form.new_received'|t(user.language) }}{% else %}{{ 'pc_form.new_sent'|t(user.language) }}{% endif %}{% endif %} - {{ 'brand'|t(user.language) }}{% endblock %}
{% block content %}
<div class="section-header">
<h1>{% if postcard %}{{ 'pc_form.edit'|t(user.language) }}{% else %}{% if create_type == 'received' %}{{ 'pc_form.new_received'|t(user.language) }}{% else %}{{ 'pc_form.new_sent'|t(user.language) }}{% endif %}{% endif %}</h1>
</div>
{% if error %}<div class="form-card" style="border-left:3px solid var(--danger);margin-bottom:1rem;padding:.75rem 1rem;color:var(--danger)">{{ error }}</div>{% endif %}
{% set is_new = (postcard is none) %}
{% set is_edit = (postcard is not none) %}
{% set edit_status = postcard.status if is_edit else '' %}
{% set is_received_form = (create_type == 'received' and is_new) or (is_edit and edit_status == 'received') %}
<form method="post" action="{{ '/postcards/%d/edit' % postcard.id if is_edit else '/profiles/%d/postcards' % profile.id }}" class="form-card">
<label>{{ 'pc_form.number'|t(user.language) }} *</label>
<input type="text" name="card_number" value="{{ postcard.card_number if is_edit else '' }}" required>
{% if is_received_form %}
{# ── 收到表单:无状态选择 ── #}
<input type="hidden" name="status" value="received">
<label>{{ 'pc_form.sender'|t(user.language) }} *</label>
<input type="text" name="sender_name" value="{{ postcard.sender_name if is_edit else '' }}">
<label>{{ 'pc_form.receive_time'|t(user.language) }} *</label>
<input type="date" name="receive_time" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if is_edit and postcard.receive_time else today }}">
<label>{{ 'pc_form.country'|t(user.language) }}</label>
<input type="text" name="country_to" value="{{ postcard.country_to if is_edit and postcard.country_to else (profile.country if profile else '') }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>{{ 'pc_form.country_from'|t(user.language) }}</label>
<input type="text" name="country_from" value="{{ postcard.country_from if is_edit and postcard.country_from else '' }}" maxlength="2" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
{% else %}
{# ── 寄出表单 ── #}
{% if is_new %}
{# 新建寄出:状态由日期自动决定,隐藏选择 #}
<input type="hidden" name="status" id="hidden-status" value="sent">
<label>{{ 'pc_form.status'|t(user.language) }}</label>
<div id="auto-status-display" class="form-card" style="padding:.4rem .75rem;margin-bottom:.25rem;font-size:.85rem;display:inline-block"></div>
{% else %}
{# 编辑时:显示状态选择 #}
<label>{{ 'pc_form.status'|t(user.language) }} *</label>
<select name="status" id="status-select" onchange="toggleFields()" required>
<option value="pending" {% if edit_status=='pending' %}selected{% endif %}>{{ 'status.pending'|t(user.language) }}</option>
<option value="sent" {% if edit_status=='sent' %}selected{% endif %}>{{ 'status.sent'|t(user.language) }}</option>
<option value="delivered" {% if edit_status=='delivered' %}selected{% endif %}>{{ 'status.delivered'|t(user.language) }}</option>
</select>
{% endif %}
<div id="fields-sent-delivered">
<label>{{ 'pc_form.recipient'|t(user.language) }} *</label>
<input type="text" name="recipient_name" value="{{ postcard.recipient_name if is_edit else '' }}">
<label>{{ 'pc_form.send_time'|t(user.language) }} *</label>
<input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if is_edit and postcard.send_time else (today if is_new else '') }}">
<label id="label-arrival">{{ 'pc_form.arrival_time'|t(user.language) }}</label>
<input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if is_edit and postcard.arrival_time else '' }}" {% if is_new or (is_edit and edit_status=='sent') %}disabled{% endif %}>
</div>
<label>{{ 'pc_form.country_from'|t(user.language) }}</label>
<input type="text" name="country_from" value="{{ postcard.country_from if is_edit and postcard.country_from else (profile.country if profile else '') }}" maxlength="2" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>{{ 'pc_form.country'|t(user.language) }}</label>
<input type="text" name="country_to" value="{{ postcard.country_to if is_edit and postcard.country_to else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
{% endif %}
<label>{{ 'pc_form.notes'|t(user.language) }}</label>
<textarea name="notes" rows="3" placeholder="{{ 'pc_form.notes_ph'|t(user.language) }}">{{ postcard.notes if is_edit else '' }}</textarea>
<div class="form-actions">
<button type="submit" class="btn btn-primary">{{ 'pc_form.save'|t(user.language) }}</button>
<a href="/profiles/{{ profile.id }}/postcards" class="btn">{{ 'pc_form.cancel'|t(user.language) }}</a>
</div>
</form>
<script>
{% if is_new and not is_received_form %}
// ── 新建寄出:根据日期自动判定状态 ──
(function() {
var sendTime = document.getElementById('input-send-time');
var hiddenStatus = document.getElementById('hidden-status');
var display = document.getElementById('auto-status-display');
var arrival = document.getElementById('input-arrival');
var labelArrival = document.getElementById('label-arrival');
var today = new Date().toISOString().slice(0, 10);
// 如果没填日期,自动填今天
if (!sendTime.value) sendTime.value = today;
function updateAutoStatus() {
var v = sendTime.value;
if (!v) { display.textContent = ''; return; }
if (v > today) {
hiddenStatus.value = 'pending';
display.textContent = '📋 {{ "status.pending"|t(user.language) }}';
display.style.borderLeft = '3px solid var(--primary)';
} else {
hiddenStatus.value = 'sent';
display.textContent = '📮 {{ "status.sent"|t(user.language) }}';
display.style.borderLeft = '3px solid var(--sent)';
}
// arrived 仅在 delivered 时启用sent/pending 时禁用
if (hiddenStatus.value !== 'delivered') {
arrival.disabled = true;
arrival.value = '';
}
}
sendTime.addEventListener('change', updateAutoStatus);
sendTime.addEventListener('input', updateAutoStatus);
updateAutoStatus();
})();
{% elif is_edit and not is_received_form %}
// ── 编辑寄出:根据状态切换 arrival 可用性 ──
function toggleFields() {
var s = document.getElementById('status-select').value;
var arrival = document.getElementById('input-arrival');
var labelArrival = document.getElementById('label-arrival');
if (s === 'delivered') {
arrival.disabled = false;
labelArrival.textContent = '{{ "pc_form.arrival_time"|t(user.language) }} *';
} else {
arrival.disabled = true;
arrival.value = '';
labelArrival.textContent = '{{ "pc_form.arrival_time"|t(user.language) }}';
}
}
toggleFields();
{% endif %}
{% if is_new and is_received_form %}
// ── 新建收到:自动填日期 ──
(function() {
var today = new Date().toISOString().slice(0, 10);
var rt = document.querySelector('input[name="receive_time"]');
if (rt && !rt.value) rt.value = today;
})();
{% endif %}
</script>
{% endblock %}