Initial commit

.gitignore

@@ -0,0 +1,160 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/

app.py

@@ -0,0 +1,61 @@
+from flask import Flask, render_template, request, jsonify
+import psycopg2
+
+app = Flask(__name__)
+
+def connect_to_db():
+    return psycopg2.connect(
+        dbname="glprui_jloddr",
+        user="glprui_jloddr",
+        password="612ef773",
+        host="db.qgiscloud.com",
+        port="5432",
+        sslmode="prefer"
+    )
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/record_data', methods=['POST'])
+def record_data():
+    data = request.json
+
+    conn = connect_to_db()
+    cursor = conn.cursor()
+
+    try:
+        cursor.execute(
+            """
+            INSERT INTO public.gettinglost_tracking (Age, Gender, Transport, TimeOfDay, DayOfWeek, Description) 
+            VALUES (%s, %s, %s, %s, %s, %s) RETURNING ID;
+            """,
+            (data['age'], data['gender'], data['transport'], data['timeOfDay'], data['dayOfWeek'], data['description'])
+        )
+
+        record_id = cursor.fetchone()[0]
+
+        point_data = data['points']
+        for pointType, point in point_data.items():
+            if point:
+                cursor.execute(
+                    """
+                    INSERT INTO public.gettinglost_geom (ID, PointType, geom) 
+                    VALUES (%s, %s, ST_SetSRID(ST_Point(%s, %s), 4326));
+                    """,
+                    (record_id, pointType, point['lng'], point['lat'])
+                )
+
+        conn.commit()
+        return jsonify({"message": "Data recorded successfully!"})
+
+    except Exception as e:
+        conn.rollback()
+        return jsonify({"error": str(e)})
+
+    finally:
+        cursor.close()
+        conn.close()
+
+if __name__ == '__main__':
+    app.run(debug=True)

gradio-interface.py

@@ -0,0 +1,12 @@
+import gradio as gr
+import subprocess
+
+def launch_flask():
+    # Run the Flask app in a subprocess
+    subprocess.Popen(["python", "app.py"])
+
+# Create a Gradio interface that launches the Flask app
+iface = gr.Interface(fn=launch_flask, inputs=[], outputs=[])
+
+if __name__ == "__main__":
+    iface.launch()

requirements.txt

@@ -0,0 +1,8 @@
+# This file may be used to create an environment using:
+# $ conda create --name <env> --file <this file>
+
+Flask==2.1.2
+Werkzeug==2.1.2
+psycopg2-binary==2.9.3
+gradio==2.2.15
+

templates/index.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Geographical Interface</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
+    <style>
+        #map {
+            width: 100%;
+            height: 100vh;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        #data-entry-panel {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            width: 300px;
+            background-color: #f8f8f8;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            z-index: 1000;
+        }
+
+        #data-entry-panel label,
+        #data-entry-panel select,
+        #data-entry-panel textarea {
+            display: block;
+            margin-bottom: 10px;
+            width: 100%;
+        }
+
+        #data-entry-form button {
+            display: block;
+            margin: 0 auto;
+            padding: 10px 20px;
+            background-color: orange;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        #data-entry-form button:hover {
+            background-color: darkorange;
+        }
+
+        /* Additional styles for multi-mode transport options */
+        #multi-mode-options {
+            display: none;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+
+        /* Point Type Selector styles */
+        #point-selector {
+            position: absolute;
+            top: 10px;
+            left: 75px;
+            background-color: #f8f8f8;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            z-index: 1000;
+            font-size: 16px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="map"></div>
+
+    <!-- Point Type Selector on the Left -->
+    <div id="point-selector">
+        <p>Select Point Type:</p>
+        <label style="display: inline-block; margin-right: 10px;">
+            <input type="radio" name="pointType" value="start" checked> 
+            <span style="color: red;">●</span> Start Point
+        </label>
+        <label style="display: inline-block; margin-right: 10px;">
+            <input type="radio" name="pointType" value="lost"> 
+            <span style="color: yellow;">●</span> Getting Lost Point
+        </label>
+        <label style="display: inline-block;">
+            <input type="radio" name="pointType" value="end"> 
+            <span style="color: blue;">●</span> End Point
+        </label>
+    </div>
+
+    <!-- Side Panel -->
+    <div id="data-entry-panel">
+        <h3>Enter Data</h3>
+        <form id="data-entry-form">
+            <label for="age">Age:</label>
+            <select id="age">
+                <option value="0-10">0-10</option>
+                <option value="11-20">11-20</option>
+                <option value="21-30">21-30</option>
+                <option value="31-40">31-40</option>
+                <option value="41-50">41-50</option>
+                <option value="51-60">51-60</option>
+                <option value="61+">61+</option>
+            </select>
+
+            <label for="gender">Gender:</label>
+            <select id="gender">
+                <option value="F">Female</option>
+                <option value="M">Male</option>
+                <option value="O">Other</option>
+                <option value="PNTS">Prefer Not To Say</option>
+            </select>
+
+            <label for="transport">Mode of Transport:</label>
+            <select id="transport" onchange="checkTransportMode()">
+                <option value="Walk">Walk</option>
+                <option value="Car">Car</option>
+                <option value="Bike">Bike</option>
+                <option value="Train">Train</option>
+                <option value="Subway">Subway</option>
+                <option value="Other">Other</option>
+                <option value="Multi">Multi</option>
+            </select>
+
+            <div id="multi-mode-options">
+                <p>Select modes used:</p>
+                <input type="checkbox" id="walk" name="mode" value="Walk">
+                <label for="walk">Walk</label><br>
+                <input type="checkbox" id="Train" name="mode" value="Train">
+                <label for="walk">Train</label><br>
+                <input type="checkbox" id="Bike" name="mode" value="Bike">
+                <label for="Bike">Bike</label><br>
+                <input type="checkbox" id="Subway" name="mode" value="Subway">
+                <label for="Subway">Subway</label><br>
+            </div>
+
+            <label for="timeOfDay">Time Of Day:</label>
+            <select id="timeOfDay">
+                <option value="Morning">Morning</option>
+                <option value="Afternoon">Afternoon</option>
+                <option value="Evening">Evening</option>
+                <option value="Night">Night</option>
+            </select>
+
+            <label for="dayOfWeek">Date (Day of the week):</label>
+            <select id="dayOfWeek">
+                <option value="Monday">Monday</option>
+                <option value="Tuesday">Tuesday</option>
+                <option value="Wednesday">Wednesday</option>
+                <option value="Thursday">Thursday</option>
+                <option value="Friday">Friday</option>
+                <option value="Saturday">Saturday</option>
+                <option value="Sunday">Sunday</option>
+            </select>
+
+            <label for="description">Why did you get lost?</label>
+            <textarea id="description" rows="4"></textarea>
+
+            <button type="button" onclick="submitData()">Save</button>
+            <hr style="margin-top: 15px;">
+
+            <p>For a more detailed survey, click the link or scan the QR code:</p>
+            <a href="https://arcg.is/1GK5jP0" target="_blank">https://arcg.is/1GK5jP0</a>
+            <br>
+            <img src="/static/Getting Lost Survey.png" alt="QR Code for Survey" style="margin-top: 10px; width: 50%;">
+        </div>
+        </form>
+    </div>
+
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
+    <script>
+        var openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        });
+
+        var openTopoMapLayer = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenTopoMap contributors'
+        });
+
+        var map = L.map('map', {
+            center: [51.505, -0.09],
+            zoom: 13,
+            layers: [openStreetMapLayer]
+        });
+
+        var baseMaps = {
+            "OpenStreetMap": openStreetMapLayer,
+            "OpenTopoMap": openTopoMapLayer
+        };
+
+        L.control.layers(baseMaps, null, { position: 'topleft' }).addTo(map);
+
+        var clickedLat = null;
+        var clickedLon = null;
+
+        map.on('click', function (e) {
+            clickedLat = e.latlng.lat;
+            clickedLon = e.latlng.lng;
+
+            var pointType = document.querySelector('input[name="pointType"]:checked').value;
+            var color;
+
+            switch (pointType) {
+                case 'start':
+                    color = 'red';
+                    break;
+                case 'lost':
+                    color = 'yellow';
+                    break;
+                case 'end':
+                    color = 'blue';
+                    break;
+            }
+
+            L.circleMarker([clickedLat, clickedLon], {
+                color: color,
+                radius: 5
+            }).addTo(map);
+        });
+
+        function checkTransportMode() {
+            var transport = document.getElementById('transport').value;
+            var multiOptions = document.getElementById('multi-mode-options');
+            if (transport === 'Multi') {
+                multiOptions.style.display = 'block';
+            } else {
+                multiOptions.style.display = 'none';
+            }
+        }
+
+        function submitData() {
+            var age = document.getElementById('age').value;
+            var gender = document.getElementById('gender').value;
+            var transport = document.getElementById('transport').value;
+            var timeOfDay = document.getElementById('timeOfDay').value;
+            var dayOfWeek = document.getElementById('dayOfWeek').value;
+            var description = document.getElementById('description').value;
+            var pointType = document.getElementById('pointType').value;
+
+            fetch('/record_data', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    age: age,
+                    gender: gender,
+                    transport: transport,
+                    timeOfDay: timeOfDay,
+                    dayOfWeek: dayOfWeek,
+                    description: description,
+                    lat: clickedLat,
+                    lon: clickedLon,
+                    pointType: pointType
+                })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.error) {
+                        alert('Failed to record data: ' + data.error);
+                    } else {
+                        alert(data.message);
+                    }
+                });
+        }
+
+    </script>
+</body>
+
+</html>