Merge pull request #28 from growthcharts/html_optimize

HTML optimization
growthcharts · Mar 21, 2024 · aed8d71 · aed8d71
2 parents 5b531a4 + 709c912
commit aed8d71
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 53 deletions.
diff --git a/NEWS.md b/NEWS.md
@@ -1,7 +1,13 @@
+# james 1.5.9
+
+- Removes unused code from `index.html`
+- Uses `defer` option for `start.js` and moves it into the head
+- Moves styling from `index.html` to `main.css`
+
 # james 1.5.8
 
 - Introduces throttling of 3 sec for checkbox, sliders and radio buttons
-- Moves all event binding functionality into `start.js`
+- Transfers all event binding functionality from `index.html` into `start.js`
 
 # james 1.5.7
 
@@ -11,7 +17,7 @@
 
 - Changes the version update so that the JAMES package has the same version as the JAMES docker
 
-# james 0.70.1
+# james 0.70.1 (= james 1.5.5)
 
 - Resolves the WFH sequence problem when later height is shorter (#24) 
 

diff --git a/inst/www/css/main.css b/inst/www/css/main.css
@@ -29,7 +29,7 @@ h3 {
   font-weight: bold;
 }
 
-#plotdiv {
+#plotDiv {
   position: relative;
   top: 15px;
   left: -15px;
@@ -83,3 +83,20 @@ h3 {
 .irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before {
     border-top-color: #18BC9C;
 }
+
+#textDiv {
+  display: none;
+}
+
+.highlight-background {
+  background-color: #18BC9C;
+}
+
+.preserve-whitespace {
+  white-space: pre-wrap;
+}
+
+/* CSS to hide elements */
+.hidden {
+  display: none;
+}
diff --git a/inst/www/index.html b/inst/www/index.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 
-<!-- Uncomment this for docker app -->
 <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -16,25 +15,8 @@
   <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>
+  <script defer type="text/javascript" src="app/js/start.js"></script>
 </head>
-<!---->
-
-<!-- Uncomment this for local app
-<head>
-  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="shortcut icon" href="#" />
-  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
-  <link rel="stylesheet" type="text/css" href="css/ion.rangeSlider.min.css" />
-  <link rel="stylesheet" type="text/css" href="css/main.css" />
-  <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
-  <script type="text/javascript" src="js/popper.min.js"></script>
-  <script type="text/javascript" src="js/bootstrap.min.js"></script>
-  <script type="text/javascript" src="js/ion.rangeSlider.min.js"></script>
-  <script type="text/javascript" src="js/opencpu-0.5-james-0.1.js"></script>
-  <script type="text/javascript" src="js/update.js"></script>
-</head>
-<!---->
 
 <body>
   <div class="container-fluid">
@@ -84,8 +66,8 @@
                 </form>
 
                 <div class="form-group" id="weekmenu">
-                  <label class="control-label" for="matchgroup"><strong>Zwangerschapsduur</strong></label>
-                  <input type="text" name="" value="" id="weekslider" />
+                  <label class="control-label" for="weekslider"><strong>Zwangerschapsduur</strong></label>
+                  <input type="text" name="weekslider" value="" id="weekslider" />
                 </div>
 
                 <form action="" id="etnicity">
@@ -141,7 +123,7 @@
                 </form>
 
                 <div class="form-group" id="weekmenu_dsc">
-                  <label class="control-label" for="matchgroup"><strong>Zwangerschapsduur</strong></label>
+                  <label class="control-label" for="weekslider_dsc"><strong>Zwangerschapsduur</strong></label>
                   <input type="text" name="" value="" id="weekslider_dsc" />
                 </div>
 
@@ -196,13 +178,13 @@
                   </div>
                 </div>
 
-                <div class="form-group" style="display:none;">
+                <div class="form-group hidden">
                   <div class="checkbox">
                     <label>
                       <input id="exact_ga" type="checkbox">
                       <span>Zelfde zwangerschapsduur</span>
-                    </label>
-                  </div>
+                      </label>
+                    </div>
                 </div>
 
                 <div class="form-group">
@@ -239,9 +221,6 @@
               <form action="" name="messagegrp">
                   <strong>Berichtklasse</strong><br>
                   <input type="radio" id="messproc" value="exec" name="messagegrp" checked="checked"> Sessie<br>
-<!--                 <input type="radio" id="messdata" value="data" name="messagegrp"> Data<br>
-                     <input type="radio" id="messscreen" value="screen" name="messagegrp"> Richtlijnen<br>
-                     <input type="radio" id="messanal" value="analysis" name="messagegrp"> Analyse<br>  -->
                 <br>
                 </form>
 
@@ -253,25 +232,20 @@
       </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.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>
-          <p id="rq1-messages" style="white-space: pre-wrap;"></p>
-          <p id="rq2-session" style="background-color:lightgreen;"></p>
-          <p id="rq2-console" style="white-space: pre-wrap;"></p>
-          <p id="rq2-warnings" style="white-space: pre-wrap;"></p>
-          <p id="rq2-messages" style="white-space: pre-wrap;"></p>
-        </div>
+        <div id="textDiv">
+          <h5 id="version" class="highlight-background">JAMES 1.5.9 (20240321), &copy; TNO 2024</h5>
+          <p id="rq1-session" class="highlight-background"></p>
+          <p id="rq1-console" class="preserve-whitespace"></p>
+          <p id="rq1-warnings" class="preserve-whitespace"></p>
+          <p id="rq1-messages" class="preserve-whitespace"></p>
+          <p id="rq2-session" class="highlight-background"></p>
+          <p id="rq2-console" class="preserve-whitespace"></p>
+          <p id="rq2-warnings" class="preserve-whitespace"></p>
+          <p id="rq2-messages" class="preserve-whitespace"></p>
+          </div>
       </div>
     </div>
   </div> <!-- end container-fluid -->
-  <!-- Uncomment this for docker app -->
-  <script type="text/javascript" src="app/js/start.js"></script>
-  <!--->
-  <!-- Uncomment this for local app
-  <script type="text/javascript" src="js/start.js"></script>
-  <!---->
+
 </body>
 </html>
diff --git a/inst/www/js/start.js b/inst/www/js/start.js
@@ -4,21 +4,25 @@
 // Part of the JAMES package
 // Licence: AGPL
 
-// Constants for OpenCPU server configuration based on environment
+// Do we run as a single-user server OCPU app. If so, set to true:
+// Not yet implemented
 const isSingleUser = false;
-const urlParams = new URLSearchParams(window.location.search);
+var appBase = isSingleUser ? '' : 'app/';
+
+// Constants for OpenCPU server configuration based on environment
 const { protocol, hostname, pathname } = window.location;
 const host = `${protocol}//${hostname}`;
 const basePath = pathname.slice(0, -5); // Assuming removal of ".html"
 
+// Set the OpenCPU server URL
+ocpu.seturl(isSingleUser ? "../R" : `//${hostname}${basePath}/ocpu/library/james/R`);
+
 // Extract URL parameters with fallbacks to handle null or undefined
+const urlParams = new URLSearchParams(window.location.search);
 const userText = urlParams.get('txt') || '';
 const userSession = urlParams.get('session') || '';
 const userChartcode = urlParams.get('chartcode') || '';
 
-// Set the OpenCPU server URL
-ocpu.seturl(isSingleUser ? "../R" : `//${hostname}${basePath}/ocpu/library/james/R`);
-
 // Defaults
 let chartcode = "NJAH";
 $("#donordata").val("0-2");