feat: Begins adding html snapshot tests.
This commit is contained in:
@@ -0,0 +1,82 @@
|
||||
import Dependencies
|
||||
import Elementary
|
||||
import HTMLSnapshotTesting
|
||||
import Logging
|
||||
import OrderedCollections
|
||||
import Routes
|
||||
import SnapshotTesting
|
||||
import Testing
|
||||
@testable import ViewController
|
||||
|
||||
@Suite("ViewControllerTests")
|
||||
struct ViewControllerTests {
|
||||
|
||||
let record = SnapshotTestingConfiguration.Record.missing
|
||||
let logger = Logger(label: "ViewControllerTests")
|
||||
|
||||
@Test
|
||||
func snapShotTests() async throws {
|
||||
try await withSnapshotTesting(record: record) {
|
||||
try await withDependencies {
|
||||
$0.viewController = .liveValue
|
||||
} operation: {
|
||||
@Dependency(\.viewController) var viewController
|
||||
|
||||
let arguments = OrderedSet([
|
||||
// Attic ventilation
|
||||
SiteRoute.View.atticVentilation(.index),
|
||||
.atticVentilation(.submit(.init(
|
||||
pressureDifferential: 1,
|
||||
outdoorTemperature: 76,
|
||||
outdoorDewpoint: 67,
|
||||
atticTemperature: 76,
|
||||
atticDewpoint: 76,
|
||||
atticFloorArea: 1234
|
||||
))),
|
||||
// Capacitor
|
||||
.capacitor(.index),
|
||||
.capacitor(.index(mode: .size)),
|
||||
.capacitor(.index(mode: .test)),
|
||||
.capacitor(.submit(.size(.init(runningAmps: 10.7, lineVoltage: 243, powerFactor: 0.86)))),
|
||||
.capacitor(.submit(.test(.init(startWindingAmps: 4.3, runToCommonVoltage: 343)))),
|
||||
// Dehumidifier Sizing
|
||||
.dehumidifierSize(.index),
|
||||
.dehumidifierSize(.submit(.init(latentLoad: 3443, temperature: 76, humidity: 67))),
|
||||
// Filter Pressure Drop
|
||||
.filterPressureDrop(.index),
|
||||
.filterPressureDrop(.index(mode: .basic)),
|
||||
.filterPressureDrop(.index(mode: .fanLaw)),
|
||||
.filterPressureDrop(.submit(.basic(.init(
|
||||
systemSize: 2,
|
||||
climateZone: .hotHumid,
|
||||
filterType: .pleatedBest,
|
||||
filterWidth: 20,
|
||||
filterHeight: 25
|
||||
)))),
|
||||
.filterPressureDrop(.submit(.fanLaw(.init(
|
||||
filterWidth: 20,
|
||||
filterHeight: 25,
|
||||
filterDepth: 4,
|
||||
ratedAirflow: 800,
|
||||
ratedPressureDrop: 0.1,
|
||||
designAirflow: 900
|
||||
))))
|
||||
])
|
||||
|
||||
for route in arguments {
|
||||
let html = try await viewController.render(route, logger: logger)
|
||||
assertSnapshot(of: html, as: .html)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private extension ViewController {
|
||||
|
||||
func render(_ route: SiteRoute.View, logger: Logger) async throws -> String {
|
||||
let html = try await view(.init(route, isHtmxRequest: true, logger: logger))
|
||||
return html.renderFormatted()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
<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="w-8 h-8">
|
||||
<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"></path>
|
||||
<path d="M9.6 4.6A2 2 0 1 1 11 8H2"></path>
|
||||
<path d="M12.6 19.4A2 2 0 1 0 14 16H2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Attic Ventilation Calculator</h2>
|
||||
</div>
|
||||
<form hx-post="/attic-ventilation" hx-target="#result">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div>
|
||||
<label for="pressureDifferential" class="block text-sm font-medium mb-2">Pressure Differential: (Pascals - WRT outside)</label>
|
||||
<input id="pressureDifferential" placeholder="Pressure differential" name="pressureDifferential" 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" step="0.1" autofocus required>
|
||||
</div>
|
||||
<p class="text-sm text-light mt-2">Positive values indicate higher attic pressure</p>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="font-bold mb-6">Outdoor Conditions</p>
|
||||
<div>
|
||||
<label for="outdoorTemperature" class="block text-sm font-medium mb-2">Temperature: (°F)</label>
|
||||
<input id="outdoorTemperature" placeholder="Outdoor temperature" name="outdoorTemperature" 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 mb-4" type="number" step="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="outdoorDewpoint" class="block text-sm font-medium mb-2">Dew Point: (°F)</label>
|
||||
<input id="outdoorDewpoint" placeholder="Outdoor dewpoint" name="outdoorDewpoint" 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" step="0.1" required>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold mb-6">Attic Conditions</p>
|
||||
<div>
|
||||
<label for="atticTemperature" class="block text-sm font-medium mb-2">Temperature: (°F)</label>
|
||||
<input id="atticTemperature" placeholder="Attic temperature" name="atticTemperature" 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 mb-4" type="number" step="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="atticDewpoint" class="block text-sm font-medium mb-2">Dew Point: (°F)</label>
|
||||
<input id="atticDewpoint" placeholder="Attic dewpoint" name="atticDewpoint" 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" step="0.1" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="atticFloorArea" class="block text-sm font-medium mb-2">Attic Floor Area: (ft²)</label>
|
||||
<input id="atticFloorArea" placeholder="Attic floor area" name="atticFloorArea" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="existingIntakeArea" class="block text-sm font-medium mb-2">Existing Intake Area: (ft²)</label>
|
||||
<input id="existingIntakeArea" placeholder="Intake area (optional)" name="existingIntakeArea" 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 mb-4" type="number" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="existingExhaustArea" class="block text-sm font-medium mb-2">Existing Exhaust Area: (ft²)</label>
|
||||
<input id="existingExhaustArea" placeholder="Exhaust area (optional)" name="existingExhaustArea" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
</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">Calculate Ventilation</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
@@ -0,0 +1,90 @@
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="block text-blue-500">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g clip-path="url(#clip0_429_11128)">
|
||||
<path d="M20 3.99994H4L9.6 11.4666C9.85964 11.8128 10 12.2339 10 12.6666V19.9999L14 17.9999V12.6666C14 12.2339 14.1404 11.8128 14.4 11.4666L20 3.99994Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_429_11128"> <rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Filter Pressure Drop - Basic</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-0 mb-6">
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-yellow-300 enabled:hover:bg-yellow-400
|
||||
text-blue-600 rounded-s-lg" disabled type="button">Basic</button>
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-blue-500 enabled:hover:bg-blue-600
|
||||
text-yellow-300 rounded-e-lg" hx-target="#content" hx-push-url="true" hx-get="/filter-pressure-drop?mode=fanLaw" type="button">Fan Law</button>
|
||||
</div>
|
||||
</div>
|
||||
<form hx-post="/filter-pressure-drop" hx-target="#result">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold mb-4">System Parameters</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-4 space-y-6">
|
||||
<div>
|
||||
<label for="systemSize" class="block text-sm font-medium mb-2">System Size: (Tons)</label>
|
||||
<input id="systemSize" placeholder="Tons" name="systemSize" 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" step="0.5" min="1.0" autofocus required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="climateZone" class="block text-sm font-medium mb-2">Climate Zone</label>
|
||||
<select id="climateZone" name="climateZone" class="w-full rounded-md border px-4 py-2 min-h-11">
|
||||
<option value="hotHumid">Hot Humid (1A, 2A)</option>
|
||||
<option value="moist">Moist (3A, 4A, 5A, 6A, 7A)</option>
|
||||
<option value="dry">Dry (2B, 3B, 4B, 5B, 6B, 7B)</option>
|
||||
<option value="marine">Marine (3C, 4C)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filterType" class="block text-sm font-medium mb-2">Filter Type</label>
|
||||
<select id="filterType" name="filterType" class="w-full rounded-md border px-4 py-2 min-h-11">
|
||||
<option value="fiberglass">Fiberglass (MERV 1-4)</option>
|
||||
<option value="pleatedBasic">Basic Pleated (MERV 5-8)</option>
|
||||
<option value="pleatedBetter">Better Pleated (MERV 9-12)</option>
|
||||
<option value="pleatedBest">Best Pleated (MERV 13-16)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 lg:mt-0">
|
||||
<h4 class="text-lg font-bold mb-4">Filter Parameters</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-4 space-y-6">
|
||||
<div>
|
||||
<label for="filterWidth" class="block text-sm font-medium mb-2">Width: (in)</label>
|
||||
<input id="filterWidth" placeholder="Width" name="filterWidth" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filterHeight" class="block text-sm font-medium mb-2">Height: (in)</label>
|
||||
<input id="filterHeight" placeholder="Height" name="filterHeight" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Calculate Pressure Drop</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
@@ -0,0 +1,90 @@
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="block text-blue-500">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g clip-path="url(#clip0_429_11128)">
|
||||
<path d="M20 3.99994H4L9.6 11.4666C9.85964 11.8128 10 12.2339 10 12.6666V19.9999L14 17.9999V12.6666C14 12.2339 14.1404 11.8128 14.4 11.4666L20 3.99994Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_429_11128"> <rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Filter Pressure Drop - Basic</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-0 mb-6">
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-yellow-300 enabled:hover:bg-yellow-400
|
||||
text-blue-600 rounded-s-lg" disabled type="button">Basic</button>
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-blue-500 enabled:hover:bg-blue-600
|
||||
text-yellow-300 rounded-e-lg" hx-target="#content" hx-push-url="true" hx-get="/filter-pressure-drop?mode=fanLaw" type="button">Fan Law</button>
|
||||
</div>
|
||||
</div>
|
||||
<form hx-post="/filter-pressure-drop" hx-target="#result">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div>
|
||||
<h4 class="text-lg font-bold mb-4">System Parameters</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-4 space-y-6">
|
||||
<div>
|
||||
<label for="systemSize" class="block text-sm font-medium mb-2">System Size: (Tons)</label>
|
||||
<input id="systemSize" placeholder="Tons" name="systemSize" 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" step="0.5" min="1.0" autofocus required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="climateZone" class="block text-sm font-medium mb-2">Climate Zone</label>
|
||||
<select id="climateZone" name="climateZone" class="w-full rounded-md border px-4 py-2 min-h-11">
|
||||
<option value="hotHumid">Hot Humid (1A, 2A)</option>
|
||||
<option value="moist">Moist (3A, 4A, 5A, 6A, 7A)</option>
|
||||
<option value="dry">Dry (2B, 3B, 4B, 5B, 6B, 7B)</option>
|
||||
<option value="marine">Marine (3C, 4C)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filterType" class="block text-sm font-medium mb-2">Filter Type</label>
|
||||
<select id="filterType" name="filterType" class="w-full rounded-md border px-4 py-2 min-h-11">
|
||||
<option value="fiberglass">Fiberglass (MERV 1-4)</option>
|
||||
<option value="pleatedBasic">Basic Pleated (MERV 5-8)</option>
|
||||
<option value="pleatedBetter">Better Pleated (MERV 9-12)</option>
|
||||
<option value="pleatedBest">Best Pleated (MERV 13-16)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 lg:mt-0">
|
||||
<h4 class="text-lg font-bold mb-4">Filter Parameters</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-x-4 space-y-6">
|
||||
<div>
|
||||
<label for="filterWidth" class="block text-sm font-medium mb-2">Width: (in)</label>
|
||||
<input id="filterWidth" placeholder="Width" name="filterWidth" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filterHeight" class="block text-sm font-medium mb-2">Height: (in)</label>
|
||||
<input id="filterHeight" placeholder="Height" name="filterHeight" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Calculate Pressure Drop</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
@@ -0,0 +1,93 @@
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="block text-blue-500">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g clip-path="url(#clip0_429_11128)">
|
||||
<path d="M20 3.99994H4L9.6 11.4666C9.85964 11.8128 10 12.2339 10 12.6666V19.9999L14 17.9999V12.6666C14 12.2339 14.1404 11.8128 14.4 11.4666L20 3.99994Z" stroke="currentColor" stroke-width="2.5" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_429_11128"> <rect width="24" height="24" fill="white"></rect>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Filter Pressure Drop - Fan Law</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-0 mb-6">
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-blue-500 enabled:hover:bg-blue-600
|
||||
text-yellow-300 rounded-s-lg" hx-target="#content" hx-push-url="true" hx-get="/filter-pressure-drop?mode=basic" type="button">Basic</button>
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-yellow-300 enabled:hover:bg-yellow-400
|
||||
text-blue-600 rounded-e-lg" disabled type="button">Fan Law</button>
|
||||
</div>
|
||||
</div>
|
||||
<form hx-post="/filter-pressure-drop" hx-target="#result">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div class="mt-6 lg:mt-0">
|
||||
<h4 class="text-lg font-bold mb-4">Filter Parameters</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-4 space-y-6">
|
||||
<div>
|
||||
<label for="filterWidth" class="block text-sm font-medium mb-2">Width: (in)</label>
|
||||
<input id="filterWidth" placeholder="Width" name="filterWidth" 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" step="0.1" min="0.1" required autofocus>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filterHeight" class="block text-sm font-medium mb-2">Height: (in)</label>
|
||||
<input id="filterHeight" placeholder="Height" name="filterHeight" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="filterDepth" class="block text-sm font-medium mb-2">Depth: (in)</label>
|
||||
<input id="filterDepth" placeholder="Depth" name="filterDepth" 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" step="1.0" min="1.0" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 lg:mt-0">
|
||||
<h4 class="text-lg font-bold mb-4">Airflow Parameters</h4>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-x-4 space-y-6">
|
||||
<div>
|
||||
<label for="ratedAirflow" class="block text-sm font-medium mb-2">Rated Airflow: (CFM)</label>
|
||||
<input id="ratedAirflow" placeholder="Rated or measured Airflow" name="ratedAirflow" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ratedPressureDrop" class="block text-sm font-medium mb-2">Filter Pressure Drop: (in. w.c.)</label>
|
||||
<input id="ratedPressureDrop" placeholder="Rated or measured pressure drop" name="ratedPressureDrop" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="designAirflow" class="block text-sm font-medium mb-2">Design Airflow: (CFM)</label>
|
||||
<input id="designAirflow" placeholder="Design or target airflow" name="designAirflow" 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" step="1.0" min="1.0" required>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">Calculate Pressure Drop</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
@@ -0,0 +1,42 @@
|
||||
<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="/filter-pressure-drop?mode=basic" hx-target="#content">Reset</button>
|
||||
</div>
|
||||
<div class=" grid grid-cols-1 lg:grid-cols-2 gap-6 rounded-lg shadow-lg
|
||||
border border-blue-600 text-blue-600 bg-blue-100 p-6">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Filter Face Area</p>
|
||||
<h3 class="text-3xl font-extrabold">3.47<span class="text-lg ms-2">ft²</span></h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Filter Face Velocity</p>
|
||||
<h3 class="text-3xl font-extrabold">201.6<span class="text-lg ms-2">FPM</span></h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Initial Pressure Drop</p>
|
||||
<h3 class="text-3xl font-extrabold">0.2"<span class="text-lg ms-2">w.c.</span></h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Maximum Allowable Pressure Drop</p>
|
||||
<h3 class="text-3xl font-extrabold">0.15"<span class="text-lg ms-2">w.c.</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="warnings" class=" mt-6 p-4 rounded-lg shadow-lg
|
||||
text-amber-500
|
||||
bg-amber-100 dark:bg-amber-200
|
||||
border border-amber-500">
|
||||
<span class="font-semibold mb-4 border-b border-amber-500">Warning:</span>
|
||||
<ul class="list-disc mx-10 mt-4">
|
||||
<li>
|
||||
Initial pressure drop is more than 50% of maximum allowable - consider using a larger filter or different
|
||||
filter type with lower initial pressure drop.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
<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="/filter-pressure-drop?mode=fanLaw" hx-target="#content">Reset</button>
|
||||
</div>
|
||||
<div class=" grid grid-cols-1 lg:grid-cols-2 gap-6 rounded-lg shadow-lg
|
||||
border border-blue-600 text-blue-600 bg-blue-100 p-6">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Filter Face Velocity</p>
|
||||
<h3 class="text-3xl font-extrabold">259.2<span class="text-lg ms-2">FPM</span></h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Predicted Pressure Drop</p>
|
||||
<h3 class="text-3xl font-extrabold">0.13"<span class="text-lg ms-2">w.c.</span></h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Velocity Ratio</p>
|
||||
<h3 class="text-3xl font-extrabold">1.12</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Pressure Ratio</p>
|
||||
<h3 class="text-3xl font-extrabold">1.27</h3>
|
||||
</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">
|
||||
Predictions are based on fan laws where pressure drop varies with the square of the airflow ratio.
|
||||
Results assume similar air properties and filter loading conditions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,93 @@
|
||||
<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="/attic-ventilation" hx-target="#content">Reset</button>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<div class=" w-full rounded-lg shadow-lg border-2 p-6 border-amber-500
|
||||
text-amber-500 bg-amber-200">
|
||||
<div class="flex text-2xl mb-6">
|
||||
<div class="block text-amber-500">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path stroke="currentColor" d="M12 9C11.1077 8.98562 10.2363 9.27003 9.52424 9.808C8.81222 10.346 8.30055 11.1066 8.07061 11.9688C7.84068 12.8311 7.90568 13.7455 8.25529 14.5665C8.6049 15.3876 9.21904 16.0682 10 16.5M12 3V5M6.6 18.4L5.2 19.8M4 13H2M6.6 7.6L5.2 6.2M20 14.5351V4C20 2.89543 19.1046 2 18 2C16.8954 2 16 2.89543 16 4V14.5351C14.8044 15.2267 14 16.5194 14 18C14 20.2091 15.7909 22 18 22C20.2091 22 22 20.2091 22 18C22 16.5194 21.1956 15.2267 20 14.5351Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h4 class="font-extrabold ms-2">Ventilation Status: Inadequate</h4>
|
||||
</div>
|
||||
<div class="grid justify-items-stretch grid-cols-1 md:grid-cols-3">
|
||||
<div class="justify-self-center">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Temperature Differential</p>
|
||||
<h3 class="text-3xl font-extrabold">0 °F</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-self-center">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Dewpoint Differential</p>
|
||||
<h3 class="text-3xl font-extrabold">9 °F</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-self-center">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Pressure Differential</p>
|
||||
<h3 class="text-3xl font-extrabold">1 °F</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" w-full rounded-lg border p-6 border-blue-600 text-blue-600 bg-blue-100 dark:bg-blue-300">
|
||||
<div class="flex text-2xl mb-6">
|
||||
<h4 class="font-extrabold ms-2">Required Ventilation</h4>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 content-center">
|
||||
<div class="justify-self-center">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Intake</p>
|
||||
<h3 class="text-3xl font-extrabold">4.9 ft²</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-self-center">
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<p class="font-medium">Exhaust</p>
|
||||
<h3 class="text-3xl font-extrabold">3.3 ft²</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<h4 class="font-bold">Recommendations:</h4>
|
||||
<ul class="list-disc mx-10">
|
||||
<li>Add 4.9 ft² of intake ventilation.</li>
|
||||
<li>Add 3.3 ft² of exhaust ventilation.</li>
|
||||
<li>Consider adding more exhaust ventilation to balance pressure.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="warnings" class=" mt-6 p-4 rounded-lg shadow-lg
|
||||
text-amber-500
|
||||
bg-amber-100 dark:bg-amber-200
|
||||
border border-amber-500">
|
||||
<span class="font-semibold mb-4 border-b border-amber-500">Warning:</span>
|
||||
<ul class="list-disc mx-10 mt-4">
|
||||
<li>High moisture levels in the attic - increased ventilation is recommended</li>
|
||||
</ul>
|
||||
</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">
|
||||
Calculations are based on standard ventilation guidelines and building codes.
|
||||
Local codes may vary. Consider consulting with a qualified professional for specific
|
||||
recommendations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,52 @@
|
||||
<div class="relative">
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<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-zap">
|
||||
<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Capacitor Calculator - Test Capacitor</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-0 mb-6">
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-yellow-300 enabled:hover:bg-yellow-400
|
||||
text-blue-600 rounded-s-lg" disabled type="button">Test Capacitor</button>
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-blue-500 enabled:hover:bg-blue-600
|
||||
text-yellow-300 rounded-e-lg" hx-target="#content" hx-push-url="true" hx-get="/capacitor-calculator?mode=size" type="button">Size Capacitor</button>
|
||||
</div>
|
||||
</div>
|
||||
<form hx-post="/capacitor-calculator" hx-target="#result" class="mt-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="startWindingAmps" class="block text-sm font-medium mb-2">Start Winding: (amps)</label>
|
||||
<input id="startWindingAmps" placeholder="Current amps" name="startWindingAmps" 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" step="0.1" min="0.1" autofocus required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="runToCommonVoltage" class="block text-sm font-medium mb-2">Run to Common: (volts)</label>
|
||||
<input id="runToCommonVoltage" placeholder="Voltage" name="runToCommonVoltage" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ratedCapacitorSize" class="block text-sm font-medium mb-2">Capacitor Rated Size: (µF)</label>
|
||||
<input id="ratedCapacitorSize" placeholder="Size (optional)" name="ratedCapacitorSize" 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" step="0.1" min="0.1">
|
||||
</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">Test Capacitor</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,52 @@
|
||||
<div class="relative">
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<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-zap">
|
||||
<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Capacitor Calculator - Size Capacitor</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-0 mb-6">
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-blue-500 enabled:hover:bg-blue-600
|
||||
text-yellow-300 rounded-s-lg" hx-target="#content" hx-push-url="true" hx-get="/capacitor-calculator?mode=test" type="button">Test Capacitor</button>
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-yellow-300 enabled:hover:bg-yellow-400
|
||||
text-blue-600 rounded-e-lg" disabled type="button">Size Capacitor</button>
|
||||
</div>
|
||||
</div>
|
||||
<form hx-post="/capacitor-calculator" hx-target="#result" class="mt-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="runningAmps" class="block text-sm font-medium mb-2">Running Current: (amps)</label>
|
||||
<input id="runningAmps" placeholder="Current amps" name="runningAmps" 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" step="0.1" min="0.1" autofocus required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="lineVoltage" class="block text-sm font-medium mb-2">Line Voltage</label>
|
||||
<input id="lineVoltage" placeholder="Voltage" name="lineVoltage" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="powerFactor" class="block text-sm font-medium mb-2">Power Factor</label>
|
||||
<input id="powerFactor" placeholder="Power factor (0-1)" name="powerFactor" 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" step="0.01" min="0.1" max="1.00" required>
|
||||
</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">Calculate Size</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,52 @@
|
||||
<div class="relative">
|
||||
<div class="flex flex-wrap justify-between">
|
||||
<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-zap">
|
||||
<path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Capacitor Calculator - Test Capacitor</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-0 mb-6">
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-yellow-300 enabled:hover:bg-yellow-400
|
||||
text-blue-600 rounded-s-lg" disabled type="button">Test Capacitor</button>
|
||||
<button class=" font-bold py-2 px-4 transition-colors
|
||||
bg-blue-500 enabled:hover:bg-blue-600
|
||||
text-yellow-300 rounded-e-lg" hx-target="#content" hx-push-url="true" hx-get="/capacitor-calculator?mode=size" type="button">Size Capacitor</button>
|
||||
</div>
|
||||
</div>
|
||||
<form hx-post="/capacitor-calculator" hx-target="#result" class="mt-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="startWindingAmps" class="block text-sm font-medium mb-2">Start Winding: (amps)</label>
|
||||
<input id="startWindingAmps" placeholder="Current amps" name="startWindingAmps" 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" step="0.1" min="0.1" autofocus required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="runToCommonVoltage" class="block text-sm font-medium mb-2">Run to Common: (volts)</label>
|
||||
<input id="runToCommonVoltage" placeholder="Voltage" name="runToCommonVoltage" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="ratedCapacitorSize" class="block text-sm font-medium mb-2">Capacitor Rated Size: (µF)</label>
|
||||
<input id="ratedCapacitorSize" placeholder="Size (optional)" name="ratedCapacitorSize" 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" step="0.1" min="0.1">
|
||||
</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">Test Capacitor</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,32 @@
|
||||
<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="/capacitor-calculator?mode=size" hx-target="#content">Reset</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class=" w-full rounded-lg shadow-lg p-4
|
||||
border-2 border-blue-600 bg-blue-100 text-blue-600">
|
||||
<div class="flex justify-center"><span class="font-extrabold">Required Capacitor Size</span></div>
|
||||
<div class="flex justify-between mb-2"><span class="font-semibold">Recommended Standard Size</span><span>60.0 µF</span></div>
|
||||
<div class="flex justify-between mb-2"><span class="font-semibold">Calculated Size:</span><span>59.6 µF</span></div>
|
||||
<div class="flex justify-between mb-2"><span class="font-semibold">Acceptable Range (±6%):</span><span>57.2 - 63.2 µF</span></div>
|
||||
</div>
|
||||
<div id="warnings" class=" mt-6 p-4 rounded-lg shadow-lg
|
||||
text-amber-500
|
||||
bg-amber-100 dark:bg-amber-200
|
||||
border border-amber-500">
|
||||
<span class="font-extrabold">Important Notes:</span>
|
||||
<ul class="list-disc mx-10 mt-4">
|
||||
<li>Always verify voltage rating matches the application.</li>
|
||||
<li>Use the next larger size if exact match is unavailable.</li>
|
||||
<li>Ensure capacitor is rated for continuous duty.</li>
|
||||
<li>Consider ambient temperature in final selection.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
<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="/capacitor-calculator?mode=test" hx-target="#content">Reset</button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid grid-cols-1 gap-4 mt-8">
|
||||
<div class="bg-blue-100 rounded-lg border-2 border-blue-600 text-blue-500 px-4 pb-4">
|
||||
<div class="flex justify-center mb-6 mt-2"><span class="text-2xl font-extrabold">Measured</span></div>
|
||||
<div class="flex justify-between mb-2"><span class="font-semibold">Capacitance</span><span>33.26 µF</span></div>
|
||||
<div class="flex justify-between mb-2"><span class="font-semibold">Acceptable Range (±6%):</span><span>31.9 - 35.3 µF</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
<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">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path>
|
||||
<path d="M12.56 6.6A10.97 10.97 0 0014 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 01-11.91 4.97"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-extrabold">Dehumidifier Sizing Calculator</h2>
|
||||
</div>
|
||||
<form hx-post="/dehumidifier-sizing" hx-target="#result">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="latentLoad" class="block text-sm font-medium mb-2">Latent Load (BTU/h)</label>
|
||||
<input id="latentLoad" placeholder="Latent load from Manual-J" name="latentLoad" 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" step="0.1" min="0.1" autofocus required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="temperature" class="block text-sm font-medium mb-2">Indoor Temperature (°F)</label>
|
||||
<input id="temperature" placeholder="Indoor dry bulb temperature" name="temperature" 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" step="0.1" min="0.1" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="humidity" class="block text-sm font-medium mb-2">Indoor Humdity (%)</label>
|
||||
<input id="humidity" placeholder="Relative humidity" name="humidity" 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" step="0.1" min="0.1" required>
|
||||
</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">Calculate Dehumidifier Size</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div id="result"></div>
|
||||
@@ -0,0 +1,59 @@
|
||||
<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="/dehumidifier-sizing" hx-target="#content">Reset</button>
|
||||
</div>
|
||||
<div class="py-4 block">
|
||||
<div class="mb-6 sm:grid sm:grid-cols-1 sm:gap-4 lg:flex items-center lg:justify-between
|
||||
text-blue-500 dark:text-slate-200">
|
||||
<div><span class="font-semibold">Base Moisture Load: </span><span class="font-light">78.4 pints/day</span></div>
|
||||
</div>
|
||||
<p class="font-semibold mb-4 dark:text-yellow-300">Recommended Size:</p><a target="_blank" href="https://www.santa-fe-products.com/product/ultra98-dehumidifier/" rel="noopener noreferrer">
|
||||
<div class=" px-8 py-2 flex items-center justify-between border border-blue-700 rounded-lg shadow-lg group
|
||||
dark:bg-blue-400 hover:bg-blue-300 hover:dark:bg-blue-600
|
||||
transition-colors">
|
||||
<div>
|
||||
<span class="font-extrabold text-4xl text-blue-800">100 PPD</span>
|
||||
<p class="text-sm mt-1">Click to view recommended model →</p>
|
||||
</div>
|
||||
<div class=" w-12 h-12 rounded-full flex items-center justify-center
|
||||
bg-blue-500 dark:bg-blue-600
|
||||
group-hover:bg-blue-600 group-hover:dark:bg-blue-700
|
||||
transition-colors">
|
||||
<div class="block text-white">
|
||||
<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">
|
||||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path d="M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z"></path>
|
||||
<path d="M12.56 6.6A10.97 10.97 0 0014 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 01-11.91 4.97"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div></a>
|
||||
</div>
|
||||
<div id="warnings" class=" mt-6 p-4 rounded-lg shadow-lg
|
||||
text-amber-500
|
||||
bg-amber-100 dark:bg-amber-200
|
||||
border border-amber-500">
|
||||
<span class="font-semibold mb-4 border-b border-amber-500">Warning:</span>
|
||||
<ul class="list-disc mx-10 mt-4">
|
||||
<li>High relative humidity - unit may need to run continuously.</li>
|
||||
</ul>
|
||||
</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">
|
||||
Sizing is based on continuous operation at rated conditions. Actual performance will vary based on
|
||||
operating conditions. Consider Energy Star rated units for better efficiency. For whole-house
|
||||
applications, ensure proper air distribution and drainage.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user