feat: Adds psi to feet of head conversion.
This commit is contained in:
@@ -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)))
|
||||
|
||||
])
|
||||
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user