♑🛠️

- add show price preference(store in cookies)
2026-06-12 17:36:57 +08:00
parent 3f386e5e38
commit 9e9788ea22
13 changed files with 320 additions and 18 deletions
@@ -16,6 +16,38 @@
                <a href="/properties?type=rent" class="text-gray-200 hover:text-white transition">Rent</a>
                <a href="/properties/new" class="text-gray-200 hover:text-white transition">Sell</a>

+                <!-- Price Preference Toggle -->
+                <div class="relative" id="pricePrefWrapper">
+                    <button type="button" onclick="togglePricePref()"
+                            class="flex items-center gap-1.5 text-gray-200 hover:text-white transition text-sm">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <span id="pricePrefLabel">{{ {"total": "Total", "sqft": "/Sqft", "both": "Both"}[price_pref] }}</span>
+                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </button>
+                    <div id="pricePrefDropdown"
+                         class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-xl z-50 py-1 border border-gray-200">
+                        <button onclick="setPricePref('total')"
+                                class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
+                                {% if price_pref == 'total' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
+                            Total Price
+                        </button>
+                        <button onclick="setPricePref('sqft')"
+                                class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
+                                {% if price_pref == 'sqft' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
+                            Price per Sq Ft
+                        </button>
+                        <button onclick="setPricePref('both')"
+                                class="w-full text-left px-4 py-2 text-sm hover:bg-gray-50 transition
+                                {% if price_pref == 'both' %}text-accent font-semibold{% else %}text-gray-700{% endif %}">
+                            Both
+                        </button>
+                    </div>
+                </div>
+
                {% if user %}
                <a href="/dashboard" class="text-gray-200 hover:text-white transition">Dashboard</a>
                <div class="flex items-center space-x-3 ml-2">
@@ -52,6 +84,27 @@
                <a href="/properties" class="text-gray-200 hover:text-white py-2">Buy</a>
                <a href="/properties?type=rent" class="text-gray-200 hover:text-white py-2">Rent</a>
                <a href="/properties/new" class="text-gray-200 hover:text-white py-2">Sell</a>
+                <!-- Mobile Price Preference -->
+                <div class="border-t border-white/20 pt-2 mt-1">
+                    <span class="text-xs text-gray-400 uppercase tracking-wide">Price Display</span>
+                    <div class="flex gap-2 mt-1">
+                        <button onclick="setPricePref('total')"
+                                class="px-3 py-1 text-xs rounded-full transition
+                                {% if price_pref == 'total' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
+                            Total
+                        </button>
+                        <button onclick="setPricePref('sqft')"
+                                class="px-3 py-1 text-xs rounded-full transition
+                                {% if price_pref == 'sqft' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
+                            /Sqft
+                        </button>
+                        <button onclick="setPricePref('both')"
+                                class="px-3 py-1 text-xs rounded-full transition
+                                {% if price_pref == 'both' %}bg-warm text-primary font-semibold{% else %}bg-white/10 text-gray-300{% endif %}">
+                            Both
+                        </button>
+                    </div>
+                </div>
                {% if user %}
                <a href="/dashboard" class="text-gray-200 hover:text-white py-2">Dashboard</a>
                <a href="/auth/logout" class="text-warm hover:text-warm-dark py-2 font-medium">Logout ({{ user.username }})</a>
@@ -68,4 +121,20 @@
    document.getElementById('mobile-menu-btn')?.addEventListener('click', () => {
        document.getElementById('mobile-menu').classList.toggle('hidden');
    });
+
+    function togglePricePref() {
+        document.getElementById('pricePrefDropdown').classList.toggle('hidden');
+    }
+
+    function setPricePref(pref) {
+        document.cookie = 'price_pref=' + pref + ';path=/;max-age=31536000;samesite=lax';
+        location.reload();
+    }
+
+    document.addEventListener('click', function(e) {
+        var wrapper = document.getElementById('pricePrefWrapper');
+        if (wrapper && !wrapper.contains(e.target)) {
+            document.getElementById('pricePrefDropdown').classList.add('hidden');
+        }
+    });
 </script>
@@ -1,4 +1,4 @@
-{% macro property_card(prop) %}
+{% macro property_card(prop, price_pref="total") %}
 <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
    <a href="/properties/{{ prop.id }}" class="block">
        <div class="relative h-52 bg-gray-200">
@@ -35,7 +35,7 @@

    <div class="p-5">
        <div class="flex items-center justify-between mb-2">
-            <span class="text-2xl font-bold text-primary">${{ "{:,}".format(prop.price) }}</span>
+            <span class="text-2xl font-bold text-primary">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</span>
        </div>

        <h3 class="text-lg font-semibold text-gray-800 mb-1 truncate">
@@ -64,7 +64,7 @@
                                </div>
                            </div>
                        </td>
-                        <td class="px-6 py-4 font-semibold text-primary">${{ "{:,}".format(prop.price) }}</td>
+                        <td class="px-6 py-4 font-semibold text-primary">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</td>
                        <td class="px-6 py-4">
                            <span class="px-2.5 py-1 rounded-full text-xs font-medium
                                {% if prop.status == 'active' %}bg-green-100 text-green-800
@@ -106,7 +106,7 @@
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {% from "components/property_card.html" import property_card %}
            {% for fav_prop in favorites %}
-            {{ property_card(fav_prop) }}
+            {{ property_card(fav_prop, price_pref) }}
            {% endfor %}
        </div>
        {% else %}
@@ -42,7 +42,7 @@
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {% from "components/property_card.html" import property_card %}
        {% for prop in properties %}
-        {{ property_card(prop) }}
+        {{ property_card(prop, price_pref) }}
        {% endfor %}
    </div>
    {% else %}
@@ -34,13 +34,37 @@
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Price (USD) *</label>
-                <div class="relative">
+                <!-- Input mode toggle -->
+                <div class="flex gap-1 mb-2 bg-gray-100 rounded-lg p-0.5 text-xs">
+                    <button type="button" id="priceModeTotal" onclick="setPriceMode('total')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition bg-white shadow text-primary">
+                        Total Price
+                    </button>
+                    <button type="button" id="priceModeUnit" onclick="setPriceMode('unit')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition text-gray-500">
+                        Per Sqft
+                    </button>
+                </div>
+                <!-- Total price input (default visible) -->
+                <div class="relative" id="totalPriceGroup">
                    <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
-                    <input type="number" name="price" required min="0"
+                    <input type="number" id="totalPriceInput" name="price" required min="0"
                           value="{{ values.price|default('') }}"
                           placeholder="450,000"
                           class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
                </div>
+                <!-- Unit price input (hidden by default) -->
+                <div class="relative hidden" id="unitPriceGroup">
+                    <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
+                    <input type="number" id="unitPriceInput" min="0" step="0.01"
+                           placeholder="225"
+                           class="w-full pl-8 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
+                    <span class="absolute right-3 top-3 text-gray-400 text-sm">/sqft</span>
+                </div>
+                <!-- Reference total when in unit mode -->
+                <p class="text-xs text-gray-400 mt-1 hidden" id="priceRef">
+                    Total: <span id="priceRefValue">$0</span>
+                </p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Property Type *</label>
@@ -71,7 +95,7 @@
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Area (sqft) *</label>
-                <input type="number" name="area_sqft" required min="0"
+                <input type="number" id="areaSqftInput" name="area_sqft" required min="0"
                       value="{{ values.area_sqft|default('') }}"
                       placeholder="2000"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
@@ -170,4 +194,61 @@
        </div>
    </form>
 </div>
+
+<script>
+(function() {
+    var priceMode = 'total';
+
+    window.setPriceMode = function(mode) {
+        priceMode = mode;
+        var totalGroup = document.getElementById('totalPriceGroup');
+        var unitGroup = document.getElementById('unitPriceGroup');
+        var totalBtn = document.getElementById('priceModeTotal');
+        var unitBtn = document.getElementById('priceModeUnit');
+        var ref = document.getElementById('priceRef');
+        var priceInput = document.getElementById('totalPriceInput');
+
+        if (mode === 'total') {
+            totalGroup.classList.remove('hidden');
+            unitGroup.classList.add('hidden');
+            ref.classList.add('hidden');
+            totalBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.remove('text-gray-500');
+            unitBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.add('text-gray-500');
+        } else {
+            totalGroup.classList.add('hidden');
+            unitGroup.classList.remove('hidden');
+            ref.classList.remove('hidden');
+            unitBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.remove('text-gray-500');
+            totalBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.add('text-gray-500');
+            updateTotalFromUnit();
+        }
+    };
+
+    function getArea() {
+        return parseInt(document.getElementById('areaSqftInput').value) || 0;
+    }
+
+    function updateTotalFromUnit() {
+        var unitVal = parseFloat(document.getElementById('unitPriceInput').value) || 0;
+        var area = getArea();
+        var total = Math.round(unitVal * area);
+        document.getElementById('totalPriceInput').value = total || '';
+        document.getElementById('priceRefValue').textContent = '$' + total.toLocaleString();
+    }
+
+    document.getElementById('unitPriceInput').addEventListener('input', updateTotalFromUnit);
+    document.getElementById('areaSqftInput').addEventListener('input', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+
+    // Ensure total price is synced before form submission
+    document.querySelector('form').addEventListener('submit', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+})();
+</script>
 {% endblock %}
@@ -82,7 +82,7 @@
            <div>
                <div class="flex items-center justify-between flex-wrap gap-4">
                    <h1 class="text-3xl font-bold text-primary">{{ prop.title }}</h1>
-                    <span class="text-3xl font-extrabold text-accent">${{ "{:,}".format(prop.price) }}</span>
+                    <span class="text-3xl font-extrabold text-accent">{{ prop.price|price_fmt(price_pref, prop.area_sqft) }}</span>
                </div>
                <p class="flex items-center text-gray-500 mt-2">
                    <svg class="w-5 h-5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -32,12 +32,36 @@
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Price (USD) *</label>
-                <div class="relative">
+                <!-- Input mode toggle -->
+                <div class="flex gap-1 mb-2 bg-gray-100 rounded-lg p-0.5 text-xs">
+                    <button type="button" id="priceModeTotal" onclick="setPriceMode('total')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition bg-white shadow text-primary">
+                        Total Price
+                    </button>
+                    <button type="button" id="priceModeUnit" onclick="setPriceMode('unit')"
+                            class="flex-1 py-1.5 rounded-md font-medium transition text-gray-500">
+                        Per Sqft
+                    </button>
+                </div>
+                <!-- Total price input (default visible) -->
+                <div class="relative" id="totalPriceGroup">
                    <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
-                    <input type="number" name="price" required min="0"
+                    <input type="number" id="totalPriceInput" name="price" required min="0"
                           value="{{ prop.price }}"
                           class="w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
                </div>
+                <!-- Unit price input (hidden by default) -->
+                <div class="relative hidden" id="unitPriceGroup">
+                    <span class="absolute left-3 top-3 text-gray-500 font-medium">$</span>
+                    <input type="number" id="unitPriceInput" min="0" step="0.01"
+                           placeholder="225"
+                           class="w-full pl-8 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
+                    <span class="absolute right-3 top-3 text-gray-400 text-sm">/sqft</span>
+                </div>
+                <!-- Reference total when in unit mode -->
+                <p class="text-xs text-gray-400 mt-1 hidden" id="priceRef">
+                    Total: <span id="priceRefValue">$0</span>
+                </p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Property Type *</label>
@@ -67,7 +91,7 @@
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Area (sqft) *</label>
-                <input type="number" name="area_sqft" required min="0"
+                <input type="number" id="areaSqftInput" name="area_sqft" required min="0"
                       value="{{ prop.area_sqft }}"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent outline-none transition">
            </div>
@@ -173,4 +197,68 @@
        </div>
    </form>
 </div>
+
+<script>
+(function() {
+    var priceMode = 'total';
+
+    window.setPriceMode = function(mode) {
+        priceMode = mode;
+        var totalGroup = document.getElementById('totalPriceGroup');
+        var unitGroup = document.getElementById('unitPriceGroup');
+        var totalBtn = document.getElementById('priceModeTotal');
+        var unitBtn = document.getElementById('priceModeUnit');
+        var ref = document.getElementById('priceRef');
+
+        if (mode === 'total') {
+            totalGroup.classList.remove('hidden');
+            unitGroup.classList.add('hidden');
+            ref.classList.add('hidden');
+            totalBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.remove('text-gray-500');
+            unitBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.add('text-gray-500');
+        } else {
+            totalGroup.classList.add('hidden');
+            unitGroup.classList.remove('hidden');
+            ref.classList.remove('hidden');
+            unitBtn.classList.add('bg-white', 'shadow', 'text-primary');
+            unitBtn.classList.remove('text-gray-500');
+            totalBtn.classList.remove('bg-white', 'shadow', 'text-primary');
+            totalBtn.classList.add('text-gray-500');
+            updateTotalFromUnit();
+        }
+    };
+
+    function getArea() {
+        return parseInt(document.getElementById('areaSqftInput').value) || 0;
+    }
+
+    function updateTotalFromUnit() {
+        var unitVal = parseFloat(document.getElementById('unitPriceInput').value) || 0;
+        var area = getArea();
+        var total = Math.round(unitVal * area);
+        document.getElementById('totalPriceInput').value = total || '';
+        document.getElementById('priceRefValue').textContent = '$' + total.toLocaleString();
+    }
+
+    document.getElementById('unitPriceInput').addEventListener('input', updateTotalFromUnit);
+    document.getElementById('areaSqftInput').addEventListener('input', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+
+    // Initialize unit price from existing values
+    var priceInput = document.getElementById('totalPriceInput');
+    var areaInput = document.getElementById('areaSqftInput');
+    if (priceInput.value && areaInput.value && parseInt(areaInput.value) > 0) {
+        var unitPrice = parseInt(priceInput.value) / parseInt(areaInput.value);
+        document.getElementById('unitPriceInput').value = Math.round(unitPrice * 100) / 100;
+    }
+
+    // Ensure total price is synced before form submission
+    document.querySelector('form').addEventListener('submit', function() {
+        if (priceMode === 'unit') updateTotalFromUnit();
+    });
+})();
+</script>
 {% endblock %}
@@ -30,7 +30,12 @@
                </div>

                <div>
-                    <label class="block text-sm font-medium text-gray-700 mb-1">Price Range (USD)</label>
+                    <label class="block text-sm font-medium text-gray-700 mb-1">
+                        Price Range
+                        {% if price_pref == 'sqft' %}
+                        <span class="text-xs text-gray-400 font-normal">(per sqft)</span>
+                        {% endif %}
+                    </label>
                    <div class="flex gap-2">
                        <input type="number" name="min_price" value="{{ min_price|default('') }}"
                               placeholder="Min" min="0"
@@ -86,7 +91,7 @@
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {% from "components/property_card.html" import property_card %}
                {% for prop in properties %}
-                {{ property_card(prop) }}
+                {{ property_card(prop, price_pref) }}
                {% endfor %}
            </div>