How Do I add this javascript and HTML code into an angular project ? I have placed the func.js in a src folder in my angular project and in my app.component.ts file where I tried to import and use ngAfterViewInit() to load and use the javascript functions
These are the javascript and html files I am trying to add to the angular web app:
funcs.js
const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
questionnaire: 'Questionnaire',
valueset: 'ValueSet'
}
//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getData(res, param, log) {
var data = null;
var url = endpoint + '/' + res + param;
$.ajax({
accepts: {
json: 'application/fhir+json',
xml: 'application/fhir+xml'
},
dataType: 'json',
type: 'GET',
url: url,
async: false,
success: function (response) {
data = response;
if (log)
console.log('getData: SUCCESS - "' + url + '"');
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
},
error: function (err) {
if (log)
console.error('getData: FAILED - "' + url + '"')
}
});
return data;
}
//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
if (lhcJson && 'items' in lhcJson) {
lhcJson.items.forEach(e => {
injectValueSet(e);
});
} else {
if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
}
}
}
//save form
function save() {
var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
// var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
// LForms.Util.addFormToPage(newLform, 'formContainer2');
}
//open file
function openQues() {
var file = $('#file1')[0].files[0];
const fileReader = new FileReader();
fileReader.onload = event => {
var data = JSON.parse(event.target.result);
var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
injectValueSet(lformsQ);
LForms.Util.addFormToPage(lform, 'formContainer');
};
fileReader.onerror = error => console.error("Error loading file!");
fileReader.readAsText(file, "UTF-8");
}
// get valueSet count
function getValueSetCount() {
var count = 0;
var response = getData(resource.valueset, '?_summary=count');
if (response) {
count = response.total;
}
return count;
}
//get all valueSets id
function getValueSetIds() {
var ids = [];
var count = getValueSetCount();
var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
if (response) {
if ('entry' in response && response.entry.length > 0) {
response.entry.forEach(e => {
if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
ids.push({
'id': e.resource.id,
'url': e.resource.url
});
}
});
}
}
return ids;
}
//create valueSet array for form fields
function createValueSetData() {
var data = {}, dataValueSet, failedIds;
var ids = getValueSetIds();
if (ids) {
failedIds = [];
ids.forEach(idSet => {
var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
if (response && 'expansion' in response
&& 'contains' in response.expansion
&& response.expansion.contains.length > 0) {
dataValueSet = [];
response.expansion.contains.forEach(e => {
dataValueSet.push({
'text': e.code + ' - ' + e.display,
'code': e.code
});
});
data[idSet.url] = dataValueSet;
} else {
failedIds.push(idSet.id);
}
});
if (failedIds.length > 0) {
console.error("Failed fetching valueSets for the following IDs: \n Count: "
+ failedIds.length + "\n" + failedIds);
}
}
return data;
}
//save json to file
function saveJsonToFile(json, fileName) {
var textToSave = JSON.stringify(json);
var data = new Blob([textToSave], { type: 'text/plain' });
var textFileURL = window.URL.createObjectURL(data);
var hiddenElement = document.createElement('a');
hiddenElement.href = textFileURL;
hiddenElement.target = '_blank';
hiddenElement.download = fileName + '.txt';
hiddenElement.click();
}
**Html file :**
<!DOCTYPE html>
<html>
<head>
<link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
rel="stylesheet" />
<link href="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css"
rel="stylesheet" />
</head>
<body>
<button onclick="save()">
Save QuestionnaireResponse
</button>
<input type="file" id="file1">
<button onclick="openQues()">
Open QuestionnaireResponse
</button>
<div id="formContainer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
first create a new component through angular cli and add the variable declarations in .ts file i.e
const uName = 'admin';
const uPass = '12345';
const endpoint = 'http://11.11.111.241:8000';
const resource = {
questionnaire: 'Questionnaire',
valueset: 'ValueSet'
}
//get questionnaire
var url = 'http://cihi.ca/fhir/irrs/Questionnaire/abc-abc-community-on';
var quesJson = getData(resource.questionnaire, '?url=' + url);
quesJson = quesJson.entry[0].resource
// saveJsonToFile(quesJson, 'irrsQuesJson');
var copy = $.extend(true, {}, quesJson);
//convert to lhc form
var lformsQ = LForms.Util.convertFHIRQuestionnaireToLForms(quesJson, 'STU3')
// saveJsonToFile(lformsQ, 'lFormJson');
//prepare valuesets
const vsArray = createValueSetData();
//add value sets
injectValueSet(lformsQ);
// saveJsonToFile(lformsQ, 'lFormValueSetInjected');
// Add the form to the page
var options = { 'prepopulate': true };
LForms.Util.addFormToPage(lformsQ, 'formContainer', options);
then in .html page add the html code
<button onclick="save()">
Save QuestionnaireResponse
</button>
<input type="file" id="file1">
<button onclick="openQues()">
Open QuestionnaireResponse
</button>
<div id="formContainer"></div>
and then add the functions inside tag in the html file
function getData(res, param, log) {
var data = null;
var url = endpoint + '/' + res + param;
$.ajax({
accepts: {
json: 'application/fhir+json',
xml: 'application/fhir+xml'
},
dataType: 'json',
type: 'GET',
url: url,
async: false,
success: function (response) {
data = response;
if (log)
console.log('getData: SUCCESS - "' + url + '"');
},
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Basic " + btoa(uName + ":" + uPass));
},
error: function (err) {
if (log)
console.error('getData: FAILED - "' + url + '"')
}
});
return data;
}
//recursively inject valueset into lhc json
function injectValueSet(lhcJson) {
if (lhcJson && 'items' in lhcJson) {
lhcJson.items.forEach(e => {
injectValueSet(e);
});
} else {
if ('answerValueSet' in lhcJson && 'reference' in lhcJson.answerValueSet) {
lhcJson['answers'] = vsArray[lhcJson.answerValueSet.reference];
}
}
}
//save form
function save() {
var quesResp = LForms.Util.getFormFHIRData('QuestionnaireResponse', 'STU3', '#formContainer');
saveJsonToFile(quesResp, 'questionnaireResponse' + '-' + new Date().getTime());
// var newLform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', quesResp, lformsQ, 'STU3');
// LForms.Util.addFormToPage(newLform, 'formContainer2');
}
//open file
function openQues() {
var file = $('#file1')[0].files[0];
const fileReader = new FileReader();
fileReader.onload = event => {
var data = JSON.parse(event.target.result);
var lform = LForms.Util.mergeFHIRDataIntoLForms('QuestionnaireResponse', data, lformsQ, 'STU3');
injectValueSet(lformsQ);
LForms.Util.addFormToPage(lform, 'formContainer');
};
fileReader.onerror = error => console.error("Error loading file!");
fileReader.readAsText(file, "UTF-8");
}
// get valueSet count
function getValueSetCount() {
var count = 0;
var response = getData(resource.valueset, '?_summary=count');
if (response) {
count = response.total;
}
return count;
}
//get all valueSets id
function getValueSetIds() {
var ids = [];
var count = getValueSetCount();
var response = getData(resource.valueset, '?_count=' + count + '&_element=id');
if (response) {
if ('entry' in response && response.entry.length > 0) {
response.entry.forEach(e => {
if ('resource' in e && 'id' in e.resource && 'url' in e.resource) {
ids.push({
'id': e.resource.id,
'url': e.resource.url
});
}
});
}
}
return ids;
}
//create valueSet array for form fields
function createValueSetData() {
var data = {}, dataValueSet, failedIds;
var ids = getValueSetIds();
if (ids) {
failedIds = [];
ids.forEach(idSet => {
var response = getData(resource.valueset, '/' + idSet.id + '/$expand');
if (response && 'expansion' in response
&& 'contains' in response.expansion
&& response.expansion.contains.length > 0) {
dataValueSet = [];
response.expansion.contains.forEach(e => {
dataValueSet.push({
'text': e.code + ' - ' + e.display,
'code': e.code
});
});
data[idSet.url] = dataValueSet;
} else {
failedIds.push(idSet.id);
}
});
if (failedIds.length > 0) {
console.error("Failed fetching valueSets for the following IDs: \n Count: "
+ failedIds.length + "\n" + failedIds);
}
}
return data;
}
//save json to file
function saveJsonToFile(json, fileName) {
var textToSave = JSON.stringify(json);
var data = new Blob([textToSave], { type: 'text/plain' });
var textFileURL = window.URL.createObjectURL(data);
var hiddenElement = document.createElement('a');
hiddenElement.href = textFileURL;
hiddenElement.target = '_blank';
hiddenElement.download = fileName + '.txt';
hiddenElement.click();
}
and importantly add all the script imports to index.html the main index which is outside the app folder
add this in head section -
<link href="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/styles/lforms.min.css" media="screen"
rel="stylesheet" />
<link href="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.css"
rel="stylesheet" />
as well as this -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/lforms.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/lforms-versions/17.3.2/fhir/STU3/lformsFHIR.min.js"></script>
<script src="https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.3/autocomplete-lhc.min.js"></script>
<script src="./index.js"></script>
last but not least add the selector of the created component in the app.component.html file
it should look something like this in created component of .html file add this to app.component.html