vuejs rewrite

.github/workflows/build.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up Go
         uses: actions/[email protected]
         with:
-          go-version: 1.16
+          go-version: 1.17
 
       - name: Set up nodejs
         uses: actions/setup-node@v3

.github/workflows/go-test.yml

@@ -11,10 +11,12 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/[email protected]
       with:
-        go-version: '1.16'
+        go-version: '1.17'
 
     - name: test
-      run: go test ./... -coverprofile=profile.cov
+      run: |
+        cd public && npm ci && cd ..
+        go test ./... -coverprofile=profile.cov
 
     - uses: shogo82148/[email protected]
       with:

db/sqlite/sqlite.go

@@ -2,6 +2,7 @@ package sqlite
 
 import (
 	"database/sql"
+	"errors"
 	"mapserver/coords"
 	"mapserver/db"
 	"mapserver/public"
@@ -24,7 +25,7 @@ type Sqlite3Accessor struct {
 func (db *Sqlite3Accessor) Migrate() error {
 
 	//RW connection
-	rwdb, err := sql.Open("sqlite", db.filename+"?mode=rw")
+	rwdb, err := sql.Open("sqlite", "file:"+db.filename+"?mode=rw")
 	if err != nil {
 		return err
 	}
@@ -164,18 +165,21 @@ func (db *Sqlite3Accessor) GetBlock(pos *coords.MapBlockCoords) (*db.Block, erro
 }
 
 func New(filename string) (*Sqlite3Accessor, error) {
-	db, err := sql.Open("sqlite", filename+"?mode=ro")
+	db, err := sql.Open("sqlite", "file:"+filename)
 	if err != nil {
 		return nil, err
 	}
 
-	// limit connection and set a busy-timeout to prevent errors if the db should be locked sometimes
-	db.SetMaxOpenConns(1)
 	_, err = db.Exec("pragma busy_timeout = 5000;")
 	if err != nil {
 		return nil, err
 	}
 
+	_, err = db.Exec("pragma journal_mode = wal;")
+	if err != nil {
+		return nil, errors.New("could not set db to wal-mode, please stop the minetest-server to allow this one-time fixup")
+	}
+
 	sq := &Sqlite3Accessor{db: db, filename: filename}
 	return sq, nil
 }

public/css/custom.css

@@ -1,32 +1,13 @@
-
 html {
-  height: 100%;
-  margin: 0;
+    height: 100%;
+    margin: 0;
 }
+
 body {
-  height: 100%;
-  margin: 0;
+    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;
-}
+    height: 100%;
+}

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

@@ -6,10 +6,10 @@
     <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"/>
+    <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 @@ <h5 id="title">Starting mapserver...</h5>
     </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/api/config.js

@@ -0,0 +1,2 @@
+
+export const get = () => fetch("api/config").then(r => r.json());

public/js/api/stats.js

@@ -0,0 +1,2 @@
+
+export const get = () => fetch("api/stats").then(r => r.json());

public/js/app.js

@@ -0,0 +1,5 @@
+export default {
+	template: /*html*/`
+		<router-view></router-view>
+	`
+};

public/js/components/Map.js

@@ -1,61 +1,73 @@
-import layerManager from '../LayerManager.js';
-import { createMap } from '../map/MapFactory.js';
+import SimpleCRS from "../utils/SimpleCRS.js";
+import RealtimeTileLayer from '../utils/RealtimeTileLayer.js';
+import ws from '../service/ws.js';
+import { getLayerById } from "../service/layer.js";
+import CoordinatesDisplay from "../../old/js/map/CoordinatesDisplay.js";
+import WorldInfoDisplay from "../utils/WorldInfoDisplay.js";
 
-function setupMap(vnode, id){
-  const map = createMap(
-    id,
-    layerManager.getCurrentLayer().id,
-    +vnode.attrs.zoom,
-    +vnode.attrs.lat,
-    +vnode.attrs.lon
-  );
+export default {
+    props: ["lat", "lon", "zoom", "layerId"],
+    mounted: function() {
+        const layer = getLayerById(this.layerId);
+        console.log("Map::mounted", this.lat, this.lon, this.zoom, this.layerId, layer);
 
-  vnode.state.map = map;
+        const map = L.map(this.$refs.target, {
+            minZoom: 2,
+            maxZoom: 12,
+            center: [this.lat, this.lon],
+            zoom: this.zoom,
+            crs: SimpleCRS,
+            maxBounds: L.latLngBounds(
+              L.latLng(-31000, -31000),
+              L.latLng(31000, 31000)
+            )
+        });
 
-  function updateHash(){
-    const center = map.getCenter();
-    const layerId = layerManager.getCurrentLayer().id;
 
-    m.route.set(`/map/${layerId}/${map.getZoom()}/` +
-      `${Math.floor(center.lng)}/${Math.floor(center.lat)}`);
-  }
+        const updateLink = () => {
+            const center = map.getCenter();
+            const lon = Math.floor(center.lng);
+            const lat = Math.floor(center.lat);
+            console.log("Map::updateLink", map.getZoom(), lon, lat);
+            // change hash route
+            this.$router.push({
+                name: "map",
+                params: {
+                    lat: lat,
+                    lon: lon,
+                    zoom: map.getZoom(),
+                    layerId: this.layerId
+                }
+            });
+        };
 
-  map.on('zoomend', updateHash);
-  map.on('moveend', updateHash);
+        // listen for route change
+        map.on('zoomend', updateLink);
+        map.on('moveend', updateLink);
 
-  return map;
-}
+        // add attribution
+        map.attributionControl.addAttribution('<a href="https://github.com/minetest-mapserver/mapserver">Minetest Mapserver</a>');
 
-export default {
+        // TODO: all layers
+        var tileLayer = new RealtimeTileLayer(ws, this.layerId, map);
+        tileLayer.addTo(map);
+
+        // various map tools
+        new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map);
+        new WorldInfoDisplay(ws, { position: 'bottomright' }).addTo(map);
 
-  oninit(){
-    this.id = "map_" + Math.floor(Math.random() * 10000);
-  },
-
-  view(){
-    return m("div", { class: "full-screen", id: this.id });
-  },
-
-  oncreate(vnode){
-    this.map = setupMap(vnode, this.id);
-  },
-
-  onupdate(vnode){
-    if (vnode.attrs.layerId != layerManager.getCurrentLayer().id){
-      //layer changed, recreate map
-      this.map.remove();
-      layerManager.setLayerId(vnode.attrs.layerId);
-      this.map = setupMap(vnode, this.id);
-
-    } else {
-      //position/zoom change
-      //this.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom);
-
-    }
-    return false;
-  },
-
-  onremove(){
-    this.map.remove();
-  }
-};
+        console.log(map);
+    },
+    methods: {
+        updateMap: function() {
+            const layer = getLayerById(this.layerId);
+            console.log("Map::updateMap", this.lat, this.lon, this.zoom, this.layerId, layer);
+        }
+    },
+    watch: {
+        "$route": "updateMap"
+    },
+    template: /*html*/`
+        <div ref="target" style="height: 100%"></div>
+    `
+};