Der Menüpunkt Downloads erlaubt es die verwendeten Daten herunterzuladen. Zur Zeit werden noch die Beispiel-Daten angeboten. Dies soll so geändert werden, dass die für die Darstellung der Seite verwendeten Daten verwendet werden. Es sollen die Daten für POI (geojson), GPX (gpx) und ROUTE (geojson) zum Download zur Verfügung stehen.

Ermögliche Mehrsprachigkeit mit Hilfe von i18next (https://www.i18next.com/).
Ziel ist es keine festen Sprachelement mehr im html-Code zu haben. Alle
Anfangs soll neben deutsch auch englisch zur Verfügung stehen.
Die Sprache soll automatisch nach der bevorzugten Browser Spracheinstellung gewählt werden. Die Änderung der Sprache wird zunächst per Übergabe-Parameter gesteuert.

Ermitteln der Sprache des Browsers:

// Sprache des Browsers ermitteln
var browserLanguage = navigator.language || navigator.userLanguage;
console.log("Browsersprache:", browserLanguage);

Verschiedene Sprachen werden durch das lang-Attribut im html-Fragment gesteuert:

<h1>Hallo Welt (Deutsch)</h1>
<p lang="en">This is an example text (English).</p>
<p lang="fr">Ceci est un texte d'exemple (Français).</p>

Verstecke alle <p> Elemente außer die mit lang="en"

document.querySelectorAll('p:not([lang="en"])').forEach(function(elem) {
    elem.style.display = 'none';
});

Namespaces:

• navigation; alles was für die Applikation notwendig ist
• id: alles was für den Kulturpfad notwendig ist
• id-poi (mehrere): alls was für eine Sehenswürdigkeit notwendig ist.

Die Bilder werden je namespace hinterlegt. Da es keine Abhängigkeit zu Sprache geben soll, werden sie im Bereich service hinterlegt/ ausgegeben. Die Bilder selber sollten nur mir ihrer Nummer gespeichert werden. Es werden nicht unterschiedliche Auflösungen unterstützt. Die Auflösung soll aber auch nicht zu hoch sein.

Beispiel eines Verzeichnisses:
/service/images/05315000-b03-t05/p01.jpg

Tasks:

• refactor images path 05315000-b03-t01
• erstelle images für 05315000-b03-t04
• images für 05315000-b03-t05 einbinden

Zur Zeit ist die Seite auf deutsch gehalten und kann nicht mit Aufruf eines anderen Kulturpfades unterschiedliche Texte zeigen. Das soll geändert werden. Mit Einsatz von JavaScript und https://www.i18next.com sollen alle Texte in Abhängigkeit des angzeigten Kulturpfads geändert werden. Außerdem sollen die Texte in mindestens zwei Sprachen hinterlegt sein.

Hi Wolfram:

folgendes ist mir aufgefallen (und ich wollte nur nachh;ren, dass ich keinen Denkfehler mache). Unter About=>Links sind alle Kulturpfade (in de und en) als "Kulturpfade Lindental X" aufgezählt... Das ist ein Copy und Paste Fehler oder habe ich ein Brett vorm Kopf?

Ich würde die beim übersetzen alle gemeinam geradeziehen.
-tim

der Menüpunkt "about" soll überarbeitet werden. Es soll weiterhin ein modaler Dialog öffnen. Darin werden aber folgende Eigenschaften

• expect (was mich erwartet; bei diesem konkreten Kulturpfad)
• Disclaimer (rechtliche Hinweise)
• about (Worum geht es mit den Kulturpfaden)
• features (welche Eigenschaften hat die App, nicht was, sondern warum)
• links (zu den anderen Kulturpfaden des Bezirks; vgl. ticket #33)
• Kontakt (wie können wir erreicht werden mit Links zu Seiten und Hinweisen auf E-Mail Kontakt)

weitere Änderungen

• Disclaimer sollte nach ganz hinten geschoben werden.
• Die Überschriften der Reiter müssen internationalisiert werden.

Im Bereich about soll im Reiter Über das Projekt die Möglichkeiten eingefügt werden, mit uns in Kontakt zu treten. Es wird die Klasse AboutModal verallgemeinert. Folgende Dinge müssen gemacht werden:

• Klasse ModalBuilder erstellen
• die htlm-Dateien in aboutModal.html umbenennen
• Paragraph Kontakt anfügen

Der modale Dialog, der Informationen zum POI zeigt, soll umgestaltet werden.
Oben wird die Überschrift angezeigt. Darunter wird ein Bild für den POI angezeigt. Der Text soll das Bild umfliessen, wenn das Bild nicht die volle Breite des Dialoges ausfüllt.
Es können Bilder in den Verhältnissen 4:3, 16:9, und 21:9 sowohl im Hoch- wie im Querformat angezeigt werden. Die Größe der Bilder soll sich an der Breite orientieren. Bilder im Hochformat sollen die Hälfte der Breite bekommen, Bilder im Panoramaformat (21:9) werden über die gesamte Breite gezogen. Bilder im Format 16:9 werden 66% Breite zur Verfügung haben.
Jedem Bild ist eine Bildunterschrift zugeordnet.

Der Dialog zu den Features ist zur Zeit eher technisch gehalten. Die Inhalte sollen durch nicht-technische Texte ersetzt werden.

• Tour 1
• Tour 2
• Tour 3
• Tour 4
• Tour 5
• Tour 6

Die Texte wurden den Publikationen der Kulturpfade entnommen. Dies sollte attributiert werden. Es bietet auch die Möglichkeit auf das Alter der Teste hinzuweisen.

Wenn auf den Weg zwischen zwei Punkten geklickt wird, öffnet sich ein Dialog mit Informationen zu Entfernung und Zeit von einem Punkt zum nächsten.

check openstreetmap/operations#737 for Layers

Raster tile providers

• use same icon for POI List
• use icon "journal" for Kulturpfad (https://icons.getbootstrap.com/?q=journal)
• use search icon only for search

Der Kulturpfad 3 ist stark verändert worden. Es gibt dazu Schilder im Strassenraum. Dieser Änderung soll Rechnung getragen werden. Der Kulturpfad soll nicht mehr dem alten Weg folgen, sondern den neuen abbilden. Es werden alle 18 Sehenswürdigkeiten aufgenommen.

Bei Klick auf den POI soll ein modaler Dialog öffnen mit Informationen und Bild über die Sehenswürdigkeit.

Internationlisierung sollte konzeptionell nochmal überdacht werden. Folgende Aspekte sollten berücksichtigt werden:

• Aufschalten weiterer Sprachen je namespace ermöglichen
• kein explizites Einbinden der Sprache mehr.
• Übernehmen der Browsersprache zum Start der Applikation
• fallbacksprache auch für html-Fragmente
• Übernehmen der ausgewählten Sprache, wenn ein anderer Namespace ausgewählt wird (parameter &lng=de)

Im Dialog 'about' soll ein Reiter mit Links eingerichtet werden. Dieser ermöglicht es auf die anderen Kulturpfade im Bezirk zuzugreifen.

Die Features sind fast fertig und finden sich unter about. Sie sollen aber einen eigenen Reiter bekommen. Ausserdem sollen die aufgeführten Punkte nochmal überarbeitet werden.

config.js ist eine global eingesetzte Deklaration Konstanten. Die Werte sollen aber zukünftig nur noch auf Ebene von namespace definert werden. Dafür gibt es die .json.

• config.js auf Verwendung prüfen
• Variablen auf let und var prüfen. Es ist die Verwendung von let zu bevorzugen.
• Adressierung von Attribution überprüfen

Der modale Dialog about beinhaltet Reiter, die noch nicht internationalisiert sind. Dies soll im Rahmen dieses Tickets erfolgen.

Im title-tag steht zur Zeit bootleaf. Dort soll Kulturpfade Köln stehen.

Der Menüpunkt POI List ändert sich zu einem Lupensymbol, wenn die Applikation auf dem Smartphone verwendet wird. Dafür findet sich der Menüpunkt nicht mehr im Menü. Das soll geändert werden, um keine Konkurrenz zur Suchleiste zu haben und um mehr Platz zu bekommen.

"... Scherffgen ... Heute erinnert noch eine Straße"

Zumindest im Internet heißt die Familie Scherfgin und die Straße auch. Bin nicht sicher ob das ein Fall von "das internet weiß nicht alles" oder ein OCR Fehler ist.

Sind die Scans irgendwo zu gegenlesen?

(ich notiere einfach ein paar Sachen, die mir auffallen, sagt Bescheid, falls das nervt...)

z.B. locales/05315000-b03-t01/de/p1.1.html => "weitere Informationen: enhalten viel boilerplate in den Links:

 <li><a href="https://de.wikipedia.org/wiki/Rheinenergiestadion" target="_blank">Rheinenergiest│
adion</a>&nbsp;<i class="bi bi-box-arrow-up-right"></i>&nbsp;Wikipedia</li>

• target="_blank" -> <base target="_blank"> im Header
• bi-box-arrow-up-right => ::after modifier im CSS
• nbsp -> irgendwas im CSS :)

Das würde es einfacher machen, die Seiten einheitlich zu ergänzen. Zumindest sofern man das händisch macht, weiss nicht, ob Du die html Fragment per Skript generierst?

Der Dialog about soll eine Unter-Seite expect haben. Hier wird beschrieben, was Inhalt der Tour ist.

Die Tabelle, die die Route anzeigt, ist zur Zeit nur in deutsch vorhanden. Sie soll allerdings auch internationalisiert werden. Hierfür soll eine routeTableModal Klasse angelegt werden, die das table-html fragment aus dem entsprechneden locales Verzeichnis zieht.

Content of login dialog will be changed to information about distance: add information about distance

This ticket can be closed if issue 11 is solved.

Wie zu Punkt 4.2 sollen vor allem in der Wikipedia Artikel zu Stichworten recherchiert werden. Diese werden dann unter dem Text als Liste angefügt. Es soll keine Links im Text geben. Es werden in unterschiedlichen Sprachen unterschiedliche Links, je nach Verfügbarkeit, im jeweiligen html-Fragment hinterlegt. Außerdem soll für den Text der Stadt Köln ein Bereich Quelle hinzugefügt werden.

• Tour 1
• Tour 2
• Tour 3
• Tour 4
• Tour 5
• Tour 6

Die weiteren Informationen gelten im Rahmen dieses Tickets nur für die Sprache deutsch

Verwende Datatables.js, um die Informationen in data anzuzeigen.

Es gibt zur Zeit ein Suchfeld. Ich habe das noch nie benutzt und es benötigt Platz. Die Suche kann deaktiviert werden und das Suchfeld entfernt:

• entferne suchfeld
• entferne typeahead funktion
• entferne typeahead.bundle.min.js

Zur Zeit sind die Daten über das Verzeichnis / verteilt. Das soll so geändert werden, dass die Daten in das Verzeichnis /service verschoben werden. Es sind dann folgende Verzeichnisse denkbar:

/service/route/<id>.geojson
/service/poi/<id>.geojson
/service/gpx/<id>.gpx
/service/data/<id>.json
/service/images/<id>.jpg
/service/bench/<id>.geojson
/service/cafe/<id>.geojson
/service/publictransport/<id>.geojson
/service/monument/<id>.geojson
/service/info/<id>.html

Diese Struktur entspricht der Struktur des kulturpfadeservice. Vgl. auch: https://github.com/users/weberius/projects/2/views/2?pane=issue&itemId=24568809

Ich möchte die Abfahrtstationen von Bussen und Bahnen integrieren. Dabei werden, wenn hinreichend hinein gezoomt, die Haltestellen angezeigt. Durch Klick auf ein Haltestellensymbol, öffnet sich ein modaler Dialog, der die konkreten Abfahrtszeiten der Busse oder Bahnen anzeigt.

Der Dialog bindet die Echtzeitdaten der KVB ein. Hierfür wird die ID als Schlüssel verwendet. Der Service der KVB antwortet mit einem vollständigen HTML Dokument und einer Tabellenstruktur. Diese wird dynamisch in den Dialog eingebunden. Sollte die Tabelle zu lang sein, steht ein Scrolling zur Verfügung.

Grundlage für die Entwicklung ist die Bereitstellung der entsprechenden Daten durch die Schnittstelle /service/oepnv/. Diese Schnittstelle wird im Rahmen des Tickets Service für Informationen zu KVB Haltestellen #24 entwickelt.

Code

<script>
    // JavaScript um das Fragment zu extrahieren und anzuzeigen
    document.addEventListener('DOMContentLoaded', function() {
        // Fragment extrahieren
        var fragment = document.getElementsByTagName('p')[0].innerHTML;

        // Fragment in das Ausgabe-Div einfügen
        document.getElementById('output').innerHTML = fragment;
    });
</script>

Resources

• Beispiel für die Abfrage der Haltestelle Neumarkt: https://www.kvb.koeln/generated/?aktion=show&code=2&title=graph

@weberius Kommt eine Zusammenarbeit mit diesen beiden Vorhaben im Rahmen von un:box cologne in Frage?
https://meinungfuer.koeln/node/1764
https://meinungfuer.koeln/node/1770

In der POI List gibt es einen Filter und eine Möglichkeit die Punkte zu sortieren. Das wird in der Applikation nicht benötigt. Daher sollen diese Eigenschaften gelöscht werden.

Zur ist ein Kulturpfad fest hinterlegt. Er wird angezeigt, wenn https://codeforcologne.github.io/kulturpfade/ aufgerufen wird.
In Zukunft sollen in Abhängigkeit vom Übergabeparameter id die Kulturpfade z.B. mit der URL https://codeforcologne.github.io/kulturpfade/index.html?id=05315000-b03-t01 dynamisch geladen werden.

Es müssen für jedes POI ein html-File angelegt werden. Bei der Gelegenheit können die Dateien mit den vorhandenen Texten gefüllt werden. Dabei ist darauf zu achten, dass jeder Text-Abschnitt durch ein <p> - Tag umschlossen ist. Das Einbinden von Bilder ist nicht Inhalt dieses Tickets.

• 05315000-b03-t01
• 05315000-b03-t02
• 05315000-b03-t03
• 05315000-b03-t04
• 05315000-b03-t05
• 05315000-b03-t06

Jeder Poi soll durch die Ordnungszahl gekennzeichnet werden. Das bedeutet, dass der POI "1.1" durch einen roten Kreis mit der Zahl "1.1" gekennzeichnet ist. Um das zu ermöglichen, kann sich an folgendem Code orientiert werden:

<!DOCTYPE html>
<html>
<head>
  <title>Leaflet Tooltip Beispiel</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 400px; }
    .red-tooltip {
      background-color: red;
      color: white;
      padding: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>

<div id="map"></div>

<script>
  var map = L.map('map').setView([51.505, -0.09], 13);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
  }).addTo(map);

  var randomNumber = Math.floor(Math.random() * 100); // Erstelle eine zufällige Zahl zwischen 0 und 99

  var marker = L.marker([51.5, -0.09]).addTo(map);

  marker.bindTooltip('<div class="red-tooltip">' + randomNumber + '</div>', {className: 'red-tooltip'}).openTooltip();
</script>

</body>
</html>

Der Bereich Download soll so geändert werden, dass er nur in der Desktop Version angezeigt wird.