Skip to content

Commit

Permalink
Merge pull request #74 from IoTeaTime/feature/69-kan-142-cctv-card-De…
Browse files Browse the repository at this point in the history
…viceInfo-page

feat : CCTV 카드 및 기기정보 페이지 구현
  • Loading branch information
kimmatches authored Nov 7, 2024
2 parents 4d4a942 + 29e4871 commit a97ea49
Show file tree
Hide file tree
Showing 14 changed files with 443 additions and 69 deletions.
30 changes: 25 additions & 5 deletions app/src/main/java/com/example/mhnfe/data/model/CCTV.kt
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ package com.example.mhnfe.data.model

data class CCTV(
val id: String,
val name: String,
val deviceName: String, // 기기명
val model: String, // 기종
val os: String, // OS
val appVersion: String, // 앱 버전
val batteryStatus: Int, // 배터리 상태
val networkStatus: String // 네트워크 상태
)

//아무것도 없는거 테스트 할때
Expand All @@ -12,14 +17,29 @@ val emptyCCTVList = emptyList<CCTV>()
val sampleCCTVList = listOf(
CCTV(
id = "1",
name = "주방"
deviceName = "주방",
model = "Flip5",
os = "Android 10",
appVersion = "2.3.1",
batteryStatus = 70,
networkStatus = "양호"
),
CCTV(
id = "2",
name = "거실"
deviceName = "거실",
model = "s24",
os = "Android 10",
appVersion = "3.0.0",
batteryStatus = 30,
networkStatus = "나쁨"
),
CCTV(
id = "3",
name = "방1"
)
deviceName = "방1",
model = "s23",
os = "Android 12",
appVersion = "1.5.2",
batteryStatus = 95,
networkStatus = "나쁨"
),
)
18 changes: 15 additions & 3 deletions app/src/main/java/com/example/mhnfe/ui/navigation/AppNavigation.kt
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import com.amazonaws.mobile.client.AWSMobileClient
import com.example.mhnfe.di.UserType
import com.example.mhnfe.ui.bottombar.BottomNavigationBar
import com.example.mhnfe.ui.screens.auth.StartUpScreen
import com.example.mhnfe.ui.screens.monitoring.DeviceInfoScreen
import com.example.mhnfe.ui.screens.monitoring.GroupScreen
import com.example.mhnfe.ui.screens.qr.QRGenerateScreen
import com.example.mhnfe.ui.screens.qr.QRViewModel
Expand All @@ -39,7 +40,9 @@ sealed class NavRoutes(val route: String) {

object Monitoring : NavRoutes("monitoring") {
object Group : NavRoutes("monitoring/group")
object DeviceInformation : NavRoutes("device_information")
object DeviceInformation : NavRoutes("device_information/{cctvId}") {
fun createRoute(cctvId: String) = "device_information/$cctvId"
}
object QRScanner : NavRoutes("qr_scanner")
object QRGenerate : NavRoutes("qr_generate/{userType}") {
fun createRoute(userType: UserType) = "qr_generate/${userType.name.lowercase()}"
Expand Down Expand Up @@ -155,8 +158,17 @@ fun MainContent(
navController = bottomNavController // bottomNavController 전달
)
}
composable(NavRoutes.Monitoring.DeviceInformation.route) {
// DeviceInformationScreen
composable(
route = NavRoutes.Monitoring.DeviceInformation.route,
arguments = listOf(
navArgument("cctvId") { type = NavType.StringType }
)
) { backStackEntry ->
val cctvId = backStackEntry.arguments?.getString("cctvId") ?: return@composable
DeviceInfoScreen(
cctvId = cctvId,
navController = bottomNavController
)
}
composable(NavRoutes.Monitoring.QRScanner.route) {
// QRScannerScreen
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,8 @@ import com.example.mhnfe.R
import com.example.mhnfe.ui.components.MainTextBox
import com.example.mhnfe.ui.components.SubTopBar
import com.example.mhnfe.ui.components.MiddleButton
import com.example.mhnfe.ui.theme.mainBlack
import com.example.mhnfe.ui.theme.mainGray
import com.example.mhnfe.ui.theme.mainYellow
import com.example.mhnfe.ui.theme.mainGray3

@Composable
fun LoginScreen(
Expand Down Expand Up @@ -61,7 +59,7 @@ fun LoginScreen(
) {
// 로고 이미지
Image(
painter = painterResource(id = R.drawable.logo2),
painter = painterResource(id = R.drawable.logo),
contentDescription = "로고",
modifier = modifier.size(250.dp),
contentScale = ContentScale.Fit
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
package com.example.mhnfe.ui.screens.monitoring

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.example.mhnfe.R
import com.example.mhnfe.data.model.sampleCCTVList
import com.example.mhnfe.ui.components.SubTopBar
import com.example.mhnfe.ui.theme.Typography
import com.example.mhnfe.ui.theme.mainBlack
import com.example.mhnfe.ui.theme.mainGray2

@Composable
fun DeviceInfoScreen(
modifier: Modifier = Modifier,
cctvId: String,
navController: NavController,
) {
val cctv = sampleCCTVList.find { it.id == cctvId }

Scaffold(
topBar = {
SubTopBar(text = "기기 정보", onBack = { navController.popBackStack()})
},
) { innerPadding ->
if (cctv != null) {
Column(
modifier = modifier
.padding(innerPadding)
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top
) {
Column(
modifier = modifier.fillMaxWidth().wrapContentHeight().padding(vertical = 45.dp, horizontal = 34.dp),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(40.dp , alignment = Alignment.CenterVertically)
) {
DeviceInfoCard(title = "기기 정보", label1 = "기기명", label2 = "기종", value1 = cctv.deviceName, value2 = cctv.model)
DeviceInfoCard(title = "버전 관리", label1 = "OS", label2 = "앱 버전", value1 = cctv.os, value2 = cctv.appVersion)
DeviceInfoCard(title = "연결 상태", label1 = "배터리", label2 = "네트워크 상태", value1 = cctv.batteryStatus.toString(), value2 = cctv.networkStatus)
Box(
modifier = modifier.fillMaxWidth(),
contentAlignment = Alignment.CenterEnd
) {
Image(
painter = painterResource(id = R.drawable.logo2),
contentDescription = "로고",
modifier = modifier.size(147.dp, 168.dp),
contentScale = ContentScale.Fit
)
}

}
}
} else {
Column (
modifier = modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
){
Text(
style = Typography.bodyMedium,
text = "CCTV 정보를 찾을 수 없습니다.",
color = mainBlack
)
}
}
}
}

//기기 정보 UI
@Composable
private fun DeviceInfoCard(
modifier: Modifier = Modifier,
title : String,
label1: String, value1: String,
label2: String, value2: String
){
Column(
modifier = modifier.fillMaxWidth().wrapContentHeight(),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(12.dp, alignment = Alignment.CenterVertically)
) {
Text(title)
Column(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.background(color = mainGray2, shape = RoundedCornerShape(8.dp))
,
) {
Row(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(horizontal = 13.dp, vertical = 10.dp),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = label1,
modifier = modifier.width(120.dp)
)
Text(
text = value1,
modifier = Modifier
.wrapContentWidth(Alignment.Start)
)
}
HorizontalDivider(color = Color.White, thickness = 1.dp)
Row(
modifier = modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(horizontal = 13.dp, vertical = 10.dp),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
) {
Text(
text = label2,
modifier = Modifier.width(120.dp)
)
Text(
text = value2,
modifier = modifier
.wrapContentWidth(Alignment.Start)
)
}
}
}

}

@Preview(showBackground = true)
@Composable
private fun GroupScreenPreview() {
val navController = rememberNavController()
val cctv = sampleCCTVList.first()
DeviceInfoScreen(cctvId = cctv.id,navController = navController)
// GroupScreen(
// userType = UserType.VIEWER,
// navController = navController
// )
}
Loading

0 comments on commit a97ea49

Please sign in to comment.