Commit 18af46f2 authored by Michał Woźniak's avatar Michał Woźniak
Browse files

getting close to having settings in the URL

parent f0629b20
......@@ -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.substr(1))
hash_sites = processUrlHash(window.location.hash).sites
// any site data containers to be removed?
if (sitesSelects.length - hash_sites.length > 0) {
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment