added first proto

app.py

@@ -0,0 +1,60 @@
+from flask import Flask, render_template, request, redirect, url_for, flash
+from flask_pymongo import PyMongo
+from werkzeug.utils import secure_filename
+import os
+
+app = Flask(__name__)
+app.config["MONGO_URI"] = "mongodb://localhost:27017/mapPinsDB"
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.config['SECRET_KEY'] = 'supersecretkey'
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}
+
+mongo = PyMongo(app)
+
+from flask_wtf import FlaskForm
+from wtforms import StringField, FileField, SubmitField
+from wtforms.validators import DataRequired
+
+class PinForm(FlaskForm):
+    description = StringField('Description', validators=[DataRequired()])
+    photo = FileField('Photo', validators=[DataRequired()])
+    submit = SubmitField('Add Pin')
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
+
+@app.route('/')
+def index():
+    pins = mongo.db.pins.find()
+    return render_template('index.html', pins=pins)
+
+@app.route('/add_pin', methods=['GET', 'POST'])
+def add_pin():
+    form = PinForm()
+    if form.validate_on_submit():
+        description = form.description.data
+        photo = form.photo.data
+        if photo and allowed_file(photo.filename):
+            try:
+                filename = secure_filename(photo.filename)
+                filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                photo.save(filepath)
+                
+                pin = {
+                    'description': description,
+                    'photo': filepath,
+                    'lat': request.form['lat'],
+                    'lng': request.form['lng']
+                }
+                mongo.db.pins.insert_one(pin)
+                return redirect(url_for('index'))
+            except Exception as e:
+                flash(f'An error occurred: {e}')
+                return redirect(url_for('add_pin'))
+        else:
+            flash('Invalid file type. Only images are allowed.')
+    return render_template('add_pin.html', form=form)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

app2.py

@@ -0,0 +1,67 @@
+from flask import Flask, render_template, request,make_response,jsonify, redirect, url_for
+from pymongo import MongoClient
+from flask_wtf import FlaskForm, CSRFProtect
+from wtforms import StringField, FileField, DateTimeField
+from werkzeug.utils import secure_filename
+
+class BacheForm(FlaskForm):
+    name = StringField('name')
+    photo = FileField()
+
+class mongo_connection:
+    conn = None
+
+    def connect(self):
+        mongoclient = MongoClient("mongodb://localhost:27017/")
+        mongo_db = mongoclient["mapper"]
+        self.conn = mongo_db["baches"]
+
+    def query(self, sql):
+        cursor = self.conn.find(sql)
+        return cursor
+
+db = mongo_connection()
+db.connect()
+
+app = Flask(__name__)
+csrf = CSRFProtect(app)
+
+#mongodb_client = MongoClient("mongodb://localhost:27017/")
+#db = client['bachemap']
+#collection = db['bachecitos']
+
+
+
+
+@app.route("/", methods=['GET','POST'])
+def index():
+    if request.method == 'GET':
+        return render_template("map.html")
+    
+    if request.method == 'POST':
+        form=BacheForm()
+        if form.validate_on_submit():
+            post_data = {
+                'author': form.author.data,
+                'img': form.img.data,
+                'latitude': form.latitude.data,
+                'longitude': form.longitide.data,
+                'message': form.message.data
+            }
+            collection.insert_one(post_data)
+            flash('¡Gracias por tu aporte! A la ONU le gusta esto :3')
+            return redirect(url_for('map'))
+        return render_template('map.html', form=form)
+
+
+
+if __name__ == '__main__':
+    app.run(host="localhost", port=5000, debug=True)
+
+
+
+
+
+
+# models schema:
+#{'latitude':'', 'longitude':'', 'severity':''}

requirements.txt

@@ -0,0 +1,13 @@
+blinker==1.8.1
+click==8.1.7
+dnspython==2.6.1
+Flask==3.0.3
+Flask-PyMongo==2.3.0
+Flask-WTF==1.2.1
+itsdangerous==2.2.0
+Jinja2==3.1.3
+leaflet==0.0.3
+MarkupSafe==2.1.5
+pymongo==4.7.1
+Werkzeug==3.0.2
+WTForms==3.1.2

static/action.js

@@ -0,0 +1 @@
+var map = L.map('map').fitWorld();L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

static/style.css

@@ -0,0 +1 @@
+body {padding: 0;margin: 0;}html, body, #map {height: 100%;width: 100vw;}

static/styles.css

@@ -0,0 +1,27 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+}
+
+h1 {
+    text-align: center;
+}
+
+form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+form p {
+    margin: 10px 0;
+}
+
+#map {
+    width: 100%;
+    height: 600px;
+    margin: 20px 0;
+}

templates/add_pin.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Add Pin</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='leaflet.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+    <h1>Add a New Pin</h1>
+    <form method="post" enctype="multipart/form-data">
+        {{ form.hidden_tag() }}
+        <p>
+            {{ form.description.label }}<br>
+            {{ form.description(size=32) }}
+        </p>
+        <p>
+            {{ form.photo.label }}<br>
+            {{ form.photo() }}
+        </p>
+        <p>
+            <label for="lat">Latitude:</label><br>
+            <input type="text" id="lat" name="lat" readonly>
+        </p>
+        <p>
+            <label for="lng">Longitude:</label><br>
+            <input type="text" id="lng" name="lng" readonly>
+        </p>
+        <p>{{ form.submit() }}</p>
+    </form>
+    <a href="{{ url_for('index') }}">Back to map</a>
+
+    <div id="map" style="height: 600px;"></div>
+    <script src="{{ url_for('static', filename='leaflet.js') }}"></script>
+    <script>
+        var map = L.map('map').setView([51.505, -0.09], 13);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+
+        map.on('click', function(e) {
+            var latlng = e.latlng;
+            document.getElementById('lat').value = latlng.lat;
+            document.getElementById('lng').value = latlng.lng;
+        });
+    </script>
+</body>
+</html>

templates/base.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8"/>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    name="viewport"/>
+    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+
+    <link rel=”stylesheet” href=”https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
+  
+</head>
+{% block head %}
+{% endblock %}
+{% block content %}
+
+{% endblock %}

templates/form.html

@@ -0,0 +1,19 @@
+<form method="POST" action="/">
+
+    <input type="submit" value="Go">
+</form>
+
+<form method="POST" enctype="multipart/form-data">
+    {{ form.hidden_tag() }}
+    <div class="form-group">
+        {{form.author.label}} {{form.author(class="form-control")}}
+        {{form.img.label}} {{form.img()}}
+        {{form.latitude()}}
+        {{form.longitude()}}
+        {{form.message.label}}{{form.message(class="form-control")}}
+        <button type="button" name="whereami" id="whereami">Ubicación actual</button>
+        {{form.submit(class="submit-btn")}}
+    </div>
+    {{ form.csrf_token }}
+    {{ form.name.label }} {{ form.name(size=20) }}
+</form>

templates/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Interactive Map</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='leaflet.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+</head>
+<body>
+    <h1>Interactive Map</h1>
+    <div id="map" style="height: 600px;"></div>
+    <script src="{{ url_for('static', filename='leaflet.js') }}"></script>
+    <script>
+        var map = L.map('map').setView([51.505, -0.09], 13);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+
+        {% for pin in pins %}
+        var marker = L.marker([{{ pin.lat }}, {{ pin.lng }}]).addTo(map)
+            .bindPopup("<b>{{ pin.description }}</b><br><img src='{{ pin.photo }}' width='100'>");
+        {% endfor %}
+    </script>
+</body>
+</html>

templates/map.html

@@ -0,0 +1,40 @@
+{% extends 'base.html' %}
+
+{% block header %}
+  <h2>{% block title %}Agregar bache o algo{% endblock title %}</h2>
+{% endblock header %}
+
+{% block content %}
+<section class="maps">
+    <h1>Mapa de urbanismo chingón</h1>
+    <div id="map"></div>
+</section>
+
+
+{% include 'form.html' %}
+
+<script type="text/javascript">
+
+
+
+    function success(position) {
+        console.log(position)
+    }
+
+    navigator.geolocation.getCurrentPosition(success);
+    var lon = document.getElementById('latitude');
+    document.getElementById('latitude').value = lon.options[lon.selectedIndex].value;
+    var lat = document.getElementById('longitude');
+    document.getElementById('longitude').value = lat.options[lat.selectedIndex].value;
+    
+    var map = L.map('map', {
+        center: [lat, lon],
+        zoom: 13
+    });
+    map.on('moveend', function() {
+        var center = map.getCurrentPosition();
+        document.getElementById('latitude').value = center.lng;
+        document.getElementById('longitude').value = center.lat;
+    })
+</script>
+{% endblock content %}