Clean new code architecture

commit 5a25135
Author: Tom Darboux <[email protected]>
Date:   Sat Feb 19 05:30:38 2022 +0100

    Fixes and update js linter

commit 89b3b19
Author: Tom Darboux <[email protected]>
Date:   Sat Feb 19 05:04:56 2022 +0100

    update architecture

Author: tjiho

Diff for: .gitignore

@@ -1 +1,2 @@
 node_modules/
+*.kate-swp

Diff for: README.md

@@ -14,21 +14,21 @@ That's all, put it behind the server of your choice. For dev, I use PHP with `ph
 
 ## Install a search and reverse server:
 
-I use ADDOK: `https://addok.readthedocs.io/en/latest/`, it's quite easy to install and works very well with french addresses.
+I use ADDOK: https://addok.readthedocs.io/en/latest/, it's quite easy to install and works very well with french addresses.
 
-There are other. Qwant maps uses `https://github.com/CanalTP/mimirsbrunn`
+There are other. Qwant maps uses https://github.com/CanalTP/mimirsbrunn
 
 ## Serving tiles
 
-For a small server, there is `https://openmaptiles.org/`. Qwant maps uses a more complex stack, see `https://github.com/Qwant/qwantmaps`
+For a small server, there is https://openmaptiles.org/. Qwant maps uses a more complex stack, see https://github.com/Qwant/qwantmaps
 
 If you don't want to host tiles yourself, maptiler or mapbox offer hosting solutions.
 
 You can use ppsfleet tiles for testing, but only for testing.
 
 
+## Dev
 
+It does not need compilation.
 
-
-
-
+To check the code: `npm standard --fix`

Diff for: config.js

@@ -1,5 +1,5 @@
-BASE_MAP_URL = 'https://maps.ppsfleet.navy/tileserver-data/qwant-basic-gl-style-toulouse/built-style-debug.json'
+const BASE_MAP_URL = 'https://maps.ppsfleet.navy/tileserver-data/qwant-basic-gl-style-toulouse/built-style-debug.json'
 
-BASE_SEARCH_URL = (query) => `https://search.maps.ppsfleet.navy/search/?q=${query}`
+const BASE_SEARCH_URL = (query) => `https://search.maps.ppsfleet.navy/search/?q=${query}`
 
-BASE_REVERSE_URL = (lat,lng) => `https://search.maps.ppsfleet.navy/reverse?lat=${lat}&lon=${lng}`
+const BASE_REVERSE_URL = (lat, lng) => `https://search.maps.ppsfleet.navy/reverse?lat=${lat}&lon=${lng}`

Diff for: index.php

@@ -15,7 +15,7 @@
     <link href='https://maps.ppsfleet.navy/maplibre/mapbox-gl.css' rel='stylesheet' />
     <!-- css -->
     <link href='https://static.ppsfleet.navy/fonts/russisch-sans/style.css' rel='stylesheet' />
-    <link href='./static/css/style.css' rel='stylesheet' />
+    <link href='./src/css/style.css' rel='stylesheet' />
     <!-- config -->
     <script src='./config.js'></script>
     <style>
@@ -40,70 +40,16 @@
     <!-- todo: add a contextmenu -->
 
     <script type="module">
-      import { parseHashCoordinates } from './static/js/tools/parseHashCoordinates.js'
-      import { Search } from './static/js/Search.js'
-      import { Place } from './static/js/Place.js'
-      import { BaseChipComponent } from './static/js/components/BaseChipComponent.js'
+      import search from './src/singletons/search.js'
+      import map from './src/singletons/map.js'
 
-      customElements.define('base-chip', BaseChipComponent)
+      import PlaceComponent from './src/components/PlaceComponent.js'
+      customElements.define('c-place', PlaceComponent)
 
-      let params = new URLSearchParams(window.location.search);
-      const {lng, lat, zoom} = parseHashCoordinates(params.get("map") || '', 1.4436, 43.6042, 13)
-
-      var map = new mapboxgl.Map({
-        container: 'map',
-        style: BASE_MAP_URL,
-        center: [lng, lat],
-        zoom: zoom,
-      });
-
-      var nav = new mapboxgl.NavigationControl();
-
-      var gps = new mapboxgl.GeolocateControl({
-        positionOptions: {
-          enableHighAccuracy: true
-        },
-        trackUserLocation: true
-      })
-
-      var scale = new mapboxgl.ScaleControl({
-        maxWidth: 80,
-        unit: 'metric'
-      });
-
-      const search = new Search(map)
-
-      map.addControl(nav, 'bottom-right');
-      map.addControl(gps, 'bottom-right');
-      map.addControl(scale);
-
-      map.on('load', function() {
-
-      });
-
-      map.on('contextmenu', function(e) {
-        new Place(map, e.lngLat.lat, e.lngLat.lng)
-      })
-
-      map.on('moveend', function() {
-        const {lng, lat} = map.getCenter();
-        const zoom = map.getZoom();
-        const hash = `map=${zoom}/${lat}/${lng}`
-        history.replaceState(null, null, `${document.location.pathname}?${hash}`);
-      });
     </script>
 
-    <template id="template-base-chip">
-      <div class="chip_delete">
-        <img src="./static/images/breeze/edit-delete-black.svg" class="icon--medium icon--white"/>
-      </div>
-      <div class="chip__name">
-        <slot name="name">empty</slot>
-      </div>
-      <div class="chip__actions">
-        <slot name="actions"></slot>
-      </div>
-      <link href='./static/css/chip.css' rel='stylesheet' />
-    </template>
+    <?php
+      include "src/components/ChipBaseTemplate.php";
+    ?>
 </body>
 </html>

Diff for: static/js/components/BaseChipComponent.js renamed to src/components/ChipBaseComponent.js

@@ -1,10 +1,10 @@
-export class BaseChipComponent extends HTMLElement {
+export default class ChipBaseComponent extends HTMLElement {
   constructor () {
     super()
     const template = document
-      .getElementById('template-base-chip')
+      .getElementById('template-chip-base')
       .content
-    const shadowRoot = this.attachShadow({ mode: 'open' })
+    this.attachShadow({ mode: 'open' })
       .appendChild(template.cloneNode(true))
 
     this.shadowRoot.querySelector('.chip_delete').addEventListener('click', (event) => {
@@ -16,6 +16,8 @@ export class BaseChipComponent extends HTMLElement {
       this.shadowRoot.dispatchEvent(deleteEvent)
       event.stopPropagation()
     })
+
+    this.setName(this.getAttribute('name'))
   }
 
   static get observedAttributes () {
@@ -25,8 +27,14 @@ export class BaseChipComponent extends HTMLElement {
   attributeChangedCallback (name, oldValue, newValue) {
     switch (name) {
       case 'name':
-        this.shadowRoot.querySelector('.chip__name').innerText = newValue
+        this.setName(newValue)
         break
     }
   }
+
+  setName (name) {
+    if (name) {
+      this.shadowRoot.querySelector('.chip__name').innerText = name
+    }
+  }
 }

Diff for: src/components/ChipBaseTemplate.php

@@ -0,0 +1,12 @@
+<template id="template-chip-base">
+  <div class="chip_delete">
+    <img src="./static/images/breeze/edit-delete-black.svg" class="icon--medium icon--white"/>
+  </div>
+  <div class="chip__name">
+    <slot name="name">empty</slot>
+  </div>
+  <div class="chip__actions">
+    <slot name="actions"></slot>
+  </div>
+  <link href='./src/css/chip.css' rel='stylesheet' />
+</template>

Diff for: src/components/PlaceComponent.js

@@ -0,0 +1,34 @@
+import map from '../singletons/map.js'
+import ChipBaseComponent from './ChipBaseComponent.js'
+
+export default class PlaceComponent extends ChipBaseComponent {
+  constructor () {
+    super()
+
+    this.addEventListener('delete', (e) => {
+      this.marker.remove()
+      this.remove()
+    })
+
+    this.addEventListener('click', (e) => {
+      map.flyTo({ center: [this._lng, this._lat], zoom: 13 })
+    })
+  }
+
+  set coordinates ({ lat, lng }) {
+    this._lat = lat
+    this._lng = lng
+    this.addMarker(lat, lng)
+  }
+
+  get coordinates () {
+    return { lat: this._lat, lng: this._lng }
+  }
+
+  addMarker (lat, lng) {
+    this?.marker?.remove()
+    this.marker = new mapboxgl.Marker()
+      .setLngLat([lng, lat])
+      .addTo(map)
+  }
+}

Diff for: static/css/chip.css renamed to src/css/chip.css

@@ -0,0 +1,49 @@
+import parseHashCoordinates from '../tools/parseHashCoordinates.js'
+import places from './places.js'
+
+class Map extends mapboxgl.Map {
+  constructor () {
+    console.log('Init map')
+    const params = new URLSearchParams(window.location.search)
+    const { lng, lat, zoom } = parseHashCoordinates(params.get('map') || '', 1.4436, 43.6042, 13)
+
+    super({
+      container: 'map',
+      style: BASE_MAP_URL,
+      center: [lng, lat],
+      zoom: zoom
+    })
+
+    const nav = new mapboxgl.NavigationControl()
+
+    const gps = new mapboxgl.GeolocateControl({
+      positionOptions: {
+        enableHighAccuracy: true
+      },
+      trackUserLocation: true
+    })
+
+    const scale = new mapboxgl.ScaleControl({
+      maxWidth: 80,
+      unit: 'metric'
+    })
+
+    this.addControl(nav, 'bottom-right')
+    this.addControl(gps, 'bottom-right')
+    this.addControl(scale)
+
+    this.on('contextmenu', function (e) {
+      places.add(e.lngLat.lat, e.lngLat.lng)
+    })
+
+    this.on('moveend', function () {
+      const { lng, lat } = map.getCenter()
+      const zoom = map.getZoom()
+      const hash = `map=${zoom}/${lat}/${lng}`
+      history.replaceState(null, null, `${document.location.pathname}?${hash}`)
+    })
+  }
+}
+
+const map = new Map()
+export default map

Diff for: static/css/global.css renamed to src/css/global.css

@@ -0,0 +1,18 @@
+import reverseSearch from '../tools/reverseSearch.js'
+
+class Places {
+  constructor () {
+    this.parent = document.getElementById('places')
+  }
+
+  add (lat, lng, name) {
+    const element = document.createElement('c-place')
+    name ? element.setAttribute('name', name) : reverseSearch(lat, lng, (value) => { element.setAttribute('name', value.features[0].properties.label) })
+    this.parent.appendChild(element)
+    element.coordinates = { lat, lng }
+    return element
+  }
+}
+
+const places = new Places()
+export default places

Diff for: static/css/style.css renamed to src/css/style.css

@@ -1,8 +1,9 @@
-import { Place } from './Place.js'
-import { debounce } from './tools/debounce.js'
+import debounce from '../tools/debounce.js'
+import map from './map.js'
+import places from './places.js'
 
 export class Search {
-  constructor (map) {
+  constructor () {
     this.lazySearch = debounce(this.search.bind(this), 300)
 
     document.getElementById('search-input').addEventListener('input', (e) => {
@@ -14,7 +15,7 @@ export class Search {
   }
 
   clickOnResult (result) {
-    new Place(this.map, result.geometry.coordinates[1], result.geometry.coordinates[0], result?.properties?.label)
+    places.add(result.geometry.coordinates[1], result.geometry.coordinates[0], result?.properties?.label)
     this.map.flyTo({ center: result.geometry.coordinates, zoom: 13 })
     this.cleanSearchResults()
   }
@@ -63,6 +64,8 @@ export class Search {
   cleanSearchResults () {
     document.getElementById('search-results').innerHTML = ''
     document.getElementById('search-input').parentNode.classList.remove('search-label--with-results')
-
   }
 }
+
+const search = new Search()
+export default search

Diff for: src/singletons/map.js

@@ -1,4 +1,4 @@
-export function debounce (func, timeout = 300) {
+export default function debounce (func, timeout = 300) {
   let timer
   return (...args) => {
     clearTimeout(timer)

Diff for: src/singletons/places.js

@@ -1,4 +1,4 @@
-export function parseHashCoordinates (hash, defaultLng, defaultLat, defaultZoom) {
+export default function parseHashCoordinates (hash, defaultLng, defaultLat, defaultZoom) {
   const coordinates = hash.replace('#map=', '').split('/')
 
   return {

Diff for: static/js/Search.js renamed to src/singletons/search.js

@@ -0,0 +1,5 @@
+export default function reverseSearch (lat, lng, callback) {
+  window.fetch(BASE_REVERSE_URL(lat, lng)).then((response) => {
+    response.json().then(callback)
+  })
+}

Diff for: static/js/tools/debounce.js renamed to src/tools/debounce.js

@@ -1,14 +1,7 @@
 # Code organisation
 
- **TODO: Keep Place.js and Search.js in class ?**
-
- What about just functions (as linter says "Do not use 'new' for side effects.") ?
-
- If they are functions, are they tools ?
-
  **TODO: Find a css linter**
 
-
 # Features
 
  **TODO: Itinerary**
@@ -22,3 +15,5 @@
  - With a backend ? random id like etherpad
  - In the Url ?
  - In the localStorage ? But it's not shareable and it's not persistent in the long-term
+
+ **TODO: Display information from wikipedia / wikidata**