Merge branch 'main' into pages
merging main into pages
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -5,34 +5,31 @@ class PageInitializer {
|
||||
PageInitializer.#configureVaccine(vaccine);
|
||||
}
|
||||
|
||||
static #configureSymptom({ symptomSelectElement, prrByVaccineTableElement, downloadPrrByVaccineTableButton, keyColumnName }) {
|
||||
static #configureSymptom({ symptomSelectElement, searchParam, prrByVaccineTableElement, downloadPrrByVaccineTableButton, keyColumnName }) {
|
||||
const prrByVaccineTableView = new PrrByVaccineTableView(prrByVaccineTableElement, downloadPrrByVaccineTableButton, keyColumnName);
|
||||
PageInitializer.#initializeSelectElement(
|
||||
Select2.initializeSelectElement(
|
||||
{
|
||||
selectElement: symptomSelectElement,
|
||||
onValueSelected: (id, text) => prrByVaccineTableView.displayPrrByVaccineTable4Symptom(id, text),
|
||||
textOfOption2Select: searchParam.get(),
|
||||
onSelectOptionHavingValueAndText: (id, text) => {
|
||||
prrByVaccineTableView.displayPrrByVaccineTable4Symptom(id, text);
|
||||
searchParam.set(text);
|
||||
},
|
||||
minimumInputLength: 0
|
||||
});
|
||||
}
|
||||
|
||||
static #configureVaccine({ vaccineSelectElement, prrBySymptomTableElement, downloadPrrBySymptomTableButton, valueName }) {
|
||||
static #configureVaccine({ vaccineSelectElement, searchParam, prrBySymptomTableElement, downloadPrrBySymptomTableButton, valueName }) {
|
||||
const prrBySymptomTableView = new PrrBySymptomTableView(prrBySymptomTableElement, downloadPrrBySymptomTableButton, valueName);
|
||||
PageInitializer.#initializeSelectElement(
|
||||
Select2.initializeSelectElement(
|
||||
{
|
||||
selectElement: vaccineSelectElement,
|
||||
onValueSelected: (id, text) => prrBySymptomTableView.displayPrrBySymptomTable4Vaccine(id ,text),
|
||||
textOfOption2Select: searchParam.get(),
|
||||
onSelectOptionHavingValueAndText: (id, text) => {
|
||||
prrBySymptomTableView.displayPrrBySymptomTable4Vaccine(id, text);
|
||||
searchParam.set(text);
|
||||
},
|
||||
minimumInputLength: 0
|
||||
});
|
||||
}
|
||||
|
||||
static #initializeSelectElement({ selectElement, onValueSelected, minimumInputLength }) {
|
||||
selectElement.select2({ minimumInputLength: minimumInputLength });
|
||||
selectElement.on(
|
||||
'select2:select',
|
||||
function (event) {
|
||||
const id = event.params.data.id;
|
||||
const text = event.params.data.text;
|
||||
onValueSelected(id, text);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ class PrrByKeyTableView {
|
||||
}
|
||||
|
||||
#downloadPrrByKey() {
|
||||
UIUtils.downloadUrlAsFilename(
|
||||
UrlUtils.downloadUrlAsFilename(
|
||||
window.URL.createObjectURL(
|
||||
new Blob(
|
||||
[this.#prrByKeyTable.getDisplayedTableAsCsv(`# ${this.#valueName}: ${this.#text}`)],
|
||||
|
||||
16
docs/SymptomsCausedByDrugs/js/SearchParam.js
Normal file
16
docs/SymptomsCausedByDrugs/js/SearchParam.js
Normal file
@@ -0,0 +1,16 @@
|
||||
class SearchParam {
|
||||
|
||||
#name;
|
||||
|
||||
constructor(name) {
|
||||
this.#name = name;
|
||||
}
|
||||
|
||||
get() {
|
||||
return UrlUtils.getSearchParamOfCurrentUrl(this.#name);
|
||||
}
|
||||
|
||||
set(value) {
|
||||
UrlUtils.setSearchParamOfCurrentUrl(this.#name, value);
|
||||
}
|
||||
}
|
||||
50
docs/SymptomsCausedByDrugs/js/Select2.js
Normal file
50
docs/SymptomsCausedByDrugs/js/Select2.js
Normal file
@@ -0,0 +1,50 @@
|
||||
class Select2 {
|
||||
|
||||
static initializeSelectElement(
|
||||
{
|
||||
selectElement,
|
||||
textOfOption2Select,
|
||||
onSelectOptionHavingValueAndText,
|
||||
minimumInputLength
|
||||
}) {
|
||||
selectElement.select2({ minimumInputLength: minimumInputLength });
|
||||
selectElement.on(
|
||||
'select2:select',
|
||||
function (event) {
|
||||
const id = event.params.data.id;
|
||||
const text = event.params.data.text;
|
||||
onSelectOptionHavingValueAndText(id, text);
|
||||
});
|
||||
Select2.#selectOptionHavingText(selectElement, textOfOption2Select);
|
||||
}
|
||||
|
||||
static #selectOptionHavingText(selectElement, text) {
|
||||
const option = Select2.#getOptionHavingText(selectElement, text);
|
||||
if (option === undefined) {
|
||||
return;
|
||||
}
|
||||
Select2.#selectOption(selectElement, option);
|
||||
}
|
||||
|
||||
static #getOptionHavingText(selectElement, text) {
|
||||
if (text === null) {
|
||||
return undefined;
|
||||
}
|
||||
return Array
|
||||
.from(selectElement[0].options)
|
||||
.find(option => option.text == text);
|
||||
}
|
||||
|
||||
static #selectOption(selectElement, option) {
|
||||
selectElement.val(option.value).trigger('change');
|
||||
selectElement.trigger({
|
||||
type: 'select2:select',
|
||||
params: {
|
||||
data: {
|
||||
"id": option.value,
|
||||
"text": option.text
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -11,13 +11,13 @@
|
||||
<script src="../../Utils.js"></script>
|
||||
<script src="../../UIUtils.js"></script>
|
||||
<script src="../../NumberWithBarElementFactory.js"></script>
|
||||
<script src="../js/PrrByKey2CsvConverter.js"></script>
|
||||
<script src="../js/PageInitializer.js"></script>
|
||||
<script src="../js/PrrByVaccineProvider.js"></script>
|
||||
<script src="../js/PrrByKeyTable.js"></script>
|
||||
<script src="../js/PrrByKeyTableView.js"></script>
|
||||
<script src="../js/PrrByVaccineTableView.js"></script>
|
||||
<script src="../js/PrrBySymptomTableView.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PrrByKey2CsvConverter.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PageInitializer.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PrrByVaccineProvider.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PrrByKeyTable.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PrrByKeyTableView.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PrrByVaccineTableView.js"></script>
|
||||
<script src="../../SymptomsCausedByDrugs/js/PrrBySymptomTableView.js"></script>
|
||||
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.17.2.css">
|
||||
<script src="https://code.jquery.com/qunit/qunit-2.17.2.js"></script>
|
||||
<script type="text/javascript" src="./jshamcrest.js"></script>
|
||||
|
||||
@@ -20,75 +20,11 @@ class UIUtils {
|
||||
return document.getElementById(templateId).content.firstElementChild.cloneNode(true);
|
||||
}
|
||||
|
||||
static createCanvas() {
|
||||
return UIUtils.instantiateTemplate('template-canvas');
|
||||
}
|
||||
|
||||
static clear(container) {
|
||||
container.replaceChildren();
|
||||
}
|
||||
|
||||
static createChartViewElementWithHeading(heading) {
|
||||
const chartViewElement = UIUtils.instantiateTemplate('template-ChartView');
|
||||
chartViewElement.querySelector(".heading").textContent = heading;
|
||||
return {
|
||||
chartViewElement: chartViewElement,
|
||||
canvas: chartViewElement.querySelector(".canvas")
|
||||
};
|
||||
}
|
||||
|
||||
static getSelectedOption(selectElement) {
|
||||
return selectElement.options[selectElement.selectedIndex];
|
||||
}
|
||||
|
||||
static getYLabelWithPercent(context) {
|
||||
return UIUtils.#getLabelWithPercent(context, context.parsed.y);
|
||||
}
|
||||
|
||||
static getXLabelWithPercent(context) {
|
||||
return UIUtils.#getLabelWithPercent(context, context.parsed.x);
|
||||
}
|
||||
|
||||
static #getLabelWithPercent(context, value) {
|
||||
let label = context.dataset.label || '';
|
||||
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
if (value !== null) {
|
||||
label += value.toFixed(1) + "%";
|
||||
}
|
||||
return label;
|
||||
}
|
||||
|
||||
static getPercentageScale(label) {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
title: {
|
||||
display: true,
|
||||
text: label
|
||||
},
|
||||
ticks: {
|
||||
callback: value => value + "%"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static getSearchParam(urlParams, searchParam, defaultValue) {
|
||||
return urlParams.has(searchParam) ?
|
||||
urlParams.get(searchParam) :
|
||||
defaultValue;
|
||||
}
|
||||
|
||||
static isSearchParamYES(urlParams, searchParam) {
|
||||
return UIUtils.getSearchParam(urlParams, searchParam, 'NO').toUpperCase() == 'YES';
|
||||
}
|
||||
|
||||
static downloadUrlAsFilename(url, filename) {
|
||||
const a = document.createElement('a');
|
||||
a.setAttribute('href', url);
|
||||
a.setAttribute('download', filename);
|
||||
a.click();
|
||||
}
|
||||
}
|
||||
|
||||
38
docs/UrlUtils.js
Normal file
38
docs/UrlUtils.js
Normal file
@@ -0,0 +1,38 @@
|
||||
class UrlUtils {
|
||||
|
||||
static isSearchParamYES(urlParams, searchParam) {
|
||||
return UrlUtils.#getSearchParam(urlParams, searchParam, 'NO').toUpperCase() == 'YES';
|
||||
}
|
||||
|
||||
static getSearchParamOfCurrentUrl(searchParam) {
|
||||
return UrlUtils.#getSearchParam(
|
||||
new URLSearchParams(window.location.search),
|
||||
searchParam,
|
||||
null)
|
||||
}
|
||||
|
||||
static setSearchParamOfCurrentUrl(nameOfSearchParam, valueOfSearchParam) {
|
||||
UrlUtils.#setSearchParam(
|
||||
new URL(window.location.href),
|
||||
nameOfSearchParam,
|
||||
valueOfSearchParam);
|
||||
}
|
||||
|
||||
static downloadUrlAsFilename(url, filename) {
|
||||
const a = document.createElement('a');
|
||||
a.setAttribute('href', url);
|
||||
a.setAttribute('download', filename);
|
||||
a.click();
|
||||
}
|
||||
|
||||
static #getSearchParam(urlParams, searchParam, defaultValue) {
|
||||
return urlParams.has(searchParam) ?
|
||||
urlParams.get(searchParam) :
|
||||
defaultValue;
|
||||
}
|
||||
|
||||
static #setSearchParam(url, nameOfSearchParam, valueOfSearchParam) {
|
||||
url.searchParams.set(nameOfSearchParam, valueOfSearchParam);
|
||||
window.history.replaceState(null, "", url);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
@@ -16,13 +17,20 @@
|
||||
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
|
||||
<link href="batchCodeTable.css" rel="stylesheet" type="text/css" />
|
||||
<link href="forkMeOnGitHub.css" rel="stylesheet" type="text/css" />
|
||||
<script crossorigin="anonymous" integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>
|
||||
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css" integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg==" referrerpolicy="no-referrer" rel="stylesheet"/>
|
||||
<script crossorigin="anonymous"
|
||||
integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w=="
|
||||
referrerpolicy="no-referrer"
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js"></script>
|
||||
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css"
|
||||
integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg=="
|
||||
referrerpolicy="no-referrer" rel="stylesheet" />
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js" type="text/javascript"></script>
|
||||
<script charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"
|
||||
type="text/javascript"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
|
||||
<script src="./Utils.js"></script>
|
||||
<script src="./UIUtils.js"></script>
|
||||
<script src="./UrlUtils.js"></script>
|
||||
<script src="./DataTablesFilter.js"></script>
|
||||
<script src="./ColumnSearch.js"></script>
|
||||
<script src="./BatchCodeTableInitializer.js"></script>
|
||||
@@ -34,12 +42,13 @@
|
||||
new BatchCodeTableInitializer().initialize(
|
||||
{
|
||||
batchCodeTableElement: $('#batchCodeTable'),
|
||||
showCountriesColumn: UIUtils.isSearchParamYES(urlSearchParams, 'showCountriesColumn'),
|
||||
showDataTablesFilter: UIUtils.isSearchParamYES(urlSearchParams, 'showDataTablesFilter'),
|
||||
showCountriesColumn: UrlUtils.isSearchParamYES(urlSearchParams, 'showCountriesColumn'),
|
||||
showDataTablesFilter: UrlUtils.isSearchParamYES(urlSearchParams, 'showDataTablesFilter'),
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Batch Codes of Coronavirus 2019 Vaccines</h1>
|
||||
<table class="display" id="batchCodeTable">
|
||||
@@ -70,9 +79,6 @@
|
||||
GitHub</a></span>
|
||||
<div class="clearfix"></div>
|
||||
</footer>
|
||||
<template id="template-canvas">
|
||||
<canvas></canvas>
|
||||
</template>
|
||||
<template id="template-chartWithSlider">
|
||||
<div class="chartWithSlider">
|
||||
<div class="chartContainer">
|
||||
@@ -85,4 +91,5 @@
|
||||
</div>
|
||||
</template>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user