vadikas/SARBase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First working prototype with map search and some dynamic UI

Browse Source
This commit is contained in:
Vadim Likholetov 2023-11-12 22:06:15 +02:00
parent c380ec5777
commit 64d00c8293
13 changed files with 307 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.idea/SARBase.iml
View File

@ -7,10 +7,11 @@
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/venv" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="jdk" jdkName="Python 3.9 (SARBase)" jdkType="Python SDK" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
<component name="PackageRequirementsSettings">
<option name="removeUnused" value="true" />
<option name="modifyBaseFiles" value="true" />
</component>
<component name="TemplatesService">

2
.idea/misc.xml
View File

@ -3,5 +3,5 @@
<component name="Black">
<option name="sdkName" value="Python 3.11 (SARBase)" />
</component>
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.11 (SARBase)" project-jdk-type="Python SDK" />
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9 (SARBase)" project-jdk-type="Python SDK" />
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

4
admin.py
View File

@ -1,10 +1,12 @@
from flask_admin import Admin
from flask_admin.contrib.sqla import ModelView
from app import app, db
from models import User, SARCall, SARCategory, GPSTrack
from models import User, SARCall, SARCategory, GPSTrack, SARStatus, SARResult
admin = Admin(app, name='SAR Admin', template_mode='bootstrap3')
admin.add_view(ModelView(User, db.session))
admin.add_view(ModelView(SARCall, db.session))
admin.add_view(ModelView(SARCategory, db.session))
admin.add_view(ModelView(SARStatus, db.session))
admin.add_view(ModelView(SARResult, db.session))
admin.add_view(ModelView(GPSTrack, db.session))

17
app.py
View File

@ -2,11 +2,24 @@ from flask import Flask, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_login import LoginManager
from sqlalchemy import MetaData
convention = {
"ix": 'ix_%(column_0_label)s',
"uq": "uq_%(table_name)s_%(column_0_name)s",
"ck": "ck_%(table_name)s_%(constraint_name)s",
"fk": "fk_%(table_name)s_%(column_0_name)s_%(referred_table_name)s",
"pk": "pk_%(table_name)s"
}
metadata = MetaData(naming_convention=convention)
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
db = SQLAlchemy(app)
#app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+mysqlconnector://sarbaseuser:password@localhost/sarbaseapp'
db = SQLAlchemy(app, metadata=metadata)
migrate = Migrate(app, db)
login_manager = LoginManager(app)

11
create_db.py
View File

@ -1,11 +0,0 @@
from flask import Flask, render_template, redirect, url_for, request, flash
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
db = SQLAlchemy(app)
from models import User, SARCall, SARCategory
if __name__ == '__main__':
db.create_all()

18
models.py
View File

@ -14,18 +14,30 @@ class User(UserMixin, db.Model):
class SARCall(db.Model):
id = db.Column(db.Integer, primary_key=True)
start_date = db.Column(db.DateTime, nullable=False)
finish_date = db.Column(db.DateTime, nullable=False)
category = db.Column(db.String(150), nullable=False)
finish_date = db.Column(db.DateTime, nullable=True)
category = db.Column(db.Integer, db.ForeignKey('sar_category.id'), nullable=False)
status = db.Column(db.Integer, db.ForeignKey('sar_status.id'), nullable=False)
result = db.Column(db.Integer, db.ForeignKey('sar_result.id'), nullable=True)
latitude = db.Column(db.Float, nullable=False)
longitude = db.Column(db.Float, nullable=False)
title = db.Column(db.String(150), nullable=False)
description = db.Column(db.Text, nullable=True)
description_hidden = db.Column(db.Text, nullable=True)
search_manager_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
gpx_data = db.Column(db.Text, nullable=True) # This will store GPX data as a text
class SARCategory(db.Model):
id = db.Column(db.Integer, primary_key=True)
id = db.Column(db.Integer, primary_key=True, unique=True, nullable=False)
name = db.Column(db.String(150), unique=True, nullable=False)
class SARResult(db.Model):
id = db.Column(db.Integer, primary_key=True, unique=True, nullable=False)
name = db.Column(db.String(150), unique=True, nullable=False)
class SARStatus(db.Model):
id = db.Column(db.Integer, primary_key=True, unique=True, nullable=False)
name = db.Column(db.String(150), unique=True, nullable=False)
class GPSTrack(db.Model):
id = db.Column(db.Integer, primary_key=True)

5
requirements.txt
View File

@ -1,9 +1,10 @@
alembic==1.12.1
Flask==3.0.0
Flask_Admin==1.6.1
Flask_Login==0.6.2
Flask_Login==0.6.3
Flask_Migrate==4.0.5
flask_sqlalchemy==3.1.1
python_dateutil==2.8.2
SQLAlchemy==2.0.22
Werkzeug==2.3.7
Werkzeug==3.0.1
mysql_connector_python==8.2.0

72
sar_calls.py
View File

@ -2,71 +2,105 @@ from app import app, db
from flask import request, redirect, flash, render_template, url_for
from flask_login import login_required, current_user
from dateutil import parser
from models import SARCall, GPSTrack
from models import SARCall, GPSTrack, SARCategory, SARStatus, User
@app.route('/create_sar', methods=['GET', 'POST'])
@login_required
def create_sar():
categories = SARCategory.query.all()
statuses = SARStatus.query.order_by('id').all()
if request.method == 'POST':
start_date = parser.parse(request.form.get('start_date'))
finish_date = parser.parse(request.form.get('finish_date'))
category = request.form.get('category')
latitude = request.form.get('latitude')
longitude = request.form.get('longitude')
gpx_data_list = request.form.getlist('gpx_data[]')
gpx_color_list = request.form.getlist('gpx_color[]')
status = request.form.get('status')
title = request.form.get('title')
# gpx_data_list = request.form.getlist('gpx_data[]')
# gpx_color_list = request.form.getlist('gpx_color[]')
for data, color in zip(gpx_data_list, gpx_color_list):
track = GPSTrack(data=data, color=color, sar_call=new_sar_call)
db.session.add(track)
# for data, color in zip(gpx_data_list, gpx_color_list):
# track = GPSTrack(data=data, color=color, sar_call=new_sar_call)
# db.session.add(track)
new_sar_call = SARCall(
start_date=start_date,
finish_date=finish_date,
category=category,
latitude=latitude,
longitude=longitude,
search_manager_id=current_user.id,
gpx_data=gpx_data_list,
gpx_color_list=gpx_color_list,
status=status,
title=title,
description=request.form.get('description'),
description_hidden=request.form.get('description_hidden'),
# gpx_data=gpx_data_list,
# gpx_color_list=gpx_color_list,
)
db.session.add(new_sar_call)
db.session.commit()
flash('SAR call created successfully!', 'success')
return redirect(url_for('dashboard'))
return render_template('create_sar.html')
return render_template('create_sar.html', categories=categories, statuses=statuses)
@app.route('/list_sar')
@login_required
def list_sar():
sar_calls = SARCall.query.all()
sar_calls = SARCall.query.join(User, SARCall.search_manager_id == User.id).join(SARCategory, SARCall.category == SARCategory.id).add_columns(SARCategory, User, SARCall).all()
return render_template('list_sar.html', sar_calls=sar_calls)
@app.route('/edit_sar/<int:id>', methods=['GET', 'POST'])
@login_required
def edit_sar(id):
sar_call = SARCall.query.get(id)
sar_call = SARCall.query.get_or_404(id)
categories = SARCategory.query.all()
statuses = SARStatus.query.order_by('id').all()
if request.method == 'POST':
sar_call.start_date = request.form.get('start_date')
sar_call.finish_date = request.form.get('finish_date')
sar_call.start_date = parser.parse(request.form.get('start_date'))
if request.form.get('finish_date'):
sar_call.finish_date = parser.parse(request.form.get('finish_date'))
sar_call.category = request.form.get('category')
sar_call.latitude = request.form.get('latitude')
sar_call.longitude = request.form.get('longitude')
sar_call.gpx_data = request.form.get('gpx_data')
sar_call.status = request.form.get('status')
sar_call.result = request.form.get('result')
sar_call.title = request.form.get('title')
sar_call.description = request.form.get('description')
sar_call.description_hidden = request.form.get('description_hidden')
# sar_call.gpx_data = request.form.get('gpx_data')
db.session.commit()
flash('SAR call updated successfully!', 'success')
return redirect(url_for('list_sar'))
return render_template('edit_sar.html', sar_call=sar_call)
if sar_call.start_date:
sar_call.start_date = sar_call.start_date.strftime('%Y-%m-%d')
if sar_call.finish_date:
sar_call.finish_date = sar_call.finish_date.strftime('%Y-%m-%d')
return render_template('edit_sar.html', sar_call=sar_call,categories=categories, statuses=statuses)
@app.route('/sar_details/<int:id>')
def sar_details(id):
sar = SARCall.query.get_or_404(id) # Fetch the SARCall record or return 404
return render_template('sar_details.html', sar=sar)
@app.route('/delete_sar/<int:id>')
@login_required
def delete_sar(id):
sar_call = SARCall.query.get(id)
sar_call = SARCall.query.get_or_404(id)
db.session.delete(sar_call)
db.session.commit()
flash('SAR call deleted successfully!', 'success')
flash('SAR call record deleted successfully!', 'success')
return redirect(url_for('list_sar'))

139
templates/create_sar.html
View File

@ -8,50 +8,73 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<div class="container mt-5">
<h2>Create SAR Call</h2>
<form action="{{ url_for('create_sar') }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="start_date">Start Date:</label>
<input type="date" name="start_date" class="form-control" required>
</div>
<div class="form-group">
<label for="finish_date">Finish Date:</label>
<input type="date" name="finish_date" class="form-control" required>
<label for="status">Status:</label>
<select name="status" id="status" class="form-control">
{% for status in statuses %}
<option value="{{ status.id }}">
{{ status.name }}
</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="start_date">Start Date:</label>
<div>
<button type="button" id="today_button" class="btn btn-secondary">Today</button>
</div>
<input type="date" name="start_date" id="start_date" class="form-control" required>
</div>
<div class="form-group">
<label for="category">Category:</label>
<select name="category" class="form-control">
{% for cat in categories %}
<option value="{{ cat }}">{{ cat }}</option>
<select name="category" id="category" class="form-control">
{% for category in categories %}
<option value="{{ category.id }}">{{ category.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="coordinates">Geographical Coordinates:</label>
<input type="text" name="coordinates" class="form-control" placeholder="e.g. 40.7128, -74.0060"
<label for="coordinates">Initial Planning Point (IPP) Coordinates:</label>
<input type="text" name="longitude" class="form-control" placeholder="e.g. 40.7128"
required>
<input type="text" name="latitude" class="form-control" placeholder="e.g. -74.0060"
required>
</div>
<div class="form-group">
<label for="title">Title:</label>
<input type="text" name="title" class="form-control"
placeholder="e.g. M65, London center, missing since 12.12.2022" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea name="description" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="hidden_description">Hidden Description:</label>
<textarea name="hidden_description" class="form-control"></textarea>
<label for="description_hidden">Hidden Description:</label>
<textarea name="description_hidden" class="form-control"></textarea>
</div>
<!-- GPX Track Fields (You can expand upon this based on the previous discussions about multiple tracks) -->
<div class="form-group">
<label for="gpx_file">Upload GPX Track:</label>
<input type="file" name="gpx_file">
</div>
{# <!-- GPX Track Fields (You can expand upon this based on the previous discussions about multiple tracks) -->#}
{# <div class="form-group">#}
{# <label for="gpx_file">Upload GPX Track:</label>#}
{# <input type="file" name="gpx_file">#}
{# </div>#}
<button type="submit" class="btn btn-primary">Create</button>
</form>
@ -66,6 +89,24 @@
var marker;
// Add the geocoder
L.Control.geocoder({
defaultMarkGeocode: true
})
.on('markgeocode', function (e) {
if (marker) {
map.removeLayer(marker);
}
var latlng = e.geocode.center;
L.marker(latlng).addTo(map);
map.setView(latlng, map.getZoom());
// Update your form fields with the selected location
document.querySelector('input[name="latitude"]').value = latlng.lat;
document.querySelector('input[name="longitude"]').value = latlng.lng;
})
.addTo(map);
map.on('click', function (e) {
if (marker) {
map.removeLayer(marker);
@ -82,36 +123,48 @@
{# map.fitBounds(e.target.getBounds());#}
{# });#}
{# map.addLayer(gpxLayer);#}
{#});#}
{#})
;
#}
// If editing, set the marker to the existing coordinates
var latInput = document.querySelector('input[name="latitude"]');
var lngInput = document.querySelector('input[name="longitude"]');
if (latInput.value && lngInput.value) {
marker = L.marker([latInput.value, lngInput.value]).addTo(map);
}
// If editing, set the marker to the existing coordinates
var latInput = document.querySelector('input[name="latitude"]');
var lngInput = document.querySelector('input[name="longitude"]');
if (latInput.value && lngInput.value) {
marker = L.marker([latInput.value, lngInput.value]).addTo(map);
}
</script>
{##}
{# <script>#}
{# function addTrack() {#}
{# let trackDiv = document.createElement('div');#}
{# trackDiv.className = 'gpx_track';#}
{# trackDiv.innerHTML = `#}
{# <label>GPX Data:</label>#}
{# <textarea name="gpx_data[]"></textarea>#}
{# <label>Color:</label>#}
{# <input type="color" name="gpx_color[]" value="#ff0000">#}
{# <button type="button" onclick="removeTrack(this)">Remove</button>#}
{# `;#}
{# document.getElementById('gpx_tracks').appendChild(trackDiv);#}
{# }#}
{##}
{# function removeTrack(button) {#}
{# let trackDiv = button.parentElement;#}
{# trackDiv.remove();#}
{# }#}
{# </script>#}
<script>
function addTrack() {
let trackDiv = document.createElement('div');
trackDiv.className = 'gpx_track';
trackDiv.innerHTML = `
<label>GPX Data:</label>
<textarea name="gpx_data[]"></textarea>
<label>Color:</label>
<input type="color" name="gpx_color[]" value="#ff0000">
<button type="button" onclick="removeTrack(this)">Remove</button>
`;
document.getElementById('gpx_tracks').appendChild(trackDiv);
}
function removeTrack(button) {
let trackDiv = button.parentElement;
trackDiv.remove();
}
document.getElementById('today_button').addEventListener('click', function () {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
document.getElementById('start_date').value = today;
});
</script>
{% endblock %}

59
templates/edit_sar.html
View File

@ -14,46 +14,66 @@
<h2>Edit SAR Call</h2>
<form action="{{ url_for('edit_sar', id=sar_call.id) }}" method="post" enctype="multipart/form-data">
<div class="form-group">
<div>
<label for="status">Status:</label>
<select name="status" id="status" class="form-control">
{% for status in statuses %}
<option value="{{ status.id }}" {% if status.id == sar_call.status %}selected{% endif %}>
{{ status.name }}
</option>
{% endfor %}
</select>
</div>
<label for="start_date">Start Date:</label>
<input type="date" name="start_date" class="form-control" value="{{ sar_call.start_date }}" required>
</div>
<div class="form-group">
<label for="finish_date">Finish Date:</label>
<input type="date" name="finish_date" class="form-control" value="{{ sar_call.finish_date }}" required>
<div>
<button type="button" id="today_button" class="btn btn-secondary">Today</button>
</div>
<input type="date" name="finish_date" id="finish_date" class="form-control" value="{{ sar_call.finish_date }}" >
</div>
<div class="form-group">
<label for="category">Category:</label>
<select name="category" class="form-control">
{% for cat in categories %}
<option value="{{ cat }}"
{% if cat == sar_call.category %}selected{% endif %}>{{ cat }}</option>
<select name="category" id="category" class="form-control">
{% for category in categories %}
<option value="{{ category.id }}" {% if category.id == sar_call.category %}selected{% endif %}>
{{ category.name }}
</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="coordinates">Geographical Coordinates:</label>
<input type="text" name="coordinates" class="form-control" value="{{ sar_call.longitude }}" required>
<input type="text" name="coordinates" class="form-control" value="{{ sar_call.latitude }}" required>
<input type="text" name="longitude" class="form-control" value="{{ sar_call.longitude }}" required>
<input type="text" name="latitude" class="form-control" value="{{ sar_call.latitude }}" required>
</div>
<div class="form-group">
<label for="title">Title:</label>
<input type="text" name="title" class="form-control" value="{{ sar_call.title }}" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea name="description" class="form-control">{{ sar_call.description }}</textarea>
</div>
<div class="form-group">
<label for="hidden_description">Hidden Description:</label>
<textarea name="hidden_description" class="form-control">{{ sar_call.hidden_description }}</textarea>
<label for="description_hidden">Hidden Description:</label>
<textarea name="description_hidden" class="form-control">{{ sar_call.description_hidden }}</textarea>
</div>
<!-- GPX Track Fields (You can expand upon this based on the previous discussion about multiple tracks) -->
<div class="form-group">
<label for="gpx_file">Upload GPX Track:</label>
<input type="file" name="gpx_file">
</div>
{# <!-- GPX Track Fields (You can expand upon this based on the previous discussion about multiple tracks) -->#}
{# <div class="form-group">#}
{# <label for="gpx_file">Upload GPX Track:</label>#}
{# <input type="file" name="gpx_file">#}
{# </div>#}
<button type="submit" class="btn btn-primary">Update</button>
</form>
@ -83,6 +103,17 @@
marker = L.marker([latInput.value, lngInput.value]).addTo(map);
}
</script>
<script>
document.getElementById('today_button').addEventListener('click', function() {
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); // January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
document.getElementById('finish_date').value = today;
});
</script>
</div>
<{% endblock %}

33
templates/list_sar.html
View File

@ -11,28 +11,32 @@
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Start Date</th>
<th>Finish Date</th>
<th>Category</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Created by</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for sar in sar_calls %}
<tr>
<td>{{ sar.id }}</td>
<td>{{ sar.start_date }}</td>
<td>{{ sar.finish_date }}</td>
<td>{{ sar.category }}</td>
<td>{{ sar.latitude }}</td>
<td>{{ sar.longitude }}</td>
<tr class="clickable-row" data-href="{{ url_for('sar_details', id=sar.SARCall.id) }}">
<td>{{ sar.SARCall.id }}</td>
<td>{{ sar.SARCall.title }}</td>
<td>{{ sar.SARCall.start_date }}</td>
<td>{{ sar.SARCall.finish_date }}</td>
<td>{{ sar.SARCategory.name }}</td>
<td>{{ sar.SARCall.latitude }}</td>
<td>{{ sar.SARCall.longitude }}</td>
<td>{{ sar.User.full_name }}</td>
<td>
<a href="{{ url_for('edit_sar', id=sar.id) }}">
<a href="{{ url_for('edit_sar', id=sar.SARCall.id) }}">
<button type="button" class="btn btn-info">Edit</button>
</a> |
<a href="{{ url_for('delete_sar', id=sar.id) }}">
<a href="{{ url_for('delete_sar', id=sar.SARCall.id) }}">
<button type="button" class="btn btn-danger">Delete</button>
</a>
</td>
@ -42,4 +46,15 @@
</table>
<a href="/dashboard">Back to Dashboard</a>
</div>
<script>
document.querySelectorAll('.clickable-row').forEach(row => {
row.addEventListener('click', () => {
window.location.href = row.dataset.href;
});
});
</script>
{% endblock %}

44
templates/sar_details.html Normal file
View File

@ -0,0 +1,44 @@
{% extends "base.html" %}
{% block title %}
SAR job details
{% endblock %}
{% block content %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
.button { margin: 5px; }
</style>
<div class="container mt-4">
<h1 class="mb-4">SAR Job Details</h1>
<div class="card mb-4">
<div class="card-body">
<p><strong>ID:</strong> {{ sar.id }}</p>
<p><strong>Start Date:</strong> {{ sar.start_date }}</p>
<p><strong>Manager:</strong> {{ sar.manager }}</p>
<!-- Other SAR details -->
</div>
</div>
<div id="map" class="mb-4"></div>
<div>
<a href="{{ url_for('edit_sar', id=sar.id) }}" class="btn btn-primary">Edit</a>
<a href="{{ url_for('delete_sar', id=sar.id) }}" class="btn btn-danger">Delete</a>
</div>
</div>
<script>
var map = L.map('map').setView([{{ sar.latitude }}, {{ sar.longitude }}], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([{{ sar.latitude }}, {{ sar.longitude }}]).addTo(map);
</script>
{% endblock %}