401 lines
13 KiB
Dart
401 lines
13 KiB
Dart
import 'dart:convert';
|
|
|
|
import 'package:audioplayers/audioplayers.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:http/http.dart' as http;
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
import 'package:ta_tahsin/core/baseurl/base_url.dart';
|
|
import 'package:ta_tahsin/core/theme.dart';
|
|
|
|
class PelafalanPage extends StatefulWidget {
|
|
final int id;
|
|
final int currentStep;
|
|
final List<dynamic> latihanData;
|
|
final String recordedFilePath;
|
|
|
|
const PelafalanPage({
|
|
super.key,
|
|
required this.id,
|
|
required this.currentStep,
|
|
required this.latihanData,
|
|
required this.recordedFilePath,
|
|
});
|
|
|
|
@override
|
|
_PelafalanPageState createState() => _PelafalanPageState();
|
|
}
|
|
|
|
class _PelafalanPageState extends State<PelafalanPage> {
|
|
late String recordedFilePath;
|
|
late int currentStep;
|
|
late List<dynamic> latihanData;
|
|
late dynamic latihan;
|
|
final AudioPlayer _audioPlayer = AudioPlayer();
|
|
bool isAudioPlaying = false;
|
|
bool isAudioRecordPlaying = false;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
recordedFilePath = widget.recordedFilePath;
|
|
|
|
currentStep = widget.currentStep;
|
|
latihanData = widget.latihanData;
|
|
latihan = latihanData[currentStep];
|
|
_audioPlayer.onPlayerStateChanged.listen((PlayerState state) {
|
|
if (state == PlayerState.completed) {
|
|
setState(() {
|
|
isAudioPlaying = false;
|
|
isAudioRecordPlaying = false;
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
void playAudio(String audioUrl) async {
|
|
|
|
await _audioPlayer.play(AssetSource(audioUrl));
|
|
setState(() {
|
|
isAudioPlaying = true;
|
|
});
|
|
print("Audio playing...");
|
|
}
|
|
|
|
void playRecordedAudio() async {
|
|
await _audioPlayer.play(DeviceFileSource(recordedFilePath));
|
|
setState(() {
|
|
isAudioRecordPlaying = true;
|
|
});
|
|
print("Audio playing...");
|
|
}
|
|
|
|
// Future<void> updateProgress(int subMateriId) async {
|
|
// SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
// String? authToken = prefs.getString('token');
|
|
// debugPrint("Token yang diambil: $authToken");
|
|
// final String apiUrl = '${BaseUrl.baseUrl}/progress/$subMateriId/update'; // Ganti dengan URL API yang sesuai
|
|
|
|
// final response = await http.post(
|
|
// Uri.parse(apiUrl),
|
|
// headers: {
|
|
// 'Authorization': 'Bearer $authToken',
|
|
// },
|
|
// body: jsonEncode({
|
|
// 'sub_materi_id': subMateriId, // ID submateri yang sedang dikerjakan
|
|
// }),
|
|
// );
|
|
|
|
// if (response.statusCode == 200) {
|
|
// // Progres berhasil diupdate
|
|
// print('Progress updated successfully');
|
|
// // ignore: use_build_context_synchronously
|
|
// _showCompletionDialog(context);
|
|
// } else {
|
|
// // Handle error
|
|
// print('Failed to update progress');
|
|
// }
|
|
// }
|
|
|
|
Future<void> updateStatusProgress() async {
|
|
SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
String? authToken = prefs.getString('token');
|
|
final String apiUrl = '${BaseUrl.baseUrl}/update_progress_status';
|
|
|
|
// Ambil list ID progress yang tersimpan
|
|
List<int> progressIds = prefs.getStringList('progressIds')?.map((e) => int.parse(e)).toList() ?? [];
|
|
|
|
if (progressIds.isEmpty) {
|
|
debugPrint('No progress IDs found to update.');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
final response = await http.post(
|
|
Uri.parse(apiUrl),
|
|
headers: {
|
|
'Authorization': 'Bearer $authToken',
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
},
|
|
body: jsonEncode({
|
|
'progress_ids': progressIds,
|
|
}),
|
|
);
|
|
|
|
if (response.statusCode == 200) {
|
|
debugPrint('Progress status updated successfully.');
|
|
_showCompletionDialog(context);
|
|
|
|
// Hapus setelah update
|
|
} else {
|
|
debugPrint('Failed to update progress status. Code: ${response.statusCode}');
|
|
debugPrint('Body: ${response.body}');
|
|
}
|
|
} catch (e) {
|
|
debugPrint('Error updating progress status: $e');
|
|
}
|
|
}
|
|
|
|
|
|
// Function to remove latihan ids from SharedPreferences after the action
|
|
Future<void> clearLatihanIds() async {
|
|
SharedPreferences prefs = await SharedPreferences.getInstance();
|
|
await prefs.remove('progressIds');
|
|
debugPrint("progressIds cleared from SharedPreferences.");
|
|
}
|
|
|
|
|
|
|
|
void _showCompletionDialog(BuildContext context) {
|
|
showDialog(
|
|
context: context,
|
|
builder: (BuildContext context) {
|
|
return AlertDialog(
|
|
title: Text('Selamat!'),
|
|
content: Text('Kamu telah menyelesaikan latihan ini.'),
|
|
actions: <Widget>[
|
|
TextButton(
|
|
onPressed: () {
|
|
Navigator.of(context).pop(); // Menutup dialog
|
|
context.go('/navigasi');
|
|
},
|
|
child: Text('OK'),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
);
|
|
}
|
|
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: Center(
|
|
child: Card(
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(15),
|
|
),
|
|
elevation: 10,
|
|
margin: const EdgeInsets.all(20),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.start,
|
|
children: [
|
|
Icon(
|
|
Icons.lightbulb,
|
|
color: secondPrimaryColor,
|
|
size: 40,
|
|
),
|
|
const SizedBox(width: 10),
|
|
Text(
|
|
'Simak Pelafalanmu',
|
|
style: TextStyle(
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.bold,
|
|
color: secondPrimaryColor,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 20),
|
|
Center(
|
|
child: Text(
|
|
latihan['potongan_ayat'],
|
|
style: TextStyle(
|
|
fontSize: 30,
|
|
color: blackColor,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
children: [
|
|
GestureDetector(
|
|
onTap: () {
|
|
playRecordedAudio();
|
|
print("Pelafalan Kamu tapped!");
|
|
},
|
|
child: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
'Pelafalan Kamu',
|
|
style: TextStyle(
|
|
color: secondPrimaryColor,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Icon(
|
|
isAudioRecordPlaying ? Icons.volume_up : Icons.volume_down,
|
|
color: secondPrimaryColor,
|
|
size: 30,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
print("Pelafalan Ustadz tapped!");
|
|
playAudio('audio/${latihan['correct_audio']}');
|
|
},
|
|
child: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: Colors.grey,
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
'Pelafalan Benar',
|
|
style: TextStyle(
|
|
color: secondPrimaryColor,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
Icon(
|
|
isAudioPlaying ? Icons.volume_up : Icons.volume_down,
|
|
color: secondPrimaryColor,
|
|
size: 30,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'Materi',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
TextButton(
|
|
onPressed: () {
|
|
// Logic untuk melihat video
|
|
},
|
|
child: Text(
|
|
'Lihat Video',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: secondPrimaryColor,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
latihan['materi_description'],
|
|
style: TextStyle(fontSize: 14, color: Colors.black),
|
|
textAlign: TextAlign.left,
|
|
),
|
|
const SizedBox(height: 15),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
ElevatedButton(
|
|
onPressed: () async {
|
|
if (currentStep < latihanData.length - 1) {
|
|
setState(() {
|
|
currentStep++; // Update step saat lanjut
|
|
});
|
|
context.go(
|
|
'/latihan',
|
|
extra: {
|
|
'id': widget.id,
|
|
'currentStep': currentStep,
|
|
},
|
|
);
|
|
} else {
|
|
// updateProgress(widget.id);
|
|
|
|
|
|
updateStatusProgress(); // Pass submateri_id (widget.id) and latihan_ids
|
|
await clearLatihanIds();
|
|
}
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: secondPrimaryColor,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 50,
|
|
vertical: 15,
|
|
),
|
|
minimumSize: Size(double.infinity, 50),
|
|
),
|
|
child: Text(
|
|
currentStep == latihanData.length - 1 ? 'Selesai' : 'Lanjut',
|
|
style: TextStyle(
|
|
color: whiteColor,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 10),
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
context.go(
|
|
'/latihan',
|
|
extra: {
|
|
'id': widget.id,
|
|
'currentStep': currentStep,
|
|
'latihanData': latihanData,
|
|
},
|
|
);
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 50,
|
|
vertical: 15,
|
|
),
|
|
minimumSize: Size(double.infinity, 50),
|
|
),
|
|
child: Text(
|
|
'Coba Lagi',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: secondPrimaryColor,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|