pre-bootstrap 2

This commit is contained in:
Vadim Likholetov 2023-11-01 20:46:27 +02:00
parent 45c4070034
commit c380ec5777
16 changed files with 383 additions and 160 deletions

View File

@ -10,6 +10,9 @@
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
<component name="PackageRequirementsSettings">
<option name="modifyBaseFiles" value="true" />
</component>
<component name="TemplatesService">
<option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
<option name="TEMPLATE_FOLDERS">

View File

@ -1,9 +1,10 @@
from flask_admin import Admin
from flask_admin.contrib.sqla import ModelView
from app import app, db
from models import User, SARCall, SARCategory
from models import User, SARCall, SARCategory, GPSTrack
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(GPSTrack, db.session))

8
app.py
View File

@ -1,14 +1,13 @@
from flask import Flask
from flask import Flask, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_login import LoginManager
app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///db.sqlite3'
db = SQLAlchemy(app)
migrate = Migrate(app,db)
migrate = Migrate(app, db)
login_manager = LoginManager(app)
import models
@ -17,9 +16,10 @@ import login
import sar_calls
import dashboard
@app.route('/')
def hello_world(): # put application's code here
return 'Hello World!'
return redirect(url_for('dashboard'))
if __name__ == '__main__':

View File

@ -5,7 +5,7 @@ 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
from models import User, SARCall, SARCategory
if __name__ == '__main__':
db.create_all()

View File

@ -1,8 +1,9 @@
from app import app
from flask import render_template
from flask_login import login_required, current_user
@app.route('/dashboard')
@login_required
def dashboard():
return render_template('dashboard.html', name=current_user.full_name)

View File

@ -2,10 +2,13 @@ from flask import Flask, render_template, redirect, url_for, request, flash
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
from app import app, db, login_manager
from models import User
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
@app.route('/login', methods=['GET', 'POST'])
def login():
if request.method == 'POST':
@ -17,6 +20,7 @@ def login():
return redirect(url_for('dashboard'))
return render_template('login.html')
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'POST':
@ -26,12 +30,14 @@ def register():
full_name = request.form.get('full_name')
phone_number = request.form.get('phone_number')
new_user = User(username=username, password=password, email=email, full_name=full_name, phone_number=phone_number)
new_user = User(username=username, password=password, email=email, full_name=full_name,
phone_number=phone_number)
db.session.add(new_user)
db.session.commit()
return redirect(url_for('login'))
return render_template('register.html')
@app.route('/logout')
@login_required
def logout():

View File

@ -1,6 +1,7 @@
from flask_login import UserMixin
from app import db
class User(UserMixin, db.Model):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(150), unique=True, nullable=False)
@ -24,3 +25,11 @@ class SARCall(db.Model):
class SARCategory(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(150), unique=True, nullable=False)
class GPSTrack(db.Model):
id = db.Column(db.Integer, primary_key=True)
data = db.Column(db.Text, nullable=False)
color = db.Column(db.String(7)) # Stores the color as a HEX code like #FF5733
sar_call_id = db.Column(db.Integer, db.ForeignKey('sar_call.id'), nullable=False)
sar_call = db.relationship('SARCall', backref=db.backref('gps_tracks', lazy=True))

9
requirements.txt Normal file
View File

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

View File

@ -2,7 +2,9 @@ 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
from models import SARCall, GPSTrack
@app.route('/create_sar', methods=['GET', 'POST'])
@login_required
def create_sar():
@ -12,7 +14,12 @@ def create_sar():
category = request.form.get('category')
latitude = request.form.get('latitude')
longitude = request.form.get('longitude')
gpx_data = request.form.get('gpx_data')
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)
new_sar_call = SARCall(
start_date=start_date,
@ -21,7 +28,8 @@ def create_sar():
latitude=latitude,
longitude=longitude,
search_manager_id=current_user.id,
gpx_data=gpx_data
gpx_data=gpx_data_list,
gpx_color_list=gpx_color_list,
)
db.session.add(new_sar_call)
db.session.commit()
@ -53,6 +61,7 @@ def edit_sar(id):
return redirect(url_for('list_sar'))
return render_template('edit_sar.html', sar_call=sar_call)
@app.route('/delete_sar/<int:id>')
@login_required
def delete_sar(id):
@ -61,4 +70,3 @@ def delete_sar(id):
db.session.commit()
flash('SAR call deleted successfully!', 'success')
return redirect(url_for('list_sar'))

75
templates/base.html Normal file
View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... meta tags, styles, etc. ... -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
<!-- Navbar/Header -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">SAR App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<!-- Nav items go here -->
<li class="nav-item">
<a class="nav-link" href="/list_sar">SAR records</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/create_sar">New record</a>
</li>
</ul>
<!-- Display user info and logout link if user is authenticated -->
<ul class="navbar-nav ml-auto">
{% if current_user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">Logged in as: {{ current_user.username }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
</li>
{% else %}
<!-- Display login link if user is not authenticated -->
<li class="nav-item">
<a class="nav-link" href="{{ url_for('login') }}">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<!-- Main Content -->
<div class="container">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">{{ message }}</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}
<!-- Default content can be placed here. It will be overridden by child templates. -->
{% endblock %}
</div>
<!-- Footer -->
<footer>
<!-- ... footer content ... -->
</footer>
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -1,39 +1,60 @@
<!DOCTYPE html>
<html>
<head>
{% extends "base.html" %}
{% block title %}
Create SAR Record
{% 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>
<title>Create SAR Call</title>
</head>
<body>
<h2>Create SAR Call</h2>
<form action="/create_sar" method="post">
<div>
<label for="start_date">Start Date:</label>
<input type="date" name="start_date" required>
</div>
<div>
<label for="finish_date">Finish Date:</label>
<input type="date" name="finish_date" required>
</div>
<div>
<label for="category">Category:</label>
<input type="text" name="category" required>
</div>
<div>
<label for="latitude">Latitude:</label>
<input type="text" name="latitude" required>
</div>
<div>
<label for="longitude">Longitude:</label>
<input type="text" name="longitude" required>
</div>
<div>
<label for="gpx_data">GPX Data:</label>
<textarea name="gpx_data"></textarea>
</div>
<div>
<input type="submit" value="Create">
<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>
</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>
{% 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"
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>
</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>
</div>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
@ -54,6 +75,15 @@
document.querySelector('input[name="longitude"]').value = e.latlng.lng;
});
{#var gpxTracks = {{ gpx_data | tojson }};#}
{#gpxTracks.forEach(function (track) {#}
{# var gpxLayer = new L.GPX(track.data, {async: true, polyline_options: {color: track.color}});#}
{# gpxLayer.on('loaded', function (e) {#}
{# 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"]');
@ -62,9 +92,26 @@
}
</script>
</form>
<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>
<a href="/dashboard">Back to Dashboard</a>
</body>
</html>
{% endblock %}

View File

@ -1,11 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
</head>
<body>
{% extends "base.html" %}
{% block title %}
Dashboard
{% endblock %}
{% block content %}
<h2>Welcome, {{ name }}!</h2>
<p>This is the dashboard. More features will be added soon!</p>
<a href="/logout">Logout</a>
</body>
</html>
{% endblock %}

View File

@ -1,39 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
{% extends "base.html" %}
{% block title %}
Edit SAR record
{% 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>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13); // Default to London, adjust as needed
<h2>Edit SAR Call</h2>
<div class="container mt-5">
<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">
<label for="start_date">Start Date:</label>
<input type="date" name="start_date" class="form-control" value="{{ sar_call.start_date }}" required>
</div>
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);
<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>
var marker;
<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>
{% endfor %}
</select>
</div>
map.on('click', function(e) {
if (marker) {
map.removeLayer(marker);
}
marker = L.marker(e.latlng).addTo(map);
document.querySelector('input[name="latitude"]').value = e.latlng.lat;
document.querySelector('input[name="longitude"]').value = e.latlng.lng;
});
<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>
</div>
// 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>
<div class="form-group">
<label for="description">Description:</label>
<textarea name="description" class="form-control">{{ sar_call.description }}</textarea>
</div>
</body>
</html>
<div class="form-group">
<label for="hidden_description">Hidden Description:</label>
<textarea name="hidden_description" class="form-control">{{ sar_call.hidden_description }}</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>
<button type="submit" class="btn btn-primary">Update</button>
</form>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13); // Default to London, adjust as needed
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);
var marker;
map.on('click', function (e) {
if (marker) {
map.removeLayer(marker);
}
marker = L.marker(e.latlng).addTo(map);
document.querySelector('input[name="latitude"]').value = e.latlng.lat;
document.querySelector('input[name="longitude"]').value = e.latlng.lng;
});
// 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>
</div>
<{% endblock %}

View File

@ -1,13 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<title>List of SAR Calls</title>
</head>
<body>
<h2>List of SAR Calls</h2>
<table>
<thead>
{% extends "base.html" %}
{% block title %}
SAR Records
{% endblock %}
{% block content %}
<div class="container mt-5">
<h2>SAR Records</h2>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Id</th>
<th>Start Date</th>
<th>Finish Date</th>
<th>Category</th>
@ -15,23 +18,28 @@
<th>Longitude</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
{% for sar in sar_calls %}
<tr>
<td>{{ sar.start_date }}</td>
<td>{{ sar.finish_date }}</td>
<td>{{ sar.category }}</td>
<td>{{ sar.latitude }}</td>
<td>{{ sar.longitude }}</td>
<td>
<a href="{{ url_for('edit_sar', id=sar.id) }}">Edit</a> |
<a href="{{ url_for('delete_sar', id=sar.id) }}">Delete</a>
</td>
</tr>
<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>
<td>
<a href="{{ url_for('edit_sar', id=sar.id) }}">
<button type="button" class="btn btn-info">Edit</button>
</a> |
<a href="{{ url_for('delete_sar', id=sar.id) }}">
<button type="button" class="btn btn-danger">Delete</button>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="/dashboard">Back to Dashboard</a>
</body>
</html>
</tbody>
</table>
<a href="/dashboard">Back to Dashboard</a>
</div>
{% endblock %}

View File

@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
{% extends "base.html" %}
{% block title %}
Login
{% endblock %}
{% block content %}
<h2>Login</h2>
<form action="/login" method="post">
<div>
@ -21,5 +23,5 @@
<div>
Don't have an account? <a href="/register">Register</a>
</div>
</body>
</html>
{% endblock %}

View File

@ -1,37 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
{% extends "base.html" %}
{% block title %}
Register
{% endblock %}
{% block content %}
<h2>Register</h2>
<form action="/register" method="post">
<div>
<label for="username">Username:</label>
<input type="text" name="username" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" required>
</div>
<div>
<label for="full_name">Full Name:</label>
<input type="text" name="full_name" required>
</div>
<div>
<label for="phone_number">Phone Number:</label>
<input type="tel" name="phone_number">
</div>
<div>
<input type="submit" value="Register">
</div>
</form>
<div class="form-group">
<form action="/register" method="post">
<div>
<label for="username">Username:</label>
<input type="text" name="username" class="form-control" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" class="form-control" required>
</div>
<div>
<label for="full_name">Full Name:</label>
<input type="text" name="full_name" class="form-control" required>
</div>
<div>
<label for="phone_number">Phone Number:</label>
<input type="tel" name="phone_number" class="form-control">
</div>
<div>
<input type="submit" value="Register" class="btn btn-primary">
</div>
</form>
</div>
<div>
Already have an account? <a href="/login">Login</a>
</div>
</body>
</html>
{% endblock %}