From 03757becfde658d74c2e0c891ca181ddd19eed71 Mon Sep 17 00:00:00 2001 From: NatureFreshMilk Date: Fri, 30 Aug 2019 14:30:12 +0200 Subject: [PATCH] search route / separated map factory and component --- static/css/custom.css | 9 --- static/js/components/Map.js | 52 ++++++++++++++ static/js/components/Search.js | 6 ++ static/js/components/SearchInput.js | 38 +++++++++++ static/js/map/MapComponent.js | 79 ---------------------- static/js/map/MapFactory.js | 45 ++++++++++++ static/js/map/SearchControl.js | 7 +- static/js/{search => old}/SearchInput.js | 0 static/js/{search => old}/SearchMenu.js | 0 static/js/{search => old}/SearchResult.js | 0 static/js/{search => old}/SearchService.js | 0 static/js/{search => old}/SearchStore.js | 0 static/js/routes.js | 6 +- 13 files changed, 146 insertions(+), 96 deletions(-) create mode 100644 static/js/components/Map.js create mode 100644 static/js/components/Search.js create mode 100644 static/js/components/SearchInput.js delete mode 100644 static/js/map/MapComponent.js create mode 100644 static/js/map/MapFactory.js rename static/js/{search => old}/SearchInput.js (100%) rename static/js/{search => old}/SearchMenu.js (100%) rename static/js/{search => old}/SearchResult.js (100%) rename static/js/{search => old}/SearchService.js (100%) rename static/js/{search => old}/SearchStore.js (100%) diff --git a/static/css/custom.css b/static/css/custom.css index 0fa2fcc..b719fac 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -20,15 +20,6 @@ body { padding: 5px; } -#search-menu { - position: absolute; - top: 5%; - bottom: 5%; - left: 5%; - right: 5%; - z-index: 99999; -} - .mapserver-label-icon { margin-left: -100px !important; margin-top: -100px !important; diff --git a/static/js/components/Map.js b/static/js/components/Map.js new file mode 100644 index 0000000..f175ec4 --- /dev/null +++ b/static/js/components/Map.js @@ -0,0 +1,52 @@ +import wsChannel from '../WebSocketChannel.js'; +import layerManager from '../map/LayerManager.js'; +import { createMap } from '../map/MapFactory.js'; + +export default { + view(vnode){ + return m("div", { class: "full-screen" }); + }, + + oncreate(vnode){ + + const map = createMap( + vnode.dom, + +vnode.attrs.layerId, + +vnode.attrs.zoom, + +vnode.attrs.lat, + +vnode.attrs.lon + ); + + vnode.state.map = map; + + function updateHash(){ + const center = map.getCenter(); + const layerId = layerManager.getCurrentLayer().id; + + m.route.set(`/map/${layerId}/${map.getZoom()}/${center.lng}/${center.lat}`); + } + + map.on('zoomend', updateHash); + map.on('moveend', updateHash); + map.on('baselayerchange', updateHash); + }, + + onbeforeupdate(newVnode, oldVnode) { + const center = newVnode.state.map.getCenter(); + const newAattrs = newVnode.attrs; + + return newAattrs.layerId != layerManager.getCurrentLayer().id || + newAattrs.zoom != newVnode.state.map.getZoom() || + Math.abs(newAattrs.lat - center.lat) > 0.1 || + Math.abs(newAattrs.lat - center.lat) > 0.1; + }, + + onupdate(vnode){ + layerManager.switchLayer(+vnode.attrs.layerId); + vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom); + }, + + onremove(vnode){ + vnode.state.map.remove(); + } +} diff --git a/static/js/components/Search.js b/static/js/components/Search.js new file mode 100644 index 0000000..2448828 --- /dev/null +++ b/static/js/components/Search.js @@ -0,0 +1,6 @@ + +export default { + view(vnode){ + return m("div", vnode.attrs.query) + } +} diff --git a/static/js/components/SearchInput.js b/static/js/components/SearchInput.js new file mode 100644 index 0000000..0f4a320 --- /dev/null +++ b/static/js/components/SearchInput.js @@ -0,0 +1,38 @@ + +const state = { + query: "" +} + +function doSearch(){ + m.route.set(`/search/${state.query}`); +} + +export default { + view: function(){ + + function handleInput(e){ + state.query = e.target.value; + } + + function handleKeyDown(e){ + if (e.keyCode == 13){ + doSearch(); + } + } + + return m("div", { class: "input-group mb-3" }, [ + m("input[type=text]", { + placeholder: "Search", + class: "form-control", + oninput: handleInput, + onkeydown: handleKeyDown, + value: state.query + }), + m("div", { class: "input-group-append", onclick: doSearch }, [ + m("span", { class: "input-group-text" }, [ + m("i", { class: "fa fa-search"}) + ]) + ]) + ]); + } +}; diff --git a/static/js/map/MapComponent.js b/static/js/map/MapComponent.js deleted file mode 100644 index 46c1c75..0000000 --- a/static/js/map/MapComponent.js +++ /dev/null @@ -1,79 +0,0 @@ -import wsChannel from '../WebSocketChannel.js'; -import SimpleCRS from './SimpleCRS.js'; -import CoordinatesDisplay from './CoordinatesDisplay.js'; -import WorldInfoDisplay from './WorldInfoDisplay.js'; -import SearchControl from './SearchControl.js'; -import Overlaysetup from './Overlaysetup.js'; -import CustomOverlay from './CustomOverlay.js'; -import layerManager from './LayerManager.js'; -import config from '../config.js'; - -export default { - view(vnode){ - return m("div", { class: "full-screen" }); - }, - - oncreate(vnode){ - const cfg = config.get(); - - var map = L.map(vnode.dom, { - minZoom: 2, - maxZoom: 12, - center: [+vnode.attrs.lat, +vnode.attrs.lon], - zoom: +vnode.attrs.zoom, - crs: SimpleCRS - }); - - vnode.state.map = map; - - map.attributionControl.addAttribution('Minetest Mapserver'); - - var overlays = {}; - - layerManager.setup(wsChannel, cfg.layers, map, +vnode.attrs.layerId); - - //All overlays - Overlaysetup(cfg, map, overlays, wsChannel, layerManager); - CustomOverlay(map, overlays); - - new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map); - new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map); - - if (cfg.enablesearch){ - new SearchControl(wsChannel, { position: 'topright' }).addTo(map); - } - - //layer control - L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map); - - function updateHash(){ - const center = map.getCenter(); - const layerId = layerManager.getCurrentLayer().id; - - m.route.set(`/map/${layerId}/${map.getZoom()}/${center.lng}/${center.lat}`); - } - - map.on('zoomend', updateHash); - map.on('moveend', updateHash); - map.on('baselayerchange', updateHash); - }, - - onbeforeupdate(newVnode, oldVnode) { - const center = newVnode.state.map.getCenter(); - const newAattrs = newVnode.attrs; - - return newAattrs.layerId != layerManager.getCurrentLayer().id || - newAattrs.zoom != newVnode.state.map.getZoom() || - Math.abs(newAattrs.lat - center.lat) > 0.1 || - Math.abs(newAattrs.lat - center.lat) > 0.1; - }, - - onupdate(vnode){ - layerManager.switchLayer(+vnode.attrs.layerId); - vnode.state.map.setView([+vnode.attrs.lat, +vnode.attrs.lon], +vnode.attrs.zoom); - }, - - onremove(vnode){ - vnode.state.map.remove(); - } -} diff --git a/static/js/map/MapFactory.js b/static/js/map/MapFactory.js new file mode 100644 index 0000000..c49478f --- /dev/null +++ b/static/js/map/MapFactory.js @@ -0,0 +1,45 @@ +import wsChannel from '../WebSocketChannel.js'; +import SimpleCRS from './SimpleCRS.js'; +import CoordinatesDisplay from './CoordinatesDisplay.js'; +import WorldInfoDisplay from './WorldInfoDisplay.js'; +import SearchControl from './SearchControl.js'; +import Overlaysetup from './Overlaysetup.js'; +import CustomOverlay from './CustomOverlay.js'; +import layerManager from './LayerManager.js'; +import config from '../config.js'; + + +export function createMap(node, layerId, zoom, lat, lon){ + + const cfg = config.get(); + + const map = L.map(node, { + minZoom: 2, + maxZoom: 12, + center: [lat, lon], + zoom: zoom, + crs: SimpleCRS + }); + + map.attributionControl.addAttribution('Minetest Mapserver'); + + var overlays = {}; + + layerManager.setup(wsChannel, cfg.layers, map, layerId); + + //All overlays + Overlaysetup(cfg, map, overlays, wsChannel, layerManager); + CustomOverlay(map, overlays); + + new CoordinatesDisplay({ position: 'bottomleft' }).addTo(map); + new WorldInfoDisplay(wsChannel, { position: 'bottomright' }).addTo(map); + + if (cfg.enablesearch){ + new SearchControl(wsChannel, { position: 'topright' }).addTo(map); + } + + //layer control + L.control.layers(layerManager.layerObjects, overlays, { position: "topright" }).addTo(map); + + return map; +} diff --git a/static/js/map/SearchControl.js b/static/js/map/SearchControl.js index 8aefdf0..701cbf7 100644 --- a/static/js/map/SearchControl.js +++ b/static/js/map/SearchControl.js @@ -1,5 +1,4 @@ -import SearchMenu from '../search/SearchMenu.js'; -import SearchInput from '../search/SearchInput.js'; +import SearchInput from '../components/SearchInput.js'; export default L.Control.extend({ initialize: function(wsChannel, opts) { @@ -9,10 +8,6 @@ export default L.Control.extend({ onAdd: function(map) { var div = L.DomUtil.create('div'); m.mount(div, SearchInput); - m.mount(document.getElementById("search-content"), { - view: () => m(SearchMenu, {map: map}) - }); - return div; } }); diff --git a/static/js/search/SearchInput.js b/static/js/old/SearchInput.js similarity index 100% rename from static/js/search/SearchInput.js rename to static/js/old/SearchInput.js diff --git a/static/js/search/SearchMenu.js b/static/js/old/SearchMenu.js similarity index 100% rename from static/js/search/SearchMenu.js rename to static/js/old/SearchMenu.js diff --git a/static/js/search/SearchResult.js b/static/js/old/SearchResult.js similarity index 100% rename from static/js/search/SearchResult.js rename to static/js/old/SearchResult.js diff --git a/static/js/search/SearchService.js b/static/js/old/SearchService.js similarity index 100% rename from static/js/search/SearchService.js rename to static/js/old/SearchService.js diff --git a/static/js/search/SearchStore.js b/static/js/old/SearchStore.js similarity index 100% rename from static/js/search/SearchStore.js rename to static/js/old/SearchStore.js diff --git a/static/js/routes.js b/static/js/routes.js index bf2128e..6ae3f1a 100644 --- a/static/js/routes.js +++ b/static/js/routes.js @@ -1,5 +1,6 @@ -import MapComponent from './map/MapComponent.js'; +import Map from './components/Map.js'; +import Search from './components/Search.js'; var Home = { view: function() { @@ -9,5 +10,6 @@ var Home = { export default { "/": Home, - "/map/:layerId/:zoom/:lon/:lat": MapComponent + "/map/:layerId/:zoom/:lon/:lat": Map, + "/search/:query": Search }