127 lines
4.6 KiB
Swift
127 lines
4.6 KiB
Swift
import Elementary
|
|
import ElementaryHTMX
|
|
import PsychrometricClient
|
|
import Routes
|
|
import Styleguide
|
|
|
|
struct PsychrometricsForm: HTML, Sendable {
|
|
|
|
// let mode: Psychrometrics.Mode
|
|
let response: Psychrometrics.Response?
|
|
|
|
init(response: Psychrometrics.Response? = nil) {
|
|
self.response = response
|
|
}
|
|
|
|
var content: some HTML {
|
|
FormHeader(label: "Psychrometric Properties", svg: .droplets)
|
|
|
|
form(
|
|
.hx.post(route: .psychrometrics(.index)),
|
|
.hx.target("#result")
|
|
) {
|
|
div(.class("space-y-6")) {
|
|
div(.class("grid grid-cols-1 lg:grid-cols-2 gap-4")) {
|
|
LabeledContent(label: "Temperature (°F)") {
|
|
Input(id: Psychrometrics.Request.FieldKey.temperature.rawValue, placeholder: "Dry bulb temperature")
|
|
.attributes(.type(.number), .min("0.1"), .step("0.1"), .autofocus, .required)
|
|
}
|
|
LabeledContent(label: "Relative Humidity (%)") {
|
|
Input(id: Psychrometrics.Request.FieldKey.humidity.rawValue, placeholder: "Relative humidity")
|
|
.attributes(.type(.number), .min("0.1"), .step("0.1"), .max("100"), .required)
|
|
}
|
|
}
|
|
|
|
LabeledContent(label: "Altitude (ft.)") {
|
|
Input(id: Psychrometrics.Request.FieldKey.altitude.rawValue, placeholder: "Altitude (optional)")
|
|
.attributes(.type(.number), .min("0.1"), .step("0.1"))
|
|
}
|
|
|
|
div {
|
|
SubmitButton(label: "Calculate Psychrometrics")
|
|
}
|
|
}
|
|
}
|
|
|
|
div(.id("result")) {
|
|
if let response {
|
|
PsychrometricsResponse(response: response)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct PsychrometricsResponse: HTML, Sendable {
|
|
let response: Psychrometrics.Response
|
|
|
|
var content: some HTML {
|
|
ResultContainer(reset: .psychrometrics(.index)) {
|
|
div(.class("w-full rounded-lg shadow-lg bg-blue-100 border border-blue-600 text-blue-600 p-6")) {
|
|
div(.class("flex mb-8")) {
|
|
SVG(.droplets, color: "text-blue-600")
|
|
h3(.class("text-xl px-2 font-semibold")) { "Psychrometrics" }
|
|
}
|
|
div(.class("grid grid-cols-3 gap-4")) {
|
|
div(.class("rounded-lg bg-purple-200 border border-purple-600 text-purple-600")) {
|
|
VerticalGroup(
|
|
label: "Dew Point",
|
|
value: "\(double: response.properties.dewPoint.value, fractionDigits: 1)",
|
|
valueLabel: response.properties.dewPoint.units.symbol
|
|
)
|
|
.attributes(.class("my-8"))
|
|
}
|
|
div(.class("rounded-lg bg-orange-200 border border-orange-600 text-orange-600")) {
|
|
VerticalGroup(
|
|
label: "Enthalpy",
|
|
value: "\(double: response.properties.enthalpy.value, fractionDigits: 1)",
|
|
valueLabel: response.properties.enthalpy.units.rawValue
|
|
)
|
|
.attributes(.class("my-8"))
|
|
}
|
|
div(.class("rounded-lg bg-green-200 border border-green-600 text-green-600")) {
|
|
VerticalGroup(
|
|
label: "Wet Bulb",
|
|
value: "\(double: response.properties.wetBulb.value, fractionDigits: 1)",
|
|
valueLabel: response.properties.wetBulb.units.symbol
|
|
)
|
|
.attributes(.class("my-8"))
|
|
}
|
|
}
|
|
|
|
div(.class("mt-8")) {
|
|
h4(.class("text-lg font-semibold")) { "Other Properties" }
|
|
div(.class("rounded-lg border border-blue-300")) {
|
|
displayProperty("Density", \.density.rawValue)
|
|
displayProperty("Vapor Pressure", \.vaporPressure.rawValue)
|
|
displayProperty("Specific Volume", response.properties.specificVolume.rawValue)
|
|
displayProperty("Absolute Humidity", \.absoluteHumidity)
|
|
displayProperty("Humidity Ratio", response.properties.humidityRatio.value)
|
|
displayProperty("Degree of Saturation", response.properties.degreeOfSaturation.value)
|
|
}
|
|
}
|
|
}
|
|
|
|
WarningBox(warnings: response.warnings)
|
|
}
|
|
}
|
|
|
|
private func displayProperty(_ label: String, _ value: Double, _ symbol: String? = nil) -> some HTML {
|
|
let symbol = "\(symbol == nil ? "" : " \(symbol!)")"
|
|
|
|
return div(.class("flex items-center justify-between border-b border-blue-300 p-2")) {
|
|
span(.class("font-semibold")) { "\(label): " }
|
|
span(.class("font-light")) {
|
|
"\(double: value, fractionDigits: 2)\(symbol)"
|
|
}
|
|
}
|
|
}
|
|
|
|
private func displayProperty<N: NumberWithUnitOfMeasure>(
|
|
_ label: String,
|
|
_ keyPath: KeyPath<PsychrometricProperties, N>
|
|
) -> some HTML where N.Number == Double, N.Units: RawRepresentable, N.Units.RawValue == String {
|
|
let property = response.properties[keyPath: keyPath]
|
|
return displayProperty(label, property.rawValue, property.units.rawValue)
|
|
}
|
|
}
|