Search code examples
javascriptangularangular7angular8angular-components

How Do I add this javascript and HTML code into an angular project? and can i render html from javascript function in angular?


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>

Solution

  • 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