Skip to content

Commit

Permalink
Redesign POI selection in event form (fixes #1166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@timobrembeck
timobrembeck committed Feb 15, 2022
1 parent f61e2c6 commit 3171ebb
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 49 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ UNRELEASED
* [ [#765](https://github.com/digitalfabrik/integreat-cms/issues/765) ] Add tests of form submissions
* [ [#1163](https://github.com/digitalfabrik/integreat-cms/issues/1163) ] Fix error when editor creates new page
* [ [#1173](https://github.com/digitalfabrik/integreat-cms/issues/1173) ] Fix bug where unused location is preselected for new event
* [ [#1166](https://github.com/digitalfabrik/integreat-cms/issues/1166) ] Fix creation of location from event form


2022.2.0-beta
Expand Down
25 changes: 15 additions & 10 deletions integreat_cms/cms/templates/events/_poi_query_result.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
{% load i18n %}
{% load content_filters %}
{% load poi_filters %}

{% get_current_language as LANGUAGE_CODE %}
{% get_language LANGUAGE_CODE as current_language %}

{% if poi_query and request.region %}
{% if poi_query_result|length > 0 or create_poi_option %}
{% get_current_language as LANGUAGE_CODE %}
{% get_language LANGUAGE_CODE as current_language %}
<select size="{% if poi_query_result|length > 5 %}5{% elif create_poi_option %}{{ poi_query_result|length|add:'1' }}{% else %}{{ poi_query_result|length }}{% endif %}" class="appearance-none absolute block w-full bg-white text-gray-800 border border-gray-500 mb-2 py-2 px-2">
{% if create_poi_option %}
<option class="option-new-poi" data-url="{% url 'new_poi' region_slug=request.region.slug language_slug=request.region.default_language.slug %}" data-poi-title="{{ poi_query }}" value="-1">
{% blocktrans %}Create location with title "{{ poi_query }}"{% endblocktrans %}
</option>
{% endif %}
{% if create_poi_option %}
<button class="btn w-full option-new-poi mb-2"
data-url="{% url 'new_poi' region_slug=request.region.slug language_slug=request.region.default_language.slug %}"
data-poi-title="{{ poi_query }}">
{% blocktrans %}Create location with title "{{ poi_query }}"{% endblocktrans %}
</button>
{% endif %}
{% if poi_query_result|length > 0 %}
<label class="secondary">{% trans 'Select existing location' %}</label>
<select size="{% if poi_query_result|length > 5 %}5{% elif poi_query_result|length == 1 %}2{% else %}{{ poi_query_result|length }}{% endif %}" class="block w-full bg-none bg-white text-gray-800 border border-gray-500 mb-2 py-2 px-2 {% if poi_query_result|length == 1 %} h-12 {% endif %}">
{% for poi in poi_query_result %}
<option class="option-existing-poi" data-poi-title="{{ poi|poi_translation_title:current_language }}" data-poi-id="{{ poi.id }}" data-poi-address="{{ poi.address }}" data-poi-city="{{ poi.city }}" data-poi-country="{{ poi.country }}">
<option class="option-existing-poi hover:bg-gray-200" data-poi-title="{{ poi|poi_translation_title:current_language }}" data-poi-id="{{ poi.id }}" data-poi-address="{{ poi.address }}" data-poi-city="{{ poi.city }}" data-poi-country="{{ poi.country }}">
{{ poi|poi_translation_title:current_language }}
</option>
{% endfor %}
Expand Down
36 changes: 23 additions & 13 deletions integreat_cms/cms/templates/events/event_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,22 +191,32 @@ <h1 class="heading">
</button>
</div>
</div>
<div class="relative" id="poi-query-result">
{% include 'events/_poi_query_result.html' %}
</div>
<p class="text-sm italic block mt-2 mb-2">
{% trans 'Create an event location or start typing the name of an existing location' %}.
</p>
<label class="secondary">{% trans 'Address' %}</label>
<input name="location" id="id_location" class="hidden" value="{% if poi %}{{ poi.id }}{% else %}-1{% endif %}" readonly{% if event_form.has_not_location.value %} disabled{% endif %}>
{% trans 'Street' as street_placeholder %}
<input id="poi-address" disabled class="appearance-none block w-full bg-white text-gray-800 border border-gray-400 rounded mb-2 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey" placeholder="{{ street_placeholder }}" value="{% if poi %}{{ poi.address }}{% endif %}" />
{% trans 'City' as city_placeholder %}
<input id="poi-city" disabled class="appearance-none block w-full bg-white text-gray-800 border border-gray-400 rounded mb-2 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey" placeholder="{{ city_placeholder }}" value="{% if poi %}{{ poi.city }}{% endif %}" />
{% trans 'Country' as country_placeholder %}
<input id="poi-country" disabled class="appearance-none block w-full bg-white text-gray-800 border border-gray-400 rounded mb-2 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey" placeholder="{{ country_placeholder }}" value="{% if poi %}{{ poi.country }}{% endif %}" />
<label class="secondary">{% trans 'Map' %}</label>
<i class="text-teal-500">Google Map vs. OSM</i>
<div class="relative" id="poi-query-result">
{% include 'events/_poi_query_result.html' %}
</div>
<div>
<label id="poi-address-label" class="secondary {% if not poi %} hidden {% endif %}">{% trans 'Address' %}</label>
<input name="location" id="id_location" class="hidden" value="{% if poi %}{{ poi.id }}{% else %}-1{% endif %}" readonly{% if event_form.has_not_location.value %} disabled{% endif %}>
<div class="text-lg">
<p id="poi-address">
{% if poi %}{{ poi.address }}{% endif %}
</p>
<p id="poi-city">
{% if poi %}{{ poi.city }}{% endif %}
</p>
<p id="poi-country">
{% if poi %}{{ poi.country }}{% endif %}
</p>
</div>
{% if poi %}
<a id="poi-google-maps-link" href="https://www.google.com/maps/search/?api=1&query={{ poi.address }},{{ poi.city }},{{ poi.country }}" class="text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer">
{% trans 'Open on Google Maps' %}
</a>
{% endif %}
</div>
</div>
</div>
<div>
Expand Down
53 changes: 30 additions & 23 deletions integreat_cms/locale/de/LC_MESSAGES/django.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ msgstr ""
"Plural-Forms: nplurals=2; plural=(n != 1);\n"

#: cms/constants/administrative_division.py:38
#: cms/templates/events/event_form.html:204 cms/templates/pois/poi_list.html:62
#: cms/templates/pois/poi_list.html:62
#: cms/templates/pois/poi_list_archived.html:30
msgid "City"
msgstr "Stadt"
Expand Down Expand Up @@ -3535,11 +3535,15 @@ msgstr "Filter zurücksetzen"
msgid "Apply filter"
msgstr "Filter anwenden"

#: cms/templates/events/_poi_query_result.html:11
#: cms/templates/events/_poi_query_result.html:13
#, python-format
msgid "Create location with title \"%(poi_query)s\""
msgstr "Ort mit Titel \"%(poi_query)s\" erstellen"

#: cms/templates/events/_poi_query_result.html:17
msgid "Select existing location"
msgstr "Bestehenden Ort auswählen"

#: cms/templates/events/event_form.html:21
#, python-format
msgid "Edit event \"%(event_title)s\""
Expand Down Expand Up @@ -3602,57 +3606,47 @@ msgstr "Name des Veranstaltungsortes"
msgid "Remove location from event"
msgstr "Veranstaltungsort von Veranstaltung entfernen"

#: cms/templates/events/event_form.html:198
#: cms/templates/events/event_form.html:195
msgid ""
"Create an event location or start typing the name of an existing location"
msgstr ""
"Erstellen Sie einen Veranstaltungsort oder beginnen Sie den Namen eines "
"bestehenden Veranstaltungsortes einzutippen"

#: cms/templates/events/event_form.html:200
#: cms/templates/events/event_form.html:201
#: cms/templates/pois/poi_form.html:115
msgid "Address"
msgstr "Adresse"

#: cms/templates/events/event_form.html:202 cms/templates/pois/poi_list.html:60
#: cms/templates/pois/poi_list_archived.html:28
msgid "Street"
msgstr "Straße"
#: cms/templates/events/event_form.html:216
msgid "Open on Google Maps"
msgstr "Auf Google Maps öffnen"

#: cms/templates/events/event_form.html:206 cms/templates/pois/poi_list.html:63
#: cms/templates/pois/poi_list_archived.html:31
msgid "Country"
msgstr "Land"

#: cms/templates/events/event_form.html:208
msgid "Map"
msgstr "Karte"

#: cms/templates/events/event_form.html:219
#: cms/templates/events/event_form.html:229
#: cms/templates/events/event_list_archived_row.html:84
msgid "Restore event"
msgstr "Veranstaltung wiederherstellen"

#: cms/templates/events/event_form.html:226
#: cms/templates/events/event_form.html:236
msgid "Restore this event"
msgstr "Diese Veranstaltung wiederherstellen"

#: cms/templates/events/event_form.html:229
#: cms/templates/events/event_form.html:239
#: cms/templates/events/event_list_row.html:108
msgid "Archive event"
msgstr "Veranstaltung archivieren"

#: cms/templates/events/event_form.html:236
#: cms/templates/events/event_form.html:246
msgid "Archive this event"
msgstr "Diese Veranstaltung archivieren"

#: cms/templates/events/event_form.html:242
#: cms/templates/events/event_form.html:252
#: cms/templates/events/event_list_archived_row.html:93
#: cms/templates/events/event_list_row.html:117
msgid "Delete event"
msgstr "Veranstaltung löschen"

#: cms/templates/events/event_form.html:249
#: cms/templates/events/event_form.html:259
msgid "Delete this event"
msgstr "Diese Veranstaltung löschen"

Expand Down Expand Up @@ -4833,11 +4827,21 @@ msgstr "Archivierte Orte"
msgid "Create location"
msgstr "Ort erstellen"

#: cms/templates/pois/poi_list.html:60
#: cms/templates/pois/poi_list_archived.html:28
msgid "Street"
msgstr "Straße"

#: cms/templates/pois/poi_list.html:61
#: cms/templates/pois/poi_list_archived.html:29
msgid "Postal Code"
msgstr "Postleitzahl"

#: cms/templates/pois/poi_list.html:63
#: cms/templates/pois/poi_list_archived.html:31
msgid "Country"
msgstr "Land"

#: cms/templates/pois/poi_list.html:75
msgid "No locations found with these filters."
msgstr "Keine Orte mit diesen Filtern gefunden."
Expand Down Expand Up @@ -6438,6 +6442,9 @@ msgstr ""
"Diese Seite konnte nicht importiert werden, da sie zu einer anderen Region "
"gehört ({})."

#~ msgid "Map"
#~ msgstr "Karte"

#~ msgid "Please confirm that you really want to delete this language"
#~ msgstr "Bitte bestätigen Sie, dass diese Sprache gelöscht werden soll"

Expand Down
15 changes: 12 additions & 3 deletions integreat_cms/static/src/js/events/event-query-pois.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ function removePoi() {
"",
""
);
// Hide the address label
document.getElementById("poi-address-label")?.classList.add("hidden");
}

function newPoiWindow({ target }: Event) {
Expand All @@ -102,12 +104,19 @@ function renderPoiData(
.getElementById("poi-query-input")
.setAttribute("placeholder", queryPlaceholder);
document.getElementById("id_location")?.setAttribute("value", id);
document.getElementById("poi-address")?.setAttribute("value", address);
document.getElementById("poi-city")?.setAttribute("value", city);
document.getElementById("poi-country")?.setAttribute("value", country);
const poiAddress = document.getElementById("poi-address");
if (poiAddress) { poiAddress.textContent = address; }
const poiCity = document.getElementById("poi-city");
if (poiCity) { poiCity.textContent = city; }
const poiCountry = document.getElementById("poi-country");
if (poiCountry) { poiCountry.textContent = country; }

document.getElementById("poi-query-result").classList.add("hidden");
(document.getElementById("poi-query-input") as HTMLInputElement).value = "";
// Hide the existing Google Map link
document.getElementById("poi-google-maps-link")?.classList.add("hidden");
// Show the address label
document.getElementById("poi-address-label")?.classList.remove("hidden");
}

let scheduledFunction: number | null = null;
Expand Down

0 comments on commit 3171ebb

Please sign in to comment.