100 lines
3.1 KiB
Swift
100 lines
3.1 KiB
Swift
|
|
struct RouteViews: HtmlProducer {
|
|
|
|
let localization: RouteLocalization
|
|
|
|
/// The HTML id attribute used to enable fullscreen images
|
|
let map: PageImage
|
|
|
|
let displayedTypes: Set<RouteStatisticType>
|
|
|
|
let mapId: String
|
|
|
|
let mapTitle: String?
|
|
|
|
let filePath: String
|
|
|
|
let chartId: String
|
|
|
|
let chartTitle: String?
|
|
|
|
init(localization: RouteLocalization,
|
|
chartTitle: String?,
|
|
chartId: String,
|
|
displayedTypes: Set<RouteStatisticType>,
|
|
mapTitle: String?,
|
|
mapId: String,
|
|
filePath: String,
|
|
imageId: String,
|
|
thumbnail: ImageSet,
|
|
largeImage: ImageSet,
|
|
caption: String?
|
|
) {
|
|
self.localization = localization
|
|
self.displayedTypes = displayedTypes
|
|
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
|
|
}
|
|
|
|
private func button(series: RouteStatisticType) -> String {
|
|
let label = localization.statistics[series]!
|
|
return "<button data-type='\(series.id)' unit='\(series.unit)' name='\(label)'>\(series.icon.usageString)<span class='label'>\(label)</span></button>"
|
|
}
|
|
|
|
func populate(_ result: inout String) {
|
|
if let mapTitle {
|
|
result += "<h2>\(mapTitle)</h2>"
|
|
}
|
|
map.populate(&result)
|
|
|
|
let series = displayedTypes.sorted()
|
|
guard !series.isEmpty else {
|
|
return
|
|
}
|
|
if let chartTitle {
|
|
result += "<h2>\(chartTitle)</h2>"
|
|
}
|
|
result += "<div id='\(chartId)' class='charts'>"
|
|
result += "<div class='picker icon-picker y-picker'>"
|
|
for type in series {
|
|
result += button(series: type)
|
|
}
|
|
result += "</div>" // Picker
|
|
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>" // Graph
|
|
result += "<div class='picker text-picker x-picker'>"
|
|
result += "<button data-type='distance' unit='km'>\(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>" // Picker
|
|
result += "</div>" // Chart
|
|
}
|
|
|
|
var script: String {
|
|
"""
|
|
<script>
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
initializeGraphs(document, '\(mapId)', '\(chartId)', '\(filePath)');
|
|
});
|
|
</script>
|
|
"""
|
|
}
|
|
}
|