Use grid instead of float for GIS editor layout
Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
This commit is contained in:
Maurício Meneghini Fauth
parent
f07354436b
commit
1f3d644ada
@ -8,12 +8,6 @@
|
||||
min-height: 230px;
|
||||
}
|
||||
|
||||
#gis_data_textarea {
|
||||
height: 6em;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#gis_data_editor {
|
||||
input[type="text"] {
|
||||
width: 75px;
|
||||
|
||||
@ -459,11 +459,11 @@ class GisVisualizationController {
|
||||
constructor () {
|
||||
this.boundOnChoiceChange = this.onChoiceChange.bind(this);
|
||||
|
||||
$(document).on('click', '#choice', this.boundOnChoiceChange);
|
||||
$(document).on('click', '#useOsmAsBaseLayerSwitch', this.boundOnChoiceChange);
|
||||
|
||||
if (typeof window.ol === 'undefined') {
|
||||
$('#choice, #labelChoice').hide();
|
||||
$('#choice').prop('checked', false);
|
||||
$('#useOsmAsBaseLayerSwitch, #useOsmAsBaseLayerSwitchLabel').hide();
|
||||
$('#useOsmAsBaseLayerSwitch').prop('checked', false);
|
||||
}
|
||||
|
||||
this.selectVisualization();
|
||||
@ -477,7 +477,7 @@ class GisVisualizationController {
|
||||
* Initially loads either SVG or OSM visualization based on the choice.
|
||||
*/
|
||||
private selectVisualization () {
|
||||
const showOl = $('#choice').prop('checked') === true;
|
||||
const showOl = $('#useOsmAsBaseLayerSwitch').prop('checked') === true;
|
||||
const oldVis = showOl ? this.svgVis : this.olVis;
|
||||
if (oldVis) {
|
||||
oldVis.hide();
|
||||
@ -508,7 +508,7 @@ class GisVisualizationController {
|
||||
* Cleanup events when no longer needed
|
||||
*/
|
||||
public dispose () {
|
||||
$(document).off('click', '#choice');
|
||||
$(document).off('click', '#useOsmAsBaseLayerSwitch');
|
||||
|
||||
if (this.svgVis) {
|
||||
this.svgVis.dispose();
|
||||
|
||||
@ -1,63 +1,71 @@
|
||||
<form id="gis_data_editor_form" action="{{ url('/gis-data-editor') }}" method="post">
|
||||
<div id="gis_data_editor">
|
||||
<input type="hidden" name="field" value="{{ field }}">
|
||||
<input type="hidden" name="type" value="{{ column_type }}">
|
||||
{# The input field to which the final result should be added and corresponding null checkbox #}
|
||||
{% if input_name is not null %}
|
||||
<input type="hidden" name="input_name" value="{{ input_name }}">
|
||||
{% endif %}
|
||||
{{ get_hidden_inputs() }}
|
||||
<div id="gis_data_editor">
|
||||
<input type="hidden" name="field" value="{{ field }}">
|
||||
<input type="hidden" name="type" value="{{ column_type }}">
|
||||
{# The input field to which the final result should be added and corresponding null checkbox #}
|
||||
{% if input_name is not null %}
|
||||
<input type="hidden" name="input_name" value="{{ input_name }}">
|
||||
{% endif %}
|
||||
{{ get_hidden_inputs() }}
|
||||
|
||||
{# Visualization section #}
|
||||
<div class="float-end">
|
||||
<div id="visualization-placeholder" style="width: {{ width }}px; height: {{ height }}px;">
|
||||
<div class="visualization-target visualization-target-svg hide">{{ visualization|raw }}</div>
|
||||
<div class="visualization-target visualization-target-ol hide"></div>
|
||||
</div>
|
||||
|
||||
<div class="choice form-switch mt-1">
|
||||
<input type="checkbox" id="choice" class="form-check-input" value="useBaseLayer"{{ srid != 0 ? ' checked="checked"' }}>
|
||||
<label for="choice">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>{{ open_layers|raw }}</script>
|
||||
{# End of visualization section #}
|
||||
|
||||
{# Data section #}
|
||||
<div id="gis_data" class="gis-geometry" data-gis-data="{{ gis_data|json_encode }}">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="gis_data" class="gis-geometry mb-3" data-gis-data="{{ gis_data|json_encode }}">
|
||||
<template id="gis_type_template">
|
||||
<select class="gis_type">
|
||||
{% for gis_type in gis_types|slice(0, 6) %}
|
||||
<option value="{{ gis_type }}">{{ gis_type }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select class="gis_type">
|
||||
{% for gis_type in gis_types|slice(0, 6) %}
|
||||
<option value="{{ gis_type }}">{{ gis_type }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</template>
|
||||
|
||||
{# Header section - Inclueds GIS type selector and input field for SRID #}
|
||||
<div class="gis-geometry-type">
|
||||
<select name="gis_data[gis_type]" class="gis_type{{ column_type != 'GEOMETRY' ? ' hide' }}">
|
||||
{% for gis_type in gis_types %}
|
||||
<option value="{{ gis_type }}"{{ geom_type == gis_type ? ' selected="selected"' }}>
|
||||
{{ gis_type }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<select name="gis_data[gis_type]" class="gis_type{{ column_type != 'GEOMETRY' ? ' hide' }}">
|
||||
{% for gis_type in gis_types %}
|
||||
<option value="{{ gis_type }}"{{ geom_type == gis_type ? ' selected="selected"' }}>
|
||||
{{ gis_type }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
|
||||
<label for="srid">{{ t('SRID:', context = 'Spatial Reference System Identifier') }}</label>
|
||||
<input id="srid" name="gis_data[srid]" type="text" value="{{ srid }}">
|
||||
<label for="srid">{{ t('SRID:', context = 'Spatial Reference System Identifier') }}</label>
|
||||
<input id="srid" name="gis_data[srid]" type="text" value="{{ srid }}">
|
||||
</div>
|
||||
{# End of header section #}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{# End of data section #}
|
||||
|
||||
<div class="gis_data_output">
|
||||
<h3>{{ t('Output') }}</h3>
|
||||
<textarea id="gis_data_textarea" class="mb-3" rows="5">{{ result }}</textarea>
|
||||
<div class="col-auto">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div id="visualization-placeholder" style="width: {{ width }}px; height: {{ height }}px;">
|
||||
<div class="visualization-target visualization-target-svg hide">{{ visualization|raw }}</div>
|
||||
<div class="visualization-target visualization-target-ol hide"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary gis-copy-data" data-bs-dismiss="modal">{{ t('Copy') }}</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> {{ t('Cancel') }}</button>
|
||||
<div class="card-footer">
|
||||
<div class="form-switch mt-1">
|
||||
<input type="checkbox" id="useOsmAsBaseLayerSwitch" class="form-check-input" value="useBaseLayer"{{ srid != 0 ? ' checked="checked"' }}>
|
||||
<label for="useOsmAsBaseLayerSwitch" id="useOsmAsBaseLayerSwitchLabel">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<script>{{ open_layers|raw }}</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="gis_data_textarea">{{ t('Output') }}</label>
|
||||
<textarea class="form-control" id="gis_data_textarea" rows="5">{{ result }}</textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary gis-copy-data" data-bs-dismiss="modal">{{ t('Copy') }}</button>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> {{ t('Cancel') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -35,8 +35,8 @@
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<input type="hidden" name="redraw" value="true">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" name="useBaseLayer" id="choice"{{ useBaseLayer ?? false ? ' checked' }}>
|
||||
<label class="form-check-label" for="choice" id="labelChoice">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
|
||||
<input class="form-check-input" type="checkbox" name="useBaseLayer" id="useOsmAsBaseLayerSwitch"{{ useBaseLayer ?? false ? ' checked' }}>
|
||||
<label class="form-check-label" for="useOsmAsBaseLayerSwitch" id="useOsmAsBaseLayerSwitchLabel">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="saveImageButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user
