From d44d3fae3e5c596a61fbe13e34a8a5e4494ff202 Mon Sep 17 00:00:00 2001
From: Matthias Wirth <matthias.wirth@gmail.com>
Date: Tue, 29 Oct 2019 22:00:29 +0100
Subject: [PATCH] improve caching

---
 88-tar1090.conf                               | 25 ++++++
 html/index.html                               | 48 +++++------
 ...erswitcher.css => ol-layerswitcher340.css} |  0
 ...ayerswitcher.js => ol-layerswitcher340.js} |  0
 html/ol/{ol.css => ol533.css}                 |  0
 html/ol/{ol.css.map => ol533.css.map}         |  0
 html/ol/{ol.js => ol533.js}                   |  0
 html/ol/{ol.js.map => ol533.js.map}           |  0
 html/script.js                                |  4 +-
 html/style.css                                |  2 +
 html/test/markers_test.html                   | 18 -----
 html/test/markers_test.js                     | 79 -------------------
 install.sh                                    | 29 ++++++-
 nginx.conf                                    | 15 ++++
 nginx_webroot.conf                            | 37 +++++++++
 15 files changed, 131 insertions(+), 126 deletions(-)
 rename html/ol/{ol-layerswitcher.css => ol-layerswitcher340.css} (100%)
 rename html/ol/{ol-layerswitcher.js => ol-layerswitcher340.js} (100%)
 rename html/ol/{ol.css => ol533.css} (100%)
 rename html/ol/{ol.css.map => ol533.css.map} (100%)
 rename html/ol/{ol.js => ol533.js} (100%)
 rename html/ol/{ol.js.map => ol533.js.map} (100%)
 delete mode 100644 html/test/markers_test.html
 delete mode 100644 html/test/markers_test.js
 create mode 100644 nginx_webroot.conf

diff --git a/88-tar1090.conf b/88-tar1090.conf
index bcf30f7..c3b54f5 100644
--- a/88-tar1090.conf
+++ b/88-tar1090.conf
@@ -27,6 +27,31 @@ $HTTP["url"] =~ "^/INSTANCE/chunks/current_.*gz$" {
         "Content-Type" => "application/json",
         )
 }
+$HTTP["url"] =~ "^/INSTANCE/db/.*\.json$" {
+    setenv.add-response-header += (
+        "Cache-Control" => "public, max-age=86400",
+        )
+}
+$HTTP["url"] =~ "^/INSTANCE/.*\.png$" {
+    setenv.add-response-header += (
+        "Cache-Control" => "public, max-age=31536000",
+        )
+}
+$HTTP["url"] =~ "^/INSTANCE/spinny.gif$" {
+    setenv.add-response-header += (
+        "Cache-Control" => "public, max-age=31536000",
+        )
+}
+$HTTP["url"] =~ "^/INSTANCE/.*\.js$" {
+    setenv.add-response-header += (
+        "Cache-Control" => "public, max-age=31536000",
+        )
+}
+$HTTP["url"] =~ "^/INSTANCE/.*\.css$" {
+    setenv.add-response-header += (
+        "Cache-Control" => "public, max-age=31536000",
+        )
+}
 
 # Add CORS header
 $HTTP["url"] =~ "^/INSTANCE/data/.*\.json$" {
diff --git a/html/index.html b/html/index.html
index 4dd3ec5..fd9c8a1 100644
--- a/html/index.html
+++ b/html/index.html
@@ -5,29 +5,29 @@
 		<meta charset="utf-8"/>
 		<meta name="mobile-web-app-capable" content="yes">
 
-		<link rel="stylesheet" type="text/css" href="style.css?v=__cache_version__" />
-		<link rel="stylesheet" type="text/css" href="colors.css?v=__cache_version__" />
-		<link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css?v=__cache_version__" />
-		<script src="jquery/jquery-3.4.1.min.js?v=__cache_version__"></script>
-		<script src="defaults.js?v=__cache_version__"></script>
-		<script src="config.js?v=__cache_version__"></script>
-		<script src="early.js?v=__cache_version__"></script>
-		<script src="jquery/jquery-ui-1.11.4.min.js?v=__cache_version__"></script>
+		<link rel="stylesheet" type="text/css" href="style__cache_version__.css" />
+		<link rel="stylesheet" type="text/css" href="colors__cache_version__.css" />
+		<link rel="stylesheet" href="jquery/jquery-ui-1.11.4-smoothness.css" />
+		<script src="jquery/jquery-3.4.1.min.js"></script>
+		<script src="defaults__cache_version__.js"></script>
+		<script src="config__cache_version__.js"></script>
+		<script src="early__cache_version__.js"></script>
+		<script src="jquery/jquery-ui-1.11.4.min.js"></script>
 
-		<link rel="stylesheet" href="ol/ol.css?v=__cache_version__" type="text/css" />
-		<script src="ol/ol.js?v=__cache_version__"></script>
+		<link rel="stylesheet" href="ol/ol533.css" type="text/css" />
+		<script src="ol/ol533.js"></script>
 
-		<link rel="stylesheet" href="ol/ol-layerswitcher.css?v=__cache_version__" type="text/css"/>
-		<script src="ol/ol-layerswitcher.js?v=__cache_version__"></script>
+		<link rel="stylesheet" href="ol/ol-layerswitcher340.css" type="text/css"/>
+		<script src="ol/ol-layerswitcher340.js"></script>
 
-		<script src="markers.js?v=__cache_version__"></script>
-		<script src="dbloader.js?v=__cache_version__"></script>
-		<script src="registrations.js?v=__cache_version__"></script>
-		<script src="planeObject.js?v=__cache_version__"></script>
-		<script src="formatter.js?v=__cache_version__"></script>
-		<script src="flags.js?v=__cache_version__"></script>
-		<script src="layers.js?v=__cache_version__"></script>
-		<script src="script.js?v=__cache_version__"></script>
+		<script src="markers__cache_version__.js"></script>
+		<script src="dbloader__cache_version__.js"></script>
+		<script src="registrations__cache_version__.js"></script>
+		<script src="planeObject__cache_version__.js"></script>
+		<script src="formatter__cache_version__.js"></script>
+		<script src="flags__cache_version__.js"></script>
+		<script src="layers__cache_version__.js"></script>
+		<script src="script__cache_version__.js"></script>
 		<link rel="icon" type="image/png" href="images/tar1090-favicon.png">
 		<title>dump1090-fa</title>
 	</head>
@@ -531,10 +531,10 @@
 							<div class="settingsCheckbox" id="acpositions_checkbox"></div>
 							<div class="settingsText">Aircraft Positions</div>
 						</div>
-						<div class="settingsOptionContainer" id="altitude_chart_container">
+						<!--div class="settingsOptionContainer" id="altitude_chart_container">
 							<div class="settingsCheckbox" id="altitude_checkbox"></div>
 							<div class="settingsText">Altitude Chart</div>
-						</div>
+						</div-->
 						<div class="settingsOptionContainer">
 							<div class="settingsCheckbox" id="debug_checkbox"></div>
 							<div class="settingsText">Debug tracks</div>
@@ -576,9 +576,9 @@
 				<div id="expand_sidebar_control" class="ol-unselectable ol-control">
 					<button id="expand_sidebar_button" title="Expand Sidebar"></button>
 				</div>
-				<div id="altitude_chart" class="ol-unselectable ol-control altitudeFeet">
+				<!--div id="altitude_chart" class="ol-unselectable ol-control altitudeFeet">
 					<button id="altitude_chart_button"></button>
-				</div>
+				</div-->
 				<div id="header_top" class="infoHeading">
 					<div class="buttonContainer">
 						<span title="(H)ome" class="button" onclick="resetMap();"><span class="buttonText">H</span></span><!--
diff --git a/html/ol/ol-layerswitcher.css b/html/ol/ol-layerswitcher340.css
similarity index 100%
rename from html/ol/ol-layerswitcher.css
rename to html/ol/ol-layerswitcher340.css
diff --git a/html/ol/ol-layerswitcher.js b/html/ol/ol-layerswitcher340.js
similarity index 100%
rename from html/ol/ol-layerswitcher.js
rename to html/ol/ol-layerswitcher340.js
diff --git a/html/ol/ol.css b/html/ol/ol533.css
similarity index 100%
rename from html/ol/ol.css
rename to html/ol/ol533.css
diff --git a/html/ol/ol.css.map b/html/ol/ol533.css.map
similarity index 100%
rename from html/ol/ol.css.map
rename to html/ol/ol533.css.map
diff --git a/html/ol/ol.js b/html/ol/ol533.js
similarity index 100%
rename from html/ol/ol.js
rename to html/ol/ol533.js
diff --git a/html/ol/ol.js.map b/html/ol/ol533.js.map
similarity index 100%
rename from html/ol/ol.js.map
rename to html/ol/ol533.js.map
diff --git a/html/script.js b/html/script.js
index 9d1434a..0d3ceb3 100644
--- a/html/script.js
+++ b/html/script.js
@@ -547,9 +547,11 @@ function init_page() {
 
 	});
 
+	/*
 	$('#altitude_checkbox').on('click', function() {
 		toggleAltitudeChart(true);
 	});
+	*/
 
 	$('#debugAll_checkbox').on('click', function() {
 		toggleDebugAll();
@@ -595,7 +597,7 @@ function init_page() {
 
 	filterGroundVehicles(false);
 	filterBlockedMLAT(false);
-	toggleAltitudeChart(false);
+	//toggleAltitudeChart(false);
 
 }
 
diff --git a/html/style.css b/html/style.css
index ddc53fd..2c0a67a 100644
--- a/html/style.css
+++ b/html/style.css
@@ -647,6 +647,7 @@ select.error, textarea.error, input.error {
     background-color: transparent !important;
 }
 
+/*
 #altitude_chart_button {
     background-image: url('images/alt_legend_feet.svg');
     background-size: cover;
@@ -660,6 +661,7 @@ select.error, textarea.error, input.error {
 .altitudeMeters {
     background-image: url('images/alt_legend_meters.svg') !important;
 }
+*/
 
 /* remove the blue highlighting around the map buttons */
 .ol-control button {
diff --git a/html/test/markers_test.html b/html/test/markers_test.html
deleted file mode 100644
index f89ad9b..0000000
--- a/html/test/markers_test.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-
-    <link rel="stylesheet" href="../ol3/ol-3.17.1.css" type="text/css" />
-    <script src="../ol3/ol-3.17.1.js" type="text/javascript"></script>
-
-    <script type="text/javascript" src="../markers.js"></script>
-    <script type="text/javascript" src="markers_test.js"></script>
-    <title>DUMP1090 MARKERS TEST</title>
-  </head>
-
-  <body onload="setup_markers_test()">
-    <div id="map_canvas"></div>
-  </body>
-</html>
-
diff --git a/html/test/markers_test.js b/html/test/markers_test.js
deleted file mode 100644
index dbc5281..0000000
--- a/html/test/markers_test.js
+++ /dev/null
@@ -1,79 +0,0 @@
-"use strict";
-
-var MarkerLayer;
-var NextLon = 0;
-var NextLat = 0;
-
-function setup_markers_test() {
-        MarkerLayer = new ol.layer.Vector({
-                source: new ol.source.Vector(),
-        });
-
-        var map = new ol.Map({
-                target: 'map_canvas',
-                layers: [
-                        MarkerLayer
-                ],
-                view: new ol.View({
-                        center: ol.proj.fromLonLat([5, 0]),
-                        zoom: 7
-                }),
-                controls: [new ol.control.Zoom(),
-                           new ol.control.Rotate()],
-                loadTilesWhileAnimating: true,
-                loadTilesWhileInteracting: true
-        });
-
-        for (var type in TypeDesignatorIcons) {
-                add_marker(type, TypeDesignatorIcons[type]);
-        }
-
-        for (var type in TypeDescriptionIcons) {
-                add_marker(type, TypeDescriptionIcons[type]);
-        }
-
-        for (var category in CategoryIcons) {
-                add_marker("Cat " + category, CategoryIcons[category]);
-        }
-
-        add_marker("Default", DefaultIcon);
-
-        map.getView().setCenter(ol.proj.fromLonLat([5, NextLat/2]));
-}
-
-function add_marker(title, baseMarker) {
-        var weight = (1 / baseMarker.scale).toFixed(1);
-        var icon = new ol.style.Icon({
-                anchor: baseMarker.anchor,
-                anchorXUnits: 'pixels',
-                anchorYUnits: 'pixels',
-                scale: baseMarker.scale,
-                imgSize: baseMarker.size,
-                src: svgPathToURI(baseMarker.path, baseMarker.size, '#000000', weight, '#00C000'),
-                rotation: 0,
-                opacity: 1.0,
-                rotateWithView: (baseMarker.noRotate ? false : true)
-        });
-
-        var markerStyle = new ol.style.Style({
-                image: icon,
-                text: new ol.style.Text({
-                        textAlign: 'center',
-                        textBaseline: 'top',
-                        offsetY: 30,
-                        text: title,
-                        scale: 1.5
-                })
-        });
-
-        var pos = [NextLon, NextLat];
-        var marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat(pos)));
-        marker.setStyle(markerStyle);
-        MarkerLayer.getSource().addFeature(marker);
-
-        NextLon += 1;
-        if (NextLon >= 10) {
-                NextLon -= 10;
-                NextLat -= 1;
-        }
-}
diff --git a/install.sh b/install.sh
index b682503..21bbdc2 100755
--- a/install.sh
+++ b/install.sh
@@ -108,7 +108,7 @@ fi
 
 # copy over base files
 cp default install.sh uninstall.sh 99-tar1090-webroot.conf LICENSE README.md \
-	95-tar1090-otherport.conf $ipath
+	95-tar1090-otherport.conf nginx_webroot.conf $ipath
 
 
 services=""
@@ -134,18 +134,39 @@ do
 	sed -i.orig -e "s?SOURCE_DIR?$srcdir?g" -e "s?SERVICE?$service?g" tar1090.service
 
 	# keep some stuff around
-	if [ -f $html_path/defaults.js ]; then
-		cp $html_path/config.js /tmp/tar1090_config.js
+	if [ -f $html_path/defaults_*.js ]; then
+		cp $html_path/config_*.js /tmp/tar1090_config.js
 	fi
 	cp $html_path/colors.css /tmp/tar1090_colors.css/ 2>/dev/null || true
 
+	rm -rf $html_path 2>/dev/null || true
 	cp -r -T html $html_path
 
 	mv /tmp/tar1090_config.js $html_path/config.js 2>/dev/null || true
 	mv /tmp/tar1090_colors.css $html_path/colors.css 2>/dev/null || true
 
+	epoch=$(date +%s)
 	# bust cache for all css and js files
-	sed -i -e "s/__cache_version__/$(date +%s)/g" $html_path/index.html
+	sed -i -e "s/__cache_version__/_$epoch/g" $html_path/index.html
+
+	dir=$(pwd)
+	cd $html_path
+
+	mv dbloader.js dbloader_$epoch.js
+	mv defaults.js defaults_$epoch.js
+	mv early.js early_$epoch.js
+	mv flags.js flags_$epoch.js
+	mv formatter.js formatter_$epoch.js
+	mv layers.js layers_$epoch.js
+	mv markers.js markers_$epoch.js
+	mv planeObject.js planeObject_$epoch.js
+	mv registrations.js registrations_$epoch.js
+	mv script.js script_$epoch.js
+	mv config.js config_$epoch.js
+	mv colors.css colors_$epoch.css
+	mv style.css style_$epoch.css
+
+	cd "$dir"
 
 	cp nginx.conf $ipath/nginx-$service.conf
 
diff --git a/nginx.conf b/nginx.conf
index 4f3ecd1..09a1dfc 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -20,4 +20,19 @@ location /INSTANCE/chunks/ {
 location /INSTANCE {
   alias HTMLPATH/;
   try_files $uri $uri/ =404;
+  location ~ db/.*\.json$ {
+    add_header Cache-Control "public, max-age=86400";
+  }
+  location ~ .*\.png$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+  location ~ .*\.gif$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+  location ~ .*\.js$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+  location ~ .*\.css$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
 }
diff --git a/nginx_webroot.conf b/nginx_webroot.conf
new file mode 100644
index 0000000..f2a4a6b
--- /dev/null
+++ b/nginx_webroot.conf
@@ -0,0 +1,37 @@
+location /data/ {
+  alias /run/dump1090-fa/;
+}
+
+location /chunks/ {
+  alias /run/tar1090/;
+  location ~ chunk_.*\.gz$ {
+    add_header Cache-Control "public, max-age=31536000";
+    add_header Content-Type "application/json";
+    add_header Content-Encoding "gzip";
+  }
+  location ~ current_.*\.gz$ {
+    add_header Cache-Control "must-revalidate";
+    add_header Content-Type "application/json";
+    add_header Content-Encoding "gzip";
+  }
+}
+
+location / {
+  alias /usr/local/share/tar1090/html/;
+  try_files $uri $uri/ =404;
+  location ~ db/.*\.json$ {
+    add_header Cache-Control "public, max-age=86400";
+  }
+  location ~ .*\.png$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+  location ~ .*\.gif$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+  location ~ .*\.js$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+  location ~ .*\.css$ {
+    add_header Cache-Control "public, max-age=31536000";
+  }
+}