first commit

This commit is contained in:
dgsoft
2025-10-14 21:27:41 +02:00
commit 44b8667f31
40 changed files with 4619 additions and 0 deletions

753
app/static/css/style.css Normal file
View File

@@ -0,0 +1,753 @@
/* Hauptstyles für die Query Builder Anwendung */
/* Basis-Reset und Layout */
* {
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
color: #333;
line-height: 1.5;
}
/* Fallback für Bootstrap Klassen falls CDN nicht lädt */
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-3 {
flex: 0 0 25%;
max-width: 25%;
padding-right: 15px;
padding-left: 15px;
}
.col-md-9 {
flex: 0 0 75%;
max-width: 75%;
padding-right: 15px;
padding-left: 15px;
}
.h-100 {
height: 100vh !important;
}
/* Navigation Bar */
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
background-color: #343a40 !important;
color: white;
margin-bottom: 0;
}
.navbar-brand {
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-right: 1rem;
font-size: 1.25rem;
color: white !important;
text-decoration: none;
font-weight: bold;
}
.navbar-nav {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
}
.navbar-text {
color: rgba(255,255,255,.5) !important;
margin-right: 1rem;
}
.nav-link {
color: rgba(255,255,255,.5) !important;
text-decoration: none;
padding: 0.5rem 1rem;
}
.nav-link:hover {
color: rgba(255,255,255,.75) !important;
}
/* Buttons */
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
text-decoration: none;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
color: #fff;
background-color: #0056b3;
border-color: #004085;
}
.btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-success:hover {
color: #fff;
background-color: #1e7e34;
border-color: #1c7430;
}
.btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.btn-secondary:hover {
color: #fff;
background-color: #545b62;
border-color: #4e555b;
}
.btn-outline-primary {
color: #007bff;
border-color: #007bff;
background-color: transparent;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.btn-outline-success {
color: #28a745;
border-color: #28a745;
background-color: transparent;
}
.btn-outline-success:hover {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
.btn-outline-danger {
color: #dc3545;
border-color: #dc3545;
background-color: transparent;
}
.btn-outline-danger:hover {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
}
.btn-sm {
padding: 0.15rem 0.4rem;
font-size: 0.75rem;
border-radius: 0.15rem;
line-height: 1.2;
}
.btn-xs {
padding: 0.1rem 0.25rem;
font-size: 0.65rem;
border-radius: 0.1rem;
line-height: 1.1;
}
.btn-group {
position: relative;
display: inline-flex;
vertical-align: middle;
}
.btn-group > .btn {
position: relative;
flex: 1 1 auto;
margin-right: -1px;
}
.btn-group > .btn:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group > .btn:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Cards */
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: 0.25rem;
margin-bottom: 1rem;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
background-color: rgba(0,0,0,.03);
border-bottom: 1px solid rgba(0,0,0,.125);
border-top-left-radius: calc(0.25rem - 1px);
border-top-right-radius: calc(0.25rem - 1px);
}
.card-footer {
padding: 0.75rem 1.25rem;
background-color: rgba(0,0,0,.03);
border-top: 1px solid rgba(0,0,0,.125);
}
.card-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
font-weight: 500;
}
.card-text {
margin-bottom: 1rem;
}
/* Forms */
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
.form-label {
margin-bottom: 0.5rem;
font-weight: 500;
}
/* Alerts */
.alert {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 0.25rem;
}
.alert-info {
color: #0c5460;
background-color: #d1ecf1;
border-color: #bee5eb;
}
.alert-success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
}
.alert-danger {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert-dismissible {
padding-right: 4rem;
}
/* Tables */
.table {
width: 100%;
margin-bottom: 1rem;
color: #212529;
border-collapse: collapse;
}
.table th,
.table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #dee2e6;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6;
background-color: #f8f9fa;
font-weight: 600;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
.table-hover tbody tr:hover {
color: #212529;
background-color: rgba(0,0,0,.075);
}
/* Utilities */
.text-center { text-align: center !important; }
.text-muted { color: #6c757d !important; }
.text-danger { color: #dc3545 !important; }
.text-success { color: #28a745 !important; }
.text-primary { color: #007bff !important; }
.text-info { color: #17a2b8 !important; }
.text-warning { color: #ffc107 !important; }
.bg-light { background-color: #f8f9fa !important; }
.bg-dark { background-color: #343a40 !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-5 { margin-top: 3rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center { align-items: center !important; }
.float-end { float: right !important; }
.ms-auto { margin-left: auto !important; }
.me-3 { margin-right: 1rem !important; }
/* Sidebar Styles */
.col-md-3.border-end {
height: calc(100vh - 56px);
overflow-y: auto;
background-color: #f8f9fa;
border-right: 1px solid #dee2e6;
}
.col-md-9 {
height: calc(100vh - 56px);
overflow-y: auto;
}
/* Tabellen und Query Cards */
.saved-query-card {
transition: all 0.2s ease;
cursor: pointer;
}
.saved-query-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.table-container {
margin-bottom: 4px;
}
.table-item {
padding: 4px 8px;
margin: 1px 0;
background: white;
border: 1px solid #dee2e6;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.85rem;
}
.table-item:hover {
background: #f8f9fa;
border-color: #007bff;
}
.table-item.selected {
background: #e3f2fd;
border-color: #2196f3;
font-weight: 600;
}
.table-item i {
color: #6c757d;
margin-right: 6px;
font-size: 0.8rem;
}
/* Spalten-Anzeige unter Tabellen */
.table-columns {
margin-left: 8px;
margin-top: 2px;
padding: 4px 6px;
background: #f8f9fa;
border-left: 2px solid #007bff;
border-radius: 0 3px 3px 0;
}
.column-item {
padding: 2px 6px;
margin: 0.5px 0;
background: white;
border: 1px solid #e9ecef;
border-radius: 2px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 11px;
display: flex;
align-items: center;
gap: 4px;
line-height: 1.2;
}
.column-item:hover {
background: #e7f3ff;
border-color: #007bff;
}
.column-name {
font-weight: 500;
color: #495057;
}
.column-type {
font-size: 9px;
color: #6c757d;
margin-left: auto;
}
/* Toggle-Button für Spalten-Anzeige */
#toggle-columns-btn {
margin-right: 3px;
transition: all 0.3s ease;
padding: 0.1rem 0.3rem;
font-size: 0.7rem;
}
#toggle-columns-btn:hover {
transform: scale(1.05);
}
#toggle-columns-btn.btn-outline-secondary {
opacity: 0.7;
}
#toggle-columns-btn.btn-outline-primary {
opacity: 1;
}
/* Drag & Drop Styles */
.table-item, .column-item {
cursor: grab;
}
.table-item:active, .column-item:active {
cursor: grabbing;
}
.drag-icon {
opacity: 0;
transition: opacity 0.2s ease;
margin-left: auto;
color: #6c757d;
font-size: 10px;
}
.table-item:hover .drag-icon,
.column-item:hover .drag-icon {
opacity: 0.7;
}
/* Drop Zone Styles */
#query-input.drag-over {
border-color: #007bff !important;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3) !important;
background-color: #f8f9ff !important;
}
.table-item[draggable="true"]:hover,
.column-item[draggable="true"]:hover {
background-color: #e3f2fd;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Query Input Area */
#query-input {
font-family: 'Courier New', monospace;
font-size: 14px;
resize: vertical;
min-height: 150px;
}
/* Results Table */
.results-table {
max-height: 400px;
overflow: auto;
}
.results-table table {
font-size: 14px;
}
.results-table th {
position: sticky;
top: 0;
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
}
/* Loading Spinner */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #f3f3f3;
border-top: 3px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Alert Styles */
.alert-custom {
margin: 0 0 15px 0;
padding: 10px 15px;
border-radius: 4px;
}
.alert-success-custom {
background-color: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
}
.alert-error-custom {
background-color: #f8d7da;
border: 1px solid #f5c6cb;
color: #721c24;
}
/* Responsive Design */
@media (max-width: 768px) {
.col-md-3.border-end {
height: auto;
max-height: 300px;
}
.col-md-9 {
height: auto;
}
body {
overflow: auto;
}
.container-fluid {
height: auto;
overflow: auto;
}
.row.h-100 {
height: auto;
}
}
/* Button Improvements */
.btn-group-sm > .btn, .btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
/* Card Improvements */
.card {
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
/* Navigation Improvements */
.navbar-brand {
font-weight: bold;
}
/* Modal Improvements */
.modal-content {
border-radius: 8px;
}
.modal-header {
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
/* Table Schema Popup */
.schema-popup {
position: absolute;
background: white;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
z-index: 1000;
max-width: 300px;
font-size: 12px;
}
/* Autocomplete Dropdown */
.autocomplete-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #007bff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1050;
max-height: 200px;
overflow-y: auto;
display: none;
}
.autocomplete-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.2s ease;
font-size: 0.9rem;
display: flex;
align-items: center;
}
.autocomplete-item:last-child {
border-bottom: none;
}
.autocomplete-item:hover {
background-color: #f8f9fa;
}
.autocomplete-item.selected {
background-color: #e3f2fd;
color: #1976d2;
}
.autocomplete-item i {
margin-right: 8px;
color: #6c757d;
font-size: 0.8rem;
}
.autocomplete-item small {
margin-left: auto;
font-size: 0.75rem;
color: #6c757d;
}
.autocomplete-item strong {
flex: 1;
}
.autocomplete-header {
padding: 6px 12px;
background-color: #f8f9fa;
font-size: 0.75rem;
font-weight: 600;
color: #495057;
border-bottom: 1px solid #dee2e6;
}
.schema-column {
padding: 2px 0;
border-bottom: 1px solid #f0f0f0;
}
.schema-column:last-child {
border-bottom: none;
}

File diff suppressed because one or more lines are too long

9
app/static/css/vendor/all.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1
app/static/favicon.ico Normal file
View File

@@ -0,0 +1 @@
# Placeholder für favicon - in Produktion sollte hier eine echte .ico Datei sein

1628
app/static/js/app.js Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

Binary file not shown.

Binary file not shown.