Remove YUI Compressor and use plain JavaScript

.gitignore

@@ -1,9 +1,7 @@
 *.swp
 *.pyc
 *.log
-js/mobile.js
-js/init_plot.js
-js/version.json
-css/mobile.css
+/index.html
+/js/version.json
 cache.manifest
-tiles/
+tiles/

DEVELOPER_README.md

@@ -4,6 +4,6 @@ To get a copy of the code and run a test web server:
 
 1. [Fork the repository](https://github.com/projecthorus/sondehub-tracker/fork) by visiting [https://github.com/projecthorus/sondehub-tracker/fork](https://github.com/projecthorus/sondehub-tracker/fork).
 2. Clone the repository with your git tool of choice.
-3. Run `build.sh` to compile the javascript files. (This requires Java to be installed and in your path.)
+3. Run `build.sh` to generate `index.html` and `js/version.json`.
 4. Run `python serve.py` to run a simple web server to (This requires python 3.x)
 5. Visit [http://localhost:8000](http://localhost:8000) to view the local version of the server!

Dockerfile

@@ -1,6 +1,6 @@
 FROM alpine:latest
 
-RUN apk add --no-cache python3 openjdk11 sed git
+RUN apk add --no-cache python3 sed git
 
 WORKDIR /app
 ADD . .

README.md

@@ -36,8 +36,6 @@ Pull requests are welcome.
 
 ## Installation
 
-Requirements: Java
-
     $ git clone https://github.com/projecthorus/sondehub-tracker.git
     $ ./build.sh
     $ python serve.py

build.sh

@@ -1,50 +1,18 @@
 #!/bin/bash
 
-# compile stylesheet
-echo -n "Compiling CSS... "
-cd css
-rm -f mobile.css
-cat base.css skeleton.css layout.css habitat-font.css main.css leaflet.css leaflet.fullscreen.css skewt.css > mobile.tmp
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=css mobile.tmp > mobile.css
-rm -f mobile.tmp
-cd ..
-echo "Done!"
-
-#compile javascript
-echo -n "Compiling JavaScript... "
-cd js
-rm -f mobile.js init_plot.js
-# precompiled libs
-cat jquery* >> mobile.js
+set -e
 
 VERSION="`git rev-parse --short HEAD`"
-
 BUILD_DATE="`date -u +%Y-%m-%dT%H:%M:%SZ`"
 
-# compile the rest
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge iscroll.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge chasecar.lib.js | sed "s/{VER}/$VERSION/" >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge tracker.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge app.js | sed "s/{VER}/$VERSION/" | sed "s/{BUILD_DATE}/$BUILD_DATE/" >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge colour-map.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge xdata.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge station.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge format.js >> mobile.js
-
-#compile plot lib and config
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge _jquery.flot.js >> init_plot.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge plot_config.js >> init_plot.js
-
 # create version check file
-echo "{\"build_date\": \"$BUILD_DATE\", \"version\": \"$VERSION\", \"refresh\": 86400}" > version.json
-
-cd ..
+echo -n "Generating js/version.json... "
+echo "{\"build_date\": \"$BUILD_DATE\", \"version\": \"$VERSION\", \"refresh\": 86400}" > js/version.json
 echo "Done!"
 
 # cache fixes
-sed -i'' "s/{VER}/$VERSION/" index.html
-sed -i'' "s/{VER}/$VERSION/" service-worker.js
-
+echo -n "Generating index.html... "
+sed -e "s/{VER}/$VERSION/" -e "s/{BUILD_DATE}/$BUILD_DATE/" index.template.html > index.html
 echo "Done!"
 
 echo "Build version: $VERSION Build date: $BUILD_DATE"

index.html → index.template.html

@@ -19,10 +19,17 @@
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link rel="manifest" href="manifest.json">
 
-        <link rel="stylesheet" href="css/mobile.css"/>
+        <link rel="stylesheet" href="css/base.css"/>
+        <link rel="stylesheet" href="css/skeleton.css"/>
+        <link rel="stylesheet" href="css/layout.css"/>
+        <link rel="stylesheet" href="css/habitat-font.css"/>
+        <link rel="stylesheet" href="css/main.css"/>
+        <link rel="stylesheet" href="css/leaflet.css"/>
+        <link rel="stylesheet" href="css/leaflet.fullscreen.css"/>
+        <link rel="stylesheet" href="css/skewt.css"/>
 
     </head>
-    <body>
+    <body data-version="{VER}" data-build-date="{BUILD_DATE}">
 
     <div id="loading">
         <div>
@@ -420,22 +427,23 @@ <h3>Report Recovery</h3>
     <script type="text/javascript" language="javascript" src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script type="text/javascript" language="javascript" src="https://xc5dqkj2cgb1.statuspage.io/embed/script.js" async defer></script>
     <script type="text/javascript" language="javascript" src="js/skewt.js?v={VER}"></script>
-    <script type="text/javascript" language="javascript" src="js/aws-sdk-2.1029.0.min.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/aws-sdk-2.1029.0.min.js"></script>
     <script type="text/javascript" language="javascript" src="js/leaflet.js?v={VER}"></script>
     <script type="text/javascript" language="javascript" src="js/Leaflet.fullscreen.min.js?v={VER}"></script>
     <script type="text/javascript" language="javascript" src="js/L.Terminator.js?v={VER}"></script>
     <script type="text/javascript" language="javascript" src="js/L.TileLayer.NoGap.js?v={VER}"></script>
     <script type="text/javascript" language="javascript" src="js/paho-mqtt.js?v={VER}"></script>
-    <!--
-    <script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
+
     <script type="text/javascript" language="javascript" src="js/jquery-1.12.4-min.js"></script>
-    <script type="text/javascript" language="javascript" src="js/jquery-ui.min.js"></script>
-    <script type="text/javascript" language="javascript" src="js/chasecar.lib.js"></script>
-    <script type="text/javascript" language="javascript" src="js/tracker.js"></script>
-    <script type="text/javascript" language="javascript" src="js/tracker.js"></script>
-    <script type="text/javascript" language="javascript" src="js/color-map.js"></script>
-    -->
-    <script type="text/javascript" language="javascript" src="js/mobile.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/iscroll.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/chasecar.lib.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/tracker.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/app.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/colour-map.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/xdata.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/station.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/format.js?v={VER}"></script>
+
     <script type="text/javascript" language="javascript" src="js/rbush.js?v={VER}"></script>
     <script type="text/javascript" language="javascript" src="js/pwa.js?v={VER}"></script>
 

js/app.js

@@ -207,7 +207,9 @@ function trackerInit() {
     if(is_mobile || wvar.enabled) $(".nav .wvar").hide();
 
     if(!is_mobile) {
-        $.getScript("js/init_plot.js", function() { checkSize(); if(!map) load(); });
+        $.getScript("js/_jquery.flot.js", function() {
+            $.getScript("js/plot_config.js", function() { checkSize(); if(!map) load(); });
+        });
         if(wvar.graph) $('#telemetry_graph').attr('style','');
 
         return;
@@ -485,17 +487,15 @@ var updateTime = function(date) {
     }
 };
 
-const version = "{VER}";
-
 $(window).ready(function() {
     // refresh timebox
     setInterval(function() {
         updateTime(new Date());
     }, 1000);
 
     // Update Tracker version info
-    $('#build_version').text(version);
-    $('#build_date').text("{BUILD_DATE}");
+    $('#build_version').text(document.body.dataset.version);
+    $('#build_date').text(document.body.dataset.buildDate);
 
     // resize elements if needed
     checkSize();
@@ -1033,7 +1033,7 @@ function check_version(){
     fetch(updateRequest)
         .then(function(response){ return response.json()})
         .then(function(response){
-            if (response['version'] != version) {
+            if (response['version'] != document.body.dataset.version) {
                 window.clearInterval(update_check)
                 reload_timer = window.setTimeout(update_site, response['refresh']*1000)
                 reload_end_time = new Date().getTime() +response['refresh']*1000

js/chasecar.lib.js

@@ -24,7 +24,7 @@ ChaseCar.updatePosition = function(callsign, position) {
 
     var _doc = {
         "software_name": "SondeHub Tracker",
-        "software_version": "{VER}",
+        "software_version": document.body.dataset.version,
         "uploader_callsign": callsign,
         "uploader_position": [position.coords.latitude, position.coords.longitude, _position_alt],
         "uploader_antenna": "Mobile Station",

service-worker.js

@@ -1,18 +1,36 @@
 self.addEventListener('install', function(event) {
     event.waitUntil(
-        caches.open("{VER}").then(function(cache) {
+        caches.open(document.body.dataset.version).then(function(cache) {
             return cache.addAll(
                 [
-                    '/css/mobile.css',
+                    '/css/base.css',
+                    '/css/skeleton.css',
+                    '/css/layout.css',
+                    '/css/habitat-font.css',
+                    '/css/main.css',
                     '/css/leaflet.css',
                     '/css/leaflet.fullscreen.css',
+                    '/css/skewt.css',
+                    '/js/skewt.js',
+                    '/js/aws-sdk-2.1029.0.min.js',
                     '/js/leaflet.js',
                     '/js/Leaflet.fullscreen.min.js',
                     '/js/L.Terminator.js',
-                    '/js/mobile.js',
+                    '/js/L.TileLayer.NoGap.js',
+                    '/js/paho-mqtt.js',
+                    '/js/jquery-1.12.4-min.js',
+                    '/js/iscroll.js',
+                    '/js/chasecar.lib.js',
+                    '/js/tracker.js',
+                    '/js/app.js',
+                    '/js/colour-map.js',
+                    '/js/xdata.js',
+                    '/js/station.js',
+                    '/js/format.js',
                     '/js/rbush.js',
                     '/js/pwa.js',
-                    '/js/init_plot.js',
+                    '/js/_jquery.flot.js',
+                    '/js/plot_config.js',
                     '/img/markers/balloon.svg',
                     '/img/markers/car.svg',
                     '/img/markers/parachute.svg',