261 lines
11 KiB
HTML
261 lines
11 KiB
HTML
{% extends "bootstrap/base.html" %}
|
|
|
|
{% block title %}Database Setup - MOTM Admin{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<style>
|
|
.database-section {
|
|
margin-bottom: 30px;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.database-section h3 {
|
|
margin-top: 0;
|
|
color: #333;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.btn-group {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btn {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.alert {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.current-config {
|
|
background-color: #e8f4f8;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.current-config h4 {
|
|
margin-top: 0;
|
|
color: #2c3e50;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h1>Database Setup & Configuration</h1>
|
|
<p class="lead">Configure and initialize the database for the MOTM application.</p>
|
|
|
|
<!-- Current Configuration Display -->
|
|
<div class="current-config">
|
|
<h4>Current Configuration</h4>
|
|
<p><strong>Database Type:</strong> {{ current_config.database_type|title }}</p>
|
|
{% if current_config.database_type == 'sqlite' %}
|
|
<p><strong>Database File:</strong> {{ current_config.sqlite_database_path }}</p>
|
|
{% elif current_config.database_type == 'mysql' %}
|
|
<p><strong>Host:</strong> {{ current_config.mysql_host }}:{{ current_config.mysql_port }}</p>
|
|
<p><strong>Database:</strong> {{ current_config.mysql_database }}</p>
|
|
<p><strong>Username:</strong> {{ current_config.mysql_username }}</p>
|
|
{% elif current_config.database_type == 'postgresql' %}
|
|
<p><strong>Host:</strong> {{ current_config.postgres_host }}:{{ current_config.postgres_port }}</p>
|
|
<p><strong>Database:</strong> {{ current_config.postgres_database }}</p>
|
|
<p><strong>Username:</strong> {{ current_config.postgres_username }}</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else 'success' }} alert-dismissible" role="alert">
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Database Setup Form -->
|
|
<form method="POST" action="{{ url_for('database_setup') }}">
|
|
{{ form.hidden_tag() }}
|
|
|
|
<!-- Database Type Selection -->
|
|
<div class="database-section">
|
|
<h3>Database Type</h3>
|
|
<div class="form-group">
|
|
{{ form.database_type.label(class="control-label") }}
|
|
{{ form.database_type(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SQLite Configuration -->
|
|
<div class="database-section" id="sqlite-config">
|
|
<h3>SQLite Configuration</h3>
|
|
<div class="form-group">
|
|
{{ form.sqlite_database_path.label(class="control-label") }}
|
|
{{ form.sqlite_database_path(class="form-control") }}
|
|
<small class="form-text text-muted">Path to the SQLite database file</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MySQL Configuration -->
|
|
<div class="database-section" id="mysql-config">
|
|
<h3>MySQL/MariaDB Configuration</h3>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.mysql_host.label(class="control-label") }}
|
|
{{ form.mysql_host(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.mysql_port.label(class="control-label") }}
|
|
{{ form.mysql_port(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
{{ form.mysql_database.label(class="control-label") }}
|
|
{{ form.mysql_database(class="form-control") }}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.mysql_username.label(class="control-label") }}
|
|
{{ form.mysql_username(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.mysql_password.label(class="control-label") }}
|
|
{{ form.mysql_password(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
{{ form.mysql_charset.label(class="control-label") }}
|
|
{{ form.mysql_charset(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PostgreSQL Configuration -->
|
|
<div class="database-section" id="postgresql-config">
|
|
<h3>PostgreSQL Configuration</h3>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.postgres_host.label(class="control-label") }}
|
|
{{ form.postgres_host(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.postgres_port.label(class="control-label") }}
|
|
{{ form.postgres_port(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
{{ form.postgres_database.label(class="control-label") }}
|
|
{{ form.postgres_database(class="form-control") }}
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.postgres_username.label(class="control-label") }}
|
|
{{ form.postgres_username(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
{{ form.postgres_password.label(class="control-label") }}
|
|
{{ form.postgres_password(class="form-control") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setup Options -->
|
|
<div class="database-section">
|
|
<h3>Setup Options</h3>
|
|
<div class="form-group">
|
|
<div class="checkbox">
|
|
<label>
|
|
{{ form.initialize_tables() }} {{ form.initialize_tables.label.text }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="checkbox">
|
|
<label>
|
|
{{ form.create_sample_data() }} {{ form.create_sample_data.label.text }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="btn-group">
|
|
{{ form.test_connection(class="btn btn-info") }}
|
|
{{ form.save_config(class="btn btn-primary") }}
|
|
{{ form.initialize_database(class="btn btn-success") }}
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Navigation -->
|
|
<div class="row" style="margin-top: 30px;">
|
|
<div class="col-md-12">
|
|
<a href="{{ url_for('database_status') }}" class="btn btn-default">View Database Status</a>
|
|
<a href="{{ url_for('motm_admin') }}" class="btn btn-default">Back to MOTM Admin</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Show/hide database configuration sections based on selected type
|
|
function toggleDatabaseConfig() {
|
|
var dbType = document.getElementById('database_type').value;
|
|
|
|
// Hide all config sections
|
|
document.getElementById('sqlite-config').style.display = 'none';
|
|
document.getElementById('mysql-config').style.display = 'none';
|
|
document.getElementById('postgresql-config').style.display = 'none';
|
|
|
|
// Show relevant config section
|
|
if (dbType === 'sqlite') {
|
|
document.getElementById('sqlite-config').style.display = 'block';
|
|
} else if (dbType === 'mysql') {
|
|
document.getElementById('mysql-config').style.display = 'block';
|
|
} else if (dbType === 'postgresql') {
|
|
document.getElementById('postgresql-config').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
toggleDatabaseConfig();
|
|
|
|
// Add event listener for database type changes
|
|
document.getElementById('database_type').addEventListener('change', toggleDatabaseConfig);
|
|
});
|
|
</script>
|
|
{% endblock %}
|