Move the study pages out of the NREL CMS #784
Comments
|
the public dashboard has an example of a docker container that serves up a static page if you look at the docker-compose - the frontend container is the one you want Couple of things to note:
|
|
Ask @zach if I have any questions, because he has just recently worked with the Public Dashboard/Docker |
|
an example of the frontend with the NREL application template is at |
|
|
Here is my repo link: sbarry/study-join-page
I am not sure how to test or run the docker container and the frontend HTML however. @shankari do you have any quick pointers? |
|
next steps are:
Examples:
However, both of those are in angular1. We should look up how to do them in jquery/bootstrap directly (preferred!!!) search terms:
|
|
wrt templating in jquery, there is an existing plugin that, once you include it, you can use with Also, reading the config from github using http is should be using jquery (no which reads the config for the specific study or program name |
|
to add the plugin, you should see if it is included in the version of jquery that they gave us in the application template. |
|
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
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
...
<div id="myContent"></div>
...
$(document).ready( function(){
$(document).ready(function() {
$.tmpl( "${Title}", { "Title" : "Welcome to End Your If" }).appendTo( "#myContent" );
});
...
Is this |
|
@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.
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, and you can also create a hacky version of a template by simply finding the DOM element using jquery ( |
|
I was able to get variables to display in the HTML using the I also was able to read in someone else's JSON data using the
<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
<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? |
|
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. |
|
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 |
|
I have created the first draft of the study join page: https://github.nrel.gov/sbarry/study-join-page/pull/1 Issues:
|
|
While testing the emissionlhd repo on the cloud services page, I get the following error from this code |
|
@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 |
|
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:
|
Updated list of active changes
|
|
|
|
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. |
|
Link to the public dashboard is fixed. |
|
@sebastianbarry once you file the follow-on issue, this can be closed. |
|
Here is the follow-up issue: #811 This issue is good to close |
Instead, define study and program strings, and use a ternary expression to return the correct value. This fixes e-mission/e-mission-docs#784 (comment)
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/joinhttps://<study>-openpath.nrel.gov/publicThose links do work, however they are not the official page, they are just redirections to the webpage in the CMSWe 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.
The text was updated successfully, but these errors were encountered: