507 lines
30 KiB
PHP
507 lines
30 KiB
PHP
{{-- resources/views/siswa/input.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', (isset($isEdit) && $isEdit ? 'Edit Aktivitas Harian' : 'Input Aktivitas Harian') . ' - LearnMood')
|
|
|
|
@section('content')
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6">
|
|
<!-- Header dengan Progress -->
|
|
<div class="mb-6">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800">{{ isset($isEdit) && $isEdit ? 'Edit Aktivitas Harian' : 'Input Aktivitas Harian' }}</h2>
|
|
<span class="text-sm text-gray-500">{{ now()->format('l, d F Y') }}</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-gradient-to-r from-blue-500 to-purple-600 h-2 rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-2">
|
|
{{ isset($isEdit) && $isEdit ? 'Perbarui data aktivitas hari ini jika ada perubahan' : 'Lengkapi data untuk mendapatkan rekomendasi personal' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Main Form Card -->
|
|
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
|
|
<!-- Form Header dengan Ilustrasi -->
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-600 px-4 md:px-8 py-4 md:py-6">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-lg md:text-xl font-semibold text-white mb-1 md:mb-2">
|
|
{{ isset($isEdit) && $isEdit ? 'Edit Aktivitas Belajarmu' : 'Catat Aktivitas Belajarmu' }}
|
|
</h3>
|
|
<p class="text-blue-100 text-xs md:text-sm">
|
|
{{ isset($isEdit) && $isEdit ? 'Rekomendasi akan dihitung ulang setelah data diperbarui' : 'Isi data dengan jujur untuk hasil rekomendasi yang akurat' }}
|
|
</p>
|
|
</div>
|
|
<div class="bg-white/20 p-2 md:p-3 rounded-xl shrink-0">
|
|
<svg class="w-6 h-6 md:w-8 md:h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Body -->
|
|
<form method="POST" action="{{ isset($isEdit) && $isEdit ? route('siswa.input.update-today') : route('siswa.input.store') }}" class="p-4 md:p-8 space-y-6 md:space-y-8" id="inputForm">
|
|
@csrf
|
|
@if(isset($isEdit) && $isEdit)
|
|
@method('PATCH')
|
|
@endif
|
|
|
|
<!-- Waktu Belajar Section -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-base md:text-lg font-semibold text-gray-800">Waktu Belajar</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
|
|
<!-- Jam Mulai -->
|
|
<div class="space-y-2">
|
|
<label class="block text-xs md:text-sm font-medium text-gray-700">
|
|
<span class="flex items-center space-x-1">
|
|
<span>Jam Mulai</span>
|
|
<span class="text-xs text-gray-400">(Format 24 jam)</span>
|
|
</span>
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<input type="time"
|
|
name="start_time"
|
|
id="start_time"
|
|
value="{{ old('start_time', isset($isEdit) && $isEdit && isset($activity) && $activity->end_time ? \Carbon\Carbon::parse($activity->end_time)->format('H:i') : '') }}"
|
|
@if(isset($isEdit) && $isEdit && isset($activity) && $activity->end_time)
|
|
min="{{ \Carbon\Carbon::parse($activity->end_time)->format('H:i') }}"
|
|
@endif
|
|
class="w-full pl-10 pr-4 py-3 text-sm md:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('start_time') border-red-500 @enderror"
|
|
required>
|
|
</div>
|
|
@error('start_time')
|
|
<p class="text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Jam Selesai -->
|
|
<div class="space-y-2">
|
|
<label class="block text-xs md:text-sm font-medium text-gray-700">
|
|
<span class="flex items-center space-x-1">
|
|
<span>Jam Selesai</span>
|
|
<span class="text-xs text-gray-400">(Format 24 jam)</span>
|
|
</span>
|
|
</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<input type="time"
|
|
name="end_time"
|
|
id="end_time"
|
|
value="{{ old('end_time') }}"
|
|
@if(isset($isEdit) && $isEdit && isset($activity) && $activity->end_time)
|
|
min="{{ \Carbon\Carbon::parse($activity->end_time)->format('H:i') }}"
|
|
@endif
|
|
class="w-full pl-10 pr-4 py-3 text-sm md:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('end_time') border-red-500 @enderror"
|
|
required>
|
|
</div>
|
|
@error('end_time')
|
|
<p class="text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Durasi Preview -->
|
|
<div class="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-xl hidden" id="durationPreview">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
|
|
<span class="text-sm text-gray-600">Total Durasi Belajar:</span>
|
|
<span class="text-lg font-bold text-blue-600" id="durationDisplay">0 menit</span>
|
|
</div>
|
|
</div>
|
|
|
|
@if(isset($isEdit) && $isEdit)
|
|
<div class="bg-white border border-blue-100 p-4 rounded-xl">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4 text-sm">
|
|
<div class="bg-gray-50 rounded-lg p-3">
|
|
<p class="text-xs text-gray-500">Durasi tersimpan</p>
|
|
<p class="font-semibold text-gray-800">{{ $activity->duration_minutes ?? 0 }} menit</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-3">
|
|
<p class="text-xs text-gray-500">Jam selesai terakhir</p>
|
|
<p class="font-semibold text-gray-800">
|
|
{{ isset($activity) && $activity->end_time ? \Carbon\Carbon::parse($activity->end_time)->format('H:i') : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<label for="total_duration_minutes" class="block text-xs md:text-sm font-medium text-gray-700 mb-2">
|
|
Total Durasi Belajar Hari Ini
|
|
</label>
|
|
<div class="relative">
|
|
<input type="number"
|
|
name="total_duration_minutes"
|
|
id="total_duration_minutes"
|
|
value="{{ old('total_duration_minutes', $activity->duration_minutes ?? '') }}"
|
|
min="1"
|
|
max="720"
|
|
class="w-full pr-16 pl-4 py-3 text-sm md:text-base border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all @error('total_duration_minutes') border-red-500 @enderror"
|
|
readonly>
|
|
<span class="absolute inset-y-0 right-0 pr-4 flex items-center text-sm text-gray-500 pointer-events-none">menit</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-2">
|
|
Total otomatis dihitung dari durasi tersimpan ditambah durasi belajar tambahan.
|
|
</p>
|
|
@error('total_duration_minutes')
|
|
<p class="text-sm text-red-600 mt-1">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Mood Section -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-4 h-4 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-base md:text-lg font-semibold text-gray-800">Mood Hari Ini</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-2 md:gap-3">
|
|
<!-- Bagus -->
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="mood" value="Bagus" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Bagus' ? 'checked' : '' }} required>
|
|
<div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-green-500 peer-checked:bg-green-50 hover:bg-gray-50 transition-all">
|
|
<span class="text-2xl md:text-3xl block mb-1">😊</span>
|
|
<span class="text-[10px] md:text-sm font-medium text-gray-700">Bagus</span>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Lumayan -->
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="mood" value="Lumayan" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Lumayan' ? 'checked' : '' }}>
|
|
<div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-blue-500 peer-checked:bg-blue-50 hover:bg-gray-50 transition-all">
|
|
<span class="text-2xl md:text-3xl block mb-1">🙂</span>
|
|
<span class="text-[10px] md:text-sm font-medium text-gray-700">Lumayan</span>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Biasa Saja -->
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="mood" value="Biasa Saja" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Biasa Saja' ? 'checked' : '' }}>
|
|
<div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-gray-500 peer-checked:bg-gray-50 hover:bg-gray-50 transition-all">
|
|
<span class="text-2xl md:text-3xl block mb-1">😐</span>
|
|
<span class="text-[10px] md:text-sm font-medium text-gray-700">Biasa</span>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Cukup Jenuh -->
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="mood" value="Cukup Jenuh" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Cukup Jenuh' ? 'checked' : '' }}>
|
|
<div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-yellow-500 peer-checked:bg-yellow-50 hover:bg-gray-50 transition-all">
|
|
<span class="text-2xl md:text-3xl block mb-1">😕</span>
|
|
<span class="text-[10px] md:text-sm font-medium text-gray-700">Jenuh</span>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Jenuh -->
|
|
<label class="relative cursor-pointer">
|
|
<input type="radio" name="mood" value="Jenuh" class="sr-only peer" {{ old('mood', $activity->mood ?? '') == 'Jenuh' ? 'checked' : '' }}>
|
|
<div class="p-2 md:p-4 text-center border-2 rounded-xl peer-checked:border-red-500 peer-checked:bg-red-50 hover:bg-gray-50 transition-all">
|
|
<span class="text-2xl md:text-3xl block mb-1">😫</span>
|
|
<span class="text-[10px] md:text-sm font-medium text-gray-700">Sangat Jenuh</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
@error('mood')
|
|
<p class="text-sm text-red-600">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Durasi Tidur Section dengan Slider 1-10 Jam -->
|
|
<div class="space-y-4">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center shrink-0">
|
|
<svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-base md:text-lg font-semibold text-gray-800">Durasi Tidur</h3>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 md:p-6 rounded-xl">
|
|
<!-- Slider 1-10 Jam -->
|
|
<div class="space-y-6">
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
|
|
<span class="text-xs md:text-sm font-medium text-gray-700">Geser untuk memilih durasi tidur:</span>
|
|
<div class="flex items-center justify-end">
|
|
<span class="text-xl md:text-2xl font-bold text-indigo-600" id="sleepHoursDisplay">7</span>
|
|
<span class="text-sm text-gray-500 ml-1">jam</span>
|
|
</div>
|
|
</div>
|
|
|
|
<input type="range"
|
|
id="sleepSlider"
|
|
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600"
|
|
min="1"
|
|
max="10"
|
|
step="0.5"
|
|
value="{{ old('sleep_hours', isset($activity) ? $activity->sleep_hours : 7) }}"
|
|
required>
|
|
|
|
<!-- Label Range -->
|
|
<div class="flex justify-between text-[10px] md:text-xs text-gray-500 px-2">
|
|
<span>😴 1j</span>
|
|
<span>😊 5j</span>
|
|
<span>🌙 7j</span>
|
|
<span>😴 10j</span>
|
|
</div>
|
|
|
|
<!-- Kategori Tidur -->
|
|
<div class="flex justify-center">
|
|
<span class="px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium" id="sleepCategory">
|
|
Normal (Cukup)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Input untuk nilai -->
|
|
<input type="hidden" name="sleep_hours" id="sleepValue" value="{{ old('sleep_hours', isset($activity) ? $activity->sleep_hours : '7') }}">
|
|
|
|
<!-- Preview Card dengan Visual -->
|
|
<div class="mt-6 p-4 bg-white rounded-lg border border-gray-200">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="text-3xl md:text-4xl" id="sleepEmoji">🌙</div>
|
|
<div>
|
|
<p class="text-xs md:text-sm text-gray-500">Kamu tidur selama:</p>
|
|
<div class="flex items-baseline space-x-1">
|
|
<p class="text-xl md:text-2xl font-bold text-gray-800" id="sleepText">7</p>
|
|
<p class="text-sm md:text-base text-gray-600">jam</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-left sm:text-right">
|
|
<p class="text-xs md:text-sm text-gray-500" id="sleepQuality">Kualitas: Baik</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar Tidur -->
|
|
<div class="mt-3">
|
|
<div class="flex justify-between text-[10px] md:text-xs text-gray-500 mb-1">
|
|
<span>Kurang</span>
|
|
<span>Ideal</span>
|
|
<span>Berlebih</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="bg-indigo-600 h-2 rounded-full" id="sleepProgress" style="width: 70%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Rekomendasi Tidur -->
|
|
<div class="mt-4 text-[10px] md:text-xs text-gray-500 flex items-start space-x-2">
|
|
<svg class="w-4 h-4 text-indigo-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<span>Remaja (14-17 tahun) idealnya tidur 8-10 jam. Dewasa (18+ tahun) idealnya 7-9 jam.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-3 pt-4">
|
|
<button type="submit"
|
|
class="w-full sm:flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-medium hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all transform hover:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed"
|
|
id="submitBtn">
|
|
<span class="flex items-center justify-center space-x-2">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span>{{ isset($isEdit) && $isEdit ? 'Update Aktivitas' : 'Simpan Aktivitas' }}</span>
|
|
</span>
|
|
</button>
|
|
|
|
<a href="{{ route('dashboard') }}"
|
|
class="w-full sm:w-auto px-6 py-3 border-2 border-gray-300 rounded-xl text-gray-700 font-medium hover:bg-gray-50 transition-all text-center">
|
|
Batal
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Info Tambahan -->
|
|
<div class="bg-blue-50 p-4 rounded-lg">
|
|
<div class="flex items-start space-x-3">
|
|
<svg class="w-5 h-5 text-blue-600 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="text-xs md:text-sm text-blue-700">
|
|
<span class="font-semibold">Tips:</span> Input data dengan jujur agar rekomendasi belajar lebih personal dan akurat. Data hanya digunakan untuk analisis belajarmu.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Hitung durasi otomatis
|
|
const startTime = document.getElementById('start_time');
|
|
const endTime = document.getElementById('end_time');
|
|
const durationPreview = document.getElementById('durationPreview');
|
|
const durationDisplay = document.getElementById('durationDisplay');
|
|
const isEditMode = @json(isset($isEdit) && $isEdit);
|
|
const previousDuration = @json(isset($activity) ? (int) $activity->duration_minutes : 0);
|
|
const previousEndTime = @json(isset($activity) && $activity->end_time ? \Carbon\Carbon::parse($activity->end_time)->format('H:i') : null);
|
|
const totalDurationInput = document.getElementById('total_duration_minutes');
|
|
|
|
function calculateDuration() {
|
|
if (startTime.value && endTime.value) {
|
|
const start = new Date('1970-01-01T' + startTime.value + 'Z');
|
|
const end = new Date('1970-01-01T' + endTime.value + 'Z');
|
|
const previousEnd = previousEndTime ? new Date('1970-01-01T' + previousEndTime + 'Z') : null;
|
|
|
|
if (isEditMode && previousEnd && start < previousEnd) {
|
|
durationDisplay.textContent = 'Jam mulai tambahan tidak boleh sebelum ' + previousEndTime;
|
|
durationPreview.style.display = 'block';
|
|
durationPreview.classList.remove('hidden');
|
|
durationPreview.classList.add('bg-red-50');
|
|
durationPreview.classList.remove('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
|
|
durationDisplay.classList.add('text-red-600');
|
|
if (totalDurationInput) {
|
|
totalDurationInput.value = previousDuration;
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (end > start) {
|
|
const diffMs = end - start;
|
|
const diffMins = Math.round(diffMs / 60000);
|
|
const totalMins = isEditMode ? previousDuration + diffMins : diffMins;
|
|
|
|
durationDisplay.textContent = isEditMode
|
|
? diffMins + ' menit tambahan, total ' + totalMins + ' menit'
|
|
: diffMins + ' menit';
|
|
durationPreview.style.display = 'block';
|
|
durationPreview.classList.remove('hidden');
|
|
if (totalDurationInput) {
|
|
totalDurationInput.value = totalMins;
|
|
}
|
|
|
|
// Validasi durasi
|
|
if (diffMins > 480) { // Lebih dari 8 jam
|
|
durationPreview.classList.add('bg-yellow-50');
|
|
durationPreview.classList.remove('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
|
|
durationDisplay.classList.add('text-yellow-600');
|
|
durationDisplay.classList.remove('text-blue-600');
|
|
} else {
|
|
durationPreview.classList.remove('bg-yellow-50');
|
|
durationPreview.classList.add('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
|
|
durationDisplay.classList.remove('text-yellow-600');
|
|
durationDisplay.classList.add('text-blue-600');
|
|
}
|
|
} else {
|
|
durationDisplay.textContent = 'Jam selesai harus setelah jam mulai';
|
|
durationPreview.style.display = 'block';
|
|
durationPreview.classList.remove('hidden');
|
|
durationPreview.classList.add('bg-red-50');
|
|
durationPreview.classList.remove('bg-gradient-to-r', 'from-blue-50', 'to-purple-50');
|
|
durationDisplay.classList.add('text-red-600');
|
|
}
|
|
}
|
|
}
|
|
|
|
startTime.addEventListener('change', calculateDuration);
|
|
endTime.addEventListener('change', calculateDuration);
|
|
|
|
// Slider untuk durasi tidur 1-10 jam
|
|
const slider = document.getElementById('sleepSlider');
|
|
const sleepHoursDisplay = document.getElementById('sleepHoursDisplay');
|
|
const sleepText = document.getElementById('sleepText');
|
|
const sleepEmoji = document.getElementById('sleepEmoji');
|
|
const sleepCategory = document.getElementById('sleepCategory');
|
|
const sleepQuality = document.getElementById('sleepQuality');
|
|
const sleepProgress = document.getElementById('sleepProgress');
|
|
const sleepValue = document.getElementById('sleepValue');
|
|
|
|
function updateSleepDisplay() {
|
|
const hours = parseFloat(slider.value).toFixed(1);
|
|
|
|
// Update display
|
|
sleepHoursDisplay.textContent = hours;
|
|
sleepText.textContent = hours;
|
|
sleepValue.value = hours;
|
|
|
|
// Hitung progress percentage (1-10 jam -> 0-100%)
|
|
const progressPercent = ((hours - 1) / 9) * 100;
|
|
sleepProgress.style.width = progressPercent + '%';
|
|
|
|
// Tentukan emoji dan kategori berdasarkan jam tidur
|
|
if (hours < 5) {
|
|
sleepEmoji.textContent = '😴';
|
|
sleepCategory.textContent = 'Kurang Tidur';
|
|
sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-red-100 text-red-700';
|
|
sleepQuality.textContent = 'Kualitas: Kurang';
|
|
sleepProgress.className = 'bg-red-600 h-2 rounded-full';
|
|
} else if (hours >= 5 && hours < 7) {
|
|
sleepEmoji.textContent = '😐';
|
|
sleepCategory.textContent = 'Kurang Ideal';
|
|
sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-yellow-100 text-yellow-700';
|
|
sleepQuality.textContent = 'Kualitas: Cukup';
|
|
sleepProgress.className = 'bg-yellow-600 h-2 rounded-full';
|
|
} else if (hours >= 7 && hours <= 9) {
|
|
sleepEmoji.textContent = '😊';
|
|
sleepCategory.textContent = 'Ideal';
|
|
sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-green-100 text-green-700';
|
|
sleepQuality.textContent = 'Kualitas: Baik';
|
|
sleepProgress.className = 'bg-green-600 h-2 rounded-full';
|
|
} else {
|
|
sleepEmoji.textContent = '😴';
|
|
sleepCategory.textContent = 'Berlebih';
|
|
sleepCategory.className = 'px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm font-medium bg-blue-100 text-blue-700';
|
|
sleepQuality.textContent = 'Kualitas: Cukup';
|
|
sleepProgress.className = 'bg-blue-600 h-2 rounded-full';
|
|
}
|
|
}
|
|
|
|
slider.addEventListener('input', updateSleepDisplay);
|
|
|
|
// Set initial display
|
|
updateSleepDisplay();
|
|
|
|
// Validasi form sebelum submit
|
|
document.getElementById('inputForm').addEventListener('submit', function(e) {
|
|
const start = startTime.value;
|
|
const end = endTime.value;
|
|
|
|
if (start && end) {
|
|
const startDate = new Date('1970-01-01T' + start + 'Z');
|
|
const endDate = new Date('1970-01-01T' + end + 'Z');
|
|
const previousEndDate = previousEndTime ? new Date('1970-01-01T' + previousEndTime + 'Z') : null;
|
|
|
|
if (isEditMode && previousEndDate && startDate < previousEndDate) {
|
|
e.preventDefault();
|
|
alert('Jam mulai tambahan tidak boleh sebelum jam selesai aktivitas sebelumnya (' + previousEndTime + ')!');
|
|
return false;
|
|
}
|
|
|
|
if (endDate <= startDate) {
|
|
e.preventDefault();
|
|
alert('Jam selesai harus setelah jam mulai!');
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|