05/31 Phase 3

2026-05-31 16:18:37 -04:00
parent 9f2a0acc38
commit 1560041cdb
13 changed files with 1152 additions and 10 deletions
@@ -0,0 +1,103 @@
+{% extends "base.html" %}
+{% block title %}{{ title }}{% endblock %}
+{% block page_title %}{{ title }}{% endblock %}
+
+{% block content %}
+<div class="row justify-content-center">
+<div class="col-12 col-md-8 col-lg-6">
+<div class="pcard">
+    <form method="POST" novalidate>
+        {{ form.hidden_tag() }}
+
+        <div class="mb-3">
+            {{ form.name.label(class="form-label fw-medium", style="font-size:13px;") }}
+            {{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="e.g. Vacation Fund") }}
+            {% for e in form.name.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
+        </div>
+
+        <div class="row g-3 mb-3">
+            <div class="col-6">
+                {{ form.target_amount.label(class="form-label fw-medium", style="font-size:13px;") }}
+                <div class="input-group">
+                    <span class="input-group-text" style="font-size:13px;">{{ current_user.currency_symbol }}</span>
+                    {{ form.target_amount(class="form-control", placeholder="0.00") }}
+                </div>
+            </div>
+            <div class="col-6">
+                {{ form.target_date.label(class="form-label fw-medium", style="font-size:13px;") }}
+                {{ form.target_date(class="form-control") }}
+            </div>
+        </div>
+
+        <div class="mb-3">
+            {{ form.linked_account_id.label(class="form-label fw-medium", style="font-size:13px;") }}
+            {{ form.linked_account_id(class="form-select") }}
+        </div>
+
+        <div class="mb-3">
+            {{ form.description.label(class="form-label fw-medium", style="font-size:13px;") }}
+            {{ form.description(class="form-control", rows=2, placeholder="What are you saving for?") }}
+        </div>
+
+        <!-- Color -->
+        <div class="mb-3">
+            <label class="form-label fw-medium" style="font-size:13px;">Color</label>
+            <div class="d-flex gap-2 flex-wrap">
+                {% for c in colors %}
+                <label style="cursor:pointer;">
+                    <input type="radio" name="color" value="{{ c }}" style="display:none;" {% if (goal and goal.color==c) or (not goal and loop.first) %}checked{% endif %}>
+                    <div style="width:26px;height:26px;border-radius:50%;background:{{ c }};border:3px solid transparent;" class="color-swatch" data-color="{{ c }}"></div>
+                </label>
+                {% endfor %}
+            </div>
+            {{ form.color(type="hidden", id="colorInput") }}
+        </div>
+
+        <!-- Icon -->
+        <div class="mb-4">
+            <label class="form-label fw-medium" style="font-size:13px;">Icon</label>
+            <div class="d-flex gap-2 flex-wrap">
+                {% for icon_val in icons %}
+                <label style="cursor:pointer;">
+                    <input type="radio" name="icon" value="{{ icon_val }}" style="display:none;" {% if goal and goal.icon==icon_val %}checked{% elif not goal and loop.first %}checked{% endif %}>
+                    <div style="width:34px;height:34px;border-radius:8px;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:16px;border:2px solid transparent;" class="icon-swatch">
+                        <i class="bi {{ icon_val }}"></i>
+                    </div>
+                </label>
+                {% endfor %}
+            </div>
+            {{ form.icon(type="hidden", id="iconInput") }}
+        </div>
+
+        <div class="d-flex gap-2">
+            {{ form.submit(class="btn btn-primary") }}
+            <a href="{{ url_for('goals.index') }}" class="btn btn-outline-secondary">Cancel</a>
+        </div>
+    </form>
+</div>
+</div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.querySelectorAll('.color-swatch').forEach(function(sw) {
+    const inp = sw.closest('label').querySelector('input');
+    inp.addEventListener('change', function() {
+        document.getElementById('colorInput').value = this.value;
+        document.querySelectorAll('.color-swatch').forEach(s => { s.style.borderColor='transparent'; s.style.outline='none'; });
+        sw.style.borderColor='#fff'; sw.style.outline='2px solid '+this.value;
+    });
+    if (inp.checked) { sw.style.borderColor='#fff'; sw.style.outline='2px solid '+sw.dataset.color; document.getElementById('colorInput').value=sw.dataset.color; }
+});
+document.querySelectorAll('.icon-swatch').forEach(function(sw) {
+    const inp = sw.closest('label').querySelector('input');
+    inp.addEventListener('change', function() {
+        document.getElementById('iconInput').value = this.value;
+        document.querySelectorAll('.icon-swatch').forEach(s => { s.style.background='#f1f5f9'; s.style.borderColor='transparent'; });
+        sw.style.background='#dbeafe'; sw.style.borderColor='#3b82f6';
+    });
+    if (inp.checked) { sw.style.background='#dbeafe'; sw.style.borderColor='#3b82f6'; document.getElementById('iconInput').value=inp.value; }
+});
+</script>
+{% endblock %}