From 151c4e6264f86f5e6e300418a1ba706924fb1501 Mon Sep 17 00:00:00 2001
From: IRedDragonICY <hendik.suwoto@gmail.com>
Date: Tue, 19 Mar 2024 15:43:09 +0700
Subject: [PATCH] feat: improve home view layout and add games activity
dependency
This commit revamps the home view layout for better user experience by adding more interactive elements such as clickable cards and icon buttons. It also includes a new dependency for games activity. The changes include:
- Replaced text elements with cards to display user IPK and total SKS.
- Added clickable functionality to the IPK card to toggle visibility.
- Replaced navigation buttons with icon buttons for better visual appeal.
- Added games-activity:3.0.0 to the app dependencies in the build.gradle file.
---
app/build.gradle.kts | 1 +
.../java/com/uad/portal/views/HomeView.kt | 122 ++++++++++++++----
2 files changed, 95 insertions(+), 28 deletions(-)
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index e21f3ca..668791f 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -70,6 +70,7 @@ dependencies {
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0")
implementation("androidx.work:work-runtime-ktx:2.9.0")
implementation("androidx.appcompat:appcompat:1.6.1")
+ implementation("androidx.games:games-activity:3.0.0")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
diff --git a/app/src/main/java/com/uad/portal/views/HomeView.kt b/app/src/main/java/com/uad/portal/views/HomeView.kt
index de1d9b7..4435811 100644
--- a/app/src/main/java/com/uad/portal/views/HomeView.kt
+++ b/app/src/main/java/com/uad/portal/views/HomeView.kt
@@ -1,50 +1,116 @@
package com.uad.portal.views
import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
-import androidx.compose.material3.Button
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Book
+import androidx.compose.material.icons.filled.CalendarToday
+import androidx.compose.material.icons.filled.ExitToApp
+import androidx.compose.material.icons.filled.Settings
+import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
import coil.compose.rememberImagePainter
import com.uad.portal.MainViewModel
+
@Composable
fun HomeView(mainViewModel: MainViewModel) {
- Column(modifier = Modifier
- .fillMaxWidth()
- .padding(horizontal = 32.dp)) {
- Text("You are logged in as ${mainViewModel.userInfoState.value?.username ?: "Unknown"}")
- Text("Your IPK is ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}")
- Text("Your total SKS is ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}")
- mainViewModel.userInfoState.value?.avatarUrl?.let {
- if (it.isNotEmpty()) {
- Image(
- painter = rememberImagePainter(it),
- contentDescription = "User Avatar",
- modifier = Modifier.size(100.dp)
- )
+ val ipkVisible = remember { mutableStateOf(false) }
+ Column(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(24.dp),
+ verticalArrangement = Arrangement.Top
+ ) {
+
+ Row(verticalAlignment = Alignment.CenterVertically) {
+ mainViewModel.userInfoState.value?.avatarUrl?.let {
+ if (it.isNotEmpty()) {
+ Image(
+ painter = rememberImagePainter(it),
+ contentDescription = "User Avatar",
+ modifier = Modifier
+ .size(64.dp)
+ .clip(CircleShape)
+ )
+ }
}
+ Spacer(modifier = Modifier.width(16.dp))
+ Text("Halo, ${mainViewModel.userInfoState.value?.username ?: "Unknown"} 🤚", style = TextStyle(fontSize = 24.sp, fontWeight = FontWeight.Bold))
}
- Spacer(modifier = Modifier.height(16.dp))
- Button(onClick = { mainViewModel.navigate(Screen.Attendance) }) {
- Text("Absensi")
- }
+ Spacer(modifier = Modifier.height(24.dp))
- Spacer(modifier = Modifier.height(16.dp))
- Button(onClick = { mainViewModel.navigate(Screen.Reglab) }) {
- Text("Reglab")
- }
+ Row(
+ modifier = Modifier.fillMaxWidth(),
+ horizontalArrangement = Arrangement.SpaceBetween
+ ) {
+ Card(
+ modifier = Modifier
+ .weight(1f)
+ .aspectRatio(1f)
+ .clickable { ipkVisible.value = !ipkVisible.value },
+ shape = RoundedCornerShape(16.dp)
+ ) {
+ Box(contentAlignment = Alignment.Center) {
+ if (ipkVisible.value) {
+ Text("IPK: ${mainViewModel.userInfoState.value?.ipk ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
+ } else {
+ Text("Tekan untuk melihat IPK", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold)) // Add this line
+ }
+ }
+ }
+
+ Spacer(modifier = Modifier.width(24.dp))
- Spacer(modifier = Modifier.height(16.dp))
- Button(onClick = { mainViewModel.navigate(Screen.Settings) }) {
- Text("Settings")
+ Card(
+ modifier = Modifier
+ .weight(1f)
+ .aspectRatio(1f),
+ shape = RoundedCornerShape(16.dp)
+ ) {
+ Box(contentAlignment = Alignment.Center) {
+ Text("Total SKS: ${mainViewModel.userInfoState.value?.sks ?: "Unknown"}", style = TextStyle(fontSize = 20.sp, fontWeight = FontWeight.Bold))
+ }
+ }
}
- Spacer(modifier = Modifier.height(16.dp))
- Button(onClick = mainViewModel::logout) {
- Text("Logout")
+
+ Spacer(modifier = Modifier.height(24.dp))
+
+ Row(
+ modifier = Modifier.fillMaxWidth(),
+ horizontalArrangement = Arrangement.SpaceBetween
+ ) {
+ IconButton(onClick = { mainViewModel.navigate(Screen.Attendance) }) {
+ Icon(Icons.Filled.CalendarToday, contentDescription = "Absensi")
+ }
+
+ IconButton(onClick = { mainViewModel.navigate(Screen.Reglab) }) {
+ Icon(Icons.Filled.Book, contentDescription = "Reglab")
+ }
+
+ IconButton(onClick = { mainViewModel.navigate(Screen.Settings) }) {
+ Icon(Icons.Filled.Settings, contentDescription = "Settings")
+ }
+
+ IconButton(onClick = mainViewModel::logout) {
+ Icon(Icons.Filled.ExitToApp, contentDescription = "Logout")
+ }
}
}
}