Skip to content

Commit

Permalink
settings tables migration to React - Abby's first migration task (#992)
Browse files Browse the repository at this point in the history 
* switched collect and sync lists over to react

* inserted a placeholding div control-list-item

This is not yet complete, but is an idea of where the schedule table might eventually be

* patch from Jack

incorporating a patch from Jack with a solution to some of the issues with scheduled notifications, as well as cleaning up some of the style around the control-data-table (s) I converted earlier

* added keys to rows

found an error in the console alerting to the fact that each row should have a unique key, so I added keys
one concern: the upcoming notifications keys end up being the dates - could those ever be repetitive?

* removal of non-relevant code

took out the code that was a part of a different effort to prevent confusion, also removed commented out code form replacing elements

* replacing hard coded strings

the "Upcoming Notifications" and "Dummy Notification in 5 Seconds statements were hard coded, I've added them as internationalized strings and updated the en.json file

* start at storing data in better place

I started to convert the data storage, data is fine in general-settings.js but is failing to make it through main-control.html to ControlDataTable.jsx

* spelling

* starting to work with other rows of profile

this is where I'm struggling with the parameterization of i18n keys

* setting up issue in using key as parameter

Added in code so the broken setting row is enabled, note the console.log statement demoing the different ways the info comes through

* fixing strings

in Angular, string parameters need to be created as "'string'" - this should resolve some of the issues that I have been experiencing here

Co-authored-by: Jack Greenlee <[email protected]>

* text working on sample list item

after I learned how to pass strings, I was able to render the row as a list item, which will hopefully eventually be good for showing everything as a list, and can have icons built in

Icons and passing through functionality are next

* carry data storage change through

switching from plugin storage to scheduler storage

Co-authored-by: Jack Greenlee <[email protected]>

* polishing up - removing print statements, altering log

after fix from Jack (2nd place to update where notifs come from) added in optional chain to reduce errors in table, took out diagnostic log statements, updated Logger.log to show num, time, and first notif

* update comments, eliminate changes not a part of this PR

the setting-row process has been separated to More profile migrations #994

* action parameters for setting rows - some work

have a rough outline going of some setting rows that say and do the right thing! More complex actions, some text, and icons still need lots of work

* comments and spacing

I added a bunch of comments and whitespace to make it easier for myself to see what needs to be done -- I'll reformat once I have things working

* more row migrations

most rows now migrated, still need to handle some with slightly unique functionality, styling with icons also needed!

* rough draft - two rows unconverted

all rows ugly but functional but need guidance on reminder time and demographics button

* fixing strings - i18n

* enabling icons - copy Jack's related commit

6578d8a

* got icons in

still missing some visual cues (toggle switches, expansion flippers)

* tidy code - still ways to go

* combine logout and copy (eliminate copy)

* convert to use of IconButtons

now the button is what has action, not the entire row - there's a bug requiring an empty onPress in the list Item for the one in IconButton to work see issue callstack/react-native-paper#3898 and hopefully soon to be fix  callstack/react-native-paper#3908

* introduce toggle switches

the two items that had switches are now interactive again, there is work to be done with getting the switches to have the proper starting value

toggle switch: https://callstack.github.io/react-native-paper/docs/components/Switch/

* experiment with list accordian

converted the user data section to a list accordian - works great! Unfortunately relies right now on a lot of hard-coding

* use of .map for creating the collapsing list!

first-run at creating a drop-down part of the menu with map and passing in a data structure

* both drop-downs converted to ExpandMenu components

fully converted the userData and devZone to the react element, creates an accordian element that has SettingRow and ControlDataTable elements

* profile settings component draft

* profile settings in general settings

* first set settings now in ProfileSettingsComponent

creating an over-arching component for the ProfileSettings -- still passing in functions, some things have bugs/functional differences noted in comments

* different method of passing info to Profile Settings

* introduce Demographics Setting Row

* rough sketch everything in ProfileSettings

working towards full migration and pulling everything into a single react Component. This is not working perfectly, there are a lot of things to handle that are currently commented out

* more of migration to ProfileSettings component

removing some commented out code
in ExpandMenu.jsx, props is now the listed parameter, this allows to get the default parameter props.children to populate the inner components. the section Title is accessed with props.sectionTitle

* adding a value in the scope for the accuracy setting

working on the switches, and trying to get their displayed value to match the value of the think they control

* adding additional argument to angularize call

this is needed from changes in #993

* cleaned up irrelivant codes and comments

* Revert "fixing merge conflicts"

This reverts commit ffd2bc2, reversing
changes made to a3097ac.

---------

Co-authored-by: Jack Greenlee <[email protected]>
  • Loading branch information
@Abby-Wheelis @JGreenlee
Abby-Wheelis and JGreenlee authored Jul 6, 2023
1 parent d4079c3 commit 60694a9
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 21 deletions.
4 changes: 3 additions & 1 deletion www/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@
"button-accept": "I accept",
"view-qrc": "My OPcode",
"app-version": "App Version",
"reminders-time-of-day": "Time of Day for Reminders ({{time}})"
"reminders-time-of-day": "Time of Day for Reminders ({{time}})",
"upcoming-notifications": "Upcoming Notifications",
"dummy-notification" : "Dummy Notification in 5 Seconds"
},

"general-settings":{
Expand Down
38 changes: 38 additions & 0 deletions www/js/control/ControlDataTable.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";
import { DataTable } from 'react-native-paper';
import { angularize } from "../angular-react-helper";
import { array } from "prop-types";

// Note the camelCase to dash-case conventions when translating to .html files!
// val with explicit call toString() to resolve bool values not showing
const ControlDataTable = ({ controlData }) => {
// console.log("Printing data trying to tabulate", controlData);
return (
//rows require unique keys!
<DataTable style={styles.table}>
{controlData?.map((e) =>
<DataTable.Row key={e.key}>
<DataTable.Cell>{e.key}</DataTable.Cell>
<DataTable.Cell>{e.val.toString()}</DataTable.Cell>
</DataTable.Row>
)}
</DataTable>
);
};
const styles = {
table: {
marginLeft: 10,
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.25)',
borderLeftWidth: 15,
borderLeftColor: 'rgba(0,0,0,0.25)',
}
}
ControlDataTable.propTypes = {
controlData: array
}

// need call to angularize to let the React and Angular co-mingle
//second argument is "module path" - can access later as ControlDataTable.module
angularize(ControlDataTable, 'ControlDataTable', 'emission.main.control.dataTable');
export default ControlDataTable;
7 changes: 6 additions & 1 deletion www/js/control/general-settings.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
'use strict';

import angular from 'angular';
import ControlDataTable from './ControlDataTable';
import QrCode from '../components/QrCode';

angular.module('emission.main.control',['emission.services',
Expand All @@ -19,7 +20,8 @@ angular.module('emission.main.control',['emission.services',
'emission.survey.enketo.demographics',
'emission.plugin.logger',
'emission.config.dynamic',
QrCode.module])
QrCode.module,
ControlDataTable.module])

.controller('ControlCtrl', function($scope, $window,
$ionicScrollDelegate, $ionicPlatform,
Expand Down Expand Up @@ -131,6 +133,7 @@ angular.module('emission.main.control',['emission.services',
$scope.settings.notification.prefReminderTime = m.format('LT'); // display in user's locale
if (storeNewVal)
NotificationScheduler.setReminderPrefs({ reminder_time_of_day: m.format('HH:mm') }); // store in HH:mm
$scope.settings.notification.scheduledNotifs = NotificationScheduler.scheduledNotifs;
}

$scope.fixAppStatus = function() {
Expand Down Expand Up @@ -378,6 +381,8 @@ angular.module('emission.main.control',['emission.services',
NotificationScheduler.getReminderPrefs().then((prefs) => {
$scope.$apply(() => {
const m = moment(prefs.reminder_time_of_day, 'HH:mm');
// defining data used to populate the upcoming display
$scope.settings.notification.scheduledNotifs = NotificationScheduler.scheduledNotifs;
$scope.settings.notification.prefReminderTimeVal = m.toDate();
$scope.settings.notification.prefReminderTimeOnLoad = prefs.reminder_time_of_day;
$scope.updatePrefReminderTime(false); // update the displayed time
Expand Down
12 changes: 11 additions & 1 deletion www/js/splash/notifScheduler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,17 @@ angular.module('emission.splash.notifscheduler',
if (!notifs?.length)
return Logger.log(`${prefix}, there are no scheduled notifications`);
const time = moment(notifs?.[0].trigger.at).format('HH:mm');
Logger.log(`${prefix}, there are ${notifs.length} scheduled notifications at ${time}`);
//was in plugin, changed to scheduler
scheduler.scheduledNotifs = notifs.map((n) => {
const time = moment(n.trigger.at).format('LT');
const date = moment(n.trigger.at).format('LL');
return {
key: date,
val: time
}
});
//have the list of scheduled show up in this log
Logger.log(`${prefix}, there are ${notifs.length} scheduled notifications at ${time} first is ${scheduler.scheduledNotifs[0].key} at ${scheduler.scheduledNotifs[0].val}`);
});
}

Expand Down
31 changes: 13 additions & 18 deletions www/templates/control/main-control.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,15 @@
<div ng-click="checkConsent()" class="control-icon-button"><i class="ion-checkmark-circled"></i></div>
</div>
<div class="control-list-item">
<div class="control-list-text" ng-i18next>Dummy Notification in 5 Seconds</div>
<div class="control-list-text" ng-i18next>{{'control.dummy-notification'}}</div>
<div ng-click="dummyNotification()" class="control-icon-button"><i class="ion-ios-bell"></i></div>
</div>
<!-- notif schedule preview (react component) -->
<div class = "control-list-item">
<div class="control-list-text" ng-i18next>{{'control.upcoming-notifications'}}</div>
</div>
<control-data-table ng-if="settings.notification.prefReminderTime" control-data="settings.notification.scheduledNotifs"></control-data-table>

<div class="control-list-item">
<div class="control-list-text" ng-i18next>{{'control.invalidate-cached-docs'}}</div>
<div ng-click="invalidateCache()" class="control-icon-button"><i class="ion-backspace"></i></div>
Expand All @@ -141,32 +147,21 @@
<div class="control-list-text" ng-i18next>{{'control.check-sensed-data'}}</div>
<div ng-click="showSensed()" class="gray-icon control-icon-button"><i class="ion-ios-arrow-right"></i></div>
</div>
<!-- replaced collection and sync with React DataTable-->
<!-- collection li and data table -->
<div class="control-list-item">
<div class="control-list-text" ng-i18next>{{'control.collection'}}</div>
<div ng-click="editCollectionConfig($event)" class="gray-icon control-icon-button"><i class="ion-edit"></i></div>
</div>
<ion-list>

<ion-item class="row" ng-repeat="entry in settings.collect.show_config">
<div class="col timestamp item-text-wrap control-info">{{entry.key}}</div>
<div class="col detail item-text-wrap control-info"> {{entry.val}}</div>
</ion-item>
</ion-list>
<control-data-table control-data="settings.collect.show_config"></control-data-table>

<!-- sync li and data table -->
<div class="control-list-item">
<div class="control-list-text" ng-i18next>{{'control.sync'}}</div>
<div ng-click="editSyncConfig($event)" class="gray-icon control-icon-button"><i class="ion-edit"></i></div>
</div>
<ion-list>
<ion-item class="row" ng-repeat="entry in settings.sync.show_config">
<div class="col timestamp item-text-wrap control-info">{{entry.key}}</div>
<div class="col detail item-text-wrap control-info"> {{entry.val}}</div>
</ion-item>
<ion-item class="row">
<div class="col timestamp item-text-wrap control-info">host</div>
<div class="col detail item-text-wrap control-info"> {{settings.connect.url}}</div>
</ion-item>
</ion-list>
<control-data-table control-data="settings.sync.show_config"></control-data-table>

<div class="control-list-item">
<div class="control-list-text" ng-i18next>{{'control.app-version'}}</div>
<div class="control-version-number">{{settings.clientAppVer}}</div>
Expand Down

0 comments on commit 60694a9

Please sign in to comment.