vuejs stuff

public/css/custom.css

@@ -1,32 +0,0 @@
-
-html {
-  height: 100%;
-  margin: 0;
-}
-body {
-  height: 100%;
-  margin: 0;
-}
-
-#app {
-  height: 100%;
-}
-
-#title {
-  text-align: center;
-}
-
-.full-screen {
-  width: 100%;
-  height: 100%;
-}
-
-.leaflet-custom-display {
-  background: #fff;
-  padding: 5px;
-}
-
-.mapserver-label-icon {
-  margin-left: -100px !important;
-  margin-top: -100px !important;
-}

public/embed.go

@@ -2,12 +2,16 @@ package public
 
 import "embed"
 
+//go:embed js/* css/* pics/* index.html
+//go:embed node_modules/vue/dist/vue.global.prod.js
+//go:embed node_modules/vue-router/dist/vue-router.global.prod.js
+//go:embed node_modules/@fortawesome/fontawesome-free/css/all.min.css
+//go:embed node_modules/@fortawesome/fontawesome-free/webfonts/*
+//go:embed node_modules/leaflet/dist/leaflet.js
+//go:embed node_modules/leaflet/dist/leaflet.css
+//go:embed node_modules/leaflet/dist/images
+//go:embed node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.css
 //go:embed colors/*
-//go:embed css/*
-//go:embed pics/*
 //go:embed sql/*
-//go:embed webfonts/*
-//go:embed *.html
 //go:embed *.txt
-//go:embed js/*
 var Files embed.FS

public/index.html

@@ -5,11 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta name="theme-color" content="#000">
 
-    <!-- styles -->
-    <link rel="stylesheet" href="css/bootstrap.min.css"/>
-    <link rel="stylesheet" href="css/fontawesome.min.css"/>
-    <link rel="stylesheet" href="css/leaflet.css"/>
-    <link rel="stylesheet" href="css/leaflet.awesome-markers.css"/>
+		<!-- styles -->
+		<link rel="stylesheet" href="node_modules/bootswatch/dist/cyborg/bootstrap.min.css"/>
+		<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"/>
+    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css"/>
+    <link rel="stylesheet" href="node_modules/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"/>
     <link rel="stylesheet" href="css/custom.css"/>
 
     <title>Minetest Mapserver</title>
@@ -21,10 +21,9 @@
     </div>
 
     <!-- libraries -->
-    <script src="js/lib/mithril.min.js"></script>
-    <script src="js/lib/leaflet.js"></script>
-    <script src="js/lib/leaflet.awesome-markers.js"></script>
-    <script src="js/lib/moment.min.js"></script>
+		<script src="node_modules/vue/dist/vue.global.prod.js"></script>
+		<script src="node_modules/vue-router/dist/vue-router.global.prod.js"></script>
+    <script src="node_modules/leaflet/dist/leaflet.js"></script>
 
     <!-- main script -->
     <script src="js/bundle.js" onerror="import('./js/main.js')"></script>

public/js/.jshintignore

@@ -1,3 +1 @@
 bundle.js
-bundle-stats.js
-lib/*

public/js/.jshintrc

@@ -4,9 +4,9 @@
   "esversion": 6,
   "browser": true,
   "globals": {
-    "L": true,
-    "m": true,
-    "THREE": true,
-    "console": true
+    "Vue": true,
+    "VueRouter": true,
+    "console": true,
+    "L": true
   }
 }

public/js/app.js

@@ -0,0 +1,11 @@
+export default {
+	template: /*html*/`
+		<div>
+			<div class="container-fluid">
+				<br>
+				TODO: content
+				<router-view></router-view>
+			</div>
+		</div>
+	`
+};

public/js/main.js

@@ -1,21 +1,13 @@
-
-import { getConfig } from './api.js';
+import App from './app.js';
 import routes from './routes.js';
-import wsChannel from './WebSocketChannel.js';
-import config from './config.js';
-import { hashCompat } from './compat.js';
-import layerManager from './LayerManager.js';
 
-// hash route compat
-hashCompat();
-
-getConfig()
-.then(cfg => {
-  layerManager.setup(cfg.layers);
-  config.set(cfg);
-  wsChannel.connect();
-  m.route(document.getElementById("app"), "/map/0/12/0/0", routes);
-})
-.catch(e => {
-  document.getElementById("app").innerHTML = e;
+// create router instance
+const router = VueRouter.createRouter({
+	history: VueRouter.createWebHashHistory(),
+	routes: routes
 });
+
+// start vue
+const app = Vue.createApp(App);
+app.use(router);
+app.mount("#app");

public/js/rollup.config.js

@@ -1,5 +1,5 @@
 
-export default {
+export default [{
 	input: 'main.js',
 	output: {
 		file :'bundle.js',
@@ -7,4 +7,4 @@ export default {
 		sourcemap: true,
 		compact: true
 	}
-};
+}];

public/js/routes.js

@@ -1,8 +1,6 @@
 
-import Map from './components/Map.js';
-import Search from './components/Search.js';
-
-export default {
-  "/map/:layerId/:zoom/:lon/:lat": Map,
-  "/search/:query": Search
-};
+export default [{
+	path: "/", component: {
+		template: "<div>start</div>"
+	}
+}];

public/old/css/custom.css

@@ -0,0 +1,32 @@
+
+html {
+  height: 100%;
+  margin: 0;
+}
+body {
+  height: 100%;
+  margin: 0;
+}
+
+#app {
+  height: 100%;
+}
+
+#title {
+  text-align: center;
+}
+
+.full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.leaflet-custom-display {
+  background: #fff;
+  padding: 5px;
+}
+
+.mapserver-label-icon {
+  margin-left: -100px !important;
+  margin-top: -100px !important;
+}

public/old/js/.jshintignore

@@ -0,0 +1,3 @@
+bundle.js
+bundle-stats.js
+lib/*

public/old/js/.jshintrc

@@ -0,0 +1,12 @@
+{
+  "undef": true,
+  "unused": true,
+  "esversion": 6,
+  "browser": true,
+  "globals": {
+    "L": true,
+    "m": true,
+    "THREE": true,
+    "console": true
+  }
+}

public/old/js/main.js

@@ -0,0 +1,21 @@
+
+import { getConfig } from './api.js';
+import routes from './routes.js';
+import wsChannel from './WebSocketChannel.js';
+import config from './config.js';
+import { hashCompat } from './compat.js';
+import layerManager from './LayerManager.js';
+
+// hash route compat
+hashCompat();
+
+getConfig()
+.then(cfg => {
+  layerManager.setup(cfg.layers);
+  config.set(cfg);
+  wsChannel.connect();
+  m.route(document.getElementById("app"), "/map/0/12/0/0", routes);
+})
+.catch(e => {
+  document.getElementById("app").innerHTML = e;
+});

public/old/js/rollup.config.js

@@ -0,0 +1,10 @@
+
+export default {
+	input: 'main.js',
+	output: {
+		file :'bundle.js',
+		format: 'iife',
+		sourcemap: true,
+		compact: true
+	}
+};

public/old/js/routes.js

@@ -0,0 +1,8 @@
+
+import Map from './components/Map.js';
+import Search from './components/Search.js';
+
+export default {
+  "/map/:layerId/:zoom/:lon/:lat": Map,
+  "/search/:query": Search
+};