You've already forked Atomcms-edit
Add multi-step radio wizard with Shoutcast/Icecast/AzureCast support and multi-language translations
- New 5-step RadioWizardController with session-based wizard flow - Enhanced RadioStreamService with Shoutcast/Icecast/ AzureCast auto-detection - Connection test functionality for stream, now-playing, and listeners - Wizard views for all 5 steps with step indicator navigation - All 21 language files updated with wizard translation keys (NL/EN + placeholders) - Wizard link added to existing radio setup page - Routes registered under /admin/radio/wizard/*
This commit is contained in:
root
+223
@@ -0,0 +1,223 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 5 - ' . config('app.name'))
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.wizard-container { max-width: 900px; margin: 0 auto; padding: 2rem; }
|
||||
.wizard-card { background: white; border-radius: 16px; padding: 2.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-bottom: 2rem; }
|
||||
.wizard-header { text-align: center; margin-bottom: 2.5rem; }
|
||||
.wizard-title { font-size: 2rem; font-weight: 800; color: #1a202c; margin-bottom: 0.5rem; }
|
||||
.wizard-subtitle { color: #4a5568; font-size: 1.1rem; }
|
||||
.steps-indicator { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; }
|
||||
.step-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
|
||||
.step-dot.active { background: #eeb425; color: white; }
|
||||
.step-dot.inactive { background: #e2e8f0; color: #a0aec0; }
|
||||
.step-dot.completed { background: #38a169; color: white; }
|
||||
.step-line { width: 60px; height: 3px; align-self: center; border-radius: 2px; }
|
||||
.step-line.active { background: #eeb425; }
|
||||
.step-line.inactive { background: #e2e8f0; }
|
||||
.test-card { background: #f7fafc; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; border-left: 4px solid; }
|
||||
.test-card.success { border-color: #38a169; }
|
||||
.test-card.warning { border-color: #ecc94b; }
|
||||
.test-card.error { border-color: #e53e3e; }
|
||||
.test-card.skipped { border-color: #a0aec0; }
|
||||
.test-card.untested { border-color: #cbd5e0; }
|
||||
.test-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
|
||||
.test-detail { color: #4a5568; font-size: 0.9rem; }
|
||||
.test-detail strong { color: #2d3748; }
|
||||
.status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
|
||||
.status-badge.success { background: #f0fff4; color: #38a169; }
|
||||
.status-badge.warning { background: #fffff0; color: #b7791f; }
|
||||
.status-badge.error { background: #fff5f5; color: #e53e3e; }
|
||||
.status-badge.skipped { background: #edf2f7; color: #718096; }
|
||||
.setting-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid #e2e8f0; font-size: 0.9rem; }
|
||||
.setting-row:last-child { border-bottom: none; }
|
||||
.setting-key { color: #4a5568; }
|
||||
.setting-value { font-weight: 600; color: #2d3748; }
|
||||
.btn-wizard { background: linear-gradient(135deg, #eeb425, #d4a52a); color: #1a202c; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(238,180,37,0.3); text-decoration: none; display: inline-block; }
|
||||
.btn-wizard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(238,180,37,0.4); }
|
||||
.btn-secondary { background: #e2e8f0; color: #4a5568; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s; text-decoration: none; display: inline-block; }
|
||||
.btn-secondary:hover { background: #cbd5e0; }
|
||||
.btn-success { background: linear-gradient(135deg, #38a169, #2f855a); color: white; padding: 0.85rem 2rem; border: none; border-radius: 10px; font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(56,161,105,0.3); text-decoration: none; display: inline-block; }
|
||||
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(56,161,105,0.4); }
|
||||
.loading-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid #e2e8f0; border-top-color: #eeb425; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.result-icon { font-size: 1.2rem; }
|
||||
.test-result-section { margin-top: 1rem; padding-top: 1rem; border-top: 2px dashed #e2e8f0; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="wizard-container">
|
||||
<div class="wizard-header">
|
||||
<h1 class="wizard-title">🧪 {{ __('radio.wizard.step5_title') }}</h1>
|
||||
<p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 5 {{ __('radio.wizard.of') }} 5 - {{ __('radio.wizard.step5_subtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="steps-indicator">
|
||||
<div class="step-dot completed">✓</div>
|
||||
<div class="step-line active"></div>
|
||||
<div class="step-dot completed">✓</div>
|
||||
<div class="step-line active"></div>
|
||||
<div class="step-dot completed">✓</div>
|
||||
<div class="step-line active"></div>
|
||||
<div class="step-dot completed">✓</div>
|
||||
<div class="step-line active"></div>
|
||||
<div class="step-dot active">5</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: center; gap: 3.5rem; margin-top: -1.5rem; margin-bottom: 1rem; font-size: 0.75rem; color: #718096;">
|
||||
<span style="color: #38a169;">✓ {{ __('radio.wizard.step1_label') }}</span>
|
||||
<span style="color: #38a169;">✓ {{ __('radio.wizard.step2_label') }}</span>
|
||||
<span style="color: #38a169;">✓ {{ __('radio.wizard.step3_label') }}</span>
|
||||
<span style="color: #38a169;">✓ {{ __('radio.wizard.step4_label') }}</span>
|
||||
<span style="color: #eeb425; font-weight: 600;">{{ __('radio.wizard.step5_label') }}</span>
|
||||
</div>
|
||||
|
||||
@if(session('error'))
|
||||
<div style="background: #fff5f5; border: 1px solid #fc8181; border-radius: 10px; padding: 1rem 1.5rem; margin-bottom: 1.5rem;">
|
||||
<strong style="color: #c53030;">{{ session('error') }}</strong>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="wizard-card">
|
||||
<h2 style="font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-bottom: 1.5rem;">
|
||||
🔌 {{ __('radio.wizard.test_title') }}
|
||||
</h2>
|
||||
<p style="color: #4a5568; margin-bottom: 1.5rem;">{{ __('radio.wizard.test_desc') }}</p>
|
||||
|
||||
<div id="testResults">
|
||||
<div id="testLoading" style="display: none; text-align: center; padding: 2rem;">
|
||||
<div class="loading-spinner" style="width: 40px; height: 40px; border-width: 4px; margin: 0 auto 1rem;"></div>
|
||||
<p style="color: #4a5568;">{{ __('radio.wizard.test_loading') }}</p>
|
||||
</div>
|
||||
|
||||
<div id="testOutput">
|
||||
@if($testResults)
|
||||
@include('admin.radio.wizard._test-results', ['results' => $testResults])
|
||||
@else
|
||||
<p style="color: #a0aec0; text-align: center; padding: 2rem;">{{ __('radio.wizard.test_prompt') }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 1rem;">
|
||||
<button onclick="runTest()" class="btn-wizard" id="testBtn">
|
||||
🔍 {{ __('radio.wizard.test_button') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wizard-card">
|
||||
<h2 style="font-size: 1.3rem; font-weight: 700; color: #2d3748; margin-bottom: 1rem;">
|
||||
📋 {{ __('radio.wizard.settings_overview') }}
|
||||
</h2>
|
||||
<p style="color: #4a5568; margin-bottom: 1.5rem;">{{ __('radio.wizard.settings_overview_desc') }}</p>
|
||||
|
||||
<div style="background: #f7fafc; border-radius: 10px; padding: 1.25rem;">
|
||||
@foreach($settingsList as $key => $value)
|
||||
<div class="setting-row">
|
||||
<span class="setting-key">{{ $key }}</span>
|
||||
<span class="setting-value">{{ $value }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<a href="{{ route('admin.radio.wizard.step', ['step' => 4]) }}" class="btn-secondary">← {{ __('radio.wizard.previous_step') }}</a>
|
||||
|
||||
<form action="{{ route('admin.radio.wizard.complete') }}" method="POST" style="display: inline;" onsubmit="return confirm('{{ __('radio.wizard.install_confirm') }}')">
|
||||
@csrf
|
||||
<button type="submit" class="btn-success">
|
||||
🚀 {{ __('radio.wizard.install_button') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function runTest() {
|
||||
const testBtn = document.getElementById('testBtn');
|
||||
const testLoading = document.getElementById('testLoading');
|
||||
const testOutput = document.getElementById('testOutput');
|
||||
|
||||
testBtn.disabled = true;
|
||||
testBtn.innerHTML = '<span class="loading-spinner"></span> {{ __('radio.wizard.test_loading') }}';
|
||||
testLoading.style.display = 'block';
|
||||
testOutput.innerHTML = '';
|
||||
|
||||
fetch('{{ route('admin.radio.wizard.test') }}')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
testLoading.style.display = 'none';
|
||||
if (data.success && data.results) {
|
||||
let html = '';
|
||||
const tests = {
|
||||
'stream': { label: '📡 {{ __('radio.wizard.test_result_stream') }}' },
|
||||
'now_playing': { label: '🎵 {{ __('radio.wizard.test_result_now_playing') }}' },
|
||||
'listeners': { label: '👥 {{ __('radio.wizard.test_result_listeners') }}' },
|
||||
};
|
||||
|
||||
const statusIcons = { success: '✅', warning: '⚠️', error: '❌', skipped: '⏭️', untested: '❓' };
|
||||
const statusLabels = { success: '{{ __('radio.wizard.status_success') }}', warning: '{{ __('radio.wizard.status_warning') }}', error: '{{ __('radio.wizard.status_error') }}', skipped: '{{ __('radio.wizard.status_skipped') }}', untested: '{{ __('radio.wizard.status_untested') }}' };
|
||||
|
||||
for (const [key, info] of Object.entries(tests)) {
|
||||
const result = data.results[key];
|
||||
if (!result) continue;
|
||||
|
||||
const icon = statusIcons[result.status] || '❓';
|
||||
const statusLabel = statusLabels[result.status] || result.status;
|
||||
|
||||
html += '<div class="test-card ' + result.status + '">';
|
||||
html += '<div class="test-title">' + icon + ' ' + info.label + ' <span class="status-badge ' + result.status + '">' + statusLabel + '</span></div>';
|
||||
html += '<div class="test-detail">' + result.message;
|
||||
|
||||
if (result.content_type) {
|
||||
html += '<br><strong>{{ __('radio.wizard.content_type') }}:</strong> ' + result.content_type;
|
||||
}
|
||||
if (result.http_code) {
|
||||
html += '<br><strong>{{ __('radio.wizard.http_status') }}:</strong> ' + result.http_code;
|
||||
}
|
||||
if (result.song) {
|
||||
html += '<br><strong>{{ __('radio.wizard.song') }}:</strong> ' + result.song;
|
||||
}
|
||||
if (result.artist) {
|
||||
html += ' <strong>{{ __('radio.wizard.artist') }}:</strong> ' + result.artist;
|
||||
}
|
||||
if (result.count !== undefined) {
|
||||
html += '<br><strong>{{ __('radio.wizard.listeners') }}:</strong> ' + result.count;
|
||||
}
|
||||
if (result.api_url) {
|
||||
html += '<br><strong>{{ __('radio.wizard.api_url') }}:</strong> ' + result.api_url;
|
||||
}
|
||||
|
||||
html += '</div></div>';
|
||||
}
|
||||
|
||||
html += '<div class="test-result-section">';
|
||||
if (data.results.stream && (data.results.stream.status === 'success' || data.results.stream.status === 'warning')) {
|
||||
html += '<p style="color: #38a169; font-weight: 600;">✅ {{ __('radio.wizard.test_stream_ok') }}</p>';
|
||||
} else if (data.results.stream && data.results.stream.status === 'error') {
|
||||
html += '<p style="color: #e53e3e; font-weight: 600;">❌ {{ __('radio.wizard.test_stream_fail') }}</p>';
|
||||
} else {
|
||||
html += '<p style="color: #a0aec0;">{{ __('radio.wizard.test_not_run') }}</p>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
testOutput.innerHTML = html;
|
||||
} else {
|
||||
testOutput.innerHTML = '<div class="test-card error"><div class="test-title">❌ {{ __('radio.wizard.error') }}</div><div class="test-detail">' + (data.error || '{{ __('radio.wizard.unknown_error') }}') + '</div></div>';
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
testLoading.style.display = 'none';
|
||||
testOutput.innerHTML = '<div class="test-card error"><div class="test-title">❌ {{ __('radio.wizard.error') }}</div><div class="test-detail">{{ __('radio.wizard.test_connection_fail') }} ' + err.message + '</div></div>';
|
||||
})
|
||||
.finally(() => {
|
||||
testBtn.disabled = false;
|
||||
testBtn.innerHTML = '🔄 {{ __('radio.wizard.test_retry') }}';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user