Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add button to swap start/end addresses #36

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add button to swap start/end addresses #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 53 additions & 14 deletions app/mbm/templates/mbm/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,23 @@
{% endblock %}

{% block body %}
<div class="row">
<div id="controls-container" class="col-12 col-md-3">
<div class="container-fluid m-auto form-group">
<div class="row no-gutters">
<div id="controls-container" class="col-12 col-md-4">
<div class="container m-auto form-group">
<div id="input-elements" class="hideable collapse multi-collapse">
<input id="source_text" class="form-control my-2" name="source_text" placeholder="Start address"></input>
<input id="source" name="source_text" hidden="true"></input>
<input id="target_text" class="form-control my-2" name="target_text" placeholder="End address"></input>
<input id="target" name="target" hidden="true"></input>
<div class="row no-gutters">
<div class="col">
<input id="source_text" class="form-control my-2" name="source_text" placeholder="Start address"></input>
<input id="source" name="source_text" hidden="true"></input>
<input id="target_text" class="form-control my-2" name="target_text" placeholder="End address"></input>
<input id="target" name="target" hidden="true"></input>
</div>
<div class="col-2 my-auto">
<div class="row justify-content-center no-gutters">
<button id="swap-addresses" class="btn btn-link btn-lg">🔃</button>
</div>
</div>
</div>
<button id="submit" class="btn btn-primary btn-block mt-1">Search</button>
<button id="reset-search" class="btn btn-secondary btn-block mb-2">Reset search</button>
<div>
Expand Down Expand Up @@ -60,7 +69,7 @@
</button>
</div>
</div>
<div class="col-12 col-md-9">
<div class="col-12 col-md-8">
<div id="map"></div>
</div>
</div>
Expand Down Expand Up @@ -195,8 +204,7 @@
console.log(textStatus + ': ' + error)
})

// Define behavior for the search button
$('#submit').click(function(e) {
const submitSearch = (e) => {
const source = $('#source').val()
const target = $('#target').val()
const enableV2 = $('#enable-v2').is(':checked')
Expand Down Expand Up @@ -232,17 +240,48 @@
map.spin(false)
})
}
})
}

// Define behavior for the "Reset search" button
$('#reset-search').click(function(e) {
const resetSearch = (e) => {
if (routeLayer) { map.removeLayer(routeLayer) }
if (markers['source']) { map.removeLayer(markers['source']) }
if (markers['target']) { map.removeLayer(markers['target']) }
allRoutesLayer.setStyle({opacity: 0.6})
$('#source, #source_text, #target, #target_text').val('')
hideRouteEstimate()
})
}

const swapAddresses = (e) => {
// Swap the visible text boxes
const source_text = $('#source_text').val()
const target_text = $('#target_text').val()
$('#target_text').val(source_text)
$('#source_text').val(target_text)
// Swap the invisible lat/lng containers
const source = $('#source').val()
const target = $('#target').val()
$('#target').val(source)
$('#source').val(target)
// Swap the markers (if we don't do this, changing an address later moves the wrong marker)
const source_marker = markers['source']
const target_marker = markers['target']
markers['target'] = source_marker
markers['source'] = target_marker

// Recalculate route if both addresses are present
if (source !== '' && target !== '') {
submitSearch(e)
}
}

// Define behavior for the search button
$('#submit').click(submitSearch)

// Define behavior for the "Reset search" button
$('#reset-search').click(resetSearch)

// Define behavior for the "Swap start/end addresses" button
$('#swap-addresses').click(swapAddresses)

const isHidden = (elem) => { return $(elem).data('state') === 'hidden' }

Expand Down