Better Organization and Formatting Regarding Sleeping Permissions

app/app.json

@@ -34,7 +34,8 @@
 				"page": {
 					"pages": [
 						"page/index",
-						"page/permissionsPage"
+						"page/permissionsPage",
+						"page/sleepFunctions"					
 					]
 				},
 				"app-side": {

app/page/index.js

@@ -11,6 +11,12 @@ import {
 	STOP_BUTTON,
 } from 'zosLoader:./index.[pf].layout.js';
 
+import {
+	onClickSleepButton,
+	getSleepInfo,
+	getStageConstantObj,
+} from './sleepFunctions.js';
+
 const permissions = ['device:os.bg_service'];
 const service = 'app-service/service';
 const storage = getApp().globals.storage;
@@ -21,10 +27,10 @@ Page(
 	BasePage({
 		state: {
 			temp: null,
-			permissions: {},
+			permissions: {}, // Will hold the permissions data
 		},
 		onInit(params) {
-			console.log('Index Page onInit invoked');
+			console.log('Index PageonInit invoked');
 
 			// Log the entire params object to see the received data
 			console.log('Received params:', params);
@@ -138,7 +144,14 @@ Page(
 
 			hmUI.createWidget(hmUI.widget.BUTTON, {
 				...SLEEP_BUTTON,
-				click_func: this.onClickSleepButton.bind(this),
+				click_func: () => {
+					const jsonstringPermissions = JSON.stringify(
+						this?.state?.permissions,
+					);
+					console.log('JSON string of permissions:', jsonstringPermissions);
+
+					onClickSleepButton(jsonstringPermissions);
+				},
 			});
 
 			hmUI.createWidget(hmUI.widget.BUTTON, {
@@ -173,89 +186,6 @@ Page(
 				storage.setKey('expiresAt', req.params.expiresAt);
 			}
 		},
-
-		onClickSleepButton() {
-			console.log('Sleep button pressed');
-
-			// Log the current state and permissions to see what data is available
-			console.log('Current state:', JSON.stringify(this.state));
-
-			// Access permissions from the state
-			if (this.state.permissions) {
-				Object.entries(this.state.permissions).forEach(([key, value]) => {
-					if (value === true) {
-						console.log(`Permission for ${key} is granted.`);
-
-						// Actual data extraction based on the granted permission
-						switch (key) {
-							case 'sleepScore':
-								// Get the sleep score using the `getInfo` method
-								this.getSleepInfo('score');
-								break;
-							case 'startEndTime':
-								// Get the start and end times (assuming `getInfo` provides this)
-								this.getSleepInfo('startTime');
-								this.getSleepInfo('endTime');
-								break;
-							case 'deepSleepTime':
-								// Get the deep sleep time using `getInfo`
-								this.getSleepInfo('deepTime');
-								break;
-							case 'totalSleepTime':
-								// Get the total sleep time using `getInfo`
-								this.getSleepInfo('totalTime');
-								break;
-							case 'wakeStage':
-								// Get the wake stage using `getStageConstantObj`
-								this.getStageConstantObj('WAKE_STAGE');
-								break;
-							case 'remStage':
-								// Get the REM stage using `getStageConstantObj`
-								this.getStageConstantObj('REM_STAGE');
-								break;
-							case 'lightStage':
-								// Get the light sleep stage using `getStageConstantObj`
-								this.getStageConstantObj('LIGHT_STAGE');
-								break;
-							case 'deepStage':
-								// Get the deep sleep stage using `getStageConstantObj`
-								this.getStageConstantObj('DEEP_STAGE');
-								break;
-							default:
-								console.log(`No action defined for permission: ${key}`);
-						}
-					} else {
-						console.log(`Permission for ${key} is denied.`);
-					}
-				});
-			} else {
-				console.log('No permissions found in state.');
-			}
-		},
-
-		// Extract sleep info (getInfo method)
-		getSleepInfo(infoKey) {
-			// Using the ZeppOS Sleep module to fetch the sleep info
-			const info = sleep.getInfo();
-
-			if (info && info.hasOwnProperty(infoKey)) {
-				console.log(`${infoKey}: ${info[infoKey]}`);
-			} else {
-				console.log(`No data for ${infoKey}`);
-			}
-		},
-
-		// Extract stage constant
-		getStageConstantObj(stageKey) {
-			// Using the ZeppOS Sleep module to fetch stage constants
-			const sleepStageConstants = sleep.getStageConstantObj();
-
-			if (sleepStageConstants && sleepStageConstants.hasOwnProperty(stageKey)) {
-				console.log(`${stageKey}: ${sleepStageConstants[stageKey]}`);
-			} else {
-				console.log(`No data for ${stageKey}`);
-			}
-		},
 	}),
 );
 

app/page/permissionsPage.js

@@ -3,6 +3,8 @@ import { push } from '@zos/router';
 import {
 	TOGGLE_OPTIONS,
 	BACK_BUTTON,
+	titleText,
+	createToggleLabel,
 } from 'zosLoader:./permissionsPage.[pf].layout.js';
 import { LocalStorage } from '@zos/storage'; // Import LocalStorage only once
 
@@ -31,15 +33,9 @@ Page({
 		console.log('Permissions Page Build Called');
 
 		// Display the main title
+		// Need to add to permissionsPage layout file
 		hmUI.createWidget(hmUI.widget.TEXT, {
-			text: this.state.message,
-			x: 100,
-			y: 20,
-			w: 200,
-			h: 50,
-			text_size: 24,
-			color: 0xffffff,
-			align_h: hmUI.align.CENTER_H,
+			...titleText,
 		});
 
 		// Create toggle switches with their corresponding names
@@ -62,16 +58,9 @@ Page({
 				},
 			});
 
-			// Create the label (name) for each toggle switch next to it
+			// Create the label for each toggle switch next to it
 			hmUI.createWidget(hmUI.widget.TEXT, {
-				text: option.label,
-				x: option.x, // Position the label next to the toggle
-				y: option.y + 5, // Adjust the Y position slightly to match the center of the toggle
-				w: px(100), // Adjust the width for the label
-				h: option.h, // Keep the same height as the toggle
-				text_size: px(16), // Smaller text size for the label
-				color: 0xffffff, // Text color for better visibility
-				align_h: hmUI.align.LEFT, // Align the text to the left
+				...createToggleLabel(option),
 			});
 
 			console.log(`Created toggle widget and label for: ${option.label}`);

app/page/permissionsPage.r.layout.js

@@ -1,5 +1,40 @@
 import { px } from '@zos/utils';
 import { BUTTON_TEXT, NORMAL_COLOR, PRESS_COLOR } from '../utils/constants';
+import hmUI, { createWidget, widget, align, text_style, prop } from '@zos/ui';
+
+/*export const createToggleSwitch = (option, checkedValue, handleToggleChange) => ({
+	x: px(option.x + 100), // Position the toggle switch slightly to the right
+	y: px(option.y),
+	w: px(option.w),
+	h: px(option.h),
+	checked: px(checkedValue),
+	color: 0xffffff, // Text color for better visibility
+	text_size: px(16), // Smaller text size
+});*/
+
+// Function to create a label for a toggle switch
+export const createToggleLabel = (option) => ({
+	text: option.label,
+	x: px(option.x), // Position the label next to the toggle
+	y: px(option.y + 5), // Adjust the Y position slightly to match the center of the toggle
+	w: px(100), // Adjust the width for the label
+	h: px(option.h), // Keep the same height as the toggle
+	text_size: px(16), // Smaller text size for the label
+	color: 0xffffff, // Text color for better visibility
+	align_h: hmUI.align.LEFT, // Align the text to the left
+});
+
+export const titleText = createWidget(widget.TEXT, {
+	text: 'Permissions Page',
+	x: px(100),
+	y: px(20),
+	w: px(200),
+	h: px(50),
+	text_size: px(24),
+	color: 0xffffff,
+	align_h: hmUI.align.CENTER_H,
+	text_style: hmUI.text_style.WRAP,
+});
 
 export const TOGGLE_OPTIONS = [
 	{

app/page/sleepFunctions.js

@@ -0,0 +1,90 @@
+import { Sleep } from '@zos/sensor'; // Import the Sleep module
+
+const sleep = new Sleep();
+
+// Function to handle the sleep button click and permissions
+export function onClickSleepButton(jsonstringPermissions) {
+	console.log('Sleep button pressed. in sleepFunctions.js');
+
+	// Log the received JSON string of permissions
+	console.log('Received JSON string of permissions:', jsonstringPermissions);
+
+	try {
+		// Parse the JSON string to access the permissions as an object
+		const permissions = JSON.parse(jsonstringPermissions);
+
+		// Log the parsed permissions object
+		console.log('Parsed permissions:', permissions);
+
+		if (permissions) {
+			Object.entries(permissions).forEach(([key, value]) => {
+				if (value === true) {
+					console.log(`Permission for ${key} is granted.`);
+
+					// Actual data extraction based on the granted permission
+					switch (key) {
+						case 'sleepScore':
+							getSleepInfo('score');
+							break;
+						case 'startEndTime':
+							getSleepInfo('startTime');
+							getSleepInfo('endTime');
+							break;
+						case 'deepSleepTime':
+							getSleepInfo('deepTime');
+							break;
+						case 'totalSleepTime':
+							getSleepInfo('totalTime');
+							break;
+						case 'wakeStage':
+							getStageConstantObj('WAKE_STAGE');
+							break;
+						case 'remStage':
+							getStageConstantObj('REM_STAGE');
+							break;
+						case 'lightStage':
+							getStageConstantObj('LIGHT_STAGE');
+							break;
+						case 'deepStage':
+							getStageConstantObj('DEEP_STAGE');
+							break;
+						default:
+							console.log(`No action defined for permission: ${key}`);
+					}
+				} else {
+					console.log(`Permission for ${key} is denied.`);
+				}
+			});
+		} else {
+			console.log('No permissions found in the parsed object.');
+		}
+	} catch (error) {
+		console.error('Error parsing permissions JSON:', error);
+	}
+}
+
+// Extract sleep info (getInfo method)
+export function getSleepInfo(infoKey) {
+	const info = sleep.getInfo();
+
+	if (info) {
+		if (info.hasOwnProperty(infoKey)) {
+			console.log(`${infoKey}: ${info[infoKey]}`);
+		} else {
+			console.log(`No data for ${infoKey}`);
+		}
+	} else {
+		console.log('No sleep data available');
+	}
+}
+
+// Extract stage constant
+export function getStageConstantObj(stageKey) {
+	const sleepStageConstants = sleep.getStageConstantObj();
+
+	if (sleepStageConstants && sleepStageConstants.hasOwnProperty(stageKey)) {
+		console.log(`${stageKey}: ${sleepStageConstants[stageKey]}`);
+	} else {
+		console.log(`No data for ${stageKey}`);
+	}
+}