Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Michał Woźniak
covid
Commits
18af46f2
Commit
18af46f2
authored
Apr 21, 2020
by
Michał Woźniak
Browse files
getting close to having settings in the URL
parent
f0629b20
Changes
2
Hide whitespace changes
Inline
Side-by-side
covid.js
View file @
18af46f2
...
...
@@ -1348,7 +1348,7 @@ let updateChartData = (siteSelect) => {
var
start_at_date
=
false
if
(
start_at
===
'
date
'
)
{
start_at_date
=
document
.
querySelector
(
'
input[type=date][name=chart-start-
date
]
'
).
value
.
replace
(
/-0/g
,
'
-
'
)
start_at_date
=
document
.
querySelector
(
'
input[type=date][name=chart-start-
from
]
'
).
value
.
replace
(
/-0/g
,
'
-
'
)
}
else
if
(
population_ratio
)
{
start_at
=
start_at
*
population_ratio
}
...
...
@@ -1704,17 +1704,59 @@ let getSitesFromUrlString = (sites_string) => {
.
filter
(
site
=>
(
site
!==
undefined
))
}
/*
* get sites and settings from window.location.hash
*/
let
processUrlHash
=
(
hash
)
=>
{
// remove the "#" if present
if
(
hash
[
0
]
===
'
#
'
)
{
hash
=
hash
.
substr
(
1
)
}
// ";" is used as a separator of options and sites
// with sites coming last
sites_hash
=
hash
.
split
(
'
;
'
)
sites_hash
=
sites_hash
[
sites_hash
.
length
-
1
]
// return the data
return
{
sites
:
getSitesFromUrlString
(
sites_hash
),
settings
:
{}
}
}
/*
* assemble and set the url hash
* without firing a hashchange event
*/
let
updateUrlHash
=
()
=>
{
// get selected sites
var
selected_sites
=
[]
for
(
let
sselect
of
sitesSelects
)
{
selected_sites
.
push
(
sselect
.
value
.
toLowerCase
().
replace
(
/
[^
a-z0-9
]
/g
,
'
-
'
))
}
// set the radio button groups to their defaults
var
selected_settings
=
[]
document
.
querySelectorAll
(
'
.chart-config-container input[type=radio]
'
)
.
forEach
((
r
)
=>
{
// if the state is different than default
if
(
r
.
checked
&&
!
r
.
defaultChecked
)
{
selected_settings
.
push
(
r
.
id
.
split
(
'
-
'
).
slice
(
-
1
)[
0
])
}
})
// and all other inputs to their default values
document
.
querySelectorAll
(
'
.chart-config-container input:not([type=radio])
'
)
.
forEach
((
r
)
=>
{
if
(
r
.
defaultValue
!=
r
.
value
)
{
selected_settings
.
push
(
r
.
id
.
split
(
'
-
'
).
slice
(
-
1
)[
0
]
+
"
:
"
+
r
.
value
)
}
})
// using History.pushState() because we don't want the onhashchange event to fire
history
.
pushState
({},
''
,
'
#
'
+
selected_sites
.
join
(
'
,
'
))
history
.
pushState
({},
''
,
'
#
'
+
selected_settings
.
join
(
'
,
'
)
+
'
;
'
+
selected_sites
.
join
(
'
,
'
))
}
...
...
@@ -1751,7 +1793,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
}
})
})
document
.
querySelectorAll
(
'
input[type=date][name=chart-start-
date
]
'
).
forEach
((
node
)
=>
{
document
.
querySelectorAll
(
'
input[type=date][name=chart-start-
from
]
'
).
forEach
((
node
)
=>
{
node
.
addEventListener
(
'
change
'
,
(
e
)
=>
{
// Chrome/Chromium cannot into min/max on an input[type=date]
if
(
e
.
target
.
value
>
e
.
target
.
max
)
{
...
...
@@ -1766,7 +1808,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
})
})
// when the user clicks on the date picker, we can assume they want to do a start-on-a-date chart
document
.
querySelector
(
'
input[type=date][name=chart-start-
date
]
'
).
addEventListener
(
'
click
'
,
(
e
)
=>
{
document
.
querySelector
(
'
input[type=date][name=chart-start-
from
]
'
).
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
target
.
parentElement
.
click
()
})
...
...
@@ -1986,9 +2028,9 @@ document.addEventListener('DOMContentLoaded', (e)=>{
document
.
querySelector
(
'
#covid-stats > #death-to-case > .value
'
).
innerHTML
=
"
~
"
+
Math
.
round
(
data
.
death_to_case
*
10000
)
/
100
+
'
%
'
// update the interface
document
.
querySelector
(
'
input[type=date][name=chart-start-
date
]
'
).
min
=
siteData
[
'
Global
'
].
data
[
0
].
date
.
replace
(
/-
([
0-9
](?![
0-9
]))
/g
,
'
-0$1
'
)
document
.
querySelector
(
'
input[type=date][name=chart-start-
date
]
'
).
value
=
siteData
[
'
Global
'
].
data
[
0
].
date
.
replace
(
/-
([
0-9
](?![
0-9
]))
/g
,
'
-0$1
'
)
document
.
querySelector
(
'
input[type=date][name=chart-start-
date
]
'
).
max
=
data
.
date
.
replace
(
/-
([
0-9
](?![
0-9
]))
/g
,
'
-0$1
'
)
document
.
querySelector
(
'
input[type=date][name=chart-start-
from
]
'
).
min
=
siteData
[
'
Global
'
].
data
[
0
].
date
.
replace
(
/-
([
0-9
](?![
0-9
]))
/g
,
'
-0$1
'
)
document
.
querySelector
(
'
input[type=date][name=chart-start-
from
]
'
).
value
=
siteData
[
'
Global
'
].
data
[
0
].
date
.
replace
(
/-
([
0-9
](?![
0-9
]))
/g
,
'
-0$1
'
)
document
.
querySelector
(
'
input[type=date][name=chart-start-
from
]
'
).
max
=
data
.
date
.
replace
(
/-
([
0-9
](?![
0-9
]))
/g
,
'
-0$1
'
)
for
(
site
in
sites
)
{
var
cOpt
=
document
.
createElement
(
"
option
"
);
...
...
@@ -2055,7 +2097,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
console
.
log
(
` got hash:
${
window
.
location
.
hash
}
`
)
// get the actual site names from the URL hash (sans '#')
hash_sites
=
getSitesFromUrlString
(
window
.
location
.
hash
.
s
ubstr
(
1
))
hash_sites
=
processUrlHash
(
window
.
location
.
hash
)
.
s
ites
// any site data containers to be removed?
if
(
sitesSelects
.
length
-
hash_sites
.
length
>
0
)
{
...
...
index.html
View file @
18af46f2
...
...
@@ -541,7 +541,7 @@
<div
class=
"break"
></div>
<div
class=
"chart-config-group"
>
<p>
Start
</p>
<label
for=
"chart-start-date"
>
on:
<input
type=
"date"
name=
"chart-start-
date
"
value=
"2020-01-22"
min=
"2020-01-22"
/></label>
<label
for=
"chart-start-date"
>
on:
<input
type=
"date"
name=
"chart-start-
from"
id=
"chart-start-from
"
value=
"2020-01-22"
min=
"2020-01-22"
/></label>
<p>
or from:
</p>
<label
for=
"chart-start-first"
>
1st
</label>
<label
for=
"chart-start-tenth"
>
10th
</label>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment