build: update css/js libs to latest versions

dark mode exists in bootstrap now, so we use it
howeyc · Sep 24, 2023 · 2564e29 · 2564e29
1 parent fc8101c
commit 2564e29
Show file tree

Hide file tree

Showing 11 changed files with 6,369 additions and 70 deletions.
diff --git a/ledger/cmd/static/bootstrap-5.0.0.bundle.min.js b/ledger/cmd/static/bootstrap-5.0.0.bundle.min.js
diff --git a/ledger/cmd/static/bootstrap-5.0.0.min.css b/ledger/cmd/static/bootstrap-5.0.0.min.css
diff --git a/ledger/cmd/static/bootstrap-5.3.2.bundle.min.js b/ledger/cmd/static/bootstrap-5.3.2.bundle.min.js
diff --git a/ledger/cmd/static/bootstrap-5.3.2.min.css b/ledger/cmd/static/bootstrap-5.3.2.min.css
diff --git a/ledger/cmd/static/bootstrap-nightfall.min.css b/ledger/cmd/static/bootstrap-nightfall.min.css
diff --git a/ledger/cmd/static/chart-3.1.1.min.js b/ledger/cmd/static/chart-3.1.1.min.js
diff --git a/ledger/cmd/static/chart-4.4.0.umd.js b/ledger/cmd/static/chart-4.4.0.umd.js
diff --git a/ledger/cmd/static/jquery-3.6.0.min.js b/ledger/cmd/static/jquery-3.6.0.min.js
diff --git a/ledger/cmd/static/jquery-3.7.1.min.js b/ledger/cmd/static/jquery-3.7.1.min.js
diff --git a/ledger/cmd/templates/template.barlinechart.html b/ledger/cmd/templates/template.barlinechart.html
@@ -6,7 +6,7 @@
     <meta name="description" content="">
     <meta name="author" content="">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		
+
     <title>Ledger - Report - {{.ReportName}}</title>
 
 	{{template "common-css"}}
@@ -15,7 +15,7 @@
   <body>
 
       {{template "nav" .}}
-	
+
    <div class="container">
       <div class="content-header">
         <div class="row">
@@ -41,7 +41,7 @@ <h1>{{.ReportName}} : {{.RangeStart.Format "2006-01-02"}} - {{.RangeEnd.Format "
       <div class="row">
       <div class="col-xs-12">
 
-		  {{template "payee-transaction-table" .}}
+{{template "payee-transaction-table" .}}
 
       </div>
       </div>
@@ -53,7 +53,7 @@ <h1>{{.ReportName}} : {{.RangeStart.Format "2006-01-02"}} - {{.RangeEnd.Format "
    {{template "common-scripts"}}
     <script>
     $(document).ready(function() {
-	var ctx = document.getElementById("chart-area").getContext("2d");
+    var ctx = document.getElementById("chart-area").getContext("2d");
     {{if eq .ChartType "Radar"}}
     var data = {
         labels: [
@@ -78,7 +78,7 @@ <h1>{{.ReportName}} : {{.RangeStart.Format "2006-01-02"}} - {{.RangeEnd.Format "
         backgroundColor: "rgba({{.RGBColor}},0.2)",
         color: "rgba({{.RGBColor}},1)",
         borderColor: "rgba({{.RGBColor}},1)",
-		fill: true,
+        fill: true,
         data: [
         {{range .Values}}
         {{.StringFixedBank}},
@@ -88,8 +88,8 @@ <h1>{{.ReportName}} : {{.RangeStart.Format "2006-01-02"}} - {{.RangeEnd.Format "
     {{end}}
         ]
     };
-		{{if eq .ChartType "Line"}} var myPieChart = new Chart(ctx, {type: 'line', data: data, options: {interaction: {mode: 'index'}}});{{end}}
-		{{if eq .ChartType "Radar"}} var myPieChart = new Chart(ctx, {type: 'radar', data: data});{{end}}
+        {{if eq .ChartType "Line"}} var myPieChart = new Chart(ctx, {type: 'line', data: data, options: {interaction: {mode: 'index'}}});{{end}}
+        {{if eq .ChartType "Radar"}} var myPieChart = new Chart(ctx, {type: 'radar', data: data});{{end}}
     {{end}}
     {{if eq .ChartType "Bar" "StackedBar"}}
         datasets: [
@@ -108,8 +108,8 @@ <h1>{{.ReportName}} : {{.RangeStart.Format "2006-01-02"}} - {{.RangeEnd.Format "
     {{end}}
         ]
     };
-    {{if eq .ChartType "Bar"}} var myPieChart = new Chart(ctx, {type: 'bar', data: data});{{end}}
-	{{if eq .ChartType "StackedBar"}} var myPieChart = new Chart(ctx,{type: 'bar', data: data, options: {scales: {x: {stacked: true}, y: {stacked: true}}}});{{end}}
+    {{if eq .ChartType "Bar"}} var myPieChart = new Chart(ctx, {type: 'bar', data: data, options: {interaction: {mode: 'index'}}});{{end}}
+    {{if eq .ChartType "StackedBar"}} var myPieChart = new Chart(ctx,{type: 'bar', data: data, options: {interaction: {mode: 'index'}, scales: {x: {stacked: true}, y: {stacked: true}}}});{{end}}
     {{end}}
     });
     </script>

diff --git a/ledger/cmd/templates/template.common.html b/ledger/cmd/templates/template.common.html
@@ -1,15 +1,13 @@
 {{define "common-css"}}
-    <meta name="color-scheme" content="light dark">
-    <link id="css-light" href="/static/bootstrap-5.0.0.min.css" rel="stylesheet">
-    <link id="css-dark" href="/static/bootstrap-nightfall.min.css" rel="stylesheet" media="(prefers-color-scheme: dark)">
+    <link href="/static/bootstrap-5.3.2.min.css" rel="stylesheet">
     <link href="/static/dropdown.css" rel="stylesheet">
     <link href="/static/datatables-1.13.4.min.css" rel="stylesheet">
     <link href="/static/daterangepicker.css" rel="stylesheet">
 {{end}}
 {{define "common-scripts"}}
-    <script src="/static/jquery-3.6.0.min.js"></script>
-    <script src="/static/bootstrap-5.0.0.bundle.min.js"></script>
-    <script src="/static/chart-3.1.1.min.js"></script>
+    <script src="/static/jquery-3.7.1.min.js"></script>
+    <script src="/static/bootstrap-5.3.2.bundle.min.js"></script>
+    <script src="/static/chart-4.4.0.umd.js"></script>
     <script src="/static/datatables-1.13.4.min.js"></script>
     <script src="/static/moment.min.js"></script>
     <script src="/static/daterangepicker.js"></script>
@@ -18,6 +16,7 @@
 	  $('#transactions-section').show();
 	  $('#tableprogress').hide();
 	  var tbl = document.getElementById('payeetranstable0');
+		if (tbl) {
 	  var min = tbl.rows[1].cells[0].innerText;
 	  var max = tbl.rows[tbl.rows.length-1].cells[0].innerText;
 	  let table = new DataTable('#payeetranstable0', {
@@ -52,60 +51,64 @@
         return false;
 		}
 	  );
+		}
 
     // Update the toggle button based on current color scheme
     function updateDarkToggleButton() {
-      if (typeof $("body").attr("data-color-scheme") === 'undefined') {
+      if (typeof $("body").attr("data-bs-theme") === 'undefined') {
         $dark = (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches);
         $("#css-toggle-btn").prop( "checked", $dark );
+		if ($dark) {
+			$mode = "dark";
+		} else {
+			$mode = "light";
+		}
+        toggle_color_scheme_css($mode);
       } else {
-        $mode = $("body").attr("data-color-scheme");
+        $mode = $("body").attr("data-bs-theme");
         $dark = ($mode == 'dark') ? true : false;
         $("#css-toggle-btn").prop( "checked", $dark );
+        toggle_color_scheme_css($mode);
       }
     }
 
     // and every time it changes
     if (window.matchMedia) window.matchMedia("(prefers-color-scheme: dark)").addListener( updateDarkToggleButton );
 
     // function to toggle the css
-    function toggle_color_scheme_css($id, $mode) {
+    function toggle_color_scheme_css($mode) {
       $dark = ($mode == 'dark') ? true : false;
-      $("#"+$id+"-dark").attr( "disabled", !$dark );
-      $("body").attr( "data-color-scheme", ($dark ? "dark" : "light" ) );
+      $("body").attr( "data-bs-theme", ($dark ? "dark" : "light" ) );
       localStorage.colorMode = $mode;
     }
 
     // function to initialise the css
-    function init_color_scheme_css($id, $mode) {
+    function init_color_scheme_css($mode) {
       $dark = ($mode == 'dark') ? true : false;
-      toggle_color_scheme_css($id, $mode);
-      setTimeout(function(){  // let the browser catch up
-        $("#"+$id+"-dark").removeAttr("media");
-      }, 100);
+      toggle_color_scheme_css($mode);
     }
 
     // toggle button click code
     $("#css-toggle-btn").bind("click", function() {
       // get current mode
       // don't use `.data("color-scheme")`, it doesn't refresh
-      $mode = $("body").attr("data-color-scheme");
+      $mode = $("body").attr("data-bs-theme");
       // test if this is a first time click event, if so initialise the code
       if (typeof $mode === 'undefined') {
         // not defined yet - set pref. & ask the browser if alt. is active
         $mode = 'light';
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) $mode = 'dark';
-        init_color_scheme_css("css", $mode);
+        init_color_scheme_css($mode);
       }
       // by here we have the current mode, so swap it
       $mode = ($mode == 'dark') ? 'light' : 'dark';
-      toggle_color_scheme_css("css", $mode);
+      toggle_color_scheme_css($mode);
     });
 
     // Check localStorage for initial value
-    $("body").attr("data-color-scheme", localStorage.colorMode);
+    $("body").attr("data-bs-theme", localStorage.colorMode);
     updateDarkToggleButton();
-    init_color_scheme_css("css", localStorage.colorMode);
+    init_color_scheme_css(localStorage.colorMode);
 
     });
 	</script>