147 lines
7.5 KiB
HTML
147 lines
7.5 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Weekly Planner - New Style{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="planner-grid">
|
|
<!-- Row 1: Mon, Tue, Wed -->
|
|
<div class="planner-row planner-row-3">
|
|
{% for day in weekly_days|slice:":3" %}
|
|
<div class="day-box" data-bs-toggle="modal" data-bs-target="#scheduleModal" data-date="{{ day.date|date:'Y-m-d' }}" data-day="{{ day.day_name }}">
|
|
<div class="outfit-display">
|
|
{% if day.schedule.outfit %}
|
|
<img src="{{ day.schedule.outfit.items.first.image.url }}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<div style="position: absolute; bottom: 35%; left: 0; width: 100%; background: rgba(0,0,0,0.5); font-size: 0.5rem; padding: 2px;">{{ day.schedule.outfit.name }}</div>
|
|
{% else %}
|
|
<span>NO FIT</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="day-footer">
|
|
<p class="day-label">{{ day.day_name|slice:":3" }}</p>
|
|
<p class="date-label">{{ day.date|date:"d M" }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Row 2: Thu, Fri -->
|
|
<div class="planner-row planner-row-2">
|
|
{% for day in weekly_days|slice:"3:5" %}
|
|
<div class="day-box" data-bs-toggle="modal" data-bs-target="#scheduleModal" data-date="{{ day.date|date:'Y-m-d' }}" data-day="{{ day.day_name }}">
|
|
<div class="outfit-display">
|
|
{% if day.schedule.outfit %}
|
|
<img src="{{ day.schedule.outfit.items.first.image.url }}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<div style="position: absolute; bottom: 35%; left: 0; width: 100%; background: rgba(0,0,0,0.5); font-size: 0.5rem; padding: 2px;">{{ day.schedule.outfit.name }}</div>
|
|
{% else %}
|
|
<span>NO FIT</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="day-footer">
|
|
<p class="day-label">{{ day.day_name|slice:":3" }}</p>
|
|
<p class="date-label">{{ day.date|date:"d M" }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Row 3: Sat, Sun -->
|
|
<div class="planner-row planner-row-2">
|
|
{% for day in weekly_days|slice:"5:7" %}
|
|
<div class="day-box" data-bs-toggle="modal" data-bs-target="#scheduleModal" data-date="{{ day.date|date:'Y-m-d' }}" data-day="{{ day.day_name }}">
|
|
<div class="outfit-display">
|
|
{% if day.schedule.outfit %}
|
|
<img src="{{ day.schedule.outfit.items.first.image.url }}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<div style="position: absolute; bottom: 35%; left: 0; width: 100%; background: rgba(0,0,0,0.5); font-size: 0.5rem; padding: 2px;">{{ day.schedule.outfit.name }}</div>
|
|
{% else %}
|
|
<span>NO FIT</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="day-footer">
|
|
<p class="day-label">{{ day.day_name|slice:":3" }}</p>
|
|
<p class="date-label">{{ day.date|date:"d M" }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="line-separator"></div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<i class="bi bi-clock-history text-muted"></i>
|
|
<span class="small fw-bold">{{ total_items }} ITEMS LOADED</span>
|
|
</div>
|
|
<div class="d-flex gap-3">
|
|
<i class="bi bi-brightness-high {% if current_season == 'Summer' %}text-accent{% else %}text-muted{% endif %}"></i>
|
|
<i class="bi bi-flower1 {% if current_season == 'Spring' %}text-accent{% else %}text-muted{% endif %}"></i>
|
|
<i class="bi bi-tree {% if current_season == 'Autumn' %}text-accent{% else %}text-muted{% endif %}"></i>
|
|
<i class="bi bi-snow {% if current_season == 'Winter' %}text-accent{% else %}text-muted{% endif %}"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Schedule Modal -->
|
|
<div class="modal fade" id="scheduleModal" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0">
|
|
<h5 class="modal-title font-montserrat" id="modalDayTitle">SCHEDULE FIT</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form action="{% url 'schedule_outfit' %}" method="POST">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<input type="hidden" name="date" id="modalDateInput">
|
|
<p class="text-muted small mb-3">Select an outfit for <span id="modalDayName" class="text-white fw-bold"></span></p>
|
|
|
|
<div class="list-group bg-transparent">
|
|
<label class="list-group-item bg-transparent border-secondary text-white d-flex align-items-center gap-3 py-3">
|
|
<input class="form-check-input bg-dark border-secondary" type="radio" name="outfit_id" value="" checked>
|
|
<span class="small">CLEAR SCHEDULE</span>
|
|
</label>
|
|
{% for outfit in user.outfits.all %}
|
|
<label class="list-group-item bg-transparent border-secondary text-white d-flex align-items-center gap-3 py-3">
|
|
<input class="form-check-input bg-dark border-secondary" type="radio" name="outfit_id" value="{{ outfit.id }}">
|
|
<div class="d-flex flex-column">
|
|
<span class="fw-bold small">{{ outfit.name|upper }}</span>
|
|
<span class="text-muted" style="font-size: 0.6rem;">{{ outfit.items.count }} ITEMS</span>
|
|
</div>
|
|
</label>
|
|
{% empty %}
|
|
<div class="py-4 text-center text-muted">
|
|
<p class="small mb-2">No outfits saved yet.</p>
|
|
<a href="{% url 'new_fit' %}" class="btn-custom py-1 px-3">Build One</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn-custom" data-bs-dismiss="modal">CANCEL</button>
|
|
<button type="submit" class="btn-accent">SCHEDULE</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
const scheduleModal = document.getElementById('scheduleModal');
|
|
if (scheduleModal) {
|
|
scheduleModal.addEventListener('show.bs.modal', function (event) {
|
|
const button = event.relatedTarget;
|
|
const date = button.getAttribute('data-date');
|
|
const dayName = button.getAttribute('data-day');
|
|
|
|
const modalDateInput = scheduleModal.querySelector('#modalDateInput');
|
|
const modalDayName = scheduleModal.querySelector('#modalDayName');
|
|
|
|
modalDateInput.value = date;
|
|
modalDayName.textContent = dayName;
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|