VueJS rewrite;
This commit is contained in:
parent
97b62ca02c
commit
fd4ba2a8bb
12
.editorconfig
Normal file
12
.editorconfig
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
trim_trailing_whitespace = false
|
||||||
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
node_modules
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# poi dist
|
||||||
|
dist
|
||||||
47
README.md
Normal file
47
README.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
# app
|
||||||
|
|
||||||
|
> My posh Vue project
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
You can replace `yarn` with `npm run` here.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# build for production
|
||||||
|
yarn build
|
||||||
|
|
||||||
|
# development mode
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# run unit tests
|
||||||
|
yarn test
|
||||||
|
|
||||||
|
# serve the bundled dist folder in production mode
|
||||||
|
yarn serve
|
||||||
|
```
|
||||||
|
|
||||||
|
## Polyfills
|
||||||
|
|
||||||
|
By default we only polyfill `window.Promise` and `Object.assign`. You can add more polyfills in `./src/polyfills.js`.
|
||||||
|
|
||||||
|
## Analyze bundle size
|
||||||
|
|
||||||
|
Run `yarn report` to get a report of bundle size which helps you:
|
||||||
|
|
||||||
|
- Realize what's really inside your bundle
|
||||||
|
- Find out what modules make up the most of it's size
|
||||||
|
- Find modules that got there by mistake
|
||||||
|
- Optimize it!
|
||||||
|
|
||||||
|
## Progress Web App
|
||||||
|
|
||||||
|
Your app is now offline-ready (only in production bundle), which means you can visit it without network.
|
||||||
|
|
||||||
|
Here we use a default [manifest.json](./static/manifest.json) to configurure your pwa, for example, to enable *Add to Home Screen* feature on Android. It will be copied directly to `./dist/manifest.json`.
|
||||||
|
|
||||||
|
|
||||||
|
For all the available options, please head to [poi-preset-offline](https://github.com/egoist/poi/tree/master/packages/poi-preset-offline#api).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This project is generated by [create-vue-app](https://github.com/vue-land/create-vue-app).
|
||||||
29
index.ejs
Normal file
29
index.ejs
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
<meta name="theme-color" content="#4DBA87">
|
||||||
|
|
||||||
|
|
||||||
|
<% if (htmlWebpackPlugin.options.description) { %>
|
||||||
|
<meta name="description" content="<%= htmlWebpackPlugin.options.description %>"/>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<% for (var chunk of webpack.chunks) {
|
||||||
|
for (var file of chunk.files) {
|
||||||
|
if (file.match(/\.(js|css)$/)) { %>
|
||||||
|
<link rel="<%= chunk.initial?'preload':'prefetch' %>" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
You need to enable JavaScript to run this app.
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
37
index.html
37
index.html
@ -1,37 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Cool places in Lyon 7</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
|
|
||||||
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
|
|
||||||
crossorigin=""/>
|
|
||||||
<link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1>Magellan</h1>
|
|
||||||
<form class="form" id="form">
|
|
||||||
<div class="form-group">
|
|
||||||
<input id="address" class="form-control" type="text" name="title" placeholder="Adresse">
|
|
||||||
<input id="submit" class="btn btn-primary" type="submit" value="Search">
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<ul id="results"></ul>
|
|
||||||
<hr>
|
|
||||||
<div id="the-map" style="width: 100%; height: 800px"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="//unpkg.com/kinto/dist/kinto.min.js"></script>
|
|
||||||
|
|
||||||
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
|
|
||||||
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
|
|
||||||
crossorigin=""></script>
|
|
||||||
|
|
||||||
<script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
|
|
||||||
|
|
||||||
<script src="magellan.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
151
magellan.js
151
magellan.js
@ -1,151 +0,0 @@
|
|||||||
(function() {
|
|
||||||
const MIN_ZOOM = 6;
|
|
||||||
const MAX_ZOOM = 18;
|
|
||||||
const INITIAL_ZOOM = 14;
|
|
||||||
|
|
||||||
const TILE_URL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
|
|
||||||
|
|
||||||
const STATE = {
|
|
||||||
locations: new Map(),
|
|
||||||
};
|
|
||||||
|
|
||||||
let db = new Kinto({
|
|
||||||
bucket: "magellan"
|
|
||||||
});
|
|
||||||
let kintoLocations = db.collection("locations");
|
|
||||||
let syncOptions = {
|
|
||||||
remote: "https://kinto.b.delire.party/v1",
|
|
||||||
//headers: {Authorization: "Basic " + btoa('user:pass')}
|
|
||||||
};
|
|
||||||
|
|
||||||
async function sync() {
|
|
||||||
try {
|
|
||||||
await kintoLocations.sync(syncOptions);
|
|
||||||
} catch (err){
|
|
||||||
alert(err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sync();
|
|
||||||
|
|
||||||
function addLocation(loc) {
|
|
||||||
if (!STATE.locations.has(loc.label)) {
|
|
||||||
let marker = L.marker(loc.coordinates)
|
|
||||||
.addTo(map)
|
|
||||||
.bindPopup(loc.label);
|
|
||||||
STATE.locations.set(loc.label, marker);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function init() {
|
|
||||||
try {
|
|
||||||
let locations = await kintoLocations.list();
|
|
||||||
locations = locations.data;
|
|
||||||
console.log(locations)
|
|
||||||
locations.forEach(addLocation);
|
|
||||||
} catch (err) {
|
|
||||||
alert(`on init: ${err.toString()}`)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
||||||
async function addNewLocation(loc) {
|
|
||||||
if (addLocation(loc)) {
|
|
||||||
let marker = STATE.locations.get(loc.label);
|
|
||||||
marker.openPopup();
|
|
||||||
|
|
||||||
// Add it to kinto.
|
|
||||||
try {
|
|
||||||
await kintoLocations.create({
|
|
||||||
label: loc.label,
|
|
||||||
coordinates: loc.coordinates
|
|
||||||
});
|
|
||||||
} catch (err) {
|
|
||||||
alert(`Error when creating new location: ${err.toString()}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
sync();
|
|
||||||
} else {
|
|
||||||
STATE.locations.get(loc.label).openPopup();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Location {
|
|
||||||
constructor({ id, label, coordinates}) {
|
|
||||||
this.id = id || null;
|
|
||||||
this.label = label;
|
|
||||||
this.coordinates = coordinates;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function fetchLocation(address) {
|
|
||||||
// Alternatively, search only for addresses (specialized for Lyon 7).
|
|
||||||
//const GEOCODING_URL = 'https://api-adresse.data.gouv.fr/search/?q={query}&postcode=69007';
|
|
||||||
|
|
||||||
const GEOCODING_URL = 'https://demo.addok.xyz/search/?q={query}&limit=20';
|
|
||||||
let resp = await fetch(GEOCODING_URL.replace('{query}', address));
|
|
||||||
let results = await resp.json();
|
|
||||||
|
|
||||||
results = results.features.map(feature => {
|
|
||||||
let { properties: {label: label}, geometry: { coordinates: coordinates }} = feature;
|
|
||||||
coordinates.unshift(coordinates.pop());
|
|
||||||
return new Location({label, coordinates});
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log(results);
|
|
||||||
return results;
|
|
||||||
}
|
|
||||||
|
|
||||||
let map = L.map('the-map').setView([45.751591, 4.845695], INITIAL_ZOOM);
|
|
||||||
|
|
||||||
L.tileLayer(TILE_URL, {minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM, attribution: 'Carte données © <a href="https://osm.org/copyright/">OpenStreetMap (ODbL)</a> / fond OSM-FR (CC-by-SA), <a href="https://www.data.gouv.fr/fr/datasets/points-dinterets-openstreetmap/">POI: OpenStreetMap (ODbL)</a>, <a href="https://www.data.gouv.fr/fr/datasets/base-d-adresses-nationale-ouverte-bano/">adresses BANO (ODbL)</a>, <a href="https://github.com/addok/addok">geocodeur addok</a>'}).addTo(map);
|
|
||||||
|
|
||||||
let $ = document.querySelector.bind(document);
|
|
||||||
let $address = $('#address');
|
|
||||||
let $submit = $('#submit');
|
|
||||||
let $results = window.results = $('#results');
|
|
||||||
|
|
||||||
$('#form').onsubmit = function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
$submit.onclick = async function() {
|
|
||||||
let address = $address.value.trim();
|
|
||||||
|
|
||||||
$results.innerHTML = `searching for ${address}...`;
|
|
||||||
let firstResult = true;
|
|
||||||
|
|
||||||
let locations = await fetchLocation(address);
|
|
||||||
locations = locations.map(loc => {
|
|
||||||
let li = document.createElement('li');
|
|
||||||
|
|
||||||
let a = document.createElement('a');
|
|
||||||
a.href = '#';
|
|
||||||
a.onclick = function() {
|
|
||||||
L.popup()
|
|
||||||
.setLatLng(loc.coordinates)
|
|
||||||
.setContent(loc.label)
|
|
||||||
.openOn(map);
|
|
||||||
}
|
|
||||||
a.appendChild(document.createTextNode(loc.label))
|
|
||||||
li.appendChild(a);
|
|
||||||
|
|
||||||
li.appendChild(document.createTextNode(' '));
|
|
||||||
|
|
||||||
let button = document.createElement('button');
|
|
||||||
button.appendChild(document.createTextNode('Save'));
|
|
||||||
button.onclick = () => { addNewLocation(loc) };
|
|
||||||
li.appendChild(button);
|
|
||||||
|
|
||||||
if (firstResult) {
|
|
||||||
firstResult = false;
|
|
||||||
$results.innerHTML = '';
|
|
||||||
}
|
|
||||||
$results.appendChild(li);
|
|
||||||
return li;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
37
package.json
Normal file
37
package.json
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"name": "app",
|
||||||
|
"productName": "app",
|
||||||
|
"description": "My posh Vue project",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "poi",
|
||||||
|
"build": "poi build",
|
||||||
|
"report": "poi build --bundle-report",
|
||||||
|
"serve": "serve dist --single"
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"name": "bnjbvr",
|
||||||
|
"email": "public@benj.me"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"kinto": "^12.3.0",
|
||||||
|
"leaflet": "^1.4.0",
|
||||||
|
"leaflet-sidebar-v2": "^3.1.1",
|
||||||
|
"lodash.debounce": "^4.0.8",
|
||||||
|
"normalize.css": "^7.0.0",
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"offline-plugin": "^4.8.0",
|
||||||
|
"promise-polyfill": "^6.0.2",
|
||||||
|
"vue-router": "^3.0.2",
|
||||||
|
"vue2-leaflet": "^2.0.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^5.8.1",
|
||||||
|
"poi": "^9.0.0",
|
||||||
|
"poi-preset-bundle-report": "^2.0.0",
|
||||||
|
"poi-preset-offline": "^9.0.0",
|
||||||
|
"serve": "^6.1.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
29
poi.config.js
Normal file
29
poi.config.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const pkg = require('./package');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: [
|
||||||
|
'src/polyfills.js',
|
||||||
|
'src/index.js'
|
||||||
|
],
|
||||||
|
html: {
|
||||||
|
title: pkg.productName,
|
||||||
|
description: pkg.description,
|
||||||
|
template: path.join(__dirname, 'index.ejs')
|
||||||
|
},
|
||||||
|
postcss: {
|
||||||
|
plugins: [
|
||||||
|
// Your postcss plugins
|
||||||
|
]
|
||||||
|
},
|
||||||
|
presets: [
|
||||||
|
require('poi-preset-bundle-report')(),
|
||||||
|
require('poi-preset-offline')({
|
||||||
|
pwa: './src/pwa.js', // Path to pwa runtime entry
|
||||||
|
pluginOptions: {} // Additional options for offline-plugin
|
||||||
|
})
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
publicUrl: '/magellan',
|
||||||
|
}
|
||||||
|
};
|
||||||
35
src/backend.js
Normal file
35
src/backend.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import * as Kinto from 'kinto';
|
||||||
|
|
||||||
|
const DB = new Kinto({
|
||||||
|
bucket: 'magellan'
|
||||||
|
});
|
||||||
|
|
||||||
|
const LOCATIONS = DB.collection('locations');
|
||||||
|
|
||||||
|
const syncOptions = { remote: 'https://kinto.b.delire.party/v1' };
|
||||||
|
|
||||||
|
export async function getAll() {
|
||||||
|
let locations = await LOCATIONS.list();
|
||||||
|
return locations.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkNotMissing(obj, field) {
|
||||||
|
if (typeof obj[field] === 'undefined') {
|
||||||
|
console.warn(`missing field ${field} on object in ${new Error().stack}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function create(loc) {
|
||||||
|
checkNotMissing(loc, 'label');
|
||||||
|
checkNotMissing(loc, 'coordinates');
|
||||||
|
|
||||||
|
let result = await LOCATIONS.create({
|
||||||
|
label: loc.label,
|
||||||
|
coordinates: loc.coordinates,
|
||||||
|
});
|
||||||
|
return result.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function sync() {
|
||||||
|
await LOCATIONS.sync(syncOptions);
|
||||||
|
}
|
||||||
58
src/components/App.vue
Normal file
58
src/components/App.vue
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import store from '../store';
|
||||||
|
import * as backend from '../backend';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'app',
|
||||||
|
created() {
|
||||||
|
backend.sync().then(() => {
|
||||||
|
return backend.getAll();
|
||||||
|
}).then(locations => {
|
||||||
|
store.setLocations(locations);
|
||||||
|
}).catch(err => {
|
||||||
|
alert(`at app startup: ${err.toString()}`);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="normalize.css/normalize.css"></style>
|
||||||
|
<style src="@fortawesome/fontawesome-free/css/all.css"></style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
code {
|
||||||
|
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
||||||
|
font-size: 0.9em;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
|
||||||
|
code::before, code::after {
|
||||||
|
content: '`';
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bm-burger-button {
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#app {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bm-menu a,
|
||||||
|
.bm-menu a:visited {
|
||||||
|
color: white
|
||||||
|
}
|
||||||
|
</style>
|
||||||
53
src/components/ListAll.vue
Normal file
53
src/components/ListAll.vue
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<ul class="locations">
|
||||||
|
<li
|
||||||
|
v-for="location in store.locations"
|
||||||
|
@click="showDetails(location)"
|
||||||
|
>
|
||||||
|
<router-link :to="createLink(location)">
|
||||||
|
{{location.label}}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import store from '../store';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
store
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
createLink(loc) {
|
||||||
|
let lat = loc.coordinates[0];
|
||||||
|
let lng = loc.coordinates[1];
|
||||||
|
return `/${lat}/${lng}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
showDetails(loc) {
|
||||||
|
let lat = loc.coordinates[0];
|
||||||
|
let lng = loc.coordinates[1];
|
||||||
|
store.openPopup(loc.label, lat, lng);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
li {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.leaflet-sidebar-content ul {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-left: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
105
src/components/Map.vue
Normal file
105
src/components/Map.vue
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
<template>
|
||||||
|
<l-map
|
||||||
|
id="the-map"
|
||||||
|
ref="myMap"
|
||||||
|
:zoom="zoom"
|
||||||
|
:min-zoom="min_zoom"
|
||||||
|
:max-zoom="max_zoom"
|
||||||
|
:center="center"
|
||||||
|
:options="{zoomControl: false}"
|
||||||
|
@click="onClick"
|
||||||
|
>
|
||||||
|
<l-tile-layer
|
||||||
|
:url="url"
|
||||||
|
:attribution="attribution"
|
||||||
|
></l-tile-layer>
|
||||||
|
|
||||||
|
<l-marker
|
||||||
|
v-for="loc in store.locations"
|
||||||
|
:lat-lng="loc.coordinates"
|
||||||
|
>
|
||||||
|
<l-popup>
|
||||||
|
{{ loc.label }}
|
||||||
|
</l-popup>
|
||||||
|
</l-marker>
|
||||||
|
|
||||||
|
<l-control-zoom position="topright"></l-control-zoom>
|
||||||
|
|
||||||
|
<Sidebar></Sidebar>
|
||||||
|
</l-map>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { LPopup, LControl, LControlZoom, LMap, LTileLayer, LMarker } from 'vue2-leaflet';
|
||||||
|
import * as L from 'leaflet';
|
||||||
|
|
||||||
|
import store from '../store';
|
||||||
|
|
||||||
|
import Sidebar from './Sidebar';
|
||||||
|
|
||||||
|
const TILE_URL = 'https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png';
|
||||||
|
const ATTRIBUTION = 'Carte données © <a href="https://osm.org/copyright/">OpenStreetMap (ODbL)</a> / fond OSM-FR (CC-by-SA), <a href="https://www.data.gouv.fr/fr/datasets/points-dinterets-openstreetmap/">POI: OpenStreetMap (ODbL)</a>, <a href="https://www.data.gouv.fr/fr/datasets/base-d-adresses-nationale-ouverte-bano/">adresses BANO (ODbL)</a>, <a href="https://github.com/addok/addok">geocodeur addok</a>';
|
||||||
|
|
||||||
|
const MIN_ZOOM = 6;
|
||||||
|
const MAX_ZOOM = 18;
|
||||||
|
const INITIAL_ZOOM = 14;
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'fullmap',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
LMap,
|
||||||
|
LTileLayer,
|
||||||
|
LMarker,
|
||||||
|
LControlZoom,
|
||||||
|
LControl,
|
||||||
|
LPopup,
|
||||||
|
Sidebar,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
let lat = this.$route.params.lat;
|
||||||
|
let lng = this.$route.params.lng;
|
||||||
|
|
||||||
|
return {
|
||||||
|
center: L.latLng(lat, lng),
|
||||||
|
zoom: INITIAL_ZOOM,
|
||||||
|
min_zoom: MIN_ZOOM,
|
||||||
|
max_zoom: MAX_ZOOM,
|
||||||
|
url: TILE_URL,
|
||||||
|
attribution: ATTRIBUTION,
|
||||||
|
store,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onClick(event) {
|
||||||
|
let {lat, lng} = event.latlng;
|
||||||
|
this.$router.replace(`/${lat}/${lng}`);
|
||||||
|
this.$refs.myMap.mapObject.panTo(event.latlng);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.store.setMapObject(this.$refs.myMap.mapObject);
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
$route(to, from) {
|
||||||
|
if (to.name === 'position') {
|
||||||
|
let {lat, lng} = to.params;
|
||||||
|
this.$refs.myMap.mapObject.panTo({ lat, lng });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="leaflet/dist/leaflet.css"></style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#the-map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
119
src/components/Search.vue
Normal file
119
src/components/Search.vue
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<span class="form">
|
||||||
|
<input type="text" placeholder="place" v-model="searchInput" @keydown="doSearch" />
|
||||||
|
<button @click="clearSearch()" :disabled="searchInput.length === 0">
|
||||||
|
<i class="fa fa-trash-alt"></i>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<p v-if="searchStatus">{{ searchStatus }}</p>
|
||||||
|
<ul class="results" v-if="results.length > 0">
|
||||||
|
<li
|
||||||
|
v-for="result in results"
|
||||||
|
@click="openPopup(result)"
|
||||||
|
>
|
||||||
|
<router-link :to="{ name: 'position', params: {
|
||||||
|
lat: result.coordinates[0],
|
||||||
|
lng: result.coordinates[1] } }">{{result.label}}</router-link>
|
||||||
|
|
||||||
|
<i class="fa fa-save" @click="save(result)"></i>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p v-if="searchInput.length > 0 && searchStatus === null && results.length == 0">
|
||||||
|
No results found.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import debounce from 'lodash.debounce';
|
||||||
|
|
||||||
|
import store from '../store';
|
||||||
|
|
||||||
|
const GEOCODING_URL = 'https://demo.addok.xyz/search/?q={query}&limit=20';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Menu',
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
store,
|
||||||
|
searchInput: '',
|
||||||
|
searchStatus: null,
|
||||||
|
results: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
debouncedSearch: debounce(async function() {
|
||||||
|
if (this.searchInput.length === 0) {
|
||||||
|
// Just cleared the input.
|
||||||
|
this.searchStatus = null;
|
||||||
|
this.results = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Launch search.
|
||||||
|
this.searchStatus = "Searching...";
|
||||||
|
|
||||||
|
let resp = await fetch(GEOCODING_URL.replace('{query}', this.searchInput));
|
||||||
|
let results = await resp.json();
|
||||||
|
this.searchStatus = null;
|
||||||
|
|
||||||
|
this.results = (results && results.features && results.features.map(feature => {
|
||||||
|
let { properties: {label: label}, geometry: { coordinates: coordinates }} = feature;
|
||||||
|
coordinates.unshift(coordinates.pop());
|
||||||
|
return {label, coordinates}
|
||||||
|
})) || [];
|
||||||
|
}, 300),
|
||||||
|
|
||||||
|
doSearch() {
|
||||||
|
if (this.searchInput.length > 0) {
|
||||||
|
this.searchStatus = "Waiting for more characters...";
|
||||||
|
this.results = [];
|
||||||
|
}
|
||||||
|
this.debouncedSearch();
|
||||||
|
},
|
||||||
|
|
||||||
|
openPopup(loc) {
|
||||||
|
this.store.openPopup(loc.label, loc.coordinates[0], loc.coordinates[1]);
|
||||||
|
},
|
||||||
|
|
||||||
|
clearSearch() {
|
||||||
|
this.searchInput = '';
|
||||||
|
this.searchStatus = null;
|
||||||
|
this.results = [];
|
||||||
|
},
|
||||||
|
|
||||||
|
async save(loc) {
|
||||||
|
await store.addLocation(loc);
|
||||||
|
this.clearSearch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
flex-grow: 2;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
display: block;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: white;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa-save, .fa-trash-alt {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
66
src/components/Sidebar.vue
Normal file
66
src/components/Sidebar.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div id="sidebar" class="leaflet-sidebar collapsed">
|
||||||
|
<div class="leaflet-sidebar-tabs">
|
||||||
|
<ul role="tablist"> <!-- top aligned tabs -->
|
||||||
|
<li><a href="#search" role="tab"><i class="fa fa-search"></i></a></li>
|
||||||
|
<li><a href="#all" role="tab"><i class="fa fa-bars"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="leaflet-sidebar-content">
|
||||||
|
<div class="leaflet-sidebar-pane" id="search">
|
||||||
|
<h1 class="leaflet-sidebar-header">Search<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
|
||||||
|
<Search/>
|
||||||
|
</div>
|
||||||
|
<div class="leaflet-sidebar-pane" id="all">
|
||||||
|
<h1 class="leaflet-sidebar-header">All locations<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
|
||||||
|
<ListAll></ListAll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import * as _ from 'leaflet-sidebar-v2';
|
||||||
|
|
||||||
|
import Search from './Search';
|
||||||
|
import ListAll from './ListAll';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "sidebar",
|
||||||
|
components: {
|
||||||
|
Search,
|
||||||
|
ListAll,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.mapObject = L.control.sidebar({
|
||||||
|
autopan: true,
|
||||||
|
closeButton: true,
|
||||||
|
container: 'sidebar',
|
||||||
|
position: 'left',
|
||||||
|
});
|
||||||
|
|
||||||
|
let parentContainer = this.$parent;
|
||||||
|
while (typeof parentContainer.mapObject === 'undefined') {
|
||||||
|
parentContainer = parentContainer.$parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mapObject.addTo(parentContainer.mapObject);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.mapObject.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="leaflet-sidebar-v2/css/leaflet-sidebar.min.css"></style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.leaflet-sidebar-content {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leaflet-sidebar-pane h1 + * {
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
src/index.js
Normal file
34
src/index.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import Vue from 'vue';
|
||||||
|
import VueRouter from 'vue-router';
|
||||||
|
|
||||||
|
import { Icon } from 'leaflet';
|
||||||
|
|
||||||
|
import App from './components/App.vue';
|
||||||
|
import Map from './components/Map.vue';
|
||||||
|
|
||||||
|
delete Icon.Default.prototype._getIconUrl;
|
||||||
|
|
||||||
|
Icon.Default.mergeOptions({
|
||||||
|
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
|
||||||
|
iconUrl: require('leaflet/dist/images/marker-icon.png'),
|
||||||
|
shadowUrl: require('leaflet/dist/images/marker-shadow.png')
|
||||||
|
});
|
||||||
|
|
||||||
|
Vue.config.productionTip = false;
|
||||||
|
|
||||||
|
Vue.use(VueRouter);
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{ name: "position", path: "/:lat/:lng", component: Map },
|
||||||
|
{ path: "/", redirect: '/45.751591/4.845695/' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes
|
||||||
|
});
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#app',
|
||||||
|
render: h => h(App),
|
||||||
|
router,
|
||||||
|
});
|
||||||
5
src/polyfills.js
Normal file
5
src/polyfills.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
if (!window.Promise) {
|
||||||
|
window.Promise = require('promise-polyfill');
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.assign = require('object-assign');
|
||||||
7
src/pwa.js
Normal file
7
src/pwa.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import runtime from 'offline-plugin/runtime';
|
||||||
|
|
||||||
|
runtime.install({
|
||||||
|
onUpdateReady() {
|
||||||
|
runtime.applyUpdate();
|
||||||
|
}
|
||||||
|
});
|
||||||
42
src/store.js
Normal file
42
src/store.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import * as backend from './backend';
|
||||||
|
|
||||||
|
const store = {
|
||||||
|
locations: [],
|
||||||
|
locationLabels: new Set(),
|
||||||
|
setLocations(newLocations) {
|
||||||
|
this.locations = newLocations;
|
||||||
|
this.locations.sort((a, b) => a.label > b.label);
|
||||||
|
for (let loc of newLocations) {
|
||||||
|
this.locationLabels.add(loc.label);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async addLocation(loc) {
|
||||||
|
if (this.locationLabels.has(loc.label)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let newLoc = null;
|
||||||
|
try {
|
||||||
|
newLoc = await backend.create(loc);
|
||||||
|
} catch (err) {
|
||||||
|
alert(`Error when saving a new place: ${err.toString()}`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.locations.push(newLoc);
|
||||||
|
this.locations.sort((a, b) => a.label > b.label);
|
||||||
|
this.locationLabels.add(newLoc.label);
|
||||||
|
},
|
||||||
|
|
||||||
|
mapObject: null,
|
||||||
|
setMapObject(mapObject) {
|
||||||
|
this.mapObject = mapObject;
|
||||||
|
},
|
||||||
|
openPopup(label, lat, lng) {
|
||||||
|
L.popup()
|
||||||
|
.setLatLng([lat, lng])
|
||||||
|
.setContent(label)
|
||||||
|
.openOn(this.mapObject);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default store;
|
||||||
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
static/icons/android-chrome-192x192.png
Normal file
BIN
static/icons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
BIN
static/icons/android-chrome-512x512.png
Normal file
BIN
static/icons/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
20
static/manifest.json
Normal file
20
static/manifest.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "app",
|
||||||
|
"short_name": "app",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/icons/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/icons/android-chrome-512x512.png",
|
||||||
|
"sizes": "512x512",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": "/",
|
||||||
|
"display": "standalone",
|
||||||
|
"background_color": "#000000",
|
||||||
|
"theme_color": "#4DBA87"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user