From 54bae43d2ed7e4fc5cb1126545e38eec1b9a33ec Mon Sep 17 00:00:00 2001
From: Donald Zou <donaldzou@live.hk>
Date: Wed, 2 Oct 2024 22:00:53 +0800
Subject: [PATCH] Update osmap.vue

Added "Dark Mode" to OSM
---
 src/static/app/src/components/map/osmap.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/static/app/src/components/map/osmap.vue b/src/static/app/src/components/map/osmap.vue
index d694264..45083b0 100644
--- a/src/static/app/src/components/map/osmap.vue
+++ b/src/static/app/src/components/map/osmap.vue
@@ -10,6 +10,7 @@ import {LineString, Point} from "ol/geom"
 import {Circle, Fill, Stroke, Style, Text} from "ol/style.js";
 import {Vector} from "ol/layer"
 import {Vector as SourceVector} from "ol/source"
+import {DashboardConfigurationStore} from "@/stores/DashboardConfigurationStore.js";
 
 export default {
 	name: "osmap",
@@ -22,6 +23,12 @@ export default {
 			osmAvailable: true
 		}
 	},
+	setup(){
+		const store = DashboardConfigurationStore();
+		return {
+			store
+		}
+	},
 	methods: {
 		getLastLonLat(){
 			if (this.type === 'traceroute'){
@@ -107,6 +114,11 @@ export default {
 					}
 				});
 				map.addLayer(vectorLayer);
+				if (this.store.Configuration.Server.dashboard_theme === 'dark'){
+					map.on('postcompose',function(e){
+						document.querySelector('#map').style.filter="grayscale(80%) invert(100%) ";
+					});
+				}
 			}).catch(e => {
 				this.osmAvailable = false
 			})