Cambio de estilo responsive a diferentes dispositivos

android/app/google-services.json

@@ -1,13 +1,13 @@
 {
   "project_info": {
-    "project_number": "649637283755",
-    "project_id": "smartstop-e9b90",
-    "storage_bucket": "smartstop-e9b90.appspot.com"
+    "project_number": "11572792844",
+    "project_id": "smartstop-4c9d4",
+    "storage_bucket": "smartstop-4c9d4.appspot.com"
   },
   "client": [
     {
       "client_info": {
-        "mobilesdk_app_id": "1:649637283755:android:02f9b01c4acf051ca174ee",
+        "mobilesdk_app_id": "1:11572792844:android:48bdd77219dd947a40e829",
         "android_client_info": {
           "package_name": "com.smartstop"
         }
@@ -15,7 +15,7 @@
       "oauth_client": [],
       "api_key": [
         {
-          "current_key": "AIzaSyCvcskItwpjqoA2wiNv4xwHhNoYsinfU2s"
+          "current_key": "AIzaSyCkb5OFVVkmRi1AnTx3_7_3pb2nxJtAnCw"
         }
       ],
       "services": {

android/app/google-services.json.rm

@@ -0,0 +1,29 @@
+{
+  "project_info": {
+    "project_number": "649637283755",
+    "project_id": "smartstop-e9b90",
+    "storage_bucket": "smartstop-e9b90.appspot.com"
+  },
+  "client": [
+    {
+      "client_info": {
+        "mobilesdk_app_id": "1:649637283755:android:02f9b01c4acf051ca174ee",
+        "android_client_info": {
+          "package_name": "com.smartstop"
+        }
+      },
+      "oauth_client": [],
+      "api_key": [
+        {
+          "current_key": "AIzaSyCvcskItwpjqoA2wiNv4xwHhNoYsinfU2s"
+        }
+      ],
+      "services": {
+        "appinvite_service": {
+          "other_platform_oauth_client": []
+        }
+      }
+    }
+  ],
+  "configuration_version": "1"
+}

package.json

@@ -19,6 +19,7 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-device-info": "^10.13.1",
+    "react-native-responsive-fontsize": "^0.5.1",
     "react-native-vector-icons": "^10.0.2"
   },
   "devDependencies": {

src/domain/const/index.ts

@@ -1,5 +1,5 @@
 const COLUMNS = 3;
 const ROWS = 7;
-const BUSES_BY_PAGE = COLUMNS * ROWS;
+const BUSES_BY_PAGE = (COLUMNS * ROWS);
 
 export {COLUMNS, ROWS, BUSES_BY_PAGE};

src/domain/repositories/Arrival.ts

@@ -3,6 +3,8 @@ interface Arrival {
   planned: string;
   estimatedGPS: string;
   distanceGPS: string;
+  textoLlegada: string;
 }
 
 export default Arrival;
+ 

src/domain/services/BusStopInfoService.ts

@@ -33,6 +33,7 @@ class BusStopInfoService {
   }
 
   getNextArraival(lineNumber: string): Arrival {
+    
     const currentTime = moment().local();
 
     const nextArraival = this.getLinesByNumber(lineNumber).arrivals.find(
@@ -57,6 +58,7 @@ class BusStopInfoService {
   }
 
   checkArraivalTime(arrival: Arrival): string {
+ 
     const compareTime = moment();
     compareTime.set('hour', getHours(arrival.estimatedGPS));
     compareTime.set('minute', getMinutes(arrival.estimatedGPS));

src/infraestructure/api/models/Llegada.ts

@@ -3,6 +3,7 @@ interface Llegada {
   Planificada: string;
   EstimadaGPS: string;
   DistanciaGPS: string;
+  textoLlegada: String;
 }
 
 export default Llegada;

src/infraestructure/hooks/useDevices.ts

@@ -21,8 +21,16 @@ export interface State {
   stopMessage: string;
   stopName: string;
 }
-//const deviceId = DeviceInfo.getUniqueId();
-const DEVICE_ID ='TTM543870hyt';// String(deviceId);
+
+//const DEVICE_ID ='TTM543870hyt';// String(deviceId);
+const DeviceInfo = require('react-native-device-info');
+let DEVICE_ID = "";
+async function obtenerDeviceId() {
+  DEVICE_ID = await Promise.resolve(DeviceInfo.getUniqueId());   
+}
+obtenerDeviceId();
+
+
 
 const useDevices = () => {
   const [state, setState] = useState<State>({
@@ -38,10 +46,10 @@ const useDevices = () => {
   const username = remoteConfig().getString(RemoteConfigKeys.USER);
   const password = remoteConfig().getString(RemoteConfigKeys.PASSWORD);
   const rut = remoteConfig().getString(RemoteConfigKeys.RUT);  
-  const changePageInterval = remoteConfig().getNumber(
+  const changePageInterval =remoteConfig().getNumber(
     RemoteConfigKeys.CHANGE_PAGE_INTERVAL,
   );
-  
+
   const updateBusesListInterval = remoteConfig().getNumber(
     RemoteConfigKeys.UPDATE_BUSES_LIST_INTERVAL,
   );
@@ -90,19 +98,17 @@ const useDevices = () => {
           .pruneBusList(state.currentIndex, BUSES_BY_PAGE)
           .map(line => {
             try {
-               
-
               if (line.arrivals && line.arrivals.length > 0) 
               {
                     const nextArraival = busStopInfoService.getNextArraival(
                       line.lineNumber,
                     );
-
-                     estimatedArrivalTimeInMinutes =busStopInfoService.checkArraivalTime(nextArraival); 
+                     //estimatedArrivalTimeInMinutes =busStopInfoService.checkArraivalTime(nextArraival); 
+                     estimatedArrivalTimeInMinutes =nextArraival.textoLlegada ; 
               }
               else
               {
-                estimatedArrivalTimeInMinutes = "Sin información";
+                estimatedArrivalTimeInMinutes = "Sin información"; 
               }  
               const lineLetter =
                 busStopInfoService.getLineLetterFromDescription(
@@ -173,11 +179,12 @@ const useDevices = () => {
             deviceId: DEVICE_ID,
             token,
           });
-
-        const {stopName} = await devicesRepository.whoAmI({
+    
+          const {stopName} = await devicesRepository.whoAmI({
           deviceId: DEVICE_ID,
           token,
         });
+    
 
         if (!lineDetails) {
           setState((prevState: State) => ({
@@ -227,23 +234,25 @@ const useDevices = () => {
   useEffect(() => {
     let timeout: NodeJS.Timeout;
 
-    const init = () => {
-      setState(prevState => {
-        const currentIndex = prevState.currentIndex || 1;
-        const isGreatherThanLinesLength =
-          currentIndex + BUSES_BY_PAGE >= state.lines.length;
 
+     const init = () => {
+      
+      setState(prevState => {
+        //const PaginasAMostrar = Math.ceil(state.lines.length / BUSES_BY_PAGE);
+        const currentIndex = prevState.currentIndex || 0;
+        const isGreatherThanLinesLength =
+          currentIndex + BUSES_BY_PAGE >= state.lines.length;          
         return {
           ...prevState,
           currentIndex: isGreatherThanLinesLength
             ? 0
-            : (prevState.currentIndex || 1 + BUSES_BY_PAGE) %
-              state.lines.length,
+            : prevState.currentIndex + BUSES_BY_PAGE/*((prevState.currentIndex || 1) + BUSES_BY_PAGE) %
+              state.lines.length*/,
         };
       });
 
       timeout = setTimeout(init, changePageInterval);
-    };
+    }; 
 
     init();
 

src/infraestructure/repositories/mappers/toDeviceInfoResponse.ts

@@ -22,13 +22,14 @@ const toDeviceInfoResponse = (
     } = linea;
 
     const mappedArrivals: Arrival[] = Llegadas.map(llegada => {
-      const {Patente, Planificada, EstimadaGPS, DistanciaGPS} = llegada;
+      const {Patente, Planificada, EstimadaGPS, DistanciaGPS,textoLlegada} = llegada;
 
       return {
         carPlate: Patente,
         planned: Planificada,
         estimatedGPS: EstimadaGPS,
         distanceGPS: DistanciaGPS,
+        textoLlegada: textoLlegada,
       };
     });
 

src/presentation/components/Banner.tsx

@@ -1,20 +1,21 @@
-import {View, Text, StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import {View, Text, StyleSheet, StyleProp, ViewStyle, TextStyle} from 'react-native';
 
 interface BannerProps {
   text: string;
   style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>; // Nueva propiedad para estilos de texto
 }
 
-const Banner = ({text, style}: BannerProps) => {
+const Banner = ({text, style, textStyle}: BannerProps) => {
   return (
     <View style={StyleSheet.compose(styles.bannerContainer, style)}>
-      <Text style={styles.bannerText}>{text}</Text>
+      <Text style={[styles.bannerText, textStyle]}>{text}</Text>       
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  bannerContainer: {
+  bannerContainer: { 
     justifyContent: 'center',
     paddingLeft: 8,
   },

src/presentation/components/BusList.tsx

@@ -5,6 +5,7 @@ import {
   Text,
   StyleSheet,
 } from 'react-native';
+
 import {ViewStyle} from 'react-native';
 import Table, {Line} from './Table';
 import Status from '../../utils/Status';
@@ -67,6 +68,7 @@ const BusList = ({buses, status, style}: BusListProps) => {
 const styles = StyleSheet.create({
   text: {
     textAlign: 'center',
+  
   },
 });
 

src/presentation/components/Header.tsx

@@ -6,6 +6,7 @@ import {
   ViewStyle,
   Image,
 } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize'; 
 import Container from './Container';
 
 interface HeaderProps {
@@ -70,12 +71,12 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
   },
   title: {
-    fontSize: 24,
+    fontSize: RFValue(22),
     fontWeight: 'bold',
     color: 'white',
   },
   subTitle: {
-    fontSize: 16,
+    fontSize: RFValue(16),
     fontWeight: 'normal',
     color: 'white',
   },

src/presentation/components/Table.tsx

@@ -1,6 +1,6 @@
 import {View, Text, StyleSheet} from 'react-native';
 import {COLUMNS, ROWS} from '../../domain/const';
-
+import { RFValue } from 'react-native-responsive-fontsize'; 
 export interface Line {
   lineNumber: string;
   lineLetter: string;
@@ -106,13 +106,13 @@ const tableStyles = StyleSheet.create({
     backgroundColor: 'blue',
   },
   lineNumber: {
-    fontSize: 20,
+    fontSize: RFValue(22),
     marginRight: 8,
     fontWeight: 'bold',
     color: 'grey',
   },
   lineLetter: {
-    fontSize: 14,
+    fontSize: RFValue(14),
     color: 'white',
     fontWeight: 'bold',
   },
@@ -122,12 +122,12 @@ const tableStyles = StyleSheet.create({
     borderRadius: 50,
   },
   time: {
-    fontSize: 12,
+    fontSize: RFValue(10),
     fontWeight: 'bold',
     color: 'white',
   },
   lineDescription: {
-    fontSize: 12,
+    fontSize: RFValue(12), 
     fontWeight: 'bold',
     color: 'white',
   },

src/presentation/screens/BusStopInfoScreen.tsx

@@ -6,18 +6,27 @@ import useDevices from '../../infraestructure/hooks/useDevices';
 import Banner from '../components/Banner';
 import RemoteConfigKeys from '../../utils/RemoteConfigKeys';
 import BusList from '../components/BusList';
+import { RFValue } from 'react-native-responsive-fontsize'; 
 
-const BANNER_TEXT = 'Buses que se detienen en esta parada';
+const BANNER_TEXT = 'Buses que se detienen en esta parada'; 
+
+const DeviceInfo = require('react-native-device-info');
+let DEVICE_ID = "";
+async function obtenerDeviceId() {
+  DEVICE_ID = await Promise.resolve(DeviceInfo.getUniqueId());   
+}
+obtenerDeviceId();
+console.log (DEVICE_ID);
 
 const BusStopInfoScreen = () => {
   const {
     state: {status, displayedLines, stopName},
   } = useDevices();
-
+   
   const image = remoteConfig().getString(RemoteConfigKeys.HEADER_IMAGE_URL);
 
   const [first, second] = stopName.split('-');
-  const title = first ? first.trim() : '';
+  const title = first ? first.trim() : 'Sin información para ID '+String(DEVICE_ID);
   const subTitle = second ? second.trim() : '';
 
   return (
@@ -28,7 +37,15 @@ const BusStopInfoScreen = () => {
         title={title}
         image={image}
       />
-      <Banner style={styles.bannerContainer} text={BANNER_TEXT} />
+      
+      {/* <Banner style={styles.bannerContainer} text={BANNER_TEXT} /> */}
+      
+      
+      <Banner
+        text={BANNER_TEXT}  
+        style={{backgroundColor: 'orange'}}
+        textStyle={{fontSize: RFValue(12), color: 'white', textAlign:'left'}} 
+      />
       <BusList
         buses={displayedLines}
         style={styles.bodyContainer}
@@ -39,7 +56,13 @@ const BusStopInfoScreen = () => {
           source={require('../../../resources/images/footer.jpg')}
           style={styles.image}
         /> */}
-      </View>
+      
+      <Banner
+        text="Transformación Digital del Transporte 2024"  
+        textStyle={{fontSize: RFValue(15), color: 'white', textAlign:'center'}} 
+      />
+      
+      </View>     
     </Container>
   );
 };
@@ -59,14 +82,22 @@ const styles = StyleSheet.create({
   bannerContainer: {
     flex: 0.5,
     backgroundColor: 'orange',
+  
   },
   bodyContainer: {
     flex: 10,
     justifyContent: 'center',
+    
   },
   footerContainer: {
     flex: 1,
   },
+  footerContainertext: {
+    flex: 10,
+    alignItems: 'center',
+    color: 'black',
+    fontSize: RFValue(14),  
+  },
   image: {
     flex: 1,
     width: '100%',