Black-Cyan/NexHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♑🛠️

Browse Source 
- add show price preference(store in cookies)
This commit is contained in:
墨青
2026-06-12 17:36:57 +08:00
parent 3f386e5e38
commit 9e9788ea22
13 changed files with 320 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/properties/create.html
+84 -3
View File
@@ -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 %}