Move the study pages out of the NREL CMS

[sebastianbarry]

Currently, the NREL study webpages are in the Content Management System (similar to wordpress; very simple; can't write Javascript)

We have these 4 study-specific static pages (Open access, Commute Study, Durham, Wyoming). These were meant to be a set of the services that we create for every study (every page would have a join page, a rest API, it's own public dashboard, and it's own admin dashboard): https://<study>-openpath.nrel.gov/join https://<study>-openpath.nrel.gov/publicThose links do work, however they are not the official page, they are just redirections to the webpage in the CMS

We need to recreate a docker container that will run in the join page and run NodeJS (HTML/JS page) - will not be a redirect to the CMS anymore. The JS reads the config just like we read the JS config on the phone app, which fills in the study-specific details over the general templates.

• Keeping the CMS requires us communicating with NREL Comms which becomes more time-consuming and discussion related

[sebastianbarry]

the public dashboard has an example of a docker container that serves up a static page
https://github.com/e-mission/em-public-dashboard

if you look at the docker-compose - the frontend container is the one you want
you could use that docker-compose as a template and just replace the files in frontend with your own files to create the container

Couple of things to note:

• we should really create this in a separate repo (the public dashboard will be its own container)
• the NREL template uses (I think) only jquery and bootstrap, so the angular1 templating from the phone app won't work directly. You will need to figure out how to use templates with bootstrap/query.

[sebastianbarry]

Ask @zach if I have any questions, because he has just recently worked with the Public Dashboard/Docker

[shankari]

an example of the frontend with the NREL application template is at
e-mission/em-public-dashboard#50

[sebastianbarry]

1. Copy Zach's PR into sbarry/study-join-page
2. Coy the current Study page HTML
3. Replace Zach's HTML with that
4. Add the DOE logo (copy and paste from Theresa's link for the Bioenergy page which contains the DOE logo inside of an application template)

[sebastianbarry]

Here is my repo link: sbarry/study-join-page
I have done steps 1 - 3:

1. Copy Zach's PR into sbarry/study-join-page
2. Copy the current Study page HTML
3. Replace Zach's HTML with that

I am not sure how to test or run the docker container and the frontend HTML however. @shankari do you have any quick pointers?

[shankari]

next steps are:

1. read the config from github using http
2. pull out values from the config to "fill in" the template

Examples:

1. https://github.com/e-mission/e-mission-phone/blob/master_for_platform/www/js/config/dynamic_config.js#L50
2. https://github.com/e-mission/e-mission-phone/blob/master_for_platform/www/templates/intro/consent-text.html#L26

However, both of those are in angular1.
We should not use angular1 since it is EOL.

We should look up how to do them in jquery/bootstrap directly (preferred!!!)
or in more modern frameworks such as react or angular10 (less preferred, because we need to potentially get permission)

search terms:

• read HTML page using jquery/bootstrap/angular10/react
• templating in jquery/bootstrap/angular10/react

[shankari]

wrt templating in jquery, there is an existing plugin that, once you include it, you can use with {} just like we do in angular1.
https://www.endyourif.com/jquery-creating-templates-for-your-html-content/

Also, reading the config from github using http is should be using jquery (no $http) but there's an example here:
https://github.com/e-mission/em-public-dashboard/pull/50/files#diff-959f9cada636604db33bc1ba82fed347457dcb032c37ac195b4343c5f0ea6e72R349

which reads the config for the specific study or program name

[shankari]

to add the plugin, you should see if it is included in the version of jquery that they gave us in the application template.
If not, they have a file (https://github.com/e-mission/em-public-dashboard/pull/50/files#diff-5d90f055d1aa7b10e49a81122c5c38dd67b1f160f34eb1b580f1bb484b98a6d8) which says that we should minify and include the plugins, so we can include it there.

[sebastianbarry]

I made some progress in getting the JQuery templating to work, but I am still getting hung up:

The examples in this guide shows the template existing as a <script></script> within the HTML:

I tried this within our app and it works:

...
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
...
<div id="myContent"></div>
                <script>
                $(document).ready(function() {
                $.tmpl( "${Title}", { "Title" : "Welcome to End Your If" }).appendTo( "#myContent" );
                });
                </script>
...

Now, I want to move this script to the app.js file so that we can begin reading a config JSON file from GitHub. However, when I try to move the script to within the app.js file, it does not work:

index.html

...
<div id="myContent"></div>
...

app.js

 $(document).ready( function(){
    $(document).ready(function() {
      $.tmpl( "${Title}", { "Title" : "Welcome to End Your If" }).appendTo( "#myContent" );
    });
...

Is this <div id=...></div> the only way of templating through JQuery? If it is that is fine, but we also discussed using {myVar} curly brackets to template in JQuery

[shankari]

@sebastianbarry this only the first version of the join screen, so it is fine to have code inline in the HTML for now. If we want to do anything more complicated, we might want to switch to a real javascript framework such as react.

Now, I want to move this script to the app.js file so that we can begin reading a config JSON file from GitHub. However, when I try to move the script to within the app.js file, it does not work:

This is not strictly needed - you can read the config JSON file from GitHub in an inline script as well. That is what Zack is doing for the public dashboard.

Sorry, I don't have time to debug the use of jquery in a separate file.

Also, you should avoid loading scripts from a CDN if possible; NREL cyber security prefers loading scripts from a container so that they can be scanned for vulnerabilities. If you do need to continue using the template, you should download it, minify it and add it to the file that I showed above.

javascript now has templating by default,
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

and you can also create a hacky version of a template by simply finding the DOM element using jquery ($('.<element_id') and appending the string that you have read from the config.

[sebastianbarry]

I was able to get variables to display in the HTML using the <script></script> elements below, using the hardcoded "Welcome to End Your If"

I also was able to read in someone else's JSON data using the .getJSON() funciton

<div id="myContent"></div>
               <script>
                $(document).ready(function() {
                  $.getJSON("https://bioinfobot.github.io/data/2017-05.json", function(json) {
                  console.log(json); 
                  });

                  $.tmpl( "${Title}", { "Title" : "Welcome to End Your If" }).appendTo( "#myContent" );
                
                });
               </script>

However, when I try to read our own JSON data by simply changing the URL, I get this error despite adding the Access-Control-Allow-Origin in the header:

<div id="myContent"></div>
               <script>
                $(document).ready(function() {
                  $.ajax({
                    type: 'GET',
                    headers:{    
                      'Accept': 'application/json',
                      'Content-Type': 'application/json',
                      'Access-Control-Allow-Origin': '*' 
                    },
                    url: 'https://github.com/e-mission/nrel-openpath-deploy-configs/blob/main/configs/open-access.nrel-op.json',
                    dataType: 'json',
                    success: function (data) {
                      alert(JSON.stringify(data));
                    }
                  });
                });
               </script>

Is there a way to work around this error message? Or am I trying to read the GitHub page in an incorrect way?

[shankari]

tl;dr: The public dashboard works. Please follow it exactly. Not sure I have time to debug custom setups right now.

---

Can you use the exact same code as we do in the public dashboard? It works there.
Also, can you please confirm that you are running the website through a HTTP server, similar to the public dashboard?

[sebastianbarry]

So that I am not hard-coding the "open-study" study, this PR shows how to dynamically select the study: https://github.com/e-mission/em-public-dashboard/pull/54/files#diff-959f9cada636604db33bc1ba82fed347457dcb032c37ac195b4343c5f0ea6e72

[sebastianbarry]

I have created the first draft of the study join page: https://github.nrel.gov/sbarry/study-join-page/pull/1

Issues:

• Currently, the QR join code is only displaying the Open Study QR code, I have not input the other studies/programs yet
• Also, because the config JSON files do not currently contain the program questions (i.e. "Examples of research that might use the data include:Comparing the open-access group (no intervention) and programs that provide interventions. General monitoring of mobility trends for travel behavior, including shifts to travel behavior and the introduction of new mobility modes.
  ")

[shankari]

While testing the emissionlhd repo on the cloud services page, I get the following error

Uncaught TypeError: invalid assignment to const 'tokenPrivacyInfoText'
    <anonymous> http://localhost:3274/?study_config=stage-study:423
    jQuery 8
    <anonymous> http://localhost:3274/?study_config=stage-study:414
    jQuery 9
    <anonymous> http://localhost:3274/?study_config=stage-study:412
    jQuery 13
[localhost:3274:423:15](http://localhost:3274/?study_config=stage-study)
    <anonymous> http://localhost:3274/?study_config=stage-study:423
    jQuery 8
    <anonymous> http://localhost:3274/?study_config=stage-study:414
    jQuery 9
    <anonymous> http://localhost:3274/?study_config=stage-study:412
    jQuery 13

from this code

            const tokenPrivacyInfoText = '';

            if(programOrStudy == 'study') {
              tokenPrivacyInfoText = "You will log in using a token generated by the phone app. Only you know your token. Since we don’t collect email or phone number, there is no “Forgot password” functionality. NREL staff cannot identify your account or restore your data without your token. You should save this token in case you change phones.";
              $('#tokenType').append("an autogenerated ");
            } else if(programOrStudy == 'program') {
              tokenPrivacyInfoText = "You have been provided with a token by" + deploymentPartnerNameText + "to log in to the app. Please save this token in a safe place in case you need to reset your phone or change phones. If you have lost your token, please contact your admin at" + deploymentPartnerNameText + "for assistance.";
              $('#tokenType').append("a program-provided ");
            }

[shankari]

@sebastianbarry are you going to be able to make all the changes needed for the study page tomorrow morning or should I take over?

https://openpath-stage.nrel.gov/join/ is now pointing to the new join page container but it looks wrong.

[sebastianbarry]

@sebastianbarry are you going to be able to make all the changes needed for the study page tomorrow morning or should I take over?

https://openpath-stage.nrel.gov/join/ is now pointing to the new join page container but it looks wrong.

I believe I will have this done by tonight, I am currently stuck on a lab assignment for my school but once I'm finished I will work on this

[sebastianbarry]

Here is the active PR for making changes to the NREL Comms repo for the STUDY JOIN PAGE: https://github.nrel.gov/nrel-cloud-computing/emissionlhd-study-join-page/pull/6

List of active changes:

• The numbered list and bullet points are not displaying in the "Install OpenPATH" and "Data privacy" sections
• In the custom scripts, there are a mixture of .append's and .text's. Collate these and organize them to be readable and friendly
• In the custom scripts, the const names are all in camel-case. Make these all caps to indicate they are const's
• There are 2 join code generations, collate these together to avoid replicating and breaking code later on
• The navigation links at the top are not present at the moment. Uncomment the HTML for the generic templated links, and have them link to the public dashboard, as well as the participant guidelines and the TSDC which are simple static links
• The "Examples of research that might use the data include" section is hard coded for the moment, despite these being specific to the study/program. Have these be added to the configs files, and have the scripts read in these research data questions, and bullet list them
• Have the NREL OpenPATH title card at the very top left of the screen link to the NREL.gov open path page (https://nrel.gov/openpath).
• Change the text of the NREL OpenPATH title card at the very top left of the screen to reflect the program/study. Please see the public dashboard as an example of how to do this.
• "Thank you for participating" always says "NREL Open-Access Study"
• Images are not loading on https://openpath-stage.nrel.gov/join/

[sebastianbarry]

Updated list of active changes

• The "Examples of research that might use the data include" section is hard coded for the moment, despite these being specific to the study/program. Have these be added to the configs files, and have the scripts read in these research data questions, and bullet list them (handled in https://github.nrel.gov/nrel-cloud-computing/emissionlhd-study-join-page/pull/10 and Sbarry Config Files changes nrel-openpath-deploy-configs#5)
• The "share" button at the bottom is still not working (handled in https://github.nrel.gov/nrel-cloud-computing/emissionlhd-study-join-page/pull/9)
• There is some redundant text coming from the deploy-configs (being handled in Sbarry Config Files changes nrel-openpath-deploy-configs#5)

[sebastianbarry]

[shankari]

Once the link to the public dashboard is fixed, we should close this issue and open a new one for addressing real-world feedback. We can then prioritize that against all the other usability tasks that we have.

[shankari]

Link to the public dashboard is fixed.
@sebastianbarry please file the follow-on issue to improve the join pages along with any pending tasks and close this one.

[shankari]

@sebastianbarry once you file the follow-on issue, this can be closed.

[sebastianbarry]

Here is the follow-up issue: #811

This issue is good to close