253 lines
11 KiB
HTML
253 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Price Tracker - Setup Required</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
.setup-container {
|
|
max-width: 800px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
}
|
|
.alert-custom {
|
|
border-radius: 10px;
|
|
border: none;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.card-custom {
|
|
border-radius: 15px;
|
|
border: none;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.btn-custom {
|
|
border-radius: 25px;
|
|
padding: 10px 30px;
|
|
font-weight: 500;
|
|
}
|
|
.code-block {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #e9ecef;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
overflow-x: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light">
|
|
<div class="container setup-container">
|
|
<!-- Header -->
|
|
<div class="text-center mb-5">
|
|
<i class="fas fa-cog fa-4x text-primary mb-3"></i>
|
|
<h1 class="display-4 text-dark">Price Tracker Setup</h1>
|
|
<p class="lead text-muted">Configuration required to get started</p>
|
|
</div>
|
|
|
|
<!-- Error Alert -->
|
|
<div class="alert alert-warning alert-custom mb-4" role="alert">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-exclamation-triangle fa-2x me-3"></i>
|
|
<div>
|
|
<h5 class="alert-heading mb-1">Configuration Issue</h5>
|
|
<p class="mb-0">{{ error }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setup Options -->
|
|
<div class="row">
|
|
<!-- Option 1: Create Default Config -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card card-custom h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-magic fa-3x text-success mb-3"></i>
|
|
<h4 class="card-title">Quick Setup</h4>
|
|
<p class="card-text">Create a default configuration file automatically. This will set up basic settings to get you started quickly.</p>
|
|
<button class="btn btn-success btn-custom" onclick="createDefaultConfig()">
|
|
<i class="fas fa-wand-magic-sparkles me-2"></i>Create Default Config
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Option 2: Manual Setup -->
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card card-custom h-100">
|
|
<div class="card-body text-center">
|
|
<i class="fas fa-file-code fa-3x text-primary mb-3"></i>
|
|
<h4 class="card-title">Manual Setup</h4>
|
|
<p class="card-text">Create your own configuration file with custom settings. This gives you full control over the application settings.</p>
|
|
<button class="btn btn-primary btn-custom" data-bs-toggle="collapse" data-bs-target="#manualSetup">
|
|
<i class="fas fa-code me-2"></i>Manual Setup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Manual Setup Instructions (Collapsed) -->
|
|
<div class="collapse mt-4" id="manualSetup">
|
|
<div class="card card-custom">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0"><i class="fas fa-book me-2"></i>Manual Configuration Instructions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6>1. Create the configuration file:</h6>
|
|
<p>Create a file named <code>{{ config_path }}</code> in the root directory of the application.</p>
|
|
|
|
<h6>2. Add the following basic configuration:</h6>
|
|
<div class="code-block">
|
|
{
|
|
"database": {
|
|
"path": "price_tracker.db"
|
|
},
|
|
"scraping": {
|
|
"delay_between_requests": 2,
|
|
"max_concurrent_requests": 1,
|
|
"timeout": 30,
|
|
"retry_attempts": 3
|
|
},
|
|
"notifications": {
|
|
"email": {
|
|
"enabled": false,
|
|
"smtp_server": "smtp.gmail.com",
|
|
"smtp_port": 587,
|
|
"smtp_username": "",
|
|
"smtp_password": "",
|
|
"sender_email": "",
|
|
"recipient_email": ""
|
|
}
|
|
},
|
|
"sites": {
|
|
"jjfoodservice": {
|
|
"enabled": true,
|
|
"base_url": "https://www.jjfoodservice.com"
|
|
}
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<h6 class="mt-3">3. Restart the application:</h6>
|
|
<p>After creating the configuration file, restart the Price Tracker application.</p>
|
|
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle me-2"></i>
|
|
<strong>Tip:</strong> You can also use environment variables to override configuration settings when running in Docker. Check the documentation for available environment variables.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Docker Environment Variables -->
|
|
<div class="card card-custom mt-4">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0"><i class="fab fa-docker me-2"></i>Running with Docker?</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p>If you're running this application in Docker, you can configure it using environment variables instead of a config file:</p>
|
|
<div class="code-block">
|
|
docker run -e DATABASE_PATH=/app/data/tracker.db \
|
|
-e EMAIL_ENABLED=true \
|
|
-e SMTP_SERVER=smtp.gmail.com \
|
|
-e SENDER_EMAIL=your-email@gmail.com \
|
|
-p 5000:5000 price-tracker
|
|
</div>
|
|
<p class="mt-2 mb-0">
|
|
<small class="text-muted">
|
|
<i class="fas fa-info-circle me-1"></i>
|
|
Available environment variables: DATABASE_PATH, EMAIL_ENABLED, SMTP_SERVER, SMTP_PORT, SMTP_USERNAME, SMTP_PASSWORD, SENDER_EMAIL, RECIPIENT_EMAIL, WEBHOOK_ENABLED, WEBHOOK_URL
|
|
</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading Modal -->
|
|
<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-body text-center p-4">
|
|
<div class="spinner-border text-primary mb-3" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<h5>Creating Configuration...</h5>
|
|
<p class="mb-0 text-muted">Please wait while we set up your application.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
function createDefaultConfig() {
|
|
// Show loading modal
|
|
const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
|
|
loadingModal.show();
|
|
|
|
// Make request to create config
|
|
fetch('/create-config', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
loadingModal.hide();
|
|
|
|
if (data.success) {
|
|
// Show success message
|
|
const alertHtml = `
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-check-circle me-2"></i>
|
|
<strong>Success!</strong> ${data.message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
document.querySelector('.setup-container').insertAdjacentHTML('afterbegin', alertHtml);
|
|
|
|
// Add refresh button
|
|
setTimeout(() => {
|
|
const refreshBtn = `
|
|
<div class="text-center mt-3">
|
|
<button class="btn btn-success btn-lg" onclick="window.location.reload()">
|
|
<i class="fas fa-refresh me-2"></i>Restart Application
|
|
</button>
|
|
</div>
|
|
`;
|
|
document.querySelector('.setup-container').insertAdjacentHTML('beforeend', refreshBtn);
|
|
}, 1000);
|
|
} else {
|
|
// Show error message
|
|
const alertHtml = `
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<strong>Error!</strong> ${data.message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
document.querySelector('.setup-container').insertAdjacentHTML('afterbegin', alertHtml);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
loadingModal.hide();
|
|
console.error('Error:', error);
|
|
|
|
const alertHtml = `
|
|
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
|
<i class="fas fa-exclamation-circle me-2"></i>
|
|
<strong>Error!</strong> Failed to create configuration file. Please try manual setup.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
`;
|
|
document.querySelector('.setup-container').insertAdjacentHTML('afterbegin', alertHtml);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|