384 lines
17 KiB
HTML
384 lines
17 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="mb-0 fw-bold">{{ title }}</h4>
|
|
<a href="{% if date_str %}{% url 'home' %}{% else %}{% url 'outfit_list' %}{% endif %}" class="btn-close btn-close-white" aria-label="Close"></a>
|
|
</div>
|
|
|
|
<form method="post" id="outfit-form" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger small py-2">
|
|
<ul class="mb-0">
|
|
{% for field, errors in form.errors.items %}
|
|
{% for error in errors %}
|
|
<li>{{ field }}: {{ error }}</li>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6">
|
|
<label class="form-label text-dim small text-uppercase fw-bold">Outfit Name</label>
|
|
{{ form.name }}
|
|
</div>
|
|
<div class="col-6">
|
|
<label class="form-label text-dim small text-uppercase fw-bold">Season</label>
|
|
{{ form.season }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Toggle & Category Header -->
|
|
<div class="d-flex justify-content-between align-items-end mb-2">
|
|
<div>
|
|
<label class="form-label text-dim small text-uppercase fw-bold mb-0">Select Items</label>
|
|
<div class="small text-accent" id="item-count">0 selected</div>
|
|
</div>
|
|
<div class="btn-group btn-group-sm bg-secondary rounded-pill p-1 shadow-sm">
|
|
<button type="button" class="btn btn-sm rounded-pill px-3 active" id="view-grid-img" title="Grid View (Icons)">
|
|
<i class="fas fa-th-large"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-sm rounded-pill px-3" id="view-list-mode" title="List View (Details)">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category Navigation -->
|
|
<div class="category-nav mb-3">
|
|
<div class="d-flex gap-2 overflow-x-auto no-scrollbar pb-2" id="main-cat-list">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3 active-cat" data-cat-id="all">All</button>
|
|
{% for cat in main_categories %}
|
|
<button type="button" class="btn btn-sm btn-outline-secondary rounded-pill px-3 main-cat-btn" data-cat-id="{{ cat.id }}">
|
|
{{ cat.name }}
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="d-flex gap-2 overflow-x-auto no-scrollbar pb-2 mt-1 d-none" id="sub-cat-list">
|
|
<!-- Subcategories will be injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Wardrobe Item Grid -->
|
|
<div class="item-grid-container glass-card p-3 mb-4" style="height: 380px; overflow-y: auto;">
|
|
<div class="row g-2" id="wardrobe-items-grid">
|
|
{% for item in wardrobe_items %}
|
|
<div class="item-wrapper col-4 col-sm-3 col-md-2"
|
|
data-cat-id="{% if item.category %}{{ item.category.id }}{% else %}none{% endif %}"
|
|
data-parent-cat-id="{% if item.category %}{% if item.category.parent %}{{ item.category.parent.id }}{% else %}{{ item.category.id }}{% endif %}{% else %}none{% endif %}">
|
|
<div class="item-card position-relative rounded-1 d-flex flex-column align-items-center p-1"
|
|
data-id="{{ item.id }}" data-real-id="{{ item.id }}" data-type="item" style="cursor: pointer; transition: all 0.1s;">
|
|
|
|
<!-- Grid Content -->
|
|
<div class="item-img-container position-relative rounded-1 overflow-hidden bg-secondary w-100 shadow-sm" style="aspect-ratio: 1/1;">
|
|
<img src="{{ item.image.url }}" class="w-100 h-100 object-fit-contain item-img">
|
|
<div class="check-overlay position-absolute top-0 end-0 p-1 d-none" style="z-index: 5;">
|
|
<i class="fas fa-check-circle text-primary-accent bg-white rounded-circle shadow-sm"></i>
|
|
</div>
|
|
</div>
|
|
<div class="item-name-label mt-1 text-center small text-truncate w-100 px-1" style="font-size: 0.65rem; color: var(--text-main);">
|
|
{{ item.name|default:"Item" }}
|
|
</div>
|
|
|
|
<!-- List Content (Hidden by default) -->
|
|
<div class="item-list-content d-none w-100 align-items-center gap-2 px-1 py-1 position-relative">
|
|
<div class="list-img-box rounded-1 bg-secondary overflow-hidden" style="width: 28px; height: 28px; flex-shrink: 0;">
|
|
<img src="{{ item.image.url }}" class="w-100 h-100 object-fit-cover">
|
|
</div>
|
|
<span class="small text-truncate flex-grow-1" style="font-size: 0.75rem;">{{ item.name|default:"Item" }}</span>
|
|
<div class="list-check-overlay d-none">
|
|
<i class="fas fa-check-circle text-primary-accent" style="font-size: 0.8rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label text-dim small text-uppercase fw-bold mb-2">Select Accessories</label>
|
|
<div class="item-grid-container glass-card p-3" style="max-height: 250px; overflow-y: auto;">
|
|
<div class="row g-2" id="accessories-grid">
|
|
{% for acc in accessories %}
|
|
<div class="item-wrapper col-4 col-sm-3 col-md-2">
|
|
<div class="item-card position-relative rounded-1 d-flex flex-column align-items-center p-1"
|
|
data-id="{{ acc.id }}" data-real-id="{{ acc.id }}" data-type="accessory" style="cursor: pointer; transition: all 0.1s;">
|
|
|
|
<!-- Grid Content -->
|
|
<div class="item-img-container position-relative rounded-1 overflow-hidden bg-secondary w-100 shadow-sm" style="aspect-ratio: 1/1;">
|
|
<img src="{{ acc.image.url }}" class="w-100 h-100 object-fit-contain item-img">
|
|
<div class="check-overlay position-absolute top-0 end-0 p-1 d-none" style="z-index: 5;">
|
|
<i class="fas fa-check-circle text-primary-accent bg-white rounded-circle shadow-sm"></i>
|
|
</div>
|
|
</div>
|
|
<div class="item-name-label mt-1 text-center small text-truncate w-100 px-1" style="font-size: 0.65rem; color: var(--text-main);">
|
|
{{ acc.name|default:"Acc" }}
|
|
</div>
|
|
|
|
<!-- List Content (Hidden by default) -->
|
|
<div class="item-list-content d-none w-100 align-items-center gap-2 px-1 py-1 position-relative">
|
|
<div class="list-img-box rounded-1 bg-secondary overflow-hidden" style="width: 28px; height: 28px; flex-shrink: 0;">
|
|
<img src="{{ acc.image.url }}" class="w-100 h-100 object-fit-cover">
|
|
</div>
|
|
<span class="small text-truncate flex-grow-1" style="font-size: 0.75rem;">{{ acc.name|default:"Acc" }}</span>
|
|
<div class="list-check-overlay d-none">
|
|
<i class="fas fa-check-circle text-primary-accent" style="font-size: 0.8rem;"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="form-label text-dim small text-uppercase fw-bold">Folder / Group (Optional)</label>
|
|
{{ form.folder }}
|
|
<div class="mt-2">
|
|
<a class="text-accent small text-decoration-none" data-bs-toggle="collapse" href="#newFolderCollapse">
|
|
<i class="fas fa-plus-circle me-1"></i> Add New Group
|
|
</a>
|
|
<div class="collapse mt-2" id="newFolderCollapse">
|
|
{{ form.new_folder }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Selects -->
|
|
<div class="d-none">
|
|
{{ form.items }}
|
|
{{ form.accessories }}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-accent w-100 py-3 fw-bold rounded-3 shadow">SAVE OUTFIT</button>
|
|
</form>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Windows Folder Grid & List Styling */
|
|
.item-card:hover {
|
|
background-color: rgba(255, 255, 255, 0.08);
|
|
}
|
|
.item-card.selected {
|
|
background-color: rgba(var(--primary-accent-rgb, 187, 134, 252), 0.2) !important;
|
|
outline: 1px solid var(--primary-accent);
|
|
}
|
|
|
|
/* Grid View Styles */
|
|
.item-card.selected .check-overlay {
|
|
display: block !important;
|
|
}
|
|
|
|
/* List View Styles */
|
|
.list-mode .item-card {
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
padding: 4px 8px !important;
|
|
}
|
|
.list-mode .item-img-container,
|
|
.list-mode .item-name-label {
|
|
display: none !important;
|
|
}
|
|
.list-mode .item-list-content {
|
|
display: flex !important;
|
|
}
|
|
.list-mode .item-card.selected .list-check-overlay {
|
|
display: block !important;
|
|
}
|
|
|
|
.border-transparent { border-color: transparent; }
|
|
.text-primary-accent { color: var(--primary-accent); }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
|
|
.active-cat {
|
|
background-color: var(--primary-accent) !important;
|
|
color: #000 !important;
|
|
border-color: var(--primary-accent) !important;
|
|
}
|
|
|
|
.object-fit-contain { object-fit: contain; }
|
|
.object-fit-cover { object-fit: cover; }
|
|
|
|
.item-grid-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.item-grid-container::-webkit-scrollbar-track {
|
|
background: rgba(255,255,255,0.05);
|
|
border-radius: 10px;
|
|
}
|
|
.item-grid-container::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const itemCards = document.querySelectorAll('.item-card');
|
|
const itemsSelect = document.querySelector('select[name="items"]');
|
|
const accsSelect = document.querySelector('select[name="accessories"]');
|
|
const itemCountBadge = document.getElementById('item-count');
|
|
|
|
const mainCatBtns = document.querySelectorAll('.main-cat-btn');
|
|
const allCatBtn = document.querySelector('[data-cat-id="all"]');
|
|
const subCatList = document.getElementById('sub-cat-list');
|
|
const itemWrappers = document.querySelectorAll('.item-wrapper');
|
|
|
|
const viewGridImg = document.getElementById('view-grid-img');
|
|
const viewListMode = document.getElementById('view-list-mode');
|
|
const wardrobeGrid = document.getElementById('wardrobe-items-grid');
|
|
const accessoriesGrid = document.getElementById('accessories-grid');
|
|
|
|
function updateBadge() {
|
|
const selectedCount = document.querySelectorAll('.item-card.selected').length;
|
|
itemCountBadge.textContent = `${selectedCount} items selected`;
|
|
}
|
|
|
|
// Item Selection Logic
|
|
itemCards.forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
const id = this.dataset.realId || this.dataset.id;
|
|
const type = this.dataset.type;
|
|
const isSelected = this.classList.toggle('selected');
|
|
|
|
const select = (type === 'item') ? itemsSelect : accsSelect;
|
|
|
|
if (select) {
|
|
for (let option of select.options) {
|
|
if (option.value === id) {
|
|
option.selected = isSelected;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
updateBadge();
|
|
});
|
|
});
|
|
|
|
// View Toggle Logic
|
|
if (viewGridImg && viewListMode) {
|
|
viewGridImg.addEventListener('click', () => {
|
|
viewGridImg.classList.add('active');
|
|
viewListMode.classList.remove('active');
|
|
|
|
wardrobeGrid.classList.remove('list-mode');
|
|
accessoriesGrid.classList.remove('list-mode');
|
|
|
|
document.querySelectorAll('.item-wrapper').forEach(w => {
|
|
w.className = 'item-wrapper col-4 col-sm-3 col-md-2';
|
|
});
|
|
});
|
|
|
|
viewListMode.addEventListener('click', () => {
|
|
viewListMode.classList.add('active');
|
|
viewGridImg.classList.remove('active');
|
|
|
|
wardrobeGrid.classList.add('list-mode');
|
|
accessoriesGrid.classList.add('list-mode');
|
|
|
|
// In List mode, we want wider columns
|
|
document.querySelectorAll('.item-wrapper').forEach(w => {
|
|
w.className = 'item-wrapper col-12 col-sm-6 col-md-4';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Category Filtering Logic
|
|
function filterItems(mainCatId, subCatId = null) {
|
|
itemWrappers.forEach(wrapper => {
|
|
// Only filter wardrobe items, not accessories which might not have categories in this context
|
|
if (!wrapper.dataset.parentCatId) return;
|
|
|
|
const itemMainCatId = wrapper.dataset.parentCatId;
|
|
const itemSubCatId = wrapper.dataset.catId;
|
|
|
|
if (mainCatId === 'all') {
|
|
wrapper.classList.remove('d-none');
|
|
} else {
|
|
if (subCatId) {
|
|
wrapper.classList.toggle('d-none', itemSubCatId !== subCatId);
|
|
} else {
|
|
wrapper.classList.toggle('d-none', itemMainCatId !== mainCatId);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (allCatBtn) {
|
|
allCatBtn.addEventListener('click', function() {
|
|
document.querySelectorAll('.category-nav button').forEach(b => b.classList.remove('active-cat'));
|
|
this.classList.add('active-cat');
|
|
if (subCatList) subCatList.classList.add('d-none');
|
|
filterItems('all');
|
|
});
|
|
}
|
|
|
|
mainCatBtns.forEach(btn => {
|
|
btn.addEventListener('click', async function() {
|
|
document.querySelectorAll('.category-nav button').forEach(b => b.classList.remove('active-cat'));
|
|
this.classList.add('active-cat');
|
|
|
|
const catId = this.dataset.catId;
|
|
|
|
// Fetch subcategories
|
|
try {
|
|
const response = await fetch(`/ajax/get-subcategories/?parent_id=${catId}`);
|
|
const subcats = await response.json();
|
|
|
|
if (subCatList) {
|
|
if (subcats.length > 0) {
|
|
subCatList.innerHTML = '';
|
|
// Add "All [Parent]" option
|
|
const allSubBtn = document.createElement('button');
|
|
allSubBtn.type = 'button';
|
|
allSubBtn.className = 'btn btn-xs btn-outline-accent rounded-pill px-3 active-cat';
|
|
allSubBtn.textContent = 'All ' + this.textContent.trim();
|
|
allSubBtn.addEventListener('click', function() {
|
|
subCatList.querySelectorAll('button').forEach(b => b.classList.remove('active-cat'));
|
|
this.classList.add('active-cat');
|
|
filterItems(catId);
|
|
});
|
|
subCatList.appendChild(allSubBtn);
|
|
|
|
subcats.forEach(sc => {
|
|
const scBtn = document.createElement('button');
|
|
scBtn.type = 'button';
|
|
scBtn.className = 'btn btn-xs btn-outline-accent rounded-pill px-3';
|
|
scBtn.textContent = sc.name;
|
|
scBtn.addEventListener('click', function() {
|
|
subCatList.querySelectorAll('button').forEach(b => b.classList.remove('active-cat'));
|
|
this.classList.add('active-cat');
|
|
filterItems(catId, sc.id.toString());
|
|
});
|
|
subCatList.appendChild(scBtn);
|
|
});
|
|
subCatList.classList.remove('d-none');
|
|
} else {
|
|
subCatList.classList.add('d-none');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching subcategories:', error);
|
|
}
|
|
|
|
filterItems(catId);
|
|
});
|
|
});
|
|
|
|
updateBadge();
|
|
});
|
|
</script>
|
|
{% endblock %}
|