Separate Javascript from templates (#82)

* Moved Javascript from templates to separate files * Fixed issue with bundling of tasks.js * Added Javascript/CSS bundling for plot formats count report page * Removed hashes from bundle filenames * Fix base URL in reports.js
artefactual-labs · Jan 9, 2024 · 1348311 · 1348311
1 parent 69b9b3c
commit 1348311
Show file tree

Hide file tree

Showing 19 changed files with 564 additions and 471 deletions.
diff --git a/AIPscan/Aggregator/templates/storage_service.html b/AIPscan/Aggregator/templates/storage_service.html
@@ -81,32 +81,6 @@
 </table>
 <button type="button" class="btn btn-success" style="margin-top: 20px;" id="newfetchjob">New fetch job</button>
 
-
-<script type="module">
-$(document).ready(function(){
-  $('#newfetchjob').on('click', function () {
-    new_fetch_job({{ storage_service.id }});
-  });
-  $('.stats').hide();
-  $('.fa-info-circle').click(function() {
-    if($('#stats-'+this.id).is(':visible'))
-        $('#stats-'+this.id).hide();
-    else
-        $('#stats-'+this.id).show();    
-  });
-
-  // Handle API key visibility
-  let apiKeyVisible = false;
-  let apiKeyHiddenText = '&bull;'.repeat(16)
-  $('#apikeyBtn').on('click', function () {
-    apiKeyVisible = !apiKeyVisible;
-    if (apiKeyVisible === true ) {
-      $('#apikey').text('{{ storage_service.api_key}}');
-    } else {
-      $('#apikey').html(apiKeyHiddenText);
-    }
-  });
-});
-</script>
+<script defer data-storage-service-id="{{ storage_service.id }}" data-storage-service-api-key="{{ storage_service.api_key }} type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/aggregator/storage_service.js') }}"></script>
 
 {% endblock %}
diff --git a/AIPscan/Reporter/templates/aips.html b/AIPscan/Reporter/templates/aips.html
@@ -106,36 +106,6 @@
 
 {% endif %}
 
-<script type="module">
-$(document).ready(function(){
-  var storageServiceId = $('#ss').val();
-  var storageLocationId = $('#sl').val();
-
-  function reloadPage (ignoreLocation) {
-    var storageServiceId = $('#ss').val();
-    var storageLocationId = $ ('#sl').val();
-
-    var url = new URL("/reporter/aips", $('body').data('url-root'));
-    var params = {
-      "amss_id": storageServiceId
-    };
-
-    if (ignoreLocation !== true) {
-      params["storage_location"] = storageLocationId;
-    }
-
-    url.search = new URLSearchParams(params).toString();
-    window.location.href = url.href;
-  }
-
-  $("#ss").on("change", function() {
-    reloadPage(true);
-  });
-
-  $("#sl").on("change", function() {
-    reloadPage(false);
-  });
-});
-</script>
+<script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/aips.js') }}"></script>
 
 {% endblock %}
diff --git a/AIPscan/Reporter/templates/chart_formats_count.html b/AIPscan/Reporter/templates/chart_formats_count.html
@@ -2,12 +2,10 @@
 <html lang="en">
 <head>
   <title>{{ storage_service_name }}: file formats count</title>
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/chart_formats_count/assets/chart_formats_count-6NOWmm_T.css') }}">
-  <script type="module" language="javascript" src="{{ url_for('static', filename='dist/chart_formats_count/assets/chart_formats_count-c9rhHfc8.js') }}"></script>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/chart_formats_count/chart_formats_count.css') }}">
+  <script type="module" language="javascript" src="{{ url_for('static', filename='dist/chart_formats_count/chart_formats_count.js') }}"></script>
 
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-
-
 </head>
 <body>
 
@@ -35,38 +33,10 @@
     </canvas>
 </div>
 
-<script type="module">
-  // draw format chart
-
-  let randCols = []
-  let jsonLabels = {{ labels|tojson }}
-  let jsonValues = {{ values|tojson }}
-
-  let makeColor = function() {
-    var r = Math.floor(Math.random() * 255)
-    var g = Math.floor(Math.random() * 255)
-    var b = Math.floor(Math.random() * 255)
-    return "rgb(" + r + "," + g + "," + b + ")"
-  }
-  for (let x=0;x<jsonValues.length;x++){randCols.push(makeColor())}
-
-  let canvas = document.getElementById("chart")
-  let ctx = canvas.getContext("2d")
+<textarea class="d-none" id="chart_labels">{{ labels | tojson }}</textarea>
+<textarea class="d-none" id="chart_values">{{ values | tojson }}</textarea>
 
-  let config = {
-      type: 'pie',
-      data: {
-        labels: jsonLabels,
-        datasets: [{
-          data: jsonValues,
-          label: "Formats chart",
-          backgroundColor: randCols,
-        }],
-      },
-      options: {responsive: true},
-    }
-   let myPie = new Chart(ctx, config)
-</script>
+<script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/chart_formats_count.js') }}"></script>
 
 </div>
 </body>

diff --git a/AIPscan/Reporter/templates/plot_formats_count.html b/AIPscan/Reporter/templates/plot_formats_count.html
@@ -3,9 +3,9 @@
 <head>
   <title>{{ storage_service_name }}: file formats count</title>
   <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
-  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/custom.css') }}">
-  <script language="javascript" src="{{ url_for('static', filename='dist/plot_formats_count/assets/plotly.js') }}"></script>
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/plot_formats_count/plot_formats_count.css') }}">
+  <script language="javascript" src="{{ url_for('static', filename='dist/plot_formats_count/plot_formats_count.js') }}"></script>
+  <script language="javascript" src="{{ url_for('static', filename='dist/plot_formats_count/plotly.js') }}"></script>
 
 </head>
 <body>
@@ -27,31 +27,13 @@
   {{ differentFormats }} different formats totalling {{ totalHumanSize }}
 </div>
 
-<div id="scatterplot">
-  <script>
-  var data = [{
-    x: {{ x_axis | safe }},
-    y: {{ y_axis | safe }},
-    text: {{ format | safe }},
-    customdata: {{ humansize | safe }},
-    marker: {size: 7},
-    hovertemplate: '<b>%{text}</b><br />' +
-                   'count: %{y}<br />' +
-                   'size: %{customdata}<br />' +
-                   'size in bytes: %{x}' +
-                   '<extra></extra>',
-    type: 'scatter',
-    mode: 'markers',
-  }];
-  var layout = {
-    hovermode: 'closest', yaxis: {title:'format occurence count'}, xaxis: {title:'total size in bytes'},
-    showlegend: false
-  }
+<textarea class="d-none" id="plot_x_axis">{{ x_axis | tojson }}</textarea>
+<textarea class="d-none" id="plot_y_axis">{{ y_axis | tojson }}</textarea>
+<textarea class="d-none" id="plot_format">{{ format | tojson }}</textarea>
+<textarea class="d-none" id="plot_humansize">{{ humansize | tojson }}</textarea>
 
-  Plotly.newPlot('scatterplot', data, layout, {displayModeBar: false});
-  </script>
-</div>
+<div id="scatterplot"></div>
+<script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/plot_formats_count.js') }}"></script>
 
-</div>
 </body>
 </html>