Skip to content

Commit

Permalink
Merge pull request #26 from growthcharts/refactorJS
Browse files Browse the repository at this point in the history 
Refactor start.js and update.js
  • Loading branch information
@stefvanbuuren
stefvanbuuren committed Mar 20, 2024
2 parents 0718d0f + 3c0f68a commit fafb23e
Show file tree
Hide file tree
Showing 5 changed files with 406 additions and 495 deletions.
17 changes: 9 additions & 8 deletions inst/www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<script type="text/javascript" src="app/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app/js/ion.rangeSlider.min.js"></script>
<script type="text/javascript" src="app/js/opencpu-0.5-james-0.1.js"></script>
<script type="text/javascript" src="app/js/handleUIVisibility.js"></script>
<script type="text/javascript" src="app/js/update.js"></script>
</head>
<!---->
Expand Down Expand Up @@ -46,7 +47,7 @@
<div class="card" id = "groeicard">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne" id = "groei">
<strong onclick="showPlotdiv()">Groei</strong>
<strong onclick="toggleDisplay('plotDiv', 'textDiv')">Groei</strong>
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
Expand Down Expand Up @@ -117,7 +118,7 @@
<div class="card" id = "ontwikkelingcard">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseTwo" id = "ontwikkeling">
<strong onclick="showPlotdiv()">Ontwikkeling</strong>
<strong onclick="toggleDisplay('plotDiv', 'textDiv')">Ontwikkeling</strong>
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
Expand Down Expand Up @@ -157,7 +158,7 @@
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree" id = "voorspeller">
<strong onclick="showPlotdiv()">Voorspeller</strong>
<strong onclick="toggleDisplay('plotDiv','textDiv')">Voorspeller</strong>
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
Expand All @@ -172,7 +173,7 @@
<div class="form-group" id="donordatagroup">
<label for="donordatagroup"><strong>Voorspel horizon</strong></label>
<div>
<select class="form-control" id="donordata" onchange = "update_donordata()">
<select class="form-control" id="donordata" onchange = "updateDonordata()">
<option value="0-2" selected>Tussen 0-2 jaar</option>
<option value="2-4">Tussen 2-4 jaar</option>
<option value="4-18">Tussen 4-18 jaar</option>
Expand Down Expand Up @@ -230,7 +231,7 @@
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseFour" id = "meldingen">
<strong onclick="showTextdiv()">Meldingen</strong>
<strong onclick="toggleDisplay('textDiv', 'plotDiv')">Meldingen</strong>
</a>
</div>
<div id="collapseFour" class="collapse" data-parent="#accordion">
Expand All @@ -251,9 +252,9 @@

</div>
<div class="col-sm-9 graph" id="plotcontainer">
<div id="plotdiv"></div>
<div id="textdiv" style="display: none;">
<h5 id="version", style="background-color:lightgreen;">JAMES 1.5.6 (20240317), &copy; TNO 2024</h5>
<div id="plotDiv"></div>
<div id="textDiv" style="display: none;">
<h5 id="version", style="background-color:lightgreen;">JAMES 1.5.7 (20240320), &copy; TNO 2024</h5>
<p id="rq1-session" style="background-color:lightgreen;"></p>
<p id="rq1-console" style="white-space: pre-wrap;"></p>
<p id="rq1-warnings" style="white-space: pre-wrap;"></p>
Expand Down
137 changes: 137 additions & 0 deletions inst/www/js/handleUIVisibility.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
function handleUIVisibility(chartgrp, agegrp, population) {
if (chartgrp == 'nl2010') {
sr('agegrp_1-21y', 'block');
sr('weekmenu', 'none');
sr('etnicity', 'block');
}
if (chartgrp == 'preterm') {
sr('agegrp_1-21y', 'none');
sr('weekmenu', 'block');
sr('etnicity', 'none');
}
if (chartgrp == 'who') {
sr('agegrp_1-21y', 'none');
sr('weekmenu', 'none');
sr('etnicity', 'none');
}
if (chartgrp == 'gsed1') {
sr('weekmenu_dsc', 'none');
}
if (chartgrp == 'gsed1pt') {
sr('weekmenu_dsc', 'block');
}

if (agegrp == '0-15m' & chartgrp == 'nl2010' & population == 'nl') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'none');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'block');
}
if (agegrp == '0-15m' & chartgrp == 'nl2010' & population != 'nl') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'none');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'block');
}
if (agegrp == '0-15m' & chartgrp == 'preterm' & population == 'nl') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'none');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'none');
}
if (agegrp == '0-15m' & chartgrp == 'preterm' & population != 'nl') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'none');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'none');
}
if (agegrp == '0-15m' & chartgrp == 'who') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'none');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'none');
}
if (agegrp == '0-4y' & chartgrp == 'nl2010' & population == 'nl') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'block');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'block');
}
if (agegrp == '0-4y' & chartgrp == 'nl2010' & population != 'nl') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'none');
sr('msr_wfh', 'block');
sr('msr_hdc', 'block');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'block');
}
if (agegrp == '0-4y' & chartgrp == 'nl2010' & population == 'hs') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'none');
sr('msr_wfh', 'block');
sr('msr_hdc', 'none');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'block');
}
if (agegrp == '0-4y' & chartgrp == 'preterm') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'block');
sr('msr_wfh', 'none');
sr('msr_hdc', 'none');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'none');
}
if (agegrp == '0-4y' & chartgrp == 'who') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'none');
sr('msr_wfh', 'block');
sr('msr_hdc', 'none');
sr('msr_bmi', 'none');
sr('msr_front', 'block');
sr('msr_back', 'none');
}
if (agegrp == '1-21y' & population != 'hs') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'none');
sr('msr_wfh', 'block');
sr('msr_hdc', 'block');
sr('msr_bmi', 'block');
sr('msr_front', 'block');
sr('msr_back', 'block');
}
if (agegrp == '1-21y' & population == 'hs') {
sr('msr_hgt', 'block');
sr('msr_wgt', 'none');
sr('msr_wfh', 'block');
sr('msr_hdc', 'none');
sr('msr_bmi', 'block');
sr('msr_front', 'block');
sr('msr_back', 'none');
}
}

// Auxiliary function to modify UI element display property
function sr(id, display) {
document.getElementById(id).style.display = display;
}
52 changes: 26 additions & 26 deletions inst/www/js/opencpu-0.5-james-0.1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,11 +164,11 @@ if(!window.jQuery) {
//ajax call
var jqxhr = $.ajax(settings).done(function(){
var key = jqxhr.getResponseHeader('X-ocpu-session') || console.log("X-ocpu-session response header missing.");
if (localapp)
if (isSingleUser)
{
var loc = host + ':80/ocpu/tmp/' + key + '/';
} else {
var loc = host + pathname + '/' + key + '/';
var loc = host + basePath + '/' + key + '/';
}
var txt = jqxhr.responseText;

Expand Down Expand Up @@ -295,37 +295,37 @@ if(!window.jQuery) {
var svgwidth;
var svgheight;

var plotdiv = $('<div />').attr({
var plotDiv = $('<div />').attr({
style: "width: 100%; height:100%; min-width: 100px; min-height: 100px; position:relative; background-repeat:no-repeat; background-size: 100% 100%;"
}).appendTo(targetdiv).css("background-image", "none");

var spinner = $('<span />').attr({
style : "position: absolute; top: 20px; left: 20px; z-index:1000; font-family: monospace;"
}).text("loading...").appendTo(plotdiv).hide();
}).text("loading...").appendTo(plotDiv).hide();


/*
var pdf = $('<a />').attr({
target: "_blank",
style: "position: absolute; top: 10px; right: 10px; z-index:1000; text-decoration:underline; font-family: monospace;"
}).text("pdf").appendTo(plotdiv);
}).text("pdf").appendTo(plotDiv);
var svg = $('<a />').attr({
target: "_blank",
style: "position: absolute; top: 30px; right: 10px; z-index:1000; text-decoration:underline; font-family: monospace;"
}).text("svg").appendTo(plotdiv);
}).text("svg").appendTo(plotDiv);
var png = $('<a />').attr({
target: "_blank",
style: "position: absolute; top: 50px; right: 10px; z-index:1000; text-decoration:underline; font-family: monospace;"
}).text("png").appendTo(plotdiv);
}).text("png").appendTo(plotDiv);
*/
/*
function updatepng(){
if(!Location) return;
pngwidth = plotdiv.width();
pngheight = plotdiv.height();
plotdiv.css("background-image", "url(" + Location + "graphics/" + n + "/png?width=" + pngwidth + "&height=" + pngheight + ")");
pngwidth = plotDiv.width();
pngheight = plotDiv.height();
plotDiv.css("background-image", "url(" + Location + "graphics/" + n + "/png?width=" + pngwidth + "&height=" + pngheight + ")");
}
*/
function updatesvg(){
Expand All @@ -337,25 +337,25 @@ if(!window.jQuery) {
msr === "back" & active !== "ontwikkeling" ) {
svgwidth = 8.27;
svgheight = 11.69;
plotdiv_width = 927;
plotdiv_height = 1311;
plotDiv_width = 927;
plotDiv_height = 1311;
} else {
svgwidth = 7.09;
svgheight = 7.09;
plotdiv_width = 785;
plotdiv_height = 785;
plotDiv_width = 785;
plotDiv_height = 785;
}

// now plot it, prevent flicker
// https://stackoverflow.com/questions/22269759/how-to-prevent-a-background-image-flickering-on-change
var img_tag = new Image(plotdiv_width, plotdiv_height);
var img_tag = new Image(plotDiv_width, plotDiv_height);
var img_url = Location + "graphics/" + n + "/svglite?width=" + svgwidth + "&height=" + svgheight;
img_tag.onload = function() {
plotdiv.css("background-image", "url(" + Location + "graphics/" + n + "/svglite?width=" + svgwidth + "&height=" + svgheight + ")");
// $("#navcontainer").css("height", plotdiv_height + 15);
// $("#plotcontainer").css("height", plotdiv_height + 15);
$("#plotdiv").css("width", plotdiv_width);
$("#plotdiv").css("height", plotdiv_height);
plotDiv.css("background-image", "url(" + Location + "graphics/" + n + "/svglite?width=" + svgwidth + "&height=" + svgheight + ")");
// $("#navcontainer").css("height", plotDiv_height + 15);
// $("#plotcontainer").css("height", plotDiv_height + 15);
$("#plotDiv").css("width", plotDiv_width);
$("#plotDiv").css("height", plotDiv_height);
};
img_tag.src = img_url;

Expand Down Expand Up @@ -383,7 +383,7 @@ if(!window.jQuery) {
// pdf.hide();
// svg.hide();
// png.hide();
plotdiv.css("background-image", "");
plotDiv.css("background-image", "");
} else {
// pdf.attr("href", Location + "graphics/" + n + "/pdf?width=8.27&height=11.69&paper=a4").show();
// svg.attr("href", Location + "graphics/" + n + "/svg?width=7&height=7").show();
Expand All @@ -395,18 +395,18 @@ if(!window.jQuery) {

// function to update the png image
var onresize = debounce(function(e) {
// if(pngwidth == plotdiv.width() && pngheight == plotdiv.height()){
if(svgwidth == plotdiv.width()/96 && svgheight == plotdiv.height()/96){
// if(pngwidth == plotDiv.width() && pngheight == plotDiv.height()){
if(svgwidth == plotDiv.width()/96 && svgheight == plotDiv.height()/96){
return;
}
if(plotdiv.is(":visible")){
if(plotDiv.is(":visible")){
// updatepng();
updatesvg();
}
}, 500);

// register update handlers
plotdiv.on("resize", onresize);
plotDiv.on("resize", onresize);
$(window).on("resize", onresize);

//return objects
Expand Down Expand Up @@ -477,7 +477,7 @@ if(!window.jQuery) {
/* take out user:pass from target url */
var target = document.createElement('a');
target.href = settings.url;
settings.url = target.protocol + "//" + target.host + target.pathname
settings.url = target.protocol + "//" + target.host + target.basePath

/* set basic auth header */
settings.xhrFields = settings.xhrFields || {};
Expand Down

0 comments on commit fafb23e

Please sign in to comment.