https://flintpipemap.org/js/slider.js

1const lodash = require('lodash')
2const utils = require('./utils.js')
3//const mapd_render = require('./mapd-render.js')
4const map_ = require('./prob_map.js')
5
6var timeParser = utils.timeParser
7var timeFormatter = utils.timeFormatter
8var timeFormatterDR = utils.timeFormatterDR
9var startDate = utils.startDate
10var endDate = utils.endDate
11var numberMonths = utils.numberMonths
12var timeScale = utils.timeScale
13var updateDateReadOut = utils.updateDateReadOut
14var updateIntervalReadOut = utils.updateIntervalReadOut
15var updateRateReadOut = utils.updateRateReadOut
16var updateRemainReadOut = utils.updateRemainReadOut
17var updateSliderValue = utils.updateSliderValue
18//var updateMapPaintProperty = utils.updateMapPaintProperty
19
20var throttle = lodash.throttle
21
22
23//import dispatcher from "../common/dispatcher"
24
25let slider = null
26const WAIT_TIME_MS = 3000
27
28function updateMapPaintProperty(value) {
29
30  var m = resolve(map_.getMap())
31  console.log("Got Map")
32  console.log(m)
33
34  var col_name = `Time_${value}`
35  m.setPaintProperty(
36    'shape_fills',
37    'fill-color',
38    [
39      'match',
40      ['get', col_name],
41      1,
42      '#fbb03b',
43      2,
44      '#223b53',
45      3,
46      '#e55e5e',
47      4,
48      '#3bb2d0',
49      '#ccc'
50    ]
51  )
52
53}
54
55async function handleInput(event) {
56  //for debugging
57  console.log(timeFormatter(timeScale.invert(event.target.value)))
58  // console.log(map_.getMap())
59
60  let promise = new Promise((resolve, reject) => {
61    resolve(map_.getMap())
62  });
63
64  let result = await promise;
65
66  /*console.log("SLIDER!!")
67  console.log(result.expert_status)
68  console.log(event.target.value)
69  console.log(timeFormatter(timeScale.invert(event.target.value)))*/
70
71
72  //mapd_render.updateVega(result, event.target.value)
73  console.log(event.target.value)
74  updateIntervalReadOut(event.target.value)
75  updateRateReadOut(event.target.value)
76  updateRemainReadOut(event.target.value)
77  updateSliderValue(event.target.value)
78  //updateMapPaintProperty(event.target.value)
79  document.getElementById('slider_object').value = event.target.value
80
81
82
83  /*dispatcher.call(
84    "sliderInput",
85    null,
86    timeScale.invert(event.target.value)
87  )*/
88}
89
90async function updateSliderPos(value) {
91  slider.value = value.toString()
92
93  let promise = new Promise((resolve, reject) => {
94    resolve(map_.getMap())
95  })
96
97  let result = await promise
98
99
100  //mapd_render.updateVega(result, value)
101  updateIntervalReadOut(value)
102  updateRateReadOut(value)
103  updateRemainReadOut(value)
104  updateSliderValue(value)
105  /*dispatcher.call(
106    "sliderInput",
107    null,
108    timeScale.invert(value)
109  )*/
110}
111
112function getValue() {
113  return Number(slider.value)
114}
115
116function initSlider() {
117
118  var url_array = window.location.href.split("/")
119  // THIS RIGHT HERE IS WHERE YOU FIX IT. GRAB EVERYTHING BEFORE ?.
120  var url_split = url_array[url_array.length - 1].split("?")
121  var expert_status = url_split[0]
122
123
124  slider = document.querySelector("input.slider")
125  //console.log(numberMonths)
126  //console.log("HERE")
127
128  slider.setAttribute("max", 24)
129
130  slider.addEventListener("input", throttle(handleInput, WAIT_TIME_MS, { leading: true }))
131
132  //console.log("Finish")
133
134  return slider
135}
136
137const test = 5
138
139module.exports = { initSlider, test, getValue, updateSliderPos, handleInput }