Menu
Instructions
Smart4OnlineTraining Portal - Introduction
This document describes functionalities of the S4OT portal, a component used by trainers, to create users, add payments, create exercises, plans, and programs for their users.
Overview
The landing page of this web portal is shown in Figure 1:
Figure 1
This is an overview page. It shows some basic information, such as the number of training per day in the last week (user can change selected date range) and payment info – a list of users whose payment will expire soon. There is an option for sending a generic email message reminding user to renew their subscription to S4OT system.
Training content
The training content page is split into 3 tabs – exercises, plans, programs. Each tab displays a list of exercises (plans, programs), allows their filtering based on name and tags, and allows basic crud operations (Figure 2).
Figure 2
Exercises
Every exercise contains basic information – name, description, duration, and tags. For each exercise, the trainer can edit the thumbnail, edit the exercise or delete the exercise. This page also allows users to create a new exercise.
Create exercise
After selecting Create exercise, a drawer is opened, as shown in the picture below (Figure 3). Trainer has to enter name, description, and upload a video file. Tags are not obligatory. Exercise thumbnail is extracted from the selected video and can later be changed.
Figure 3
Edit exercise thumbnail
After selecting the Edit exercise thumbnail from the exercise options menu, a dialog is shown (Figure 4). the thumbnail is extracted from the selected video and can later be changed.
Figure 4
This dialog loads exercise’s video and allows the trainer to select another frame from the exercise video and use it as a new exercise thumbnail.
Edit exercise
After selecting Edit exercise from the exercise options menu, a drawer is opened, as shown in the picture below (Figure 5). The trainer can modify exercise names, descriptions, and tags.
Figure 5
Plans
Every plan contains basic information – name, description, duration, level, and tags. For each plan, the trainer can view more details, edit the thumbnail, edit the plan, assign the plan to the user, or delete the plan. This page also allows users to create a new plan (Figure 6).
Figure 6
Create plan
After selecting Create plan, a drawer is opened, as shown in the picture below (Figure 7). Trainer has to enter name, description, and level. Tags and thumbnails are not obligatory.
Figure 7
The plan consists of three segments and must contain the main workout section (warmup and cooldown are not obligatory). Every section consists of one or multiple rounds, and every round consists of one or multiple exercises. When creating a plan, a trainer must enter duration/reps and pause for each exercise in the round (Figure 8).
Figure 8
Exercise and main workout must have a pause, otherwise a red warning is prompted (Figure 8.1).
Figure 8.1
Edit plan thumbnail
After selecting the Edit plan thumbnail from the plan options menu, a dialog is shown (Figure 9). It allows the trainer to edit/upload a custom image for the selected plan.
Edit plan
After selecting Edit plan from the plan options menu, a drawer is opened, as shown in the picture below (Figure 10). The trainer can modify the name, description, level, and tags. Also, the trainer can remove/add rounds and exercises and also modify exercise durations, repetitions, and pauses.
Figure 9
Figure 10
Assign plan to users
After selecting the Assign plan from the plan options menu, a new page is opened, as shown in the picture below (Figure 11). The trainer can select users he wants to assign to this plan and specify the recommended date for the plan. The recommended date is not necessary and can be added later (selecting the Switch to edit dates button on the top of the page). The recommended date can only be edited for assigned users. The button changes name to Switch to set users which returns us to the list of users ready to be assigned.
Figure 11
In the top left corner is a button BACK which gets us back to the plan details page.
Plan details - View more
This page displays information about the plan – details, segments, rounds, and exercises, and also assigned users.
Programs
Every program contains basic information – name and number of plans in it. For each program, the trainer can edit the program, assign the program to the user, or delete the program. This page also allows users to create a new program (Figure 12).
Figure 12
Create program
After selecting Create program, a new page is opened, as shown in the picture below (Figure 13). Trainer has to enter name (Set name button on top) and add at least one plan to be able to create a program.
Plans can be removed by clicked on them.
If the name of a program is not entered, clicking Create button will open dialog for setting program name.
Per day you can only add a maximum of 2 plans (events), as described in portal specifications.
Figure 13
Edit program
After selecting the Edit program from the program options menu, a new page is opened, as shown in the picture below (Figure 14). The trainer can edit the program name, add/remove/move plans in the program.
Plans can be removed by clicking on them.
Figure 14
Assign program to users
This view is the same as the Assign plan, but instead of plans, the trainer is assigning programs.
Users
This page displays all users. The trainer can create new users, edit/delete, and view assigned plans and training for the specific users, Figure 15.
Figure 15
Create user
After selecting Create user, a drawer is opened, as shown in the picture below (Figure 16).
Figure 16
After clicking Create button, fields that haven’t been filled are marked with red text (Figure 16.1).
Figure 16.1
Edit user
This button opens a drawer (same as Create user), where the trainer can edit selected user information. Everything except for username can be edited.
Profile type
This allows the trainer to change profile type for specific users (premium, regular – requires payment in order to play videos).
More info
This button opens a new page containing detailed information about specific users – user details, plans assigned to users.
Calendar
This button opens a Calendar view page (Figure 17).
Figure 17
This page allows the trainer to see plans and programs assigned to the selected users – with recommended dates for every plan and start dates for every program. Here, the trainer can assign new plans/ programs and remove/move existing ones (Figure 18).
Programs/plans can be removed from the calendar by clicking on them, or moved by dragging them (only 2 per day!), if the calendar has already 2 plans/programs they are removed and stashed into the list of plans/programs.
Figure 18
The Mobile version shows only one plan/program per day for finer view with the button (link) +1 more (Figure 18.1). This is for all calendars!
Figure 18.1
This page displays all users and allows the trainer to select users he wants to send emails to (Figure 19). It is designed to enable trainers to send Nutrition plans to users.
Figure 19
Send mail button opens a new page with Email form – Subject, attachment, and additional text (Figure 20).
Figure 20
Payment
This page displays a list of all users and their payment information – payment date, the date the payment becomes valid, expiration date or the number of paid/remaining training, payment status. For each user, the trainer can add new payments, suspend users,s or view payment history (Figure 21).
Figure 21
Create payment
After selecting Create user, a drawer is opened, as shown in the picture below (Figure 22). Payment can be based on training – user can pay for a certain number of trainings, or based on expiration – user can pay for weekly, monthly, etc. subscription. All fields are obligatory.
Figure 22
Payment history
After selecting Payment history from the program options menu, a new page is open, as shown in the image below (Figure 23). Here is a list of all payments for the selected users, including the ongoing payment. The trainer can add a new payment, or edit and delete an existing one.
Figure 23
Smart4OnlineTraining User Application - Introduction
Introduction
This document describes functionalities of the S4OT user application, a component used by users to see assigned plans and programs, their details and exercise by their instructions, to see their profile data and edit them, to select and connect to a band device which collects their HR data, to chat with their trainers and groups they are added to.
User Profile Data and Edit User Profile Data
This is user data screen, shown on pictures 1 and 2. Here the user can see his/her profile data. By clicking on the pen icon on the right, the screen shown on pictures 3 and 4 is opened where the user can change some of it’s data. By clicking on the button in the top menu bar he/she can save them.
Picture 1
Picture 2
Picture 3
Picture 4
Band Details and Band Selection
This is band details screen, shown on picture 5. Here the user can see all needed information about the band that he/she is connected to or is trying to connect to. If the band is for some reason disconnected, a “Connect” button will pop up where the user can try to reestablish the connection with his/her band device. By clicking on the settings icon, the screen shown on picture 6 will open. Here the user is asked to connect to Bluetooth. After connecting, all nearby scanned band devices will be listed. By clicking on one of the listed items, the user chooses to connect to that band device.
Picture 5
Picture 6
Chat user
Chat opens by clicking on the far-right button in the bottom navigation bar. The first screen that is shown is the screen shown on picture 7 and 8. Picture 7 shows first time ever opening the chat, where user doesn’t have yet started conversations. Picture 8 shows some created chat threads that user had been added to. (First: 1v1 with coach, second: Chatgroup the coach created). Here are listed all conversation threads for that user. The user cannot create new thread conversations. He/she can only enter conversations with their trainers or the group chats that their trainers have added them to. By clicking on one of the listed conversation threads, the screen similar to one on picture 9 or 11 will open. Here is the chat conversation thread where participants can exchange messages. Messages can be with text, as well as with images. By clicking on the left plus icon in the chat bottom bar, the user can choose to send an image (from the device or taken at that moment with camera) or his/her current location. By clicking on the right icon of the chat bottom bar, user sends the written message. By clicking on the top right search icon, the user can search this chat thread for any text messages. If user taps on a single message and holds, after a short time, new options will appear in the top right menu corner. Those new options are respectively shown on picture 9 (copy to clipboard, delete, forward, reply). They all reference that held message. On picture 12 Is shown chat group details screen which user can navigate to by clicking on the name of the chat group thread. There he/she can see the chat group information (name, picture, participants and their roles). When on first chat page, user can click on the top right search icon to search through all existing threads.
Picture 7
Picture 8
Picture 9
Picture 10
Picture 11
Picture 12
Chat profile (editing user chat profile)
Chat profile (user chat profile) opens by clicking on the far-left button in the top menu bar. First screen that is shown is the screen shown on picture 13. Here user is presented with his/her user chat profile. Here user can see their status, username, image (avatar), phone number and mail. Three–dot button on the left shows your QR code. The button on the right leads to editing this profile, the screen shown on picture 14. All listed information about yourself you can change in this editing screen by your desire. User saves all edited changes to his/her profile by clicking on the check button on the right.
Picture 13
Picture 14
Download videos
By clicking on the 3 dots of the top right corner menu bar, the user can choose the option “Download videos”. This will open the screen shown on picture 15 and 16. Here the user is presented with a few options. To enable the video caching and synchronization, to use only WI-FI network for that synchronization, to download and cache all the videos and to set the maximum amount of GB those videos can take. Below is a list of all assigned plans to this user where he can manually choose which plan videos to download.
Picture 15
Picture 16
About app
By clicking on the 3 dots of the top right corner menu bar, the user can choose the option “About app”. This will open the screen shown on picture 17. Here the user is presented with a the applications version and a few images of companies responsible for the creation of this application.
Picture 17
Log out
By clicking on the 3 dots of the top right corner menu bar, the user can choose the option “Log out”. This will open the pop-up window shown on picture 18. Here the user is presented with two options. First is “only log out” meaning, the user can log out of the application but not remove saved account credentials. If he does this, upon reentering the app, users account is saved and can easily be accessed. By choosing the second option, the user removes that account from remembered (saved). That means, that if the user wants to enter that account again, he/she will have to enter their log in username and password again. By doing any of these two options, the user, deletes whole local storage and all previously saved data is removed. Also, by doing this, the user is removing current user from chat (executing “logout” from chat).
Picture 18
Plan and program list
The starting screen is the one shown on pictures 19 and 20. Here are shown all programs and plans assigned to this user. They are ordered in a way that first go all the plans from programs chronologically and after that all other assigned plans. By clicking one of them the user opens the plan details.
Picture 19
Picture 20
Plan details
The plan details screen is shown on pictures 21 and 22. Here the user can see all the data and information of one training plan. At the bottom of the page, there is a START TRAINING button, by clicking it the user starts the training plan he is currently looking at. By clicking on of the exercise’s user navigates to a new screen for exercise information and its video.
Picture 21
Picture 22
Exercise details
The plan details screen is shown on pictures 23 and 24. Here the user can see all the data and information of one created exercise for this training plan. Duration/repetitions of this exercise, which consider this specific exercise in this specific round of plan are shown below the video. Here user can see the video of this exercise and prepare himself/herself.
Picture 23
Picture 24
Training Plan Exercising
After clicking on the start button, the exercising starts. User can be presented with a small pop up that shows current training description. This dialog opens by clicking the info button on the right side of the screen, this is shown on picture 25. We have two types of exercises, on time or on repetitions. If it is on time(duration) it’s count down timer starts, if it is on repetitions, the user is presented with the planned number of repetitions. The user can enter the video in full screen on its button, pause the current exercise by clicking pause icon, and continue it by clicking the same button. Bellow the user is presented with the HR data that his/her band device is producing. In the bottom right corner, there is a next button where by clicking it the user skips to the next part of the training plan. Exercising screens are shown on pictures 27, 28, 29 and 30. The next screens, the ones which show the resting part of one exercise are shown on pictures 31, 32 and 33. At top of the screen, the user can see the details of the previous exercise he/she finished. Below that window, there are two buttons –5s and +5s which are used to reduce from the resting time or add to it. The resting time of the rest after an exercise is being shown at the middle of the screen and it counts down to 0. The region in resting part, that shows last finished exercise in this training, shows data of that previous exercise. If it is on time (duration) it shows recommended duration and done duration of that exercise. If it is on repetition, user can see how much repetitions were recommended, and he/she can alter the number by +/- icons to edit that number to done number of repetitions. The screens on pictures 34 and 35 show the resting part between two segments, warm up and main workout, or main workout and cooldown. It works the same way as the resting part screens only without showing the last exercise. At the bottom of all these screens, on the left side the user can see what awaits after this current exercise or rest part is finished (what is next). Exercises on time, and resting parts, they can be finished by clicking the next button or by waiting for its countdown to go drop to 0. Exercises on repetitions will finish by clicking the next button since they don’t have a countdown timer. Next to mentioned screens pictures (shown below) are given all the screens how they would look like in full screen mode which is entered by its visible in video view. It is left by clicking on the same icon or by clicking device system back button. By clicking back button (when out of full screen mode) you can stop/exit current training. The pop-up window is presented to the user (picture 36), here the user can exit the training or cancel and continue. By clicking the “shutdown” button besides info button, or by rotating the screen, or by exiting the application by any means or in any way, the training is being saved locally and being stopped, picture 26. User can continue this training by clicking the big button in the middle of the screen. This enables the user to leave the application (example: by clicking the “home” button), also, enables the user to destroy the application, that also includes the shutdown/restart of the device, and to be able to return to the training in execution whenever they are able/want to. (If the app is turned off, from the training exercising screens, the user can jump right back in to continue their exercise).
Picture 25
Picture 26
Picture 27
Picture 28
Picture 29
Picture 30
Picture 31
Picture 32
Picture 33
Picture 34
Picture 35
Picture 36
Training Plan Exercising End
After finishing all the parts of the training plan exercise, the user is presented with a new screen shown on pictures 37, 38, and 39. Here are all the information about the just finished training exercise. Sorted in its order, all exercises with their rest breaks are shown. On the right side of the screen, for both exercises on time and repetitions, as well as rest breaks, are shown the durations and repetitions that these exercises and rests are finished in, with in brackets the durations and repetitions their trainer recommends within that plan training. If the training plan exercising was not valid or did not complete by its plan, the screen shown on pictures 40 and 41 will be shown, claiming the invalid training. By clicking next on bottom right corner button, the screen shown on picture 42 is opened. Here, the user can choose and inform his/her trainer how hard or easy that training was for him/her. By clicking OK here, the training is finished and is being uploaded with all its data, and the screen for listing plans is being opened again, the starting screen.
Picture 37
Picture 38
Picture 39
Picture 40
Picture 41
Picture 42
Log in error
Whenever the user uses wrong credentials for log in, he/she will be navigated to the screen shown on picture 43. Here are explained reasons for this error and a log out button is shown where the user can navigate back to log in screen.
Picture 43
Smart4OnlineTraining Trainer Application - Introduction
Introduction
This document describes functionalities of the S4OT trainer application, a component used by trainers to look at finished training data, create, delete and update users that he/she is a trainer of, to look at created plans and programs that he created and assign them to his/her users, to create chat conversations and groups and add roles to all its participants and to chat with fellow trainers or all his/her users.
Trainings List
First screen is training list. Here are listed all trainings done by all users under this trainer. On top of the screen is a switch between valid and invalid trainings. Picture 1 shows valid trainings, and picture 2 shows invalid trainings. By clicking on one the trainings, user navigates to all details about that finished training.
Picture 1
Picture 2
Trainings List
Clicking on one of the trainings opens training data screen. Here are shown data for the completed training. Pictures 3, 4 and 5 show this screen. The trainer is provided with all data for training. Additional information can be seen by clicking on top right human body icon in the menu, where the user navigates to the screen shown on picture 6. If the training is invalid, or is missing some data, then it will be shown in some way that is shown on picture 7. Some data will be missing, but those which are properly saved will be shown.
Picture 3
Picture 4
Picture 5
Picture 6
Picture 7
About app
By clicking on the 3 dots of the top right corner menu bar, the user can choose the option “About app”. This will open the screen shown on picture 9. Here the user is presented with text boxes which can lead to certain websites owned by our company, the applications version and a few images of companies responsible for the creation of this application. The most important is the first one “S4OT Website” which leads the user to our online portal for the online training applications.
Picture 8
Picture 9
Log out
By clicking on the 3 dots of the top right corner menu bar, the user can choose the option “Log out”. This will open the pop-up window shown on picture 10. Here the user is presented with two options. First is “only log out” meaning, the user can log out of the application but not remove saved account credentials. If he does this, upon reentering the app, users account is saved and can easily be accessed. By choosing the second option, the user removes that account from remembered (saved). That means, that if the user wants to enter that account again, he/she will have to enter their log in username and password again. By doing any of these two options, the user, deletes whole local storage and all previously saved data is removed. Also, by doing this, the user is removing current user from chat (executing “logout” from chat).
Picture 10
Users List
This is users list screen, shows all users under this trainer, shown on picture 11. Clicking on one opens a screen for user data of that user. Clicking on the training icon on the right of one user row, opens a screen with training list for only that clicked user. Clicking on the plus icon in the top right corner of the menu bar opens a screen for creation of a new user under this trainer. Also, alongside other menu items, here the user has two more options, where he can use them to sort listed users by name or their last training tine. On the top side of the screen is a search bar, where the trainer can search his/her users by name, containing at least 3 characters, like it is shown on picture 12.
Picture 11
Picture 12
Create new user
Create new user with given data. Pictures 13 and 14 show this screen. Clicking on the button in the top right corner creates a new user with entered data.
Picture 13
Picture 14
User details
This screen shows data of an existing user. Pictures 15 and 16 show this screen. By clicking the garbage can in the top right corner, you can choose to delete this user, shown on picture 17. By clicking on the pen icon, you can edit data of this user, this opens the screen on pictures 19 and 20. which functions the same as the screen on pictures 13 and 14 only with already existing data initially entered. By clicking on one of the users, the trainer is navigated to the screen similar to the starting one but only showing valid and invalid trainings of the selected user, this is show on picture 20.
Picture 15
Picture 16
Picture 17
Picture 18
Picture 19
Picture 20
Plan list
This screen lists all the plans created by this trainer. Picture 21 shows this screen It shows every plan’s name and difficulty, as well as a number of users it has been assigned to. Clicking on one of these items opens a screen for plan details. At the top of the screen is the search bar where the user can search for specified plan by its name.
Picture 21
Picture 22
Picture 23
Picture 24
Plan details
This screen shows all data of the plan created by this trainer. Pictures 22, 23 and 24 show this screen. By clicking on the pen icon in the right top corner you go to another screen where trainer can assign this plan to any of his/her users. At the bottom of the page, there is a list of users that this plan is currently assigned to. It functions the same as the list in the User list shown on picture 11 and 12.
Plan assigning
This screen shows all users under this trainer. Picture 25. Shows this screen. Here with the switch component trainer can assign or unassign chosen plan. By clicking on the calendar button or the date text, trainer can choose the recommended date for that plan for that user.
Picture 25
Exercise details
The plan details screen is shown on pictures 26 and 27. Here the user can see all the data and information of one created exercise for this training plan. Duration/repetitions of this exercise, which consider this specific exercise in this specific round of plan are shown below the video. Here user can see the video of this exercise and prepare himself/herself.
Picture 26
Picture 27
Program list
This screen lists all the programs created by this trainer. Picture 28 shows this screen It shows every program’s name and number of plans in that program, as well as a number of users it has been assigned to. Clicking on one of these items opens a screen for program details. At the top of the screen is the search bar where the user can search for specified program by its name.
Picture 28
Picture 29
Program details
This screen shows all data of the program created by this trainer. Picture 29 show this screen. By clicking on the pen icon in the right top corner you go to another screen where trainer can assign this program to any of his/her users. At the bottom of the page, there is a list of users that this program is currently assigned to. It functions the same as the list in the User list shown on picture 11 and 12.
Program assigning
This screen shows all users under this trainer. Picture 30. Shows this screen. Here with the switch component trainer can assign or unassign chosen program. By clicking on the calendar button or the date text, trainer can choose the starting date for that program for that user.
Picture 30
Chat trainer
Chat opens by clicking on the far-right button in the bottom navigation bar. First screen that is shown is the screen shown on picture 31 and 37. Here are listed all conversation threads for that trainer. Trainer can search this list by clicking on the magnifying glass icon in the top right corner. By clicking on the plus icon, trainer can add new conversation thread. Screen, shown on picture 32 is opened by clicking that plus icon, it lists all users under this trainer as well as fellow trainers. Trainer can choose only one to create a conversation with that one or check multiple people to create a chat group with all chosen. If it is a 1 on 1 thread it creates it immediately, but if it already exists it opens that conversation. If there are more than 1 checked, than it opens a new screen where trainer can enter the name of the group as well as the thumbnail for that chat conversation. Creating it opens the screen on picture 33 which shows the newly created chat conversation. By clicking on the name of the group on the top of the screen, the screen shown on picture 34 will be opened. Here are listed all the participants of that group chat with their roles. By clicking on the plus icon, screen on picture 36 will be opened, where you can add new participants to this conversation. As the owner(trainer) of the group by clicking on one of the participants, trainer can change their roles in this conversation or remove them from the group, this is shown on picture 35. By clicking on the change button, a new screen will be opened where trainer can edit this conversations name or thumbnail. If we go back to the start of the chat, on the screen shown on picture 31 by clicking on any of the listed items, a similar screen to one shown on picture 38 will be shown. Here is the chat conversation thread where participants can exchange messages. Messages can be with text, as well as with image. By clicking on the left plus icon in the chat bottom bar, user can choose to send an image (from device or taken at that moment with camera) or his/her current location. By clicking on the right icon of the chat bottom bar, one sends the message. Sending the location or an image is shown on picture 39. On the starting screens, the user can see missed messages, the ones not seen yet and differentiate them from the ones he/she did.
Picture 31
Picture 32
Picture 33
Picture 34
Picture 35
Picture 36
Picture 37
Picture 38
Picture 39
Chat profile (editing user chat profile)
Chat profile (user chat profile) opens by clicking on the far-left button in the top menu bar. First screen that is shown is the screen shown on picture 40. Here user is presented with his/her user chat profile. Here user can see their status, username, image (avatar), phone number and mail. Three-dot button on the left shows your QR code. The button on the right leads to editing this profile, the screen shown on picture 41. All listed information about yourself you can change in this editing screen by your desire. User saves all edited changes to his/her profile by clicking on the check button on the right.
Picture 40
Picture 41
Log in error
Whenever the user uses wrong credentials for log in, he/she will be navigated to the screen shown on picture 42. Here are explained reasons for this error and a log out button is shown where the user can navigate back to log in screen.
