Refactor start.js and update.js

inst/www/index.html

@@ -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>
 <!---->
@@ -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">
@@ -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">
@@ -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">
@@ -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>
@@ -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">
@@ -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>

inst/www/js/handleUIVisibility.js

@@ -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;
+}

inst/www/js/opencpu-0.5-james-0.1.js

@@ -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;
 
@@ -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(){
@@ -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;
 
@@ -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();
@@ -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
@@ -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 || {};