sillsdev / appbuilder-pwa

Progress Web App template for Scripture App Builder
https://software.sil.org/scriptureappbuilder
MIT License
8 stars 26 forks source link

Scripture Reading Plans - Initial screens #622

Open davidmoore1 opened 2 months ago

davidmoore1 commented 2 months ago

Scripture Reading Plans feature allows an SAB app to include one or more reading plans that the user can select to help provide a consistent encouragement in their reading. The overall feature is large and extensive. This first issue will just cover:

Copy plan files from SAB to PWA Data All images and sfm files for the plans configured for this project are located in plans folder of the app within the SAB application. It does not appear that any of these files are being copied to the PWA data folder at this time. The plan configuration also needs to be copied to the config.js file via ConvertConfig. In appdef.xml, there is a Plans section that will contain a Plan entry for each reading plan that has been configured. A segment of an example configuration looks like the following:

    <plans>
        <features type="plans">
            <e name="default-reminder-time-1" value="07:30" />
            <e name="default-reminder-time-2" value="20:00" />
        </features>
        <plan id="PRO31" days="31">
            <title>
                <t lang="default">Proverbs in 31 days</t>
            </title>
            <filename>plan-proverbs-31.txt</filename>
            <image width="910" height="512">plan-proverbs-31.jpg</image>
        </plan>

Each Plan segment contains the following information:

Create a Plan entry in the slide navigation drawer The entry for the plans displays below "Share App" (if present), in the section below the annotations section and above settings. A calendar icon is used for the display.

Simulator Screenshot - iPhone 15 - 2024-07-02 at 15 02 35

Plan Selection Page The plan selection page appears when the user selects "Plans" in the slide navigation drawer. This page contains up to three tabs. The three tabs are for "My Plans", which displays active reading plans. The second tab is "Choose Plan". The third tab is for "Completed Plans". A tab is displayed in the the tab bar at the top of the screen if one or more plans are available for that category. If only one tab is active, then no bar is displayed. So, the first time the Plans page is displayed after the app has been installed, the "Choose Plan" tab is displayed and the tab bar does not display. Simulator Screenshot - iPhone 15 - 2024-07-02 at 15 23 50

If there is only one plan configured, then when that plan is active, the "My Plans" tab would be the only one displayed with no bar displaying. If there are multiple tabs active, when Plans is entered from the navigation drawer, the "My Plans" tab is displayed if present, otherwise the "Choose Plan" tab is displayed Simulator Screenshot - iPhone 15 - 2024-07-02 at 15 23 24

Each of the three tabs shows an entry for each of the plans for that category. The one exception to this is that plans with a current status of "Completed" appear in both the "Completed Plans" tab and the "Choose Plans" tab. The entry displays the image associated with the plan, if configured, and then the plan title in the current interface language or the default entry if not available with the number of days associated with plan underneath the title as shown above.

The "Completed Plans" tab will be discussed in another issue, since with this issue, it won't be possible for a plan to be completed.

A plan file is a file that contains a few pieces of startup information and then a series of "day" entries indicating the reference or references to be read for that date. A copy of an example entry for a more complex reading plan is below:

\id Bible365
\title Bible in a Year: 365-Day Reading Plan
\descr Regular Bible reading is one of the most important habits you can develop. This daily Bible reading plan will give you all the benefits of a steady diet of God's Word as you read through Scripture in a year. The whole Bible is arranged into 365 daily readings, including an Old Testament passage, a New Testament passage, and a Psalm or Proerb for each day.

\day 1
\ref GEN 1
\ref GEN 2:1-17
\ref MAT 1:1-25
\ref PSA 1:1-6

\day 2
\ref GEN 2:18-25
\ref GEN 3
\ref GEN 4:1-16
\ref MAT 2:1-18
\ref PSA 2:1-12

The case insensitive items are as follows:

Database Information This is for reference purposes. The Android and iOS apps save the information about the plan states in 3 database tables. The first is a plan setup table. This contains the plans and associated features, most of which are not discussed in this issue (things like the day of weeks and reminder times associated with the plan). The second table is a plan state which contains an entry (plan id, state, date) for each time the plan state changed and the state it changed to (available, in progress or completed). When checking a plan, the most recent entry sets the state of the plan. If no entry is present, the plan is "available". The final table is a plan progress entry (plan id, day, entry index, date) which contains an entry for each reference that has been marked as "read".

Design details This section is added as a little background as to how part of the apps application is designed. They have a structure of a group of Plans. Each Plan contains an array of PlanDays. Each PlanDay contains an array of PlanEntries. At startup, the arrays are first populated by the information in the plan files. After that, the database is read to update those arrays with the current plan status (available, completed, in progress) and the plan progress. As each PlanEntry is updated as read, if it is the last entry for that day, the day is marked as completed. There is a function to check whether the PlanEntry will complete the PlanDay (the PlanEntry is the last incomplete entry in the day). There is also a function to check whether the PlanEntry is the last entry in the Plan (all PlanDays are complete except for the current PlanDay and it is the last incomplete entry in the PlanDay). The PWA does not need to be implemented in exactly the same way, but the end of day and end of plan functions will be needed in some form for the remaining issue.

Plan Detail Page There are two variations of the plan detail page: the one that displays when you select a plan from the "Choose Plan" tab and the one that displays when a plan is selected from the "My Plans" tab. They are similar but have some differences. The "Choose Plan" version has two tabs: a plan information tab and a calendar tab. The "My Plans" version has 3 tags: it adds a settings tab.

Information Tab The information tabs for the two modes are slightly different. They both contain the image associated with the plan (if configured), the plan title, the plan duration, and the description. The "My Plans" version contains a line with the date the plan was started and a "Continue" button, which displays the calendar tab for the plan. The "Choose Plan" version is the same without the date started information and a "Start Plan" button in place of the continue button.
Simulator Screenshot - iPhone 15 - 2024-07-03 at 09 08 54 Simulator Screenshot - iPhone 15 - 2024-07-03 at 09 10 57

The "Start Plan" button marks the plan as active and displays the calendar tab. The one difference to note is that the calendar is for an active plan (discussed below) and the back arrow on the calendar will take it to the "My Plans" tab, not the "Choose Plan" tab.

Calendar Tab The Calendar tab displays the reading plan in a day by day format with each day showing the references for each day. A checkmark is in front of the reference and is checked if that plan item has been read. (Information on how an item is marked as "read" will be in another issue. The reference text is written in the format for the current book collection at the time the plan screen is displayed. (For example: for a reference of MAT 1, if cuk is the current book collection, this is displayed Mateo 1. If World English Bible is the current book collection, it would appear as Matthew 1) For this one, there should probably be some database or store that contains an entry for each completed reference item The bar scrolls right and left to view all of the days in the plan. For the "My Plans" version of the tab, the tab is initially positioned to the current entry. Tapping on one of the references takes you to that reference in the scripture. Simulator Screenshot - iPhone 15 - 2024-07-03 at 09 57 15 The "Choose Plan" version of the same tab looks much the same, except no items are checked (since the plan is inactive) and tapping on a reference does nothing.

Settings Tab The settings tab in the standard app contains 3 sections: reminders, set dates, and stop plans. We don't believe the reminders is going to be available in PWA. The set dates will be covered in a later issue and will not be present in the initial version created by this issue. The Settings tab for this issue will simply contain the stop plan section. Simulator Screenshot - iPhone 15 - 2024-07-03 at 10 00 32

Pressing the "Stop Plan" button causes a verification screen to be displayed. Pressing "No" just clears the model and remains on the settings tab. Pressing "Yes" causes the plan to be marked as "Available" (and thus in the "Choose Plans" category) and moves to the Information tab for the plan from Choose Plans (so showing a "Start Plan" button). In app terms, it deleted the entries in the setup table and progress table but left the entries in the plan status table alone, just adding a new "Available" status entry to the table. Thus it deleted all information about which references have been read and what days of weeks etc have been selected but it kept all the history as to whether the plan has been started, stopped or completed.

Discussions on setting entries as read, marking plans as complete, setting a calendar and available days of weeks for the plan and other items are covered in other issues. The intent of this issue is to make the plan information available to the PWA, to provide access to the Plan menu screens, and to implement the start and stop plan functions.

chrisvire commented 1 month ago

@mikaylahubbard: the TypeScript data format looks like it could be like this:

    plans?: {
        features?: {
            [key: string]: string;
        };
        plan: {
            id: string;
            days: number;
            title: {
                [lang: string]: string;
            };
            filename: string;
            image?: {
                width: number;
                height: number;
                filename: string;
            }
        }[];
    };