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 16, 2022
1 parent 7265f21 commit 3043300
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 55 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ UNRELEASED
* [ [#1163](https://github.com/digitalfabrik/integreat-cms/issues/1163) ] Fix error when editor creates new page
* [ [#1165](https://github.com/digitalfabrik/integreat-cms/issues/1165) ] Fix bulk action button for sub pages
* [ [#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
33 changes: 23 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,31 @@
{% 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 }}">
<i data-feather="map-pin"></i>
{% 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 cursor-pointer"
title="{{ poi.address }}, {{ poi.postcode }} {{ poi.city }}"
data-poi-title="{{ poi|poi_translation_title:current_language }}"
data-poi-id="{{ poi.id }}"
data-poi-address="{{ poi.address }}"
data-poi-postcode="{{ poi.postcode }}"
data-poi-city="{{ poi.city }}"
data-poi-country="{{ poi.country }}">
{{ poi|poi_translation_title:current_language }}
</option>
{% endfor %}
Expand Down
34 changes: 18 additions & 16 deletions integreat_cms/cms/templates/events/event_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ <h1 class="heading">
{% endif %}
{% endif %}
</div>
<div class="flex flex-wrap">
<div class="w-2/3 flex flex-wrap flex-col pr-2">
<div class="flex flex-wrap gap-4">
<div class="w-full 2xl:w-[600px] flex flex-wrap flex-col flex-grow">
{% include "_form_language_tabs.html" with target='edit_event' instance=event_form.instance content_field="event_id" %}
<div class="w-full mb-4 rounded border-2 border-blue-500 bg-white">
<div class="w-full p-4">
Expand Down Expand Up @@ -101,7 +101,7 @@ <h1 class="heading">
</div>
</div>
</div>
<div class="w-1/3 pl-4 flex flex-wrap flex-col">
<div class="w-full 2xl:w-[600px] flex flex-wrap flex-col">
<ul class="flex pl-4">
<li class="z-10" style="margin-bottom: -2px">
<div class="bg-white text-blue-500 border-l-2 border-t-2 border-r-2 border-blue-500 font-bold rounded-t-lg py-2 px-4">
Expand Down Expand Up @@ -191,22 +191,24 @@ <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 id="poi-address-container" class="{% if not poi %} hidden {% endif %}">
<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 %}>
<div id="poi-address" class="text-lg whitespace-pre-line">{% if poi %}{{ poi.address }}
{{ poi.postcode }} {{ poi.city }}
{{ poi.country }}{% endif %}</div>
<a id="poi-google-maps-link" href="https://www.google.com/maps/search/?api=1&query={% if poi %}{{ poi.address }},{{ poi.city }},{{ poi.country }}{% endif %}"
class="text-blue-500 hover:underline"
target="_blank" rel="noopener noreferrer">
{% trans 'Open on Google Maps' %}
</a>
</div>
</div>
</div>
<div>
Expand Down
55 changes: 31 additions & 24 deletions integreat_cms/locale/de/LC_MESSAGES/django.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ msgid ""
msgstr ""
"Project-Id-Version: 1.0\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2022-02-15 14:46+0000\n"
"POT-Creation-Date: 2022-02-16 00:14+0000\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: Integreat <info@integreat-app.de>\n"
"Language-Team: Integreat <info@integreat-app.de>\n"
Expand All @@ -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:14
#, 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:18
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: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:209
msgid "Open on Google Maps"
msgstr "Auf Google Maps öffnen"

#: cms/templates/events/event_form.html:219
#: cms/templates/events/event_form.html:221
#: 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:228
msgid "Restore this event"
msgstr "Diese Veranstaltung wiederherstellen"

#: cms/templates/events/event_form.html:229
#: cms/templates/events/event_form.html:231
#: 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:238
msgid "Archive this event"
msgstr "Diese Veranstaltung archivieren"

#: cms/templates/events/event_form.html:242
#: cms/templates/events/event_form.html:244
#: 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:251
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
24 changes: 19 additions & 5 deletions integreat_cms/static/src/js/events/event-query-pois.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import feather from "feather-icons";
import { getCsrfToken } from "../utils/csrf-token";

window.addEventListener("load", () => {
Expand Down Expand Up @@ -40,6 +41,8 @@ async function queryPois(
// Set and display new data
document.getElementById("poi-query-result").classList.remove("hidden");
document.getElementById("poi-query-result").innerHTML = data;
// trigger icon replacement
feather.replace({ class: 'inline-block' });
}

document.querySelectorAll(".option-new-poi").forEach((node) => {
Expand All @@ -50,7 +53,7 @@ async function queryPois(
});

document.querySelectorAll(".option-existing-poi").forEach((node) => {
console.debug("add", node);
console.debug("Set event listener for existing POI:", node);
node.addEventListener("click", (event) => {
event.preventDefault();
setPoi(event);
Expand All @@ -64,9 +67,13 @@ function setPoi({ target }: Event) {
option.getAttribute("data-poi-title"),
option.getAttribute("data-poi-id"),
option.getAttribute("data-poi-address"),
option.getAttribute("data-poi-postcode"),
option.getAttribute("data-poi-city"),
option.getAttribute("data-poi-country")
);
// Show the address container
document.getElementById("poi-address-container")?.classList.remove("hidden");
console.debug("Rendered POI data");
}

function removePoi() {
Expand All @@ -77,8 +84,12 @@ function removePoi() {
"-1",
"",
"",
"",
""
);
// Hide the address container
document.getElementById("poi-address-container")?.classList.add("hidden");
console.debug("Removed POI data");
}

function newPoiWindow({ target }: Event) {
Expand All @@ -95,17 +106,20 @@ function renderPoiData(
queryPlaceholder: string,
id: string,
address: string,
postcode: string,
city: string,
country: string
) {
document
.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}\n${postcode} ${city}\n${country}`;
}
document.getElementById("poi-google-maps-link")
?.setAttribute("href", `https://www.google.com/maps/search/?api=1&query=${address}, ${postcode} ${city}, ${country}`)
document.getElementById("poi-query-result").classList.add("hidden");
(document.getElementById("poi-query-input") as HTMLInputElement).value = "";
}
Expand Down

0 comments on commit 3043300

Please sign in to comment.