Files
mailova/app/templates/postcard_form.html

104 lines
5.0 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 else '新建' }}明信片 - 星笺{% endblock %}
{% block content %}
<div class="section-header">
<h1>{{ '编辑' if postcard else '新建' }}明信片</h1>
</div>
<form method="post" action="{{ '/postcards/%d/edit' % postcard.id if postcard else '/profiles/%d/postcards' % profile.id }}" class="form-card">
<label>编号 * <span style="font-weight:400;color:var(--text-muted);font-size:.8rem">格式AB-1234567</span></label>
<input type="text" name="card_number" value="{{ postcard.card_number if postcard else '' }}" required placeholder="AB-1234567" style="text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>状态 *</label>
<select name="status" id="status-select" onchange="toggleFields()" required>
<option value="sent" {% if postcard and postcard.status=='sent' %}selected{% endif %}>已寄出</option>
<option value="delivered" {% if postcard and postcard.status=='delivered' %}selected{% endif %}>已送达</option>
<option value="received" {% if postcard and postcard.status=='received' %}selected{% endif %}>已收到</option>
</select>
<div id="fields-sent-delivered">
<label>收件人 *</label>
<input type="text" name="recipient_name" id="input-recipient" value="{{ postcard.recipient_name if postcard else '' }}">
<label>国家/地区 *</label>
<input type="text" name="country" id="input-country" value="{{ postcard.country if postcard else '' }}" maxlength="2" placeholder="JP" style="width:80px;text-transform:uppercase" oninput="this.value=this.value.toUpperCase()">
<label>寄出时间 *</label>
<input type="date" name="send_time" id="input-send-time" value="{{ postcard.send_time.strftime('%Y-%m-%d') if postcard and postcard.send_time else '' }}">
<label id="label-arrival">到达时间</label>
<input type="date" name="arrival_time" id="input-arrival" value="{{ postcard.arrival_time.strftime('%Y-%m-%d') if postcard and postcard.arrival_time else '' }}">
</div>
<div id="fields-received" style="display:none">
<label>发件人 *</label>
<input type="text" name="sender_name" id="input-sender" value="{{ postcard.sender_name if postcard else '' }}">
<label>收到时间 *</label>
<input type="date" name="receive_time" id="input-receive" value="{{ postcard.receive_time.strftime('%Y-%m-%d') if postcard and postcard.receive_time else '' }}">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">保存</button>
<a href="/profiles/{{ profile.id }}/postcards" class="btn">取消</a>
</div>
</form>
<script>
function toggleFields() {
var s = document.getElementById('status-select').value;
var sd = document.getElementById('fields-sent-delivered');
var rc = document.getElementById('fields-received');
var recipient = document.getElementById('input-recipient');
var country = document.getElementById('input-country');
var sendTime = document.getElementById('input-send-time');
var arrival = document.getElementById('input-arrival');
var labelArrival = document.getElementById('label-arrival');
var sender = document.getElementById('input-sender');
var receive = document.getElementById('input-receive');
if (s === 'received') {
sd.style.display = 'none';
rc.style.display = '';
recipient.required = false;
country.required = false;
sendTime.required = false;
arrival.required = false;
arrival.disabled = false;
sender.required = true;
receive.required = true;
} else if (s === 'sent') {
sd.style.display = '';
rc.style.display = 'none';
recipient.required = true;
country.required = true;
sendTime.required = true;
arrival.required = false;
arrival.disabled = true;
arrival.value = '';
labelArrival.textContent = '到达时间';
sender.required = false;
receive.required = false;
} else {
sd.style.display = '';
rc.style.display = 'none';
recipient.required = true;
country.required = true;
sendTime.required = true;
arrival.disabled = false;
arrival.required = true;
labelArrival.textContent = '到达时间 *';
sender.required = false;
receive.required = false;
}
}
toggleFields();
{% if not postcard %}
// Auto-fill date fields with today when switching status on new postcards
(function() {
var today = new Date().toISOString().slice(0, 10);
var sendTime = document.getElementById('input-send-time');
var receiveTime = document.getElementById('input-receive');
var statusSel = document.getElementById('status-select');
statusSel.addEventListener('change', function() {
if (this.value === 'sent' && !sendTime.value) sendTime.value = today;
if (this.value === 'received' && !receiveTime.value) receiveTime.value = today;
});
})();
{% endif %}
</script>
{% endblock %}