Update docker/nginx.conf

Remove unused package

.github/workflows/website.yaml

@@ -23,7 +23,6 @@ jobs:
                 run: npm run build
 
             -   name: Upload Artifacts
-                if: ${{inputs.artifacts}} != "false"
                 uses: actions/upload-artifact@v3
                 with:
                     name: website

README.md

@@ -34,6 +34,7 @@
         - [Demo](#demo)
         - [Built With](#built-with)
     - [Setup](#setup)
+	    - [Production](#production)
         - [Development](#development)
     - [License](#license)
 
@@ -52,11 +53,27 @@ Website: https://maps.zakscode.com
 
 ### Built With
 [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/)
+[![Docker](https://img.shields.io/badge/Docker-384d54?style=for-the-badge&logo=docker)](https://docker.com/)
 [![Firebase](https://img.shields.io/badge/Firebase-FFFFFF?style=for-the-badge&logo=firebase)](https://firebase.google.com/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)](https://typescriptlang.org/)
 
 ## Setup
 
+<details>
+<summary>
+  <h3 id="production" style="display: inline">
+    Production
+  </h3>
+</summary>
+
+#### Prerequisites
+- [Docker](https://docs.docker.com/install/)
+
+#### Instructions
+1. Run the docker image: `docker run -p 80:80 ztimson/map-alliance`
+2. Open http://localhost
+</details>
+
 <details>
 <summary>
   <h3 id="development" style="display: inline">
@@ -70,7 +87,7 @@ Website: https://maps.zakscode.com
 #### Instructions
 1. Install the dependencies: `npm install`
 2. Start the Angular server: `npm run start`
-3. Open [http://localhost:4200](http://localhost:4200)
+3. Open http://localhost:4200
 
 </details>
 

angular.json

@@ -26,7 +26,6 @@
 						"assets": [
 							"src/assets",
 							"src/manifest.json"
-
 						],
 						"styles": [
 							"./node_modules/bootstrap-scss/bootstrap.scss",
@@ -59,7 +58,8 @@
 									"maximumError": "1mb"
 								}
 							],
-							"outputHashing": "all"
+							"outputHashing": "all",
+							"serviceWorker": "ngsw-config.json"
 						},
 						"development": {
 							"optimization": false,

docker/nginx.conf

@@ -1,31 +1,31 @@
-worker_processes  auto;
-pid /var/run/nginx.pid;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-  include       mime.types;
-  default_type  application/octet-stream;
-
-  gzip on;
-  gzip_proxied any;
-  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
-  gzip_vary on;
-  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
-
-  sendfile off;
-  keepalive_timeout 65;
-
-  server {
-    listen 80;
-    index index.html;
-    root /usr/share/nginx/html;
-    autoindex off;
-
-    location / {
-      try_files $uri$args $uri$args/ /index.html;
-    }
-  }
-}
+worker_processes  auto;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
+  gzip_vary on;
+  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+
+  sendfile off;
+  keepalive_timeout 65;
+
+  server {
+    listen 80;
+    index index.html;
+    root /usr/share/nginx/html;
+    autoindex off;
+
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+  }
+}

ngsw-config.json

@@ -7,20 +7,21 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/favicon.ico",
+          "/assets/images/logo.png",
           "/index.html",
+          "/manifest.json",
           "/*.css",
           "/*.js"
         ]
       }
-    }, {
+    },
+    {
       "name": "assets",
       "installMode": "lazy",
       "updateMode": "prefetch",
       "resources": {
         "files": [
-          "/assets/**",
-          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+          "/assets/**"
         ]
       }
     }

package-lock.json

@@ -9081,9 +9081,9 @@
 			"devOptional": true
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.609",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz",
-			"integrity": "sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw==",
+			"version": "1.4.610",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.610.tgz",
+			"integrity": "sha512-mqi2oL1mfeHYtOdCxbPQYV/PL7YrQlxbvFEZ0Ee8GbDdShimqt2/S6z2RWqysuvlwdOrQdqvE0KZrBTipAeJzg==",
 			"dev": true
 		},
 		"node_modules/elliptic": {
@@ -14226,9 +14226,9 @@
 			}
 		},
 		"node_modules/needle": {
-			"version": "3.3.0",
-			"resolved": "https://registry.npmjs.org/needle/-/needle-3.3.0.tgz",
-			"integrity": "sha512-Kaq820952NOrLY/LVbIhPZeXtCGDBAPVgT0BYnoT3p/Nr3nkGXdvWXXA3zgy7wpAgqRULu9p/NvKiFo6f/12fw==",
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+			"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
 			"dev": true,
 			"optional": true,
 			"dependencies": {

package.json

@@ -9,8 +9,8 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/cdk": "^17.0.0",
 		"@angular/animations": "^17.0.0",
+		"@angular/cdk": "^17.0.0",
 		"@angular/common": "^17.0.0",
 		"@angular/compiler": "^17.0.0",
 		"@angular/core": "^17.0.0",
@@ -45,7 +45,6 @@
 		"@angular/cli": "^17.0.0",
 		"@angular/compiler-cli": "^17.0.0",
 		"@types/leaflet": "^1.5.1",
-		"@types/lodash": "^4.14.138",
 		"firebase-tools": "^12.0.0",
 		"typescript": "~5.2.2"
 	}

src/app/app.module.ts

@@ -1,11 +1,11 @@
-import {NgModule} from "@angular/core";
+import {isDevMode, NgModule} from "@angular/core";
 import {FormsModule} from "@angular/forms";
 import {BrowserModule} from "@angular/platform-browser";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
 import {ServiceWorkerModule} from "@angular/service-worker";
 import {ClickOutsideModule} from "ng-click-outside";
 import {ColorPickerModule} from "ngx-color-picker";
-import {environment} from '../environments/environment';
+import {AppComponent} from './app.component';
 import {AppRouting} from './app.routing';
 import {CalibrateComponent} from "./components/calibrate/calibrate.component";
 import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component";
@@ -16,7 +16,6 @@ import {PermissionsComponent} from "./components/permissions/permissions.compone
 import {StarrySkyComponent} from "./components/starrySky/starrySky.component";
 import {ToolbarComponent} from "./components/toolbar/toolbar.component";
 import {MaterialModule} from "./material.module";
-import {AppComponent} from './app.component';
 import {HomeComponent} from "./views/home/home.component";
 import {MapComponent} from "./views/map/map.component";
 
@@ -42,8 +41,11 @@ import {MapComponent} from "./views/map/map.component";
 		ClickOutsideModule,
 		ColorPickerModule,
 		MaterialModule,
-		ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+		ServiceWorkerModule.register('ngsw-worker.js', {
+			enabled: !isDevMode(),
+			registrationStrategy: 'registerWhenStable:30000' // when stable or after 30 seconds
+		})
 	],
 	bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/index.html

@@ -8,28 +8,30 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
 	<meta name="theme-color" content="#000000">
-	<meta name="description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta name="description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<!-- Google / Search Engine Tags -->
 	<meta itemprop="name" content="Map Alliance">
-	<meta itemprop="description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta itemprop="description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<meta itemprop="image" content="/assets/icons/icon-512x512.png">
 	<!-- Facebook Meta Tags -->
 	<meta property="og:type" content="website">
 	<meta property="og:title" content="Map Alliance">
-	<meta property="og:description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta property="og:description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<meta property="og:image" content="/assets/icons/icon-512x512.png">
 	<!-- Twitter Meta Tags -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="Map Alliance">
-	<meta name="twitter:description" content="View & edit maps collaborative with real time GPS positioning.">
+	<meta name="twitter:description" content="View &amp; edit maps collaborative with real time GPS positioning.">
 	<meta name="twitter:image" content="/assets/icons/icon-512x512.png">
 
 	<link rel="icon" type="image/x-icon" href="/assets/images/logo.png">
 	<link rel="manifest" href="manifest.json">
 
-	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE" async defer></script>
+	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFtvCY6nH_HUoTBNf_5b-E8nRweSLYtxE"></script>
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
 <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
 </body>
 </html>

src/main.ts

@@ -8,3 +8,51 @@ initializeApp(environment.firebase);
 
 platformBrowserDynamic().bootstrapModule(AppModule)
 	.catch(err => console.error(err));
+
+// Leaflet touch polyfill ===========================================
+declare const L;
+
+// Touch support
+L.Map.mergeOptions({touchExtend: true});
+L.Map.TouchExtend = L.Handler.extend({
+	initialize: function (map) {
+		this._map = map;
+		this._container = map._container;
+		this._pane = map._panes.overlayPane;
+	},
+	addHooks: function () {
+		L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);
+		L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this);
+		L.DomEvent.on(this._container, 'touchmove', this._onTouchMove, this);
+	},
+	removeHooks: function () {
+		L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);
+		L.DomEvent.off(this._container, 'touchend', this._onTouchEnd);
+		L.DomEvent.off(this._container, 'touchmove', this._onTouchMove);
+	},
+	_eventWrapper: function(e) {
+		let containerPoint = this._map.mouseEventToContainerPoint(e);
+		let layerPoint = this._map.containerPointToLayerPoint(containerPoint);
+		let latlng = this._map.layerPointToLatLng(layerPoint);
+
+		return {
+			latlng: latlng,
+			layerPoint: layerPoint,
+			containerPoint: containerPoint,
+			originalEvent: e
+		}
+	},
+	_onTouchStart: function (e) {
+		if (!this._map._loaded) return;
+		this._map.fire('touchstart', this._eventWrapper(e));
+	},
+	_onTouchEnd: function (e) {
+		if (!this._map._loaded) return;
+		this._map.fire('touchend', this._eventWrapper(e));
+	},
+	_onTouchMove: function(e) {
+		if(!this._map._loaded) return;
+		this._map.fire('touchmove', this._eventWrapper(e));
+	}
+});
+L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);