adding URLSearchParam

This commit is contained in:
Frank Knoll
2024-07-28 11:13:40 +02:00
parent 169a60c3b8
commit 9e6be5c6ea
2 changed files with 19 additions and 16 deletions

View File

@@ -7,17 +7,16 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Drugs for Pathologies</title> <title>Drugs for the Treatment of Pathologies</title>
<!-- FK-TODO: reactivate GA: -->
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->
<!-- <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script> <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-ERHYDH4P64"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); } function gtag() { dataLayer.push(arguments); }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'G-ERHYDH4P64'); gtag('config', 'G-ERHYDH4P64');
</script> --> </script>
<!-- Bootstrap --> <!-- Bootstrap -->
<link href="../gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="../gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <link href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
@@ -29,6 +28,8 @@
<script src="./js/PageInitializer.js"></script> <script src="./js/PageInitializer.js"></script>
<script src="./js/DrugsChartView.js"></script> <script src="./js/DrugsChartView.js"></script>
<script src="../Utils.js"></script> <script src="../Utils.js"></script>
<script src="../UrlUtils.js"></script>
<script src="../URLSearchParam.js"></script>
<script src="../Select2.js"></script> <script src="../Select2.js"></script>
<script> <script>
document.addEventListener( document.addEventListener(
@@ -37,7 +38,8 @@
PageInitializer.initializePage( PageInitializer.initializePage(
{ {
pathologySelectElement: $('#pathologySelect'), pathologySelectElement: $('#pathologySelect'),
drugsChartViewElement: document.querySelector("#drugsChartView") drugsChartViewElement: document.querySelector("#drugsChartView"),
urlSearchParam: new URLSearchParam('pathology'),
} }
); );
}); });
@@ -56,10 +58,8 @@
<div> <div>
<div class="page-title"> <div class="page-title">
<div class="title_left"> <div class="title_left">
<h1 id="heading">Drugs for Treatment of Pathologies</h1> <h1 id="heading">Drugs for the Treatment of Pathologies</h1>
<p> <h2 >By Craig Paardekooper</h2>
By Craig Paardekooper
</p>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
@@ -68,7 +68,7 @@
<div class="x_panel"> <div class="x_panel">
<div class="x_content"> <div class="x_content">
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<label>Select Pathology:</label> <label>Select a Pathology:</label>
<select id="pathologySelect" name="pathology"> <select id="pathologySelect" name="pathology">
<option disabled="" hidden="" selected="" value="">Select Pathology</option> <option disabled="" hidden="" selected="" value="">Select Pathology</option>
<option value="1">abdominal discomfort</option> <option value="1">abdominal discomfort</option>
@@ -1128,7 +1128,7 @@
<!-- footer content --> <!-- footer content -->
<footer> <footer>
<!-- AddToAny BEGIN --> <!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-title="EU Safety Signal (All drugs)"> <div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-title="Drugs for the Treatment of Pathologies">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a> <a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a> <a class="a2a_button_twitter"></a>

View File

@@ -1,20 +1,23 @@
class PageInitializer { class PageInitializer {
static initializePage({ pathologySelectElement, drugsChartViewElement }) { static initializePage({ pathologySelectElement, drugsChartViewElement, urlSearchParam }) {
PageInitializer.#configurePathologySelect(pathologySelectElement, drugsChartViewElement); PageInitializer.#configurePathologySelect(pathologySelectElement, drugsChartViewElement, urlSearchParam);
} }
static #configurePathologySelect(pathologySelectElement, drugsChartViewElement) { static #configurePathologySelect(pathologySelectElement, drugsChartViewElement, urlSearchParam) {
const drugsChartView = new DrugsChartView(drugsChartViewElement); const drugsChartView = new DrugsChartView(drugsChartViewElement);
Select2.initializeSelectElement( Select2.initializeSelectElement(
{ {
selectElement: pathologySelectElement, selectElement: pathologySelectElement,
minimumInputLength: 0, minimumInputLength: 0,
textOfOption2Select: null, textOfOption2Select: urlSearchParam.get(),
onSelectOptionHavingValueAndText: (id, text) => { onSelectOptionHavingValueAndText: (id, text) => {
fetch(`data/DrugDescriptionsForPathologies/${id}.json`) fetch(`data/DrugDescriptionsForPathologies/${id}.json`)
.then(response => response.json()) .then(response => response.json())
.then(drugDescr => drugsChartView.displayChart(drugDescr)); .then(drugDescr => {
drugsChartView.displayChart(drugDescr);
urlSearchParam.set(text);
});
} }
}); });
} }