Initial commit - LEGO Instructions Manager v1.5.0
This commit is contained in:
324
app/templates/sets/add.html
Normal file
324
app/templates/sets/add.html
Normal file
@@ -0,0 +1,324 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Add 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-danger text-white">
|
||||
<h3 class="mb-0">
|
||||
<i class="bi bi-plus-circle"></i> Add New LEGO Set or MOC
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Set Type Selection -->
|
||||
<div class="mb-4 p-4 bg-light rounded border">
|
||||
<h5 class="mb-3"><i class="bi bi-question-circle"></i> What are you adding?</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3 mb-md-0">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="set_type" id="type_official" value="official"
|
||||
{% if request.args.get('type') != 'moc' %}checked{% endif %}>
|
||||
<label class="form-check-label" for="type_official">
|
||||
<strong><i class="bi bi-box-seam"></i> Official LEGO Set</strong>
|
||||
<br>
|
||||
<small class="text-muted">A set produced by LEGO with an official set number</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="set_type" id="type_moc" value="moc"
|
||||
{% if request.args.get('type') == 'moc' %}checked{% endif %}>
|
||||
<label class="form-check-label" for="type_moc">
|
||||
<strong><i class="bi bi-star-fill text-warning"></i> MOC (My Own Creation)</strong>
|
||||
<br>
|
||||
<small class="text-muted">A custom build designed by you or another builder</small>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if brickset_available %}
|
||||
<!-- Brickset Search - Only for official sets -->
|
||||
<div id="bricksetSection" class="mb-4 p-3 bg-light rounded">
|
||||
<h5><i class="bi bi-search"></i> Search Brickset</h5>
|
||||
<p class="text-muted small mb-3">Search for a set to auto-populate details</p>
|
||||
<div class="input-group">
|
||||
<input type="text" id="bricksetSearch" class="form-control"
|
||||
placeholder="Enter set number or name...">
|
||||
<button class="btn btn-primary" type="button" id="searchBtn">
|
||||
<i class="bi bi-search"></i> Search
|
||||
</button>
|
||||
</div>
|
||||
<div id="searchResults" class="mt-3"></div>
|
||||
</div>
|
||||
<hr id="bricksetDivider">
|
||||
{% endif %}
|
||||
|
||||
<!-- Manual Entry Form -->
|
||||
<form method="POST" action="{{ url_for('sets.add_set') }}" 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" required placeholder="e.g., 10497">
|
||||
</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" required min="1949" max="2030"
|
||||
placeholder="e.g., 2024">
|
||||
</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" required placeholder="e.g., Galaxy Explorer">
|
||||
</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" required placeholder="e.g., Space">
|
||||
</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" placeholder="e.g., 1254">
|
||||
</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" placeholder="https://...">
|
||||
<div class="form-text">Enter a URL to an image of the set (e.g., from Brickset)</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="cover_image" class="form-label">
|
||||
<i class="bi bi-upload"></i> Upload Cover Picture
|
||||
</label>
|
||||
<input type="file" class="form-control" id="cover_image"
|
||||
name="cover_image" accept="image/*">
|
||||
<div class="form-text">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
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;">
|
||||
<img id="previewImg" src="" alt="Preview" style="max-width: 200px; max-height: 200px; border-radius: 8px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOC (My Own Creation) Section -->
|
||||
<div class="card mb-3 border-warning" id="mocSection" style="display: none;">
|
||||
<div class="card-header bg-warning bg-opacity-25">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-star-fill text-warning"></i> MOC Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-info mb-3">
|
||||
<small>
|
||||
<i class="bi bi-info-circle"></i>
|
||||
<strong>MOC Tips:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
<li>Use any set number format (e.g., MOC-001, CUSTOM-2024, MYBUILD-01)</li>
|
||||
<li>Credit yourself or the original designer</li>
|
||||
<li>Add notes about techniques, inspiration, or building tips</li>
|
||||
</ul>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<input type="hidden" id="is_moc" name="is_moc" value="off">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="moc_designer" class="form-label">
|
||||
<i class="bi bi-person"></i> Designer / Creator Name <span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="text" class="form-control" id="moc_designer"
|
||||
name="moc_designer" placeholder="e.g., Your Name or Original Designer">
|
||||
<div class="form-text">Who designed this MOC?</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="moc_description" class="form-label">
|
||||
<i class="bi bi-card-text"></i> Description / Build Notes
|
||||
</label>
|
||||
<textarea class="form-control" id="moc_description" name="moc_description"
|
||||
rows="4" placeholder="Add details about your MOC, building techniques, inspiration, special features, etc."></textarea>
|
||||
<div class="form-text">Share details about your custom creation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ url_for('sets.list_sets') }}" class="btn btn-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-danger btn-lg">
|
||||
<i class="bi bi-plus-circle"></i> Add Set
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{% if brickset_available %}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#searchBtn').click(function() {
|
||||
const query = $('#bricksetSearch').val().trim();
|
||||
if (!query) {
|
||||
alert('Please enter a search term');
|
||||
return;
|
||||
}
|
||||
|
||||
$('#searchResults').html('<div class="text-center"><div class="spinner-border text-primary" role="status"></div></div>');
|
||||
|
||||
$.ajax({
|
||||
url: '{{ url_for("sets.search_brickset") }}',
|
||||
data: { q: query },
|
||||
success: function(data) {
|
||||
if (data.length === 0) {
|
||||
$('#searchResults').html('<div class="alert alert-info">No results found</div>');
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<div class="list-group">';
|
||||
data.forEach(function(set) {
|
||||
html += `
|
||||
<a href="#" class="list-group-item list-group-item-action search-result"
|
||||
data-number="${set.setNumber}"
|
||||
data-name="${set.name}"
|
||||
data-theme="${set.theme}"
|
||||
data-year="${set.year}"
|
||||
data-pieces="${set.pieces || ''}"
|
||||
data-image="${set.imageUrl || ''}">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h6 class="mb-1">${set.setNumber}: ${set.name}</h6>
|
||||
<small>${set.year}</small>
|
||||
</div>
|
||||
<small class="text-muted">${set.theme} - ${set.pieces || 'Unknown'} pieces</small>
|
||||
</a>
|
||||
`;
|
||||
});
|
||||
html += '</div>';
|
||||
$('#searchResults').html(html);
|
||||
|
||||
// Handle click on search result
|
||||
$('.search-result').click(function(e) {
|
||||
e.preventDefault();
|
||||
$('#set_number').val($(this).data('number'));
|
||||
$('#set_name').val($(this).data('name'));
|
||||
$('#theme').val($(this).data('theme'));
|
||||
$('#year_released').val($(this).data('year'));
|
||||
$('#piece_count').val($(this).data('pieces'));
|
||||
$('#image_url').val($(this).data('image'));
|
||||
$('#searchResults').html('<div class="alert alert-success">Form populated! Review and submit.</div>');
|
||||
});
|
||||
},
|
||||
error: function() {
|
||||
$('#searchResults').html('<div class="alert alert-danger">Search failed. Please try again.</div>');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Allow enter key to search
|
||||
$('#bricksetSearch').keypress(function(e) {
|
||||
if (e.which === 13) {
|
||||
e.preventDefault();
|
||||
$('#searchBtn').click();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Handle set type selection (Official vs MOC)
|
||||
$('input[name="set_type"]').change(function() {
|
||||
const isMoc = $('#type_moc').is(':checked');
|
||||
|
||||
if (isMoc) {
|
||||
// Show MOC section, hide Brickset
|
||||
$('#mocSection').slideDown();
|
||||
$('#is_moc').val('on');
|
||||
$('#bricksetSection').slideUp();
|
||||
$('#bricksetDivider').hide();
|
||||
|
||||
// Clear Brickset populated fields (they might not apply to MOCs)
|
||||
$('#image_url').val('');
|
||||
|
||||
// Update placeholder text for MOC context
|
||||
$('#set_number').attr('placeholder', 'e.g., MOC-001, CUSTOM-2024');
|
||||
$('#theme').attr('placeholder', 'e.g., Custom, Space MOCs, My Creations');
|
||||
|
||||
} else {
|
||||
// Show Brickset, hide MOC section
|
||||
$('#mocSection').slideUp();
|
||||
$('#is_moc').val('off');
|
||||
$('#bricksetSection').slideDown();
|
||||
$('#bricksetDivider').show();
|
||||
|
||||
// Clear MOC fields
|
||||
$('#moc_designer').val('');
|
||||
$('#moc_description').val('');
|
||||
|
||||
// Reset placeholder text for official sets
|
||||
$('#set_number').attr('placeholder', 'e.g., 10497');
|
||||
$('#theme').attr('placeholder', 'e.g., Space');
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize based on current selection (including URL parameter)
|
||||
const selectedType = $('input[name="set_type"]:checked').val();
|
||||
if (selectedType === 'moc') {
|
||||
$('#type_moc').trigger('change');
|
||||
} else {
|
||||
$('#type_official').trigger('change');
|
||||
}
|
||||
|
||||
// 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 %}
|
||||
Reference in New Issue
Block a user