jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1856 from umap-project/importer-module

Browse source 
chore: move importer to modules/
This commit is contained in:
Yohan Boniface 2024-05-23 19:47:38 +02:00 committed by GitHub
commit a6a31a19a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 58 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
umap/static/umap/js/modules/global.js
View file

@ -11,6 +11,7 @@ import { SCHEMA } from './schema.js'
import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js' import { Request, ServerRequest, RequestError, HTTPError, NOKError } from './request.js'
import { AjaxAutocomplete, AjaxAutocompleteMultiple } from './autocomplete.js' import { AjaxAutocomplete, AjaxAutocompleteMultiple } from './autocomplete.js'
import Orderable from './orderable.js' import Orderable from './orderable.js'
import Importer from './importer.js'
// Import modules and export them to the global scope. // Import modules and export them to the global scope.
// For the not yet module-compatible JS out there. // For the not yet module-compatible JS out there.
@ -32,6 +33,7 @@ window.U = {
FullPanel, FullPanel,
Utils, Utils,
SCHEMA, SCHEMA,
Importer,
Orderable, Orderable,
Caption, Caption,
AjaxAutocomplete, AjaxAutocomplete,

109
umap/static/umap/js/umap.importer.js → umap/static/umap/js/modules/importer.js
View file

@ -1,104 +1,107 @@
U.Importer = L.Class.extend({ import { DomUtil, DomEvent } from '../../vendors/leaflet/leaflet-src.esm.js'
TYPES: ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap'], import { translate } from './i18n.js'
initialize: function (map) {
export default class Importer {
constructor(map) {
this.map = map this.map = map
this.presets = map.options.importPresets this.presets = map.options.importPresets
}, this.TYPES = ['geojson', 'csv', 'gpx', 'kml', 'osm', 'georss', 'umap']
}
build: function () { build() {
this.container = L.DomUtil.create('div', 'umap-upload') this.container = DomUtil.create('div', 'umap-upload')
this.title = L.DomUtil.createTitle( this.title = DomUtil.createTitle(
this.container, this.container,
L._('Import data'), translate('Import data'),
'icon-upload' 'icon-upload'
) )
this.presetBox = L.DomUtil.create('div', 'formbox', this.container) this.presetBox = DomUtil.create('div', 'formbox', this.container)
this.presetSelect = L.DomUtil.create('select', '', this.presetBox) this.presetSelect = DomUtil.create('select', '', this.presetBox)
this.fileBox = L.DomUtil.create('div', 'formbox', this.container) this.fileBox = DomUtil.create('div', 'formbox', this.container)
this.fileInput = L.DomUtil.element({ this.fileInput = DomUtil.element({
tagName: 'input', tagName: 'input',
type: 'file', type: 'file',
parent: this.fileBox, parent: this.fileBox,
multiple: 'multiple', multiple: 'multiple',
autofocus: true, autofocus: true,
}) })
this.urlInput = L.DomUtil.element({ this.urlInput = DomUtil.element({
tagName: 'input', tagName: 'input',
type: 'text', type: 'text',
parent: this.container, parent: this.container,
placeholder: L._('Provide an URL here'), placeholder: translate('Provide an URL here'),
}) })
this.rawInput = L.DomUtil.element({ this.rawInput = DomUtil.element({
tagName: 'textarea', tagName: 'textarea',
parent: this.container, parent: this.container,
placeholder: L._('Paste your data here'), placeholder: translate('Paste your data here'),
}) })
this.typeLabel = L.DomUtil.add( this.typeLabel = DomUtil.add(
'label', 'label',
'', '',
this.container, this.container,
L._('Choose the format of the data to import') translate('Choose the format of the data to import')
) )
this.layerLabel = L.DomUtil.add( this.layerLabel = DomUtil.add(
'label', 'label',
'', '',
this.container, this.container,
L._('Choose the layer to import in') translate('Choose the layer to import in')
) )
this.clearLabel = L.DomUtil.element({ this.clearLabel = DomUtil.element({
tagName: 'label', tagName: 'label',
parent: this.container, parent: this.container,
textContent: L._('Replace layer content'), textContent: translate('Replace layer content'),
for: 'datalayer-clear-check', for: 'datalayer-clear-check',
}) })
this.submitInput = L.DomUtil.element({ this.submitInput = DomUtil.element({
tagName: 'input', tagName: 'input',
type: 'button', type: 'button',
parent: this.container, parent: this.container,
value: L._('Import'), value: translate('Import'),
className: 'button', className: 'button',
}) })
this.map.help.button(this.typeLabel, 'importFormats') this.map.help.button(this.typeLabel, 'importFormats')
this.typeInput = L.DomUtil.element({ this.typeInput = DomUtil.element({
tagName: 'select', tagName: 'select',
name: 'format', name: 'format',
parent: this.typeLabel, parent: this.typeLabel,
}) })
this.layerInput = L.DomUtil.element({ this.layerInput = DomUtil.element({
tagName: 'select', tagName: 'select',
name: 'datalayer', name: 'datalayer',
parent: this.layerLabel, parent: this.layerLabel,
}) })
this.clearFlag = L.DomUtil.element({ this.clearFlag = DomUtil.element({
tagName: 'input', tagName: 'input',
type: 'checkbox', type: 'checkbox',
name: 'clear', name: 'clear',
id: 'datalayer-clear-check', id: 'datalayer-clear-check',
parent: this.clearLabel, parent: this.clearLabel,
}) })
L.DomUtil.element({ DomUtil.element({
tagName: 'option', tagName: 'option',
value: '', value: '',
textContent: L._('Choose the data format'), textContent: translate('Choose the data format'),
parent: this.typeInput, parent: this.typeInput,
}) })
for (let i = 0; i < this.TYPES.length; i++) { for (const type of this.TYPES) {
option = L.DomUtil.create('option', '', this.typeInput) const option = DomUtil.create('option', '', this.typeInput)
option.value = option.textContent = this.TYPES[i] option.value = option.textContent = type
} }
if (this.presets.length) { if (this.presets.length) {
const noPreset = L.DomUtil.create('option', '', this.presetSelect) const noPreset = DomUtil.create('option', '', this.presetSelect)
noPreset.value = noPreset.textContent = L._('Choose a preset') noPreset.value = noPreset.textContent = translate('Choose a preset')
for (let j = 0; j < this.presets.length; j++) { for (const preset of this.presets) {
option = L.DomUtil.create('option', '', presetSelect) option = DomUtil.create('option', '', presetSelect)
option.value = this.presets[j].url option.value = preset.url
option.textContent = this.presets[j].label option.textContent = preset.label
} }
} else { } else {
this.presetBox.style.display = 'none' this.presetBox.style.display = 'none'
} }
L.DomEvent.on(this.submitInput, 'click', this.submit, this) DomEvent.on(this.submitInput, 'click', this.submit, this)
L.DomEvent.on( DomEvent.on(
this.fileInput, this.fileInput,
'change', 'change',
(e) => { (e) => {
@ -116,9 +119,9 @@ U.Importer = L.Class.extend({
}, },
this this
) )
}, }
open: function () { open() {
if (!this.container) this.build() if (!this.container) this.build()
const onLoad = this.map.editPanel.open({ content: this.container }) const onLoad = this.map.editPanel.open({ content: this.container })
onLoad.then(() => { onLoad.then(() => {
@ -128,25 +131,25 @@ U.Importer = L.Class.extend({
this.map.eachDataLayerReverse((datalayer) => { this.map.eachDataLayerReverse((datalayer) => {
if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) { if (datalayer.isLoaded() && !datalayer.isRemoteLayer()) {
const id = L.stamp(datalayer) const id = L.stamp(datalayer)
option = L.DomUtil.add('option', '', this.layerInput, datalayer.options.name) option = DomUtil.add('option', '', this.layerInput, datalayer.options.name)
option.value = id option.value = id
} }
}) })
L.DomUtil.element({ DomUtil.element({
tagName: 'option', tagName: 'option',
value: '', value: '',
textContent: L._('Import in a new layer'), textContent: translate('Import in a new layer'),
parent: this.layerInput, parent: this.layerInput,
}) })
}) })
}, }
openFiles: function () { openFiles() {
this.open() this.open()
this.fileInput.showPicker() this.fileInput.showPicker()
}, }
submit: function () { submit() {
let type = this.typeInput.value let type = this.typeInput.value
const layerId = this.layerInput[this.layerInput.selectedIndex].value const layerId = this.layerInput[this.layerInput.selectedIndex].value
let layer let layer
@ -162,14 +165,14 @@ U.Importer = L.Class.extend({
} else { } else {
if (!type) if (!type)
return this.map.alert.open({ return this.map.alert.open({
content: L._('Please choose a format'), content: translate('Please choose a format'),
level: 'error', level: 'error',
}) })
if (this.rawInput.value && type === 'umap') { if (this.rawInput.value && type === 'umap') {
try { try {
this.map.importRaw(this.rawInput.value, type) this.map.importRaw(this.rawInput.value, type)
} catch (e) { } catch (e) {
this.alert.open({ content: L._('Invalid umap data'), level: 'error' }) this.alert.open({ content: translate('Invalid umap data'), level: 'error' })
console.error(e) console.error(e)
} }
} else { } else {
@ -183,5 +186,5 @@ U.Importer = L.Class.extend({
) )
} }
} }
}, }
}) }

1
umap/templates/umap/js.html
View file

@ -56,7 +56,6 @@
<script src="{% static 'umap/js/umap.controls.js' %}" defer></script> <script src="{% static 'umap/js/umap.controls.js' %}" defer></script>
<script src="{% static 'umap/js/umap.slideshow.js' %}" defer></script> <script src="{% static 'umap/js/umap.slideshow.js' %}" defer></script>
<script src="{% static 'umap/js/umap.tableeditor.js' %}" defer></script> <script src="{% static 'umap/js/umap.tableeditor.js' %}" defer></script>
<script src="{% static 'umap/js/umap.importer.js' %}" defer></script>
<script src="{% static 'umap/js/umap.share.js' %}" defer></script> <script src="{% static 'umap/js/umap.share.js' %}" defer></script>
<script src="{% static 'umap/js/umap.js' %}" defer></script> <script src="{% static 'umap/js/umap.js' %}" defer></script>
<script src="{% static 'umap/js/components/fragment.js' %}" defer></script> <script src="{% static 'umap/js/components/fragment.js' %}" defer></script>