feat: Adds psi to feet of head conversion.
Some checks failed
CI / ubuntu (push) Failing after 7m22s
CI / macOS (debug, 16.2) (push) Has been cancelled
CI / macOS (release, 16.2) (push) Has been cancelled

This commit is contained in:
2025-03-07 16:27:03 -05:00
parent 159031a023
commit a44cc6975d
12 changed files with 312 additions and 3 deletions

View File

@@ -128,7 +128,11 @@ struct ViewControllerTests {
// Hydronic system pressure
.hydronicSystemPressure(.index),
.hydronicSystemPressure(.submit(.init(height: 12, waterTemperature: 60)))
.hydronicSystemPressure(.submit(.init(height: 12, waterTemperature: 60))),
// Feet of head
.feetOfHead(.index),
.feetOfHead(.submit(.init(pressure: 3.5, waterTemperature: 60)))
])

View File

@@ -0,0 +1,68 @@
<div class="flex items-center gap-3 mb-6">
<div class="block text-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-footprints">
<path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z"/>
<path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z"/>
<path d="M16 17h4"/>
<path d="M4 13h4"/>
</svg>
</div>
<h2 class="text-2xl font-extrabold">Feet of Head</h2>
</div>
<form hx-post="/feet-of-head" hx-target="#result">
<div class="space-y-6">
<div class="grid grid-cols-2 gap-4">
<div>
<label for="pressure" class="block text-sm font-medium mb-2">Pressure (psi)</label>
<input id="pressure" placeholder="Pressure" name="pressure" class=" w-full px-4 py-2 border rounded-md min-h-11
focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
placeholder-shown:!border-gray-400
invalid:border-red-500 out-of-range:border-red-500" type="number" min="0.1" step="0.1" autofocus required>
</div>
<div>
<label for="waterTemperature" class="block text-sm font-medium mb-2">Water Temperature (°F)</label>
<input id="waterTemperature" placeholder="Temperature (optional)" name="waterTemperature" class=" w-full px-4 py-2 border rounded-md min-h-11
focus:ring-2 focus:ring-yellow-800 focus:border-yellow-800
placeholder-shown:!border-gray-400
invalid:border-red-500 out-of-range:border-red-500" type="number" min="32.0" step="0.1">
</div>
</div>
<div class="mt-8 p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md
border border-blue-500 text-blue-500 text-sm">
<p class="font-extrabold mb-3">Note:</p>
<p class="px-6">If water temperature is not supplied, then calculations will be based on 60°F water.</p>
</div>
<div>
<button type="submit" class=" w-full font-bold py-3 rounded-md transition-colors
bg-yellow-300 dark:bg-blue-500
hover:bg-yellow-400 hover:dark:bg-blue-600
text-blue-500 dark:text-yellow-300">Feet of Head</button>
</div>
</div>
</form>
<div id="result">
<div class=" mt-6 p-6 rounded-lg border border-blue-500
bg-blue-50 dark:bg-slate-600
text-blue-500 dark:text-slate-200">
<div class="relative">
<h3 class="text-xl font-semibold mb-4">Results</h3>
<button class=" font-bold px-4 py-2 rounded-md transition-colors
bg-blue-500 dark:bg-yellow-300
hover:bg-blue-600 hover:dark:bg-yellow-400
text-yellow-300 dark:text-blue-500 absolute bottom-0 right-0" hx-get="/feet-of-head" hx-target="#content">Reset</button>
</div>
<div class="w-full rounded-lg shadow-lg bg-blue-100 border border-blue-600 text-blue-600 p-6">
<div class="grid grid-cols-2">
<div class="grid grid-cols-1 justify-items-center">
<p class="font-medium">Feet of Head</p>
<h3 class="text-3xl font-extrabold">7.95<span class="text-lg ms-2">ft.</span></h3>
</div>
<div class="grid grid-cols-1 justify-items-center">
<p class="font-medium">Water Density</p>
<h3 class="text-3xl font-extrabold">62.37<span class="text-lg ms-2">lb/ft³</span></h3>
</div>
</div>
</div>
<div id="warnings"></div>
</div>
</div>

View File

@@ -0,0 +1,24 @@
<div class=" mt-6 p-6 rounded-lg border border-blue-500
bg-blue-50 dark:bg-slate-600
text-blue-500 dark:text-slate-200">
<div class="relative">
<h3 class="text-xl font-semibold mb-4">Results</h3>
<button class=" font-bold px-4 py-2 rounded-md transition-colors
bg-blue-500 dark:bg-yellow-300
hover:bg-blue-600 hover:dark:bg-yellow-400
text-yellow-300 dark:text-blue-500 absolute bottom-0 right-0" hx-get="/feet-of-head" hx-target="#content">Reset</button>
</div>
<div class="w-full rounded-lg shadow-lg bg-blue-100 border border-blue-600 text-blue-600 p-6">
<div class="grid grid-cols-2">
<div class="grid grid-cols-1 justify-items-center">
<p class="font-medium">Feet of Head</p>
<h3 class="text-3xl font-extrabold">7.9<span class="text-lg ms-2">ft.</span></h3>
</div>
<div class="grid grid-cols-1 justify-items-center">
<p class="font-medium">Water Density</p>
<h3 class="text-3xl font-extrabold">62.58<span class="text-lg ms-2">lb/ft³</span></h3>
</div>
</div>
</div>
<div id="warnings"></div>
</div>