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
@@ -356,6 +356,11 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<a href="{{ route('admin.radio.wizard') }}" class="btn-primary" style="text-decoration: none;">
|
||||
<span>🎯</span>
|
||||
{{ __('radio.open_wizard') }}
|
||||
</a>
|
||||
|
||||
<a href="/housekeeping/radio-settings" class="btn-secondary">
|
||||
<span>⚙️</span>
|
||||
{{ __('radio.go_to_radio_settings') }}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
@php
|
||||
$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'),
|
||||
];
|
||||
$statusIcons = [
|
||||
'success' => '✅',
|
||||
'warning' => '⚠️',
|
||||
'error' => '❌',
|
||||
'skipped' => '⏭️',
|
||||
'untested' => '❓',
|
||||
];
|
||||
$testNames = [
|
||||
'stream' => '📡 ' . __('radio.wizard.test_result_stream'),
|
||||
'now_playing' => '🎵 ' . __('radio.wizard.test_result_now_playing'),
|
||||
'listeners' => '👥 ' . __('radio.wizard.test_result_listeners'),
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach(['stream', 'now_playing', 'listeners'] as $key)
|
||||
@php $result = $results[$key] ?? null; @endphp
|
||||
@if($result)
|
||||
<div class="test-card {{ $result['status'] }}">
|
||||
<div class="test-title">
|
||||
{{ $statusIcons[$result['status']] ?? '❓' }} {{ $testNames[$key] ?? $key }}
|
||||
<span class="status-badge {{ $result['status'] }}">{{ $statusLabels[$result['status']] ?? $result['status'] }}</span>
|
||||
</div>
|
||||
<div class="test-detail">
|
||||
{{ $result['message'] }}
|
||||
@if(!empty($result['content_type']))
|
||||
<br><strong>{{ __('radio.wizard.content_type') }}:</strong> {{ $result['content_type'] }}
|
||||
@endif
|
||||
@if(!empty($result['http_code']))
|
||||
<br><strong>{{ __('radio.wizard.http_status') }}:</strong> {{ $result['http_code'] }}
|
||||
@endif
|
||||
@if(!empty($result['song']))
|
||||
<br><strong>{{ __('radio.wizard.song') }}:</strong> {{ $result['song'] }}
|
||||
@endif
|
||||
@if(!empty($result['artist']))
|
||||
<strong>{{ __('radio.wizard.artist') }}:</strong> {{ $result['artist'] }}
|
||||
@endif
|
||||
@if(isset($result['count']))
|
||||
<br><strong>{{ __('radio.wizard.listeners') }}:</strong> {{ $result['count'] }}
|
||||
@endif
|
||||
@if(!empty($result['api_url']))
|
||||
<br><strong>{{ __('radio.wizard.api_url') }}:</strong> {{ $result['api_url'] }}
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
<div class="test-result-section">
|
||||
@if(($results['stream']['status'] ?? '') === 'success' || ($results['stream']['status'] ?? '') === 'warning')
|
||||
<p style="color: #38a169; font-weight: 600;">✅ {{ __('radio.wizard.test_stream_ok') }}</p>
|
||||
@elseif(($results['stream']['status'] ?? '') === 'error')
|
||||
<p style="color: #e53e3e; font-weight: 600;">❌ {{ __('radio.wizard.test_stream_fail') }}</p>
|
||||
@else
|
||||
<p style="color: #a0aec0;">{{ __('radio.wizard.test_not_run') }}</p>
|
||||
@endif
|
||||
</div>
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 1 - ' . 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; }
|
||||
.platform-card { border: 3px solid #e2e8f0; border-radius: 16px; padding: 2rem; cursor: pointer; transition: all 0.3s; text-align: center; }
|
||||
.platform-card:hover { border-color: #eeb425; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(238,180,37,0.15); }
|
||||
.platform-card.selected { border-color: #eeb425; background: #fffbeb; }
|
||||
.platform-icon { font-size: 3rem; margin-bottom: 1rem; }
|
||||
.platform-name { font-size: 1.25rem; font-weight: 700; color: #2d3748; margin-bottom: 0.5rem; }
|
||||
.platform-desc { color: #4a5568; font-size: 0.9rem; line-height: 1.5; }
|
||||
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
|
||||
.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); }
|
||||
.btn-wizard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(238,180,37,0.4); }
|
||||
.btn-wizard:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
|
||||
.radio-input { display: none; }
|
||||
.step-label { font-size: 0.85rem; color: #718096; text-align: center; margin-top: 0.5rem; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="wizard-container">
|
||||
<div class="wizard-header">
|
||||
<h1 class="wizard-title">📻 {{ __('radio.wizard.title') }}</h1>
|
||||
<p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 1 {{ __('radio.wizard.of') }} 5 - {{ __('radio.wizard.step1_subtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="steps-indicator">
|
||||
<div class="step-dot active">1</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">2</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">3</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">4</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">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: #eeb425; font-weight: 600;">{{ __('radio.wizard.step1_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step2_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step3_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step4_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step5_label') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="wizard-card">
|
||||
<form id="platformForm" action="{{ route('admin.radio.wizard.process-step-1') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="platform-grid">
|
||||
@php $platforms = ['shoutcast', 'icecast', 'azurecast', 'other']; @endphp
|
||||
@php $icons = ['shoutcast' => '📡', 'icecast' => '🎵', 'azurecast' => '☁️', 'other' => '🔗']; @endphp
|
||||
|
||||
@foreach($platforms as $p)
|
||||
<label class="platform-card" id="card-{{ $p }}" onclick="selectPlatform('{{ $p }}')">
|
||||
<input type="radio" name="platform" value="{{ $p }}" class="radio-input" {{ $selectedPlatform === $p ? 'checked' : '' }} required>
|
||||
<div class="platform-icon">{{ $icons[$p] }}</div>
|
||||
<div class="platform-name">{{ __("radio.wizard.platform_{$p}") }}</div>
|
||||
<div class="platform-desc">{{ __("radio.wizard.platform_{$p}_desc") }}</div>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<a href="{{ route('admin.radio.setup') }}" class="btn-wizard" style="background: #e2e8f0; color: #4a5568; box-shadow: none; text-decoration: none; font-size: 0.95rem;">
|
||||
← {{ __('radio.wizard.back_to_setup') }}
|
||||
</a>
|
||||
<button type="submit" class="btn-wizard" id="continueBtn" disabled>
|
||||
{{ __('radio.wizard.next_step') }} →
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function selectPlatform(value) {
|
||||
document.querySelectorAll('.platform-card').forEach(c => c.classList.remove('selected'));
|
||||
document.getElementById('card-' + value).classList.add('selected');
|
||||
document.querySelector('input[name="platform"][value="' + value + '"]').checked = true;
|
||||
document.getElementById('continueBtn').disabled = false;
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
+118
@@ -0,0 +1,118 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 2 - ' . 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; }
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-label { display: block; font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; }
|
||||
.form-input { width: 100%; padding: 0.85rem 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; transition: border-color 0.2s; }
|
||||
.form-input:focus { outline: none; border-color: #eeb425; box-shadow: 0 0 0 3px rgba(238,180,37,0.1); }
|
||||
.form-hint { color: #718096; font-size: 0.85rem; margin-top: 0.3rem; }
|
||||
.platform-badge { display: inline-block; background: #fffbeb; color: #b7791f; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
|
||||
.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; }
|
||||
.info-box { background: #ebf8ff; border-left: 4px solid #3182ce; padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 1.5rem; }
|
||||
.info-box-title { font-weight: 700; color: #2b6cb0; margin-bottom: 0.3rem; }
|
||||
.info-box-text { color: #4a5568; font-size: 0.9rem; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="wizard-container">
|
||||
<div class="wizard-header">
|
||||
<h1 class="wizard-title">📻 {{ __('radio.wizard.step2_title') }}</h1>
|
||||
<p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 2 {{ __('radio.wizard.of') }} 5 - <span class="platform-badge">{{ $platformLabel }}</span></p>
|
||||
</div>
|
||||
|
||||
<div class="steps-indicator">
|
||||
<div class="step-dot completed">✓</div>
|
||||
<div class="step-line active"></div>
|
||||
<div class="step-dot active">2</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">3</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">4</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">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: #eeb425; font-weight: 600;">{{ __('radio.wizard.step2_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step3_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step4_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step5_label') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="wizard-card">
|
||||
<form action="{{ route('admin.radio.wizard.process-step-2') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-box-title">{{ __("radio.wizard.platform_{$platform}_info_title") }}</div>
|
||||
<div class="info-box-text">{{ __("radio.wizard.platform_{$platform}_info_desc") }}</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="stream_url">{{ __('radio.wizard.stream_url_label') }} *</label>
|
||||
<input type="url" name="stream_url" id="stream_url" class="form-input" value="{{ old('stream_url', $streamUrl) }}" placeholder="https://jouw-server.nl:8000/radio.mp3" required>
|
||||
<div class="form-hint">{{ __('radio.wizard.stream_url_hint') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="stream_name">{{ __('radio.wizard.stream_name_label') }}</label>
|
||||
<input type="text" name="stream_name" id="stream_name" class="form-input" value="{{ old('stream_name', $streamName) }}" placeholder="{{ __('radio.wizard.stream_name_placeholder') }}">
|
||||
<div class="form-hint">{{ __('radio.wizard.stream_name_hint') }}</div>
|
||||
</div>
|
||||
|
||||
@if($platform === 'azurecast')
|
||||
<hr style="border: none; border-top: 2px dashed #e2e8f0; margin: 1.5rem 0;">
|
||||
|
||||
<h3 style="font-size: 1.2rem; font-weight: 700; color: #2d3748; margin-bottom: 1rem;">{{ __('radio.wizard.azurecast_section') }}</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="azurecast_base_url">{{ __('radio.wizard.azurecast_base_url_label') }}</label>
|
||||
<input type="url" name="azurecast_base_url" id="azurecast_base_url" class="form-input" value="{{ old('azurecast_base_url', $azurecastBaseUrl) }}" placeholder="https://radio.jouwdomein.nl">
|
||||
<div class="form-hint">{{ __('radio.wizard.azurecast_base_url_hint') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="azurecast_station_id">{{ __('radio.wizard.azurecast_station_id_label') }}</label>
|
||||
<input type="number" name="azurecast_station_id" id="azurecast_station_id" class="form-input" value="{{ old('azurecast_station_id', $azurecastStationId) }}" min="1">
|
||||
<div class="form-hint">{{ __('radio.wizard.azurecast_station_id_hint') }}</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($errors->any())
|
||||
<div style="background: #fff5f5; border: 1px solid #fc8181; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;">
|
||||
<ul style="color: #c53030; margin: 0; padding-left: 1.5rem;">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<a href="{{ route('admin.radio.wizard') }}" class="btn-secondary">← {{ __('radio.wizard.previous_step') }}</a>
|
||||
<button type="submit" class="btn-wizard">{{ __('radio.wizard.next_step') }} →</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 3 - ' . 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; }
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-label { display: block; font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; }
|
||||
.form-input { width: 100%; padding: 0.85rem 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; transition: border-color 0.2s; }
|
||||
.form-input:focus { outline: none; border-color: #eeb425; box-shadow: 0 0 0 3px rgba(238,180,37,0.1); }
|
||||
.form-hint { color: #718096; font-size: 0.85rem; margin-top: 0.3rem; }
|
||||
.toggle-group { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f7fafc; border-radius: 10px; margin-bottom: 1rem; }
|
||||
.toggle { position: relative; width: 50px; height: 26px; flex-shrink: 0; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e0; border-radius: 26px; transition: 0.3s; }
|
||||
.toggle-slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
|
||||
.toggle input:checked + .toggle-slider { background: #38a169; }
|
||||
.toggle input:checked + .toggle-slider:before { transform: translateX(24px); }
|
||||
.toggle-label { font-weight: 500; 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; }
|
||||
.detected-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-left: 0.5rem; }
|
||||
.detected-badge.success { background: #f0fff4; color: #38a169; }
|
||||
.detected-badge.missing { background: #fff5f5; color: #e53e3e; }
|
||||
.detected-badge.info { background: #ebf8ff; color: #3182ce; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="wizard-container">
|
||||
<div class="wizard-header">
|
||||
<h1 class="wizard-title">🔌 {{ __('radio.wizard.step3_title') }}</h1>
|
||||
<p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 3 {{ __('radio.wizard.of') }} 5 - {{ __('radio.wizard.step3_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 active">3</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">4</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">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: #eeb425; font-weight: 600;">{{ __('radio.wizard.step3_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step4_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step5_label') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="wizard-card">
|
||||
@if($autoDetected && $autoDetected['detected'])
|
||||
<div style="background: #f0fff4; border: 1px solid #38a169; border-radius: 10px; padding: 1rem 1.5rem; margin-bottom: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="font-size: 1.5rem;">✅</span>
|
||||
<div>
|
||||
<strong style="color: #2f855a;">{{ ucfirst($autoDetected['type']) }} {{ __('radio.wizard.detected') }}</strong>
|
||||
<p style="color: #4a5568; margin: 0; font-size: 0.9rem;">{{ __('radio.wizard.detected_desc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($autoDetected)
|
||||
<div style="background: #fff5f5; border: 1px solid #fc8181; border-radius: 10px; padding: 1rem 1.5rem; margin-bottom: 2rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<span style="font-size: 1.5rem;">⚠️</span>
|
||||
<div>
|
||||
<strong style="color: #c53030;">{{ __('radio.wizard.not_detected') }}</strong>
|
||||
<p style="color: #4a5568; margin: 0; font-size: 0.9rem;">{{ __('radio.wizard.not_detected_desc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('admin.radio.wizard.process-step-3') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_now_playing" value="0">
|
||||
<input type="checkbox" name="enable_now_playing" value="1" {{ $enableNowPlaying ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.enable_now_playing') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="now_playing_api">{{ __('radio.wizard.now_playing_api_label') }}</label>
|
||||
<input type="url" name="now_playing_api" id="now_playing_api" class="form-input" value="{{ old('now_playing_api', $nowPlayingApi) }}" placeholder="https://server.example.com/api/nowplaying">
|
||||
<div class="form-hint">{{ __('radio.wizard.now_playing_api_hint') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_listeners" value="0">
|
||||
<input type="checkbox" name="enable_listeners" value="1" {{ $enableListeners ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.enable_listeners') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="listeners_api">{{ __('radio.wizard.listeners_api_label') }}</label>
|
||||
<input type="url" name="listeners_api" id="listeners_api" class="form-input" value="{{ old('listeners_api', $listenersApi) }}" placeholder="https://server.example.com/api/listeners">
|
||||
<div class="form-hint">{{ __('radio.wizard.listeners_api_hint') }}</div>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_current_dj" value="0">
|
||||
<input type="checkbox" name="enable_current_dj" value="1" {{ $enableCurrentDj ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.enable_current_dj') }}</span>
|
||||
</div>
|
||||
|
||||
@if ($errors->any())
|
||||
<div style="background: #fff5f5; border: 1px solid #fc8181; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;">
|
||||
<ul style="color: #c53030; margin: 0; padding-left: 1.5rem;">
|
||||
@foreach ($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div style="display: flex; justify-content: space-between;">
|
||||
<a href="{{ route('admin.radio.wizard.step', ['step' => 2]) }}" class="btn-secondary">← {{ __('radio.wizard.previous_step') }}</a>
|
||||
<button type="submit" class="btn-wizard">{{ __('radio.wizard.next_step') }} →</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
+211
@@ -0,0 +1,211 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', __('radio.wizard.title') . ' - ' . __('radio.wizard.step_short') . ' 4 - ' . 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; }
|
||||
.toggle-group { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; background: #f7fafc; border-radius: 10px; margin-bottom: 0.75rem; }
|
||||
.toggle { position: relative; width: 46px; height: 24px; flex-shrink: 0; }
|
||||
.toggle input { opacity: 0; width: 0; height: 0; }
|
||||
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e0; border-radius: 24px; transition: 0.3s; }
|
||||
.toggle-slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
|
||||
.toggle input:checked + .toggle-slider { background: #38a169; }
|
||||
.toggle input:checked + .toggle-slider:before { transform: translateX(22px); }
|
||||
.toggle-label { font-weight: 500; color: #2d3748; font-size: 0.95rem; }
|
||||
.toggle-desc { color: #718096; font-size: 0.8rem; margin-left: auto; }
|
||||
.form-group { margin-bottom: 1.5rem; }
|
||||
.form-label { display: block; font-weight: 600; color: #2d3748; margin-bottom: 0.5rem; }
|
||||
.form-input { width: 100%; padding: 0.85rem 1rem; border: 2px solid #e2e8f0; border-radius: 10px; font-size: 1rem; transition: border-color 0.2s; }
|
||||
.form-input:focus { outline: none; border-color: #eeb425; box-shadow: 0 0 0 3px rgba(238,180,37,0.1); }
|
||||
.form-hint { color: #718096; font-size: 0.85rem; margin-top: 0.3rem; }
|
||||
.section-title { font-size: 1.15rem; font-weight: 700; color: #2d3748; margin: 1.5rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid #eeb425; }
|
||||
.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; }
|
||||
.features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||||
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="wizard-container">
|
||||
<div class="wizard-header">
|
||||
<h1 class="wizard-title">⚙️ {{ __('radio.wizard.step4_title') }}</h1>
|
||||
<p class="wizard-subtitle">{{ __('radio.wizard.step_prefix') }} 4 {{ __('radio.wizard.of') }} 5 - {{ __('radio.wizard.step4_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 active">4</div>
|
||||
<div class="step-line inactive"></div>
|
||||
<div class="step-dot inactive">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: #eeb425; font-weight: 600;">{{ __('radio.wizard.step4_label') }}</span>
|
||||
<span>{{ __('radio.wizard.step5_label') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="wizard-card">
|
||||
<form action="{{ route('admin.radio.wizard.process-step-4') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<h3 class="section-title">{{ __('radio.wizard.section_community') }}</h3>
|
||||
<div class="features-grid">
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_shouts" value="0">
|
||||
<input type="checkbox" name="enable_shouts" value="1" {{ $enableShouts ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_shouts') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_shouts_desc') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_applications" value="0">
|
||||
<input type="checkbox" name="enable_applications" value="1" {{ $enableApplications ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_applications') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_applications_desc') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_requests" value="0">
|
||||
<input type="checkbox" name="enable_requests" value="1" {{ $enableRequests ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_requests') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_requests_desc') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="section-title">{{ __('radio.wizard.section_display') }}</h3>
|
||||
<div class="features-grid">
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_widget" value="0">
|
||||
<input type="checkbox" name="enable_widget" value="1" {{ $enableWidget ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_widget') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_widget_desc') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group" id="widgetGlobalGroup" style="{{ $enableWidget ? '' : 'opacity: 0.5;' }}">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_widget_globally" value="0">
|
||||
<input type="checkbox" name="enable_widget_globally" value="1" {{ $enableWidgetGlobally ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_widget_global') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_widget_global_desc') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="widget_position">{{ __('radio.wizard.widget_position_label') }}</label>
|
||||
<select name="widget_position" id="widget_position" class="form-input">
|
||||
<option value="bottom-right" {{ $widgetPosition === 'bottom-right' ? 'selected' : '' }}>{{ __('radio.wizard.position_bottom_right') }}</option>
|
||||
<option value="bottom-left" {{ $widgetPosition === 'bottom-left' ? 'selected' : '' }}>{{ __('radio.wizard.position_bottom_left') }}</option>
|
||||
<option value="top-right" {{ $widgetPosition === 'top-right' ? 'selected' : '' }}>{{ __('radio.wizard.position_top_right') }}</option>
|
||||
<option value="top-left" {{ $widgetPosition === 'top-left' ? 'selected' : '' }}>{{ __('radio.wizard.position_top_left') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h3 class="section-title">{{ __('radio.wizard.section_gamification') }}</h3>
|
||||
<div class="features-grid">
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_points" value="0">
|
||||
<input type="checkbox" name="enable_points" value="1" {{ $enablePoints ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_points') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_points_desc') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_contests" value="0">
|
||||
<input type="checkbox" name="enable_contests" value="1" {{ $enableContests ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_contests') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_contests_desc') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="toggle-group">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_giveaways" value="0">
|
||||
<input type="checkbox" name="enable_giveaways" value="1" {{ $enableGiveaways ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_giveaways') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_giveaways_desc') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="section-title">{{ __('radio.wizard.section_integrations') }}</h3>
|
||||
<div class="toggle-group" style="margin-bottom: 1rem;">
|
||||
<label class="toggle">
|
||||
<input type="hidden" name="enable_discord" value="0">
|
||||
<input type="checkbox" name="enable_discord" value="1" id="enableDiscord" {{ $enableDiscord ? 'checked' : '' }}>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{{ __('radio.wizard.feature_discord') }}</span>
|
||||
<span class="toggle-desc">{{ __('radio.wizard.feature_discord_desc') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="discordWebhookGroup" style="{{ $enableDiscord ? '' : 'display: none;' }}">
|
||||
<label class="form-label" for="discord_webhook">{{ __('radio.wizard.discord_webhook_label') }}</label>
|
||||
<input type="url" name="discord_webhook" id="discord_webhook" class="form-input" value="{{ old('discord_webhook', $discordWebhook) }}" placeholder="https://discord.com/api/webhooks/...">
|
||||
<div class="form-hint">{{ __('radio.wizard.discord_webhook_hint') }}</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 2rem;">
|
||||
<a href="{{ route('admin.radio.wizard.step', ['step' => 3]) }}" class="btn-secondary">← {{ __('radio.wizard.previous_step') }}</a>
|
||||
<button type="submit" class="btn-wizard">{{ __('radio.wizard.next_step') }} →</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('enableDiscord').addEventListener('change', function() {
|
||||
document.getElementById('discordWebhookGroup').style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
|
||||
document.querySelector('input[name="enable_widget"]').addEventListener('change', function() {
|
||||
const group = document.getElementById('widgetGlobalGroup');
|
||||
group.style.opacity = this.checked ? '1' : '0.5';
|
||||
if (!this.checked) {
|
||||
document.querySelector('input[name="enable_widget_globally"]').checked = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
+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