661 lines
28 KiB
HTML
661 lines
28 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ object.name }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-1">
|
|
<i class="fas fa-{% if object.system_type == 'ehr' %}file-medical{% elif object.system_type == 'lis' %}flask{% elif object.system_type == 'ris' %}x-ray{% elif object.system_type == 'pacs' %}images{% elif object.system_type == 'pharmacy' %}pills{% elif object.system_type == 'billing' %}receipt{% else %}server{% endif %} me-2"></i>
|
|
{{ object.name }}
|
|
</h1>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-0">
|
|
<li class="breadcrumb-item"><a href="{% url 'integration:dashboard' %}">Integration</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'integration:external_system_list' %}">External Systems</a></li>
|
|
<li class="breadcrumb-item active">{{ object.name }}</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-info" onclick="testConnection()">
|
|
<i class="fas fa-plug me-2"></i>Test Connection
|
|
</button>
|
|
<a href="{% url 'integration:external_system_update' object.system_id %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-edit me-2"></i>Edit
|
|
</a>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
|
|
<i class="fas fa-cogs me-2"></i>Actions
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li><a class="dropdown-item" href="#" onclick="refreshHealthCheck()">
|
|
<i class="fas fa-heartbeat me-2"></i>Health Check
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="viewLogs()">
|
|
<i class="fas fa-file-alt me-2"></i>View Logs
|
|
</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="exportConfig()">
|
|
<i class="fas fa-download me-2"></i>Export Config
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
{% if object.is_active %}
|
|
<li><a class="dropdown-item" href="#" onclick="toggleSystemStatus(false)">
|
|
<i class="fas fa-pause me-2"></i>Deactivate
|
|
</a></li>
|
|
{% else %}
|
|
<li><a class="dropdown-item" href="#" onclick="toggleSystemStatus(true)">
|
|
<i class="fas fa-play me-2"></i>Activate
|
|
</a></li>
|
|
{% endif %}
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item text-danger" href="{% url 'integration:external_system_delete' object.system_id %}">
|
|
<i class="fas fa-trash me-2"></i>Delete
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">System Status</h6>
|
|
<h5 class="mb-0 text-{% if object.is_active %}success{% else %}secondary{% endif %}">
|
|
{% if object.is_active %}Active{% else %}Inactive{% endif %}
|
|
</h5>
|
|
<small class="text-muted">Current state</small>
|
|
</div>
|
|
<div class="bg-{% if object.is_active %}success{% else %}secondary{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-{% if object.is_active %}check-circle{% else %}pause-circle{% endif %} fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Health Status</h6>
|
|
<h5 class="mb-0 text-{% if object.last_health_check_status == 'HEALTHY' %}success{% elif object.last_health_check_status == 'UNHEALTHY' %}danger{% else %}secondary{% endif %}">
|
|
{% if object.last_health_check_status == 'HEALTHY' %}Healthy{% elif object.last_health_check_status == 'UNHEALTHY' %}Unhealthy{% else %}Unknown{% endif %}
|
|
</h5>
|
|
<small class="text-muted">
|
|
{% if object.last_health_check %}{{ object.last_health_check|timesince }} ago{% else %}Never checked{% endif %}
|
|
</small>
|
|
</div>
|
|
<div class="bg-{% if object.last_health_check_status == 'HEALTHY' %}success{% elif object.last_health_check_status == 'UNHEALTHY' %}danger{% else %}secondary{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-{% if object.last_health_check_status == 'HEALTHY' %}heartbeat{% elif object.last_health_check_status == 'UNHEALTHY' %}exclamation-triangle{% else %}question-circle{% endif %} fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Total Endpoints</h6>
|
|
<h5 class="mb-0 text-primary">{{ total_endpoints }}</h5>
|
|
<small class="text-muted">Configured</small>
|
|
</div>
|
|
<div class="bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-link fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Executions Today</h6>
|
|
<h5 class="mb-0 text-info">{{ executions_today }}</h5>
|
|
<small class="text-muted">{{ successful_executions }} successful</small>
|
|
</div>
|
|
<div class="bg-info bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-play fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- System Information -->
|
|
<div class="col-lg-8">
|
|
<!-- Basic Information -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-info-circle me-2"></i>System Information
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="text-muted" width="120">Name:</td>
|
|
<td class="fw-semibold">{{ object.name }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Type:</td>
|
|
<td>
|
|
<span class="badge bg-secondary">{{ object.get_system_type_display }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Vendor:</td>
|
|
<td>{{ object.vendor|default:"Not specified" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Version:</td>
|
|
<td>{{ object.version|default:"Not specified" }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Created:</td>
|
|
<td>{{ object.created_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="text-muted" width="120">Status:</td>
|
|
<td>
|
|
<span class="badge bg-{% if object.is_active %}success{% else %}secondary{% endif %}">
|
|
{% if object.is_active %}Active{% else %}Inactive{% endif %}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Health:</td>
|
|
<td>
|
|
<span class="badge bg-{% if object.last_health_check_status == 'HEALTHY' %}success{% elif object.last_health_check_status == 'UNHEALTHY' %}danger{% else %}secondary{% endif %}">
|
|
{% if object.last_health_check_status == 'HEALTHY' %}Healthy{% elif object.last_health_check_status == 'UNHEALTHY' %}Unhealthy{% else %}Unknown{% endif %}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Last Check:</td>
|
|
<td>
|
|
{% if object.last_health_check %}
|
|
{{ object.last_health_check|date:"M d, Y H:i" }}
|
|
{% else %}
|
|
Never
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Updated:</td>
|
|
<td>{{ object.updated_at|date:"M d, Y H:i" }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% if object.description %}
|
|
<div class="mt-3">
|
|
<h6 class="text-muted">Description:</h6>
|
|
<p class="mb-0">{{ object.description }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Connection Details -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-plug me-2"></i>Connection Details
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
{% if object.base_url %}
|
|
<tr>
|
|
<td class="text-muted" width="120">Base URL:</td>
|
|
<td>
|
|
<code>{{ object.base_url }}</code>
|
|
<a href="{{ object.base_url }}" target="_blank" class="ms-2">
|
|
<i class="fas fa-external-link-alt"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if object.host %}
|
|
<tr>
|
|
<td class="text-muted">Host:</td>
|
|
<td><code>{{ object.host }}{% if object.port %}:{{ object.port }}{% endif %}</code></td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if object.database_name %}
|
|
<tr>
|
|
<td class="text-muted">Database:</td>
|
|
<td><code>{{ object.database_name }}</code></td>
|
|
</tr>
|
|
{% endif %}
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<table class="table table-borderless">
|
|
<tr>
|
|
<td class="text-muted" width="120">Auth Type:</td>
|
|
<td>
|
|
<span class="badge bg-info">{{ object.get_authentication_type_display }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Timeout:</td>
|
|
<td>{{ object.timeout_seconds }} seconds</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-muted">Retry:</td>
|
|
<td>{{ object.retry_attempts }} attempts, {{ object.retry_delay_seconds }}s delay</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-history me-2"></i>Recent Activity
|
|
</h5>
|
|
<a href="{% url 'integration:integration_log_list' %}?system={{ object.system_id }}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-list me-1"></i>View All
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if recent_logs %}
|
|
<div class="timeline">
|
|
{% for log in recent_logs %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-{% if log.level == 'ERROR' %}danger{% elif log.level == 'WARNING' %}warning{% elif log.level == 'INFO' %}info{% else %}secondary{% endif %}"></div>
|
|
<div class="timeline-content">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<h6 class="mb-1">{{ log.message }}</h6>
|
|
<p class="text-muted mb-0">{{ log.details|truncatechars:100 }}</p>
|
|
</div>
|
|
<small class="text-muted">{{ log.timestamp|timesince }} ago</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-4">
|
|
<i class="fas fa-history fa-3x text-muted mb-3"></i>
|
|
<h6 class="text-muted">No recent activity</h6>
|
|
<p class="text-muted">Activity logs will appear here once the system starts processing</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Quick Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-bolt me-2"></i>Quick Actions
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button type="button" class="btn btn-outline-info" onclick="testConnection()">
|
|
<i class="fas fa-plug me-2"></i>Test Connection
|
|
</button>
|
|
<button type="button" class="btn btn-outline-success" onclick="refreshHealthCheck()">
|
|
<i class="fas fa-heartbeat me-2"></i>Health Check
|
|
</button>
|
|
<a href="{% url 'integration:integration_endpoint_list' %}?system={{ object.system_id }}" class="btn btn-outline-primary">
|
|
<i class="fas fa-link me-2"></i>View Endpoints
|
|
</a>
|
|
<a href="{% url 'integration:integration_execution_list' %}?system={{ object.system_id }}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-play me-2"></i>View Executions
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- System Statistics -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-chart-bar me-2"></i>Statistics
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-6 mb-3">
|
|
<div class="border-end">
|
|
<h4 class="text-primary mb-0">{{ total_endpoints }}</h4>
|
|
<small class="text-muted">Endpoints</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<h4 class="text-success mb-0">{{ total_mappings }}</h4>
|
|
<small class="text-muted">Mappings</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="border-end">
|
|
<h4 class="text-info mb-0">{{ executions_today }}</h4>
|
|
<small class="text-muted">Today</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<h4 class="text-warning mb-0">{{ total_executions }}</h4>
|
|
<small class="text-muted">Total</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Configuration Preview -->
|
|
{% if object.configuration %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-cogs me-2"></i>Configuration
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<pre class="bg-light p-3 rounded"><code>{{ object.configuration|pprint }}</code></pre>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm w-100 mt-2" onclick="exportConfig()">
|
|
<i class="fas fa-download me-1"></i>Export Full Config
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Related Systems -->
|
|
{% if related_systems %}
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-sitemap me-2"></i>Related Systems
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for system in related_systems %}
|
|
<div class="d-flex align-items-center mb-2">
|
|
<div class="bg-secondary bg-gradient rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 24px; height: 24px;">
|
|
<i class="fas fa-server text-white small"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<a href="{% url 'integration:external_system_detail' system.system_id %}" class="text-decoration-none">
|
|
{{ system.name }}
|
|
</a>
|
|
<br>
|
|
<small class="text-muted">{{ system.get_system_type_display }}</small>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// External system detail functionality
|
|
function testConnection() {
|
|
const systemId = '{{ object.system_id }}';
|
|
|
|
// Show loading state
|
|
const btn = event.target;
|
|
const originalText = btn.innerHTML;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing...';
|
|
btn.disabled = true;
|
|
|
|
fetch(`{% url 'integration:test_connection' 0 %}`.replace('0', systemId), {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(`Connection test successful!\n\nResponse time: ${data.response_time}ms\nStatus: ${data.status}`);
|
|
} else {
|
|
alert(`Connection test failed:\n\n${data.error}`);
|
|
}
|
|
location.reload();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error testing connection:', error);
|
|
alert('Error testing connection: ' + error.message);
|
|
})
|
|
.finally(() => {
|
|
btn.innerHTML = originalText;
|
|
btn.disabled = false;
|
|
});
|
|
}
|
|
|
|
function refreshHealthCheck() {
|
|
const systemId = '{{ object.system_id }}';
|
|
|
|
fetch(`/integration/systems/${systemId}/health-check/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert('Health check completed successfully!');
|
|
location.reload();
|
|
} else {
|
|
alert('Health check failed: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error performing health check:', error);
|
|
alert('Error performing health check');
|
|
});
|
|
}
|
|
|
|
function toggleSystemStatus(activate) {
|
|
const systemId = '{{ object.system_id }}';
|
|
const action = activate ? 'activate' : 'deactivate';
|
|
const confirmMessage = activate ?
|
|
'Are you sure you want to activate this system?' :
|
|
'Are you sure you want to deactivate this system? This will stop all integrations.';
|
|
|
|
if (confirm(confirmMessage)) {
|
|
fetch(`/integration/systems/${systemId}/${action}/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert('Error: ' + data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error toggling system status:', error);
|
|
alert('Error updating system status');
|
|
});
|
|
}
|
|
}
|
|
|
|
function viewLogs() {
|
|
window.location.href = `{% url 'integration:integration_log_list' %}?system={{ object.system_id }}`;
|
|
}
|
|
|
|
function exportConfig() {
|
|
const systemId = '{{ object.system_id }}';
|
|
|
|
fetch(`/integration/systems/${systemId}/export-config/`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
},
|
|
})
|
|
.then(response => response.blob())
|
|
.then(blob => {
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.style.display = 'none';
|
|
a.href = url;
|
|
a.download = `{{ object.name|slugify }}-config.json`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
document.body.removeChild(a);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error exporting config:', error);
|
|
alert('Error exporting configuration');
|
|
});
|
|
}
|
|
|
|
// Auto-refresh health status every 30 seconds
|
|
setInterval(function() {
|
|
fetch(`/integration/systems/{{ object.system_id }}/status/`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Update health status badge
|
|
const healthBadge = document.querySelector('.health-status-badge');
|
|
if (healthBadge && data.health_status !== healthBadge.dataset.status) {
|
|
location.reload();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error checking status:', error);
|
|
});
|
|
}, 30000);
|
|
</script>
|
|
|
|
<style>
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: #dee2e6;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: -22px;
|
|
top: 5px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
border: 2px solid #fff;
|
|
box-shadow: 0 0 0 2px #dee2e6;
|
|
}
|
|
|
|
.timeline-content {
|
|
background: #f8f9fa;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border-left: 3px solid #dee2e6;
|
|
}
|
|
|
|
.bg-gradient {
|
|
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
|
}
|
|
|
|
.table-borderless td {
|
|
border: none;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
code {
|
|
background-color: #f8f9fa;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.border-end {
|
|
border-right: 1px solid #dee2e6 !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.timeline {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.timeline-marker {
|
|
left: -17px;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|