Parcourir la source

added ConstraintLayout on jetpack compose

Khubaib il y a 1 an
Parent
commit
e7c4e56783

+ 14 - 1
.idea/deploymentTargetDropDown.xml

@@ -6,7 +6,20 @@
         <State />
       </entry>
       <entry key="app">
-        <State />
+        <State>
+          <runningDeviceTargetSelectedWithDropDown>
+            <Target>
+              <type value="RUNNING_DEVICE_TARGET" />
+              <deviceKey>
+                <Key>
+                  <type value="SERIAL_NUMBER" />
+                  <value value="1C051FDF60048Z" />
+                </Key>
+              </deviceKey>
+            </Target>
+          </runningDeviceTargetSelectedWithDropDown>
+          <timeTargetWasSelectedWithDropDown value="2024-04-23T17:36:51.222523127Z" />
+        </State>
       </entry>
     </value>
   </component>

+ 2 - 0
app/build.gradle.kts

@@ -124,6 +124,7 @@ dependencies {
     implementation("com.google.firebase:firebase-messaging:23.4.1")
     implementation("com.google.firebase:firebase-analytics:21.5.1")  //16.0.6
 //    implementation("com.firebase:firebase-jobdispatcher:0.8.5")
+    implementation("androidx.constraintlayout:constraintlayout-compose:1.0.1")
 
 
     testImplementation("junit:junit:4.13.2")
@@ -135,6 +136,7 @@ dependencies {
     debugImplementation("androidx.compose.ui:ui-test-manifest")
 
 
+
     //strongswan
     android{
         sourceSets {

+ 424 - 204
app/src/main/java/com/vpn/fastestvpnservice/screens/bottomNavBarScreens/HomeScreen.kt

@@ -57,6 +57,7 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.layout.layoutId
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalLifecycleOwner
 import androidx.compose.ui.res.colorResource
@@ -68,6 +69,10 @@ import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.window.DialogProperties
+import androidx.constraintlayout.compose.ChainStyle
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.ConstraintSet
+import androidx.constraintlayout.compose.Dimension
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.LifecycleOwner
@@ -323,7 +328,6 @@ fun Home(
         homeViewModel._mutableLiveDataValidate.value = null
     }
 
-
     Column(
         modifier = Modifier
             .background(MaterialTheme.colorScheme.background)
@@ -344,237 +348,222 @@ fun Home(
             )
         }
 
-
         // 1st box
-        Box(
-            modifier = Modifier
-//                .background(MaterialTheme.colorScheme.background)
-                .fillMaxSize()
-                .weight(0.6f),
-        ) {
-            Column(
+        ConstraintLayout(modifier = Modifier.fillMaxSize().weight(0.6f)) {
+            val (firstComposable, secondComposable) = createRefs()
+            val guideline = createGuidelineFromTop(0.6f)
+            Box(
                 modifier = Modifier
-                    .fillMaxSize()
-                    .background(Color.Transparent),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.spacedBy(-(115).dp)
+                    .constrainAs(firstComposable) {
+                        top.linkTo(parent.top)
+                        bottom.linkTo(guideline)
+                        start.linkTo(parent.start)
+                        end.linkTo(parent.end)
+                        width = Dimension.fillToConstraints
+                        height = Dimension.fillToConstraints
+                    }
+                    .background(Color.Transparent)
             ) {
-                // background image
-                Box(
+                Image(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .fillMaxHeight()
+                        .padding(top = 0.dp),
+                    painter = if (isConnect == App.CONNECTED) blueBackground() else pinkBackground(),
+                    contentDescription = "Home Map",
+                    contentScale = ContentScale.FillBounds,
+                )
+                Image(
                     modifier = Modifier
                         .fillMaxWidth()
-                        .fillMaxHeight(fraction = 0.6f)
+                        .fillMaxHeight()
+                        .padding(bottom = 0.dp)
+                        .alpha(if (isDarkTheme.value) 0.1F else 0.6F),
+                    painter = painterResource(id = R.drawable.map_home3x),
+                    contentDescription = "Home Map",
+                    contentScale = ContentScale.FillWidth,
+                )
+                Column(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .fillMaxHeight()
+                        .padding(bottom = 115.dp)
+//                            .offset(y = -(118).dp)
+                        .background(Color.Transparent),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.SpaceEvenly
                 ) {
-
-
-                    Image(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .fillMaxHeight()
-                            .padding(top = 0.dp),
-                        painter = if (isConnect == App.CONNECTED) blueBackground() else pinkBackground(),
-                        contentDescription = "Home Map",
-                        contentScale = ContentScale.FillBounds,
-                    )
-                    Image(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .fillMaxHeight()
-                            .padding(bottom = 0.dp)
-                            .alpha(if (isDarkTheme.value) 0.1F else 0.6F),
-                        painter = painterResource(id = R.drawable.map_home3x),
-                        contentDescription = "Home Map",
-                        contentScale = ContentScale.FillWidth,
+                    val serverObj = basePreferenceHelper.getConnectedServer()
+                    val serverDis = basePreferenceHelper.getIpinfo()
+
+                    var ipInfo = homeViewModel.mutableLiveDataIpInfo.observeAsState().value?.query
+                    ipInfo = if (isConnect == App.CONNECTED) serverObj?.ip.toString() else serverDis?.query
+                    AddText(
+                        text = "IP $ipInfo",
+                        size = 18.sp,
+                        color = MaterialTheme.colorScheme.primary,
+                        style = MaterialTheme.typography.customTypography.headlineLarge
                     )
-
-                    Column(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .fillMaxHeight()
-                            .padding(bottom = 115.dp)
-//                            .offset(y = -(118).dp)
-                            .background(Color.Transparent),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                        verticalArrangement = Arrangement.SpaceEvenly
+                    Row(
                     ) {
-                        val serverObj = basePreferenceHelper.getConnectedServer()
-                        val serverDis = basePreferenceHelper.getIpinfo()
-
-                        var ipInfo = homeViewModel.mutableLiveDataIpInfo.observeAsState().value?.query
-                        ipInfo = if (isConnect == App.CONNECTED) serverObj?.ip.toString() else serverDis?.query
-                        AddText(
-                            text = "IP $ipInfo",
-                            size = 18.sp,
-                            color = MaterialTheme.colorScheme.primary,
-                            style = MaterialTheme.typography.customTypography.headlineLarge
-                        )
-                        Row(
-                        ) {
-                            if (isConnect == App.CONNECTED) {
-                                val image = Utils.getDrawable(context, serverObj?.iso)
-                                if (image != 0) {
-                                    Image(
-                                        painter = painterResource(id = image),
-                                        contentDescription = "Country",
-                                        modifier = Modifier
-                                            .padding(end = 6.dp)
-                                            .size(20.dp)
-                                            .clip(CircleShape)
-                                            .paint(
-                                                painter = painterResource(id = image),
-                                                contentScale = ContentScale.FillHeight
-                                            )
-                                    )
-                                }
-                                AddText(
-                                    text = "${serverObj?.server_name ?: ""}, ${serverObj?.country ?: ""}",
-                                    size = 16.sp,
-                                    color = MaterialTheme.colorScheme.primary,
-                                )
-                            } else {
-                                val image = Utils.getDrawable(context, serverDis?.countryCode)
-                                Log.d("image_logo", "$image ${serverDis?.countryCode}")
-                                if (image != 0) {
-                                    Image(
-                                        painter = painterResource(id = image),
-                                        contentDescription = "Server",
-                                        modifier = Modifier
-                                            .padding(end = 6.dp)
-                                            .size(20.dp)
-                                            .clip(CircleShape)
-                                            .paint(
-                                                painter = painterResource(id = image),
-                                                contentScale = ContentScale.FillHeight
-                                            )
-                                    )
-                                }
-                                AddText(
-                                    text = "${serverDis?.city ?: ""}, ${serverDis?.country ?: ""}",
-                                    size = 16.sp,
-                                    color = MaterialTheme.colorScheme.primary
+                        if (isConnect == App.CONNECTED) {
+                            val image = Utils.getDrawable(context, serverObj?.iso)
+                            if (image != 0) {
+                                Image(
+                                    painter = painterResource(id = image),
+                                    contentDescription = "Country",
+                                    modifier = Modifier
+                                        .padding(end = 6.dp)
+                                        .size(20.dp)
+                                        .clip(CircleShape)
+                                        .paint(
+                                            painter = painterResource(id = image),
+                                            contentScale = ContentScale.FillHeight
+                                        )
                                 )
                             }
-                        }
-                        if (isConnect == App.CONNECTED) {
                             AddText(
-                                text = "Connected",
-                                size = 18.sp,
-                                color = MaterialTheme.colorScheme.surfaceContainerHigh,
-                                style = MaterialTheme.typography.customTypography.displaySmall
+                                text = "${serverObj?.server_name ?: ""}, ${serverObj?.country ?: ""}",
+                                size = 16.sp,
+                                color = MaterialTheme.colorScheme.primary,
                             )
-                        }
-                        else if (isConnect == App.DISCONNECTED) {
-                            AddText(
-                                text = "Disconnected",
-                                size = 18.sp,
-                                color = MaterialTheme.colorScheme.surfaceTint,
-                                style = MaterialTheme.typography.customTypography.displaySmall
-                            )
-                        }
-                        else if (isConnect == App.CONNECTING) {
+                        } else {
+                            val image = Utils.getDrawable(context, serverDis?.countryCode)
+                            Log.d("image_logo", "$image ${serverDis?.countryCode}")
+                            if (image != 0) {
+                                Image(
+                                    painter = painterResource(id = image),
+                                    contentDescription = "Server",
+                                    modifier = Modifier
+                                        .padding(end = 6.dp)
+                                        .size(20.dp)
+                                        .clip(CircleShape)
+                                        .paint(
+                                            painter = painterResource(id = image),
+                                            contentScale = ContentScale.FillHeight
+                                        )
+                                )
+                            }
                             AddText(
-                                text = "Connecting...",
-                                size = 18.sp,
-                                color = MaterialTheme.colorScheme.surfaceTint,
-                                style = MaterialTheme.typography.customTypography.displaySmall
+                                text = "${serverDis?.city ?: ""}, ${serverDis?.country ?: ""}",
+                                size = 16.sp,
+                                color = MaterialTheme.colorScheme.primary
                             )
                         }
                     }
-
+                    if (isConnect == App.CONNECTED) {
+                        AddText(
+                            text = "Connected",
+                            size = 18.sp,
+                            color = MaterialTheme.colorScheme.surfaceContainerHigh,
+                            style = MaterialTheme.typography.customTypography.displaySmall
+                        )
+                    }
+                    else if (isConnect == App.DISCONNECTED) {
+                        AddText(
+                            text = "Disconnected",
+                            size = 18.sp,
+                            color = MaterialTheme.colorScheme.surfaceTint,
+                            style = MaterialTheme.typography.customTypography.displaySmall
+                        )
+                    }
+                    else if (isConnect == App.CONNECTING) {
+                        AddText(
+                            text = "Connecting...",
+                            size = 18.sp,
+                            color = MaterialTheme.colorScheme.surfaceTint,
+                            style = MaterialTheme.typography.customTypography.displaySmall
+                        )
+                    }
                 }
-
-                // connect button
-                Box(modifier = Modifier
-//                    .fillMaxWidth()
-//                    .fillMaxHeight()
+            }
+            Box(
+                modifier = Modifier
+                    .constrainAs(secondComposable) {
+                        top.linkTo(guideline)
+                        bottom.linkTo(firstComposable.bottom)
+                        start.linkTo(parent.start)
+                        end.linkTo(parent.end)
+                        width = Dimension.value(234.dp)
+                        height = Dimension.value(234.dp)
+                    }
                     .background(Color.Transparent)
-                    .align(Alignment.CenterHorizontally),
-                ) {
-                    IconButton(
-                        onClick = {
-                            val connectedServer = basePreferenceHelper.getConnectedServer()
-                            val serverObject = basePreferenceHelper.getServerObject()
-
-                            Log.d("test_conn_ser_obj", "cs = ${connectedServer?.server_name} so = ${serverObject?.server_name}")
-                            Log.d("isConnect_State", "onClick{} -> $isConnect")
-                            Log.d("isConnect_State_vpn", "onClick{} -> $isConnect")
-
-                            prefHelper.getProduct()?.identifier.let {
-                                val identifier = it
+            ) {
+                IconButton(
+                    onClick = {
+                        val connectedServer = basePreferenceHelper.getConnectedServer()
+                        val serverObject = basePreferenceHelper.getServerObject()
+                        Log.d("test_conn_ser_obj", "cs = ${connectedServer?.server_name} so = ${serverObject?.server_name}")
+                        Log.d("isConnect_State", "onClick{} -> $isConnect")
+                        Log.d("isConnect_State_vpn", "onClick{} -> $isConnect")
+                        prefHelper.getProduct()?.identifier.let {
+                            val identifier = it
+
+                            if (identifier == AppEnum.FREE.key) {
+                                Log.d("isConnect_State", "identifier -> $identifier")
+                                Screen.Subscription.isTrue = true
+                                navHostController.navigate(
+                                    Screen.Subscription.route
+                                )
 
-                                if (identifier == AppEnum.FREE.key) {
-                                    Log.d("isConnect_State", "identifier -> $identifier")
-                                    Screen.Subscription.isTrue = true
-                                    navHostController.navigate(
-                                        Screen.Subscription.route
-                                    )
+                            }
+                            else {
 
+                                prefHelper.getServerObject()?.let {
+                                    prefHelper.setConnectedServer(it)
                                 }
-                                else {
+                                Log.d("isConnect_State", "identifier -> $identifier")
+                                if (isConnect == App.CONNECTED || isConnect == App.CONNECTING) {
+                                    Log.d("isConnect_State_vpn", "stopVPN")
+                                    vpnConnectionsUtil.stopVpn()
+                                    homeViewModel.getIp()
+                                } else {
+                                    Log.d("isConnect_State_vpn", "startVPN")
 
-                                    prefHelper.getServerObject()?.let {
-                                        prefHelper.setConnectedServer(it)
+                                    if (basePreferenceHelper.getServerObject() != null) {
+                                        vpnConnectionsUtil.startVpn()
                                     }
-                                    Log.d("isConnect_State", "identifier -> $identifier")
-                                    if (isConnect == App.CONNECTED || isConnect == App.CONNECTING) {
-                                        Log.d("isConnect_State_vpn", "stopVPN")
-                                        vpnConnectionsUtil.stopVpn()
-                                        homeViewModel.getIp()
-                                    } else {
-                                        Log.d("isConnect_State_vpn", "startVPN")
-
-                                        if (basePreferenceHelper.getServerObject() != null) {
-                                            vpnConnectionsUtil.startVpn()
-                                        }
-                                        else {
-                                            toChangeServer.value = false
-                                            navHostController.navigate(
-                                                Screen.ServerList.route
-                                            )
-                                            Screen.ServerList.isTrue = true
-                                            Log.d("button_click_change", "Pressed")
-                                        }
+                                    else {
+                                        toChangeServer.value = false
+                                        navHostController.navigate(
+                                            Screen.ServerList.route
+                                        )
+                                        Screen.ServerList.isTrue = true
+                                        Log.d("button_click_change", "Pressed")
                                     }
+                                }
 
 
 
-                                    val widgetIntent = Intent(context, SimpleAppWidget::class.java)
-                                    widgetIntent.action = SimpleAppWidget.ACTION_CHANGE_SERVER
-                                    context.sendBroadcast(widgetIntent)
-                                }
+                                val widgetIntent = Intent(context, SimpleAppWidget::class.java)
+                                widgetIntent.action = SimpleAppWidget.ACTION_CHANGE_SERVER
+                                context.sendBroadcast(widgetIntent)
                             }
-
-                        },
-                        modifier = Modifier
-                            .padding(bottom = 0.dp)
-//                    .fillMaxSize()
-                            .size(230.dp)
-//                            .align(Alignment.Center)
-//                            .offset(y = 117.dp)
-                        ,
-                    )
-                    {
-                        if (isConnect == App.CONNECTED) {
-                            Image(
-                                painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_connect_dark)
-                                else painterResource(id = R.drawable.iv_connect),
-                                contentDescription = "Home Map",
-                                contentScale = ContentScale.FillBounds,
-                                modifier = Modifier.fillMaxSize()
-                            )
-                        } else {
-                            Image(
-                                painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_disconnect_dark)
-                                else painterResource(id = R.drawable.iv_disconnect),
-                                contentDescription = "Home Map",
-                                contentScale = ContentScale.FillBounds,
-                                modifier = Modifier.fillMaxSize()
-                            )
                         }
-
+                    },
+                    modifier = Modifier
+                        .padding(bottom = 0.dp)
+                        .size(234.dp),
+                )
+                {
+                    if (isConnect == App.CONNECTED) {
+                        Image(
+                            painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_connect_dark)
+                            else painterResource(id = R.drawable.iv_connect),
+                            contentDescription = "Home Map",
+                            contentScale = ContentScale.FillBounds,
+                            modifier = Modifier.fillMaxSize()
+                        )
+                    } else {
+                        Image(
+                            painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_disconnect_dark)
+                            else painterResource(id = R.drawable.iv_disconnect),
+                            contentDescription = "Home Map",
+                            contentScale = ContentScale.FillBounds,
+                            modifier = Modifier.fillMaxSize()
+                        )
                     }
                 }
-
             }
         }
 
@@ -714,11 +703,8 @@ fun Home(
         }
     }
 
-
-
 }
 
-
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ColumnScope.ShowServerDialog(
@@ -1295,3 +1281,237 @@ fun HomePreview() {
 fun HomePreviewDark() {
 //    Home(rememberNavController())
 }
+
+
+// 1st box
+//        Box(
+//            modifier = Modifier
+////                .background(MaterialTheme.colorScheme.background)
+//                .fillMaxSize()
+//                .weight(0.6f),
+//        ) {
+//            Column(
+//                modifier = Modifier
+//                    .fillMaxSize()
+//                    .background(Color.Transparent),
+//                horizontalAlignment = Alignment.CenterHorizontally,
+//                verticalArrangement = Arrangement.spacedBy(-(115).dp)
+//            ) {
+//                // background image
+//                Box(
+//                    modifier = Modifier
+//                        .fillMaxWidth()
+//                        .fillMaxHeight(fraction = 0.6f)
+//                ) {
+//
+//
+//                    Image(
+//                        modifier = Modifier
+//                            .fillMaxWidth()
+//                            .fillMaxHeight()
+//                            .padding(top = 0.dp),
+//                        painter = if (isConnect == App.CONNECTED) blueBackground() else pinkBackground(),
+//                        contentDescription = "Home Map",
+//                        contentScale = ContentScale.FillBounds,
+//                    )
+//                    Image(
+//                        modifier = Modifier
+//                            .fillMaxWidth()
+//                            .fillMaxHeight()
+//                            .padding(bottom = 0.dp)
+//                            .alpha(if (isDarkTheme.value) 0.1F else 0.6F),
+//                        painter = painterResource(id = R.drawable.map_home3x),
+//                        contentDescription = "Home Map",
+//                        contentScale = ContentScale.FillWidth,
+//                    )
+//
+//                    Column(
+//                        modifier = Modifier
+//                            .fillMaxWidth()
+//                            .fillMaxHeight()
+//                            .padding(bottom = 115.dp)
+////                            .offset(y = -(118).dp)
+//                            .background(Color.Transparent),
+//                        horizontalAlignment = Alignment.CenterHorizontally,
+//                        verticalArrangement = Arrangement.SpaceEvenly
+//                    ) {
+//                        val serverObj = basePreferenceHelper.getConnectedServer()
+//                        val serverDis = basePreferenceHelper.getIpinfo()
+//
+//                        var ipInfo = homeViewModel.mutableLiveDataIpInfo.observeAsState().value?.query
+//                        ipInfo = if (isConnect == App.CONNECTED) serverObj?.ip.toString() else serverDis?.query
+//                        AddText(
+//                            text = "IP $ipInfo",
+//                            size = 18.sp,
+//                            color = MaterialTheme.colorScheme.primary,
+//                            style = MaterialTheme.typography.customTypography.headlineLarge
+//                        )
+//                        Row(
+//                        ) {
+//                            if (isConnect == App.CONNECTED) {
+//                                val image = Utils.getDrawable(context, serverObj?.iso)
+//                                if (image != 0) {
+//                                    Image(
+//                                        painter = painterResource(id = image),
+//                                        contentDescription = "Country",
+//                                        modifier = Modifier
+//                                            .padding(end = 6.dp)
+//                                            .size(20.dp)
+//                                            .clip(CircleShape)
+//                                            .paint(
+//                                                painter = painterResource(id = image),
+//                                                contentScale = ContentScale.FillHeight
+//                                            )
+//                                    )
+//                                }
+//                                AddText(
+//                                    text = "${serverObj?.server_name ?: ""}, ${serverObj?.country ?: ""}",
+//                                    size = 16.sp,
+//                                    color = MaterialTheme.colorScheme.primary,
+//                                )
+//                            } else {
+//                                val image = Utils.getDrawable(context, serverDis?.countryCode)
+//                                Log.d("image_logo", "$image ${serverDis?.countryCode}")
+//                                if (image != 0) {
+//                                    Image(
+//                                        painter = painterResource(id = image),
+//                                        contentDescription = "Server",
+//                                        modifier = Modifier
+//                                            .padding(end = 6.dp)
+//                                            .size(20.dp)
+//                                            .clip(CircleShape)
+//                                            .paint(
+//                                                painter = painterResource(id = image),
+//                                                contentScale = ContentScale.FillHeight
+//                                            )
+//                                    )
+//                                }
+//                                AddText(
+//                                    text = "${serverDis?.city ?: ""}, ${serverDis?.country ?: ""}",
+//                                    size = 16.sp,
+//                                    color = MaterialTheme.colorScheme.primary
+//                                )
+//                            }
+//                        }
+//                        if (isConnect == App.CONNECTED) {
+//                            AddText(
+//                                text = "Connected",
+//                                size = 18.sp,
+//                                color = MaterialTheme.colorScheme.surfaceContainerHigh,
+//                                style = MaterialTheme.typography.customTypography.displaySmall
+//                            )
+//                        }
+//                        else if (isConnect == App.DISCONNECTED) {
+//                            AddText(
+//                                text = "Disconnected",
+//                                size = 18.sp,
+//                                color = MaterialTheme.colorScheme.surfaceTint,
+//                                style = MaterialTheme.typography.customTypography.displaySmall
+//                            )
+//                        }
+//                        else if (isConnect == App.CONNECTING) {
+//                            AddText(
+//                                text = "Connecting...",
+//                                size = 18.sp,
+//                                color = MaterialTheme.colorScheme.surfaceTint,
+//                                style = MaterialTheme.typography.customTypography.displaySmall
+//                            )
+//                        }
+//                    }
+//
+//                }
+//
+//                // connect button
+//                Box(modifier = Modifier
+////                    .fillMaxWidth()
+////                    .fillMaxHeight()
+//                    .background(Color.Transparent)
+//                    .align(Alignment.CenterHorizontally),
+//                ) {
+//                    IconButton(
+//                        onClick = {
+//                            val connectedServer = basePreferenceHelper.getConnectedServer()
+//                            val serverObject = basePreferenceHelper.getServerObject()
+//
+//                            Log.d("test_conn_ser_obj", "cs = ${connectedServer?.server_name} so = ${serverObject?.server_name}")
+//                            Log.d("isConnect_State", "onClick{} -> $isConnect")
+//                            Log.d("isConnect_State_vpn", "onClick{} -> $isConnect")
+//
+//                            prefHelper.getProduct()?.identifier.let {
+//                                val identifier = it
+//
+//                                if (identifier == AppEnum.FREE.key) {
+//                                    Log.d("isConnect_State", "identifier -> $identifier")
+//                                    Screen.Subscription.isTrue = true
+//                                    navHostController.navigate(
+//                                        Screen.Subscription.route
+//                                    )
+//
+//                                }
+//                                else {
+//
+//                                    prefHelper.getServerObject()?.let {
+//                                        prefHelper.setConnectedServer(it)
+//                                    }
+//                                    Log.d("isConnect_State", "identifier -> $identifier")
+//                                    if (isConnect == App.CONNECTED || isConnect == App.CONNECTING) {
+//                                        Log.d("isConnect_State_vpn", "stopVPN")
+//                                        vpnConnectionsUtil.stopVpn()
+//                                        homeViewModel.getIp()
+//                                    } else {
+//                                        Log.d("isConnect_State_vpn", "startVPN")
+//
+//                                        if (basePreferenceHelper.getServerObject() != null) {
+//                                            vpnConnectionsUtil.startVpn()
+//                                        }
+//                                        else {
+//                                            toChangeServer.value = false
+//                                            navHostController.navigate(
+//                                                Screen.ServerList.route
+//                                            )
+//                                            Screen.ServerList.isTrue = true
+//                                            Log.d("button_click_change", "Pressed")
+//                                        }
+//                                    }
+//
+//
+//
+//                                    val widgetIntent = Intent(context, SimpleAppWidget::class.java)
+//                                    widgetIntent.action = SimpleAppWidget.ACTION_CHANGE_SERVER
+//                                    context.sendBroadcast(widgetIntent)
+//                                }
+//                            }
+//
+//                        },
+//                        modifier = Modifier
+//                            .padding(bottom = 0.dp)
+////                    .fillMaxSize()
+//                            .size(230.dp)
+////                            .align(Alignment.Center)
+////                            .offset(y = 117.dp)
+//                        ,
+//                    )
+//                    {
+//                        if (isConnect == App.CONNECTED) {
+//                            Image(
+//                                painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_connect_dark)
+//                                else painterResource(id = R.drawable.iv_connect),
+//                                contentDescription = "Home Map",
+//                                contentScale = ContentScale.FillBounds,
+//                                modifier = Modifier.fillMaxSize()
+//                            )
+//                        } else {
+//                            Image(
+//                                painter = if (isDarkTheme.value) painterResource(id = R.drawable.iv_disconnect_dark)
+//                                else painterResource(id = R.drawable.iv_disconnect),
+//                                contentDescription = "Home Map",
+//                                contentScale = ContentScale.FillBounds,
+//                                modifier = Modifier.fillMaxSize()
+//                            )
+//                        }
+//
+//                    }
+//                }
+//
+//            }
+//        }