212 lines
11 KiB
HTML
212 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Edit Set - {{ app_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-lg-8 mx-auto">
|
|
<div class="card shadow">
|
|
<div class="card-header bg-primary text-white">
|
|
<h3 class="mb-0">
|
|
<i class="bi bi-pencil"></i> Edit LEGO Set
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ url_for('sets.edit_set', set_id=set.id) }}" enctype="multipart/form-data">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="set_number" class="form-label">
|
|
Set Number <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="set_number"
|
|
name="set_number" value="{{ set.set_number }}" disabled>
|
|
<div class="form-text">Set number cannot be changed</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="year_released" class="form-label">
|
|
Year Released <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="number" class="form-control" id="year_released"
|
|
name="year_released" value="{{ set.year_released }}"
|
|
required min="1949" max="2030">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="set_name" class="form-label">
|
|
Set Name <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="set_name"
|
|
name="set_name" value="{{ set.set_name }}" required>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="theme" class="form-label">
|
|
Theme <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text" class="form-control" id="theme"
|
|
name="theme" value="{{ set.theme }}" required>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-3">
|
|
<label for="piece_count" class="form-label">
|
|
Piece Count
|
|
</label>
|
|
<input type="number" class="form-control" id="piece_count"
|
|
name="piece_count" value="{{ set.piece_count or '' }}">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="image_url" class="form-label">
|
|
Image URL (optional)
|
|
</label>
|
|
<input type="url" class="form-control" id="image_url"
|
|
name="image_url" value="{{ set.image_url or '' }}">
|
|
<div class="form-text">Enter a URL to an image of the set</div>
|
|
</div>
|
|
|
|
{% if set.image_url %}
|
|
<div class="mb-3">
|
|
<label class="form-label">Current URL Image Preview:</label>
|
|
<div class="border rounded p-3 bg-light">
|
|
<img src="{{ set.image_url }}" alt="{{ set.set_name }}"
|
|
style="max-height: 200px; max-width: 100%; object-fit: contain;">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Cover Image Upload -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-image"></i> Cover Picture</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if set.cover_image %}
|
|
<div class="mb-3">
|
|
<label class="form-label">Current Uploaded Cover:</label>
|
|
<div class="border rounded p-3 bg-light position-relative">
|
|
<img src="{{ url_for('static', filename='uploads/' + set.cover_image.replace('\\', '/')) }}"
|
|
alt="{{ set.set_name }}"
|
|
style="max-height: 200px; max-width: 100%; object-fit: contain;">
|
|
</div>
|
|
<div class="form-check mt-2">
|
|
<input class="form-check-input" type="checkbox" id="remove_cover_image" name="remove_cover_image">
|
|
<label class="form-check-label text-danger" for="remove_cover_image">
|
|
<i class="bi bi-trash"></i> Remove uploaded cover image
|
|
</label>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-0">
|
|
<label for="cover_image" class="form-label">
|
|
<i class="bi bi-upload"></i> {% if set.cover_image %}Replace Cover Picture{% else %}Upload Cover Picture{% endif %}
|
|
</label>
|
|
<input type="file" class="form-control" id="cover_image"
|
|
name="cover_image" accept="image/*">
|
|
<div class="form-text">
|
|
Upload your own photo of the set or MOC (JPG, PNG, GIF). Max 800px, optimized automatically.
|
|
</div>
|
|
<div id="imagePreview" class="mt-2" style="display: none;">
|
|
<label class="form-label small">New Image Preview:</label>
|
|
<img id="previewImg" src="" alt="Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px; border: 2px solid #dee2e6;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MOC (My Own Creation) Section -->
|
|
<div class="card mb-3 border-info">
|
|
<div class="card-header bg-info bg-opacity-10">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="is_moc" name="is_moc"
|
|
{% if set.is_moc %}checked{% endif %}>
|
|
<label class="form-check-label fw-bold" for="is_moc">
|
|
<i class="bi bi-star-fill text-warning"></i> This is a MOC (My Own Creation)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="card-body" id="mocFields" {% if not set.is_moc %}style="display: none;"{% endif %}>
|
|
<div class="mb-3">
|
|
<label for="moc_designer" class="form-label">
|
|
Designer / Creator Name
|
|
</label>
|
|
<input type="text" class="form-control" id="moc_designer"
|
|
name="moc_designer" value="{{ set.moc_designer or '' }}"
|
|
placeholder="e.g., Your Name">
|
|
<div class="form-text">Who designed this MOC?</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="moc_description" class="form-label">
|
|
Description / Notes
|
|
</label>
|
|
<textarea class="form-control" id="moc_description" name="moc_description"
|
|
rows="4" placeholder="Add details about your MOC...">{{ set.moc_description or '' }}</textarea>
|
|
<div class="form-text">Optional notes about your custom creation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<a href="{{ url_for('sets.view_set', set_id=set.id) }}" class="btn btn-secondary">
|
|
<i class="bi bi-arrow-left"></i> Cancel
|
|
</a>
|
|
<button type="submit" class="btn btn-primary btn-lg">
|
|
<i class="bi bi-check-circle"></i> Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow mt-4">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0"><i class="bi bi-info-circle"></i> Set Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p><strong>Added by:</strong> {{ set.added_by.username }}</p>
|
|
<p><strong>Created:</strong> {{ set.created_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
|
|
<p><strong>Last updated:</strong> {{ set.updated_at.strftime('%B %d, %Y at %I:%M %p') }}</p>
|
|
<p class="mb-0"><strong>Instructions:</strong> {{ set.instructions.count() }} file(s)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Toggle MOC fields visibility
|
|
$('#is_moc').change(function() {
|
|
if ($(this).is(':checked')) {
|
|
$('#mocFields').slideDown();
|
|
} else {
|
|
$('#mocFields').slideUp();
|
|
}
|
|
});
|
|
|
|
// Image preview
|
|
$('#cover_image').change(function() {
|
|
const file = this.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$('#previewImg').attr('src', e.target.result);
|
|
$('#imagePreview').slideDown();
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
$('#imagePreview').slideUp();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|