refactoring
This commit is contained in:
@@ -1,9 +1,14 @@
|
|||||||
class BatchCodeDetailsView {
|
class BatchCodeDetailsView {
|
||||||
|
|
||||||
#uiContainer;
|
#uiContainer;
|
||||||
|
#adverseReactionReportsChartView;
|
||||||
|
#histogramChartView;
|
||||||
|
|
||||||
constructor(uiContainer) {
|
constructor(uiContainer) {
|
||||||
this.#uiContainer = uiContainer
|
this.#uiContainer = uiContainer
|
||||||
|
this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
|
||||||
|
const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
|
||||||
|
this.#histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
|
||||||
}
|
}
|
||||||
|
|
||||||
// FK-TODO: unbind all events here and in HistogramChartView
|
// FK-TODO: unbind all events here and in HistogramChartView
|
||||||
@@ -28,10 +33,9 @@ class BatchCodeDetailsView {
|
|||||||
this.#displayHeading(histoDescrs.batchcode);
|
this.#displayHeading(histoDescrs.batchcode);
|
||||||
this.#displayData(histoDescrs);
|
this.#displayData(histoDescrs);
|
||||||
const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
|
const chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
|
||||||
const histogramChartView = new HistogramChartView(chartWithSlider.querySelector("canvas"));
|
|
||||||
this.#displayAdverseReactionReportsChart(histoDescrs);
|
this.#displayAdverseReactionReportsChart(histoDescrs);
|
||||||
this.#displaySelectBatchcodeCombination(histoDescrs.histograms, histogramChartView, chartWithSlider);
|
this.#displaySelectBatchcodeCombination(histoDescrs.histograms, this.#histogramChartView, chartWithSlider);
|
||||||
this.#displayHistogram(histoDescrs.histograms[0], histogramChartView, chartWithSlider);
|
this.#displayHistogram(histoDescrs.histograms[0], this.#histogramChartView, chartWithSlider);
|
||||||
}
|
}
|
||||||
|
|
||||||
#displayHeading(batchcode) {
|
#displayHeading(batchcode) {
|
||||||
@@ -41,10 +45,7 @@ class BatchCodeDetailsView {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#displayAdverseReactionReportsChart(histoDescrs) {
|
#displayAdverseReactionReportsChart(histoDescrs) {
|
||||||
const canvas = UIUtils.instantiateTemplate('template-canvas');
|
this.#adverseReactionReportsChartView.displayChart(
|
||||||
this.#uiContainer.appendChild(canvas);
|
|
||||||
const adverseReactionReportsChartView = new AdverseReactionReportsChartView(canvas);
|
|
||||||
adverseReactionReportsChartView.displayChart(
|
|
||||||
{
|
{
|
||||||
'Adverse Reaction Reports': histoDescrs['Adverse Reaction Reports'],
|
'Adverse Reaction Reports': histoDescrs['Adverse Reaction Reports'],
|
||||||
'Deaths': histoDescrs['Deaths'],
|
'Deaths': histoDescrs['Deaths'],
|
||||||
@@ -73,7 +74,6 @@ class BatchCodeDetailsView {
|
|||||||
histograms: histograms,
|
histograms: histograms,
|
||||||
onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
|
onSelect: histoDescr => this.#displayHistogram(histoDescr, histogramChartView, chartWithSlider)
|
||||||
});
|
});
|
||||||
this.#uiContainer.appendChild(selectBatchcodeCombinationElement);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#displayHistogram(histoDescr, histogramChartView, chartWithSlider) {
|
#displayHistogram(histoDescr, histogramChartView, chartWithSlider) {
|
||||||
|
|||||||
@@ -1,12 +1,13 @@
|
|||||||
class BatchCodeSelectInitializer {
|
class BatchCodeSelectInitializer {
|
||||||
|
|
||||||
static initialize({batchCodeSelectElement, batchCodeDetailsElement}) {
|
static initialize({batchCodeSelectElement, batchCodeDetailsElement}) {
|
||||||
|
const batchCodeDetailsView = new BatchCodeDetailsView(batchCodeDetailsElement);
|
||||||
batchCodeSelectElement.select2({ minimumInputLength: 4 });
|
batchCodeSelectElement.select2({ minimumInputLength: 4 });
|
||||||
batchCodeSelectElement.on(
|
batchCodeSelectElement.on(
|
||||||
'select2:select',
|
'select2:select',
|
||||||
function (event) {
|
function (event) {
|
||||||
const batchcode = event.params.data.id;
|
const batchcode = event.params.data.id;
|
||||||
new BatchCodeDetailsView(batchCodeDetailsElement).displayBatchCodeDetails(batchcode);
|
batchCodeDetailsView.displayBatchCodeDetails(batchcode);
|
||||||
GoogleAnalytics.click_batchcode(batchcode);
|
GoogleAnalytics.click_batchcode(batchcode);
|
||||||
});
|
});
|
||||||
batchCodeSelectElement.select2('open');
|
batchCodeSelectElement.select2('open');
|
||||||
|
|||||||
@@ -49764,6 +49764,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<div id="batchCodeDetails" style="width: 50%">
|
<div id="batchCodeDetails" style="width: 50%">
|
||||||
<div id="selectBatchcodeCombination">
|
<div id="selectBatchcodeCombination">
|
||||||
|
<canvas id="adverseReactionReportsChartView"></canvas>
|
||||||
<label>Select batchcode combination:
|
<label>Select batchcode combination:
|
||||||
<select id="batchcodesSelect" name="batchcodes">
|
<select id="batchcodesSelect" name="batchcodes">
|
||||||
</select>
|
</select>
|
||||||
@@ -49785,9 +49786,6 @@
|
|||||||
<p>
|
<p>
|
||||||
<span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
|
<span id="forkongithub"><a href="https://github.com/KnollFrank/HowBadIsMyBatch">Fork me on GitHub</a></span>
|
||||||
</p>
|
</p>
|
||||||
<template id="template-canvas">
|
|
||||||
<canvas></canvas>
|
|
||||||
</template>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user