99 lines
3.1 KiB
Swift
99 lines
3.1 KiB
Swift
|
|
struct RouteViews: HtmlProducer {
|
|
|
|
let localization: RouteLocalization
|
|
|
|
/// The HTML id attribute used to enable fullscreen images
|
|
let map: PageImage
|
|
|
|
let components: RouteViewComponents
|
|
|
|
let mapId: String
|
|
|
|
let mapTitle: String?
|
|
|
|
let filePath: String
|
|
|
|
let chartId: String
|
|
|
|
let chartTitle: String?
|
|
|
|
init(localization: RouteLocalization,
|
|
chartTitle: String?,
|
|
chartId: String,
|
|
components: RouteViewComponents,
|
|
mapTitle: String?,
|
|
mapId: String,
|
|
filePath: String,
|
|
imageId: String,
|
|
thumbnail: ImageSet,
|
|
largeImage: ImageSet,
|
|
caption: String?
|
|
) {
|
|
self.localization = localization
|
|
self.components = components
|
|
self.mapId = mapId
|
|
self.filePath = filePath
|
|
self.map = PageImage(
|
|
imageId: imageId,
|
|
thumbnail: thumbnail,
|
|
largeImage: largeImage,
|
|
caption: caption,
|
|
id: mapId,
|
|
className: "map-container",
|
|
imageContent: "<div class='marker'></div>")
|
|
self.chartTitle = chartTitle
|
|
self.chartId = chartId
|
|
self.mapTitle = mapTitle
|
|
}
|
|
|
|
var pickerHiddenText: String {
|
|
guard components == .onlyElevation else { return "" }
|
|
return " style='display:none'"
|
|
}
|
|
|
|
func populate(_ result: inout String) {
|
|
if let mapTitle {
|
|
result += "<h2>\(mapTitle)</h2>"
|
|
}
|
|
map.populate(&result)
|
|
|
|
if let chartTitle {
|
|
result += "<h2>\(chartTitle)</h2>"
|
|
}
|
|
result += "<div id='\(chartId)' class='charts'>"
|
|
result += "<div class='picker y-picker'\(pickerHiddenText)>"
|
|
result += "<button data-type='elevation' unit='m' class='active'>\(localization.elevation)</button>"
|
|
result += "<button data-type='speed' unit='km/h'>\(localization.speed)</button>"
|
|
result += "<button data-type='pace' unit='min/km'>\(localization.pace)</button>"
|
|
if components == .all {
|
|
result += "<button data-type='hr' unit='bpm'>\(localization.heartRate)</button>"
|
|
}
|
|
result += "</div>"
|
|
result += "<div class='graph'>"
|
|
result += "<canvas>"
|
|
result += "<div class='fallback'>\(localization.fallback)</div>"
|
|
result += "</canvas>"
|
|
result += "<div class='line'></div>"
|
|
result += "<div class='tooltip'></div>"
|
|
result += "<div class='load-error'>\(localization.loadFail)</div>"
|
|
result += "</div>"
|
|
result += "<div class='picker x-picker'\(pickerHiddenText)>"
|
|
result += "<button data-type='distance' unit='km' class='active'>\(localization.distance)</button>"
|
|
result += "<button data-type='duration' unit='\(localization.hourUnit)'>\(localization.duration)</button>"
|
|
result += "<button data-type='time' unit=''>\(localization.time)</button>"
|
|
result += "</div>"
|
|
result += "</div>"
|
|
}
|
|
|
|
var script: String {
|
|
"""
|
|
<script>
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
initializeGraphs(document, '\(mapId)', '\(chartId)', '\(filePath)');
|
|
});
|
|
</script>
|
|
"""
|
|
}
|
|
}
|