105 lines
3.6 KiB
Swift
105 lines
3.6 KiB
Swift
import Elementary
|
|
import PsychrometricClient
|
|
import Routes
|
|
import Styleguide
|
|
|
|
struct MoldRiskForm: HTML {
|
|
|
|
var content: some HTML {
|
|
FormHeader(label: "Mold Risk Calculator", svg: .thermometer)
|
|
form(.action("#")) {
|
|
div(.class("space-y-6")) {
|
|
LabeledContent(label: "Indoor Temperature (°F)") {
|
|
Input(id: "temperature", placeholder: "Dry bulb temperature")
|
|
.attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus)
|
|
}
|
|
|
|
LabeledContent(label: "Indor Humdity (%)") {
|
|
Input(id: "humidity", placeholder: "Relative humidity")
|
|
.attributes(.type(.number), .step("0.1"), .min("0.1"))
|
|
}
|
|
|
|
div {
|
|
SubmitButton(label: "Calculate Mold Risk")
|
|
}
|
|
|
|
div(.id("result")) {
|
|
MoldRiskResponse(response: .mock)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct MoldRiskResponse: HTML {
|
|
let response: MoldRisk.Response
|
|
|
|
var content: some HTML {
|
|
ResultContainer {
|
|
// TODO: Color needs to be derived from risk level.
|
|
div(.class("p-2 rounded-lg shadow-lg bg-lime-100 border-2 border border-lime-600")) {
|
|
LabeledContent {
|
|
p(.class("text-lg font-semibold \(text: .green) dark:text-lime-600 mt-2")) {
|
|
"Risk Level: \(response.riskLevel.rawValue.capitalized)"
|
|
}
|
|
} label: {
|
|
SVG(.exclamation, color: "text-green-600 dark:text-lime-600")
|
|
}
|
|
.attributes(.class("flex items-center gap-2"))
|
|
}
|
|
|
|
PsychrometricPropertiesGrid(properties: response.psychrometricProperties)
|
|
.attributes(.class("mx-6"))
|
|
|
|
div(.class("mt-8 p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md border border-blue-500")) {
|
|
p(.class("text-sm text-blue-500")) {
|
|
span(.class("font-extrabold pe-2")) { "Note:" }
|
|
"""
|
|
These calculations are based on typical indoor conditions and common mold species. Actual mold growth can
|
|
vary based on surface materials, air movement, and other environmental factors. Always address moisture
|
|
issues promptly and consult professionals for severe cases.
|
|
"""
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
struct PsychrometricPropertiesGrid: HTML {
|
|
let properties: PsychrometricProperties
|
|
|
|
var content: some HTML<HTMLTag.div> {
|
|
div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6 md:mx-20")) {
|
|
displayProperty("Dew Point", \.dewPoint.rawValue)
|
|
displayProperty("Wet Bulb", \.wetBulb.rawValue)
|
|
displayProperty("Enthalpy", \.enthalpy.rawValue)
|
|
displayProperty("Density", \.density.rawValue)
|
|
displayProperty("Vapor Pressure", \.vaporPressure.rawValue)
|
|
displayProperty("Specific Volume", properties.specificVolume.rawValue)
|
|
displayProperty("Absolute Humidity", \.absoluteHumidity)
|
|
displayProperty("Humidity Ratio", properties.humidityRatio.value)
|
|
displayProperty("Degree of Saturation", properties.degreeOfSaturation.value)
|
|
}
|
|
}
|
|
|
|
private func displayProperty(_ label: String, _ value: Double, _ symbol: String? = nil) -> some HTML {
|
|
let symbol = "\(symbol == nil ? "" : " \(symbol!)")"
|
|
|
|
return p(.class("text-blue-500 dark:text-slate-200")) {
|
|
span(.class("font-semibold")) { "\(label): " }
|
|
span(.class("font-light")) {
|
|
"\(double: value)\(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 = properties[keyPath: keyPath]
|
|
return displayProperty(label, property.rawValue, property.units.rawValue)
|
|
}
|
|
|
|
}
|